Claude
90bb977e02
Crepe appends the slash menu to .milkdown and (in this version) doesn't expose a way to portal it to <body>, so it's clipped by the editor's scroll box. That box sat inside the card's p-5 padding, so the menu cut off at the padding edge. Move the padding onto the ProseMirror content instead and drop the redundant inner scroll container, so the menu's clipping bounds become the full card. https://claude.ai/code/session_019DU6V5z6Nr4Vu7b1fBDnq4
78 lines
2.7 KiB
CSS
78 lines
2.7 KiB
CSS
/* Theme Milkdown Crepe to blend into the app's translucent "glass" surfaces.
|
|
* Crepe's frame-dark theme is a grayscale palette driven by --crepe-* custom
|
|
* properties; we override those to white-on-transparent with a blue accent so
|
|
* the editor (and the read-only display, which uses the same engine) sits on
|
|
* top of the existing card instead of painting its own opaque background.
|
|
*
|
|
* The floating menus (slash menu, selection toolbar, link tooltip) are portaled
|
|
* to <body>, OUTSIDE .milkdown — so the variables must be declared on those
|
|
* selectors too, otherwise they fall back to transparent and the menu is
|
|
* unreadable over the content behind it. */
|
|
.llink-crepe .milkdown,
|
|
.milkdown-slash-menu,
|
|
.milkdown-toolbar,
|
|
.milkdown-link-edit,
|
|
.milkdown-link-preview,
|
|
.milkdown-block-handle {
|
|
--crepe-color-background: transparent;
|
|
--crepe-color-on-background: rgb(255 255 255 / 0.92);
|
|
/* Surface backs code blocks, tables, and the floating menus — keep it
|
|
* (near-)opaque so menus read clearly over content. */
|
|
--crepe-color-surface: rgb(24 24 28 / 0.96);
|
|
--crepe-color-surface-low: rgb(42 42 50 / 0.96);
|
|
--crepe-color-on-surface: #ffffff;
|
|
--crepe-color-on-surface-variant: rgb(255 255 255 / 0.65);
|
|
--crepe-color-outline: rgb(255 255 255 / 0.2);
|
|
--crepe-color-primary: #60a5fa;
|
|
--crepe-color-secondary: rgb(96 165 250 / 0.25);
|
|
--crepe-color-on-secondary: #ffffff;
|
|
--crepe-color-inverse: #ffffff;
|
|
--crepe-color-on-inverse: #0b0b0b;
|
|
--crepe-color-inline-code: #fca5a5;
|
|
--crepe-color-inline-area: rgb(255 255 255 / 0.1);
|
|
--crepe-color-error: #f87171;
|
|
--crepe-color-hover: rgb(255 255 255 / 0.08);
|
|
--crepe-color-selected: rgb(96 165 250 / 0.25);
|
|
/* Use the application font, not Crepe's bundled Noto Sans / Noto Serif. */
|
|
--crepe-font-default: inherit;
|
|
--crepe-font-title: inherit;
|
|
--crepe-font-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
"Liberation Mono", monospace;
|
|
}
|
|
|
|
/* Glassy floating menus over content. */
|
|
.milkdown-slash-menu,
|
|
.milkdown-toolbar,
|
|
.milkdown-link-edit,
|
|
.milkdown-link-preview {
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.llink-crepe .milkdown {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.llink-crepe .milkdown .ProseMirror {
|
|
padding: 0;
|
|
outline: none;
|
|
}
|
|
|
|
/* Editing context: fill the compose card and scroll internally so a long
|
|
* message stays inside the card rather than growing the whole overlay. */
|
|
.llink-crepe--fill,
|
|
.llink-crepe--fill .milkdown {
|
|
height: 100%;
|
|
}
|
|
|
|
.llink-crepe--fill .milkdown {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Pad the content (not the card) so the slash menu — which Crepe appends to
|
|
* .milkdown — can use the full card width/height before clipping. */
|
|
.llink-crepe--fill .milkdown .ProseMirror {
|
|
min-height: 100%;
|
|
padding: 1.25rem;
|
|
}
|