From 7af0f575a7a8a484d064c1ab79967854e827c7a7 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 30 May 2026 17:02:44 +0000 Subject: [PATCH] Fix Crepe slash-menu transparency and match the app font MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The floating menus (slash menu, toolbar, link tooltip) portal to , outside .milkdown, so the --crepe-* overrides never reached them and their background fell back to transparent — unreadable over the content. Declare the palette on those selectors too, keep --crepe-color-surface (near-)opaque so the menus read clearly, and add a backdrop blur. Also set --crepe-font-default/title to inherit (and a monospace stack for code) so the editor uses the application font instead of Crepe's bundled Noto faces. https://claude.ai/code/session_019DU6V5z6Nr4Vu7b1fBDnq4 --- .../src/features/compose/markdown-editor.css | 43 +++++++++++++++---- 1 file changed, 34 insertions(+), 9 deletions(-) diff --git a/js/desktop/src/features/compose/markdown-editor.css b/js/desktop/src/features/compose/markdown-editor.css index d7fcefc..4065089 100644 --- a/js/desktop/src/features/compose/markdown-editor.css +++ b/js/desktop/src/features/compose/markdown-editor.css @@ -2,18 +2,27 @@ * 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. */ - -/* Override the palette on `.milkdown` itself — frame-dark defines these vars - * there, so a lower-specificity ancestor selector would be ignored. */ -.llink-crepe .milkdown { + * top of the existing card instead of painting its own opaque background. + * + * The floating menus (slash menu, selection toolbar, link tooltip) are portaled + * to , 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); - --crepe-color-surface: rgb(255 255 255 / 0.06); - --crepe-color-surface-low: rgb(255 255 255 / 0.1); + /* 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.6); - --crepe-color-outline: rgb(255 255 255 / 0.25); + --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; @@ -24,6 +33,22 @@ --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; }