/* App look-alikes. Generated by scripts/build-mocks.mjs from mocks/*.css: edit those, not this. */ /* ───── base ───── */ /* ========================================================================== Homunculus app mocks: shared base chrome ("app-" prefix). Measured from the renderer source, light theme, Tailwind v4 default scale: - App root App.tsx bg-muted, sidebar 208px + 8px handle gap - Sidebar Sidebar.tsx bg-sidebar, border-r, h-10 header with a 72px traffic-light spacer, tree on top, Active Agents / Recent Edits / Bookmarks / Vault Classification below, vault footer - Panes LayoutRenderer rounded-xl, border, bg-card, 4px gap per side - Tab strip TabBar.tsx h-10 tabs, muted strip + 1px bottom line, active tab bg-card rounded-t-lg border-x - Viewer header ViewerHeader.tsx h-10 px-4 gap-2 border-b, ‹ › then crumbs - Card LinkPreviewPopover rounded-md border bg-popover shadow-md - Window windows.ts titleBarStyle: 'hiddenInset' Tokens are the :root oklch neutrals of assets/index.css, as hex. Dark mode: html.dark (the site's theme toggle, same class the app puts on ) swaps every token below for the app's .dark block, so a mock that only uses tokens follows on its own. Dark-only values the app gets from a dark: variant or a .dark rule go under "html.dark .mk- …". Shared tokens (light → dark): --app-bg #fff → #171717 the light-mode white surface. Panes, tabs, viewers and cards are bg-card, so in dark it is the card colour. Use it for anything sitting on a pane or card. --app-background #fff → #0a0a0a the true --background (rarely visible: bg-background inputs, the page itself) --app-card #fff → #171717 --card (pane frame, active tab, header) --app-popover #fff → #171717 --popover (⌘-hover card, menus, dialogs) --app-fg #0a0a0a → #fafafa --foreground --app-primary #171717 → #2e2e2e --primary (buttons, user bubble) --app-primary-fg #fafafa → #fafafa --primary-foreground --app-sidebar #fafafa → #171717 --sidebar --app-muted #f5f5f5 → #262626 --muted (tab strip, kbd, chips) --app-secondary #f5f5f5 → #262626 --secondary --app-accent #f5f5f5 → #404040 --accent (hover:bg-accent rows/buttons) --app-muted-fg #737373 → #a1a1a1 --muted-foreground --app-border #e5e5e5 → white/10% --border / --sidebar-border --app-input #e5e5e5 → white/15% --input (input/checkbox borders) --app-ring #a1a1a1 → #737373 --ring --app-root #f5f5f5 → #141414 data-app-root (bg-muted dark:oklch(.19)) --app-hover foreground/8 hover:bg-foreground/8 --app-selected primary/15 bg-primary/15 (tree selection) --app-muted-fg-70 / --app-muted-fg-60 text-muted-foreground/70 and /60 --app-shadow-sm / --app-shadow-md / --app-shadow-lg Tailwind shadows (the app has no dark variants: same) --app-window-border / --app-window-shadow the mock's outer macOS frame --app-traffic-close / -min / -max macOS traffic-light colours --app-icon-pdf / -image / -audio / -table / -json / -study the *-400 tints TabBar and FileTree give file icons ========================================================================== */ .app-mock { --app-bg: #ffffff; /* --background / --card / --popover */ --app-fg: #0a0a0a; /* --foreground */ --app-primary: #171717; /* --primary */ --app-sidebar: #fafafa; /* --sidebar */ --app-muted: #f5f5f5; /* --muted / --accent / --secondary */ --app-muted-fg: #737373; /* --muted-foreground */ --app-border: #e5e5e5; /* --border / --sidebar-border / --input */ --app-ring: #a1a1a1; /* --ring */ --app-background: #ffffff; /* --background */ --app-card: #ffffff; /* --card */ --app-popover: #ffffff; /* --popover */ --app-primary-fg: #fafafa; /* --primary-foreground */ --app-secondary: #f5f5f5; /* --secondary */ --app-accent: #f5f5f5; /* --accent */ --app-input: #e5e5e5; /* --input */ --app-root: #f5f5f5; /* data-app-root bg-muted */ --app-muted-fg-70: rgba(115, 115, 115, 0.7); --app-muted-fg-60: rgba(115, 115, 115, 0.6); --app-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --app-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --app-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --app-window-border: rgba(0, 0, 0, 0.14); --app-window-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px -8px rgba(0, 0, 0, 0.14), 0 30px 60px -20px rgba(0, 0, 0, 0.22); /* macOS's own traffic lights (hiddenInset keeps the native buttons), as a focused window shows them; the same in light and dark. */ --app-traffic-close: #ff5f57; --app-traffic-min: #febc2e; --app-traffic-max: #28c840; --app-traffic-edge: rgba(0, 0, 0, 0.12); /* TabBar tabIcon / FileTree fileIcon tints (Tailwind v4 *-400, no dark: variant, so the same in both themes). */ --app-icon-pdf: oklch(70.4% 0.191 22.216); /* text-red-400 */ --app-icon-image: oklch(70.7% 0.165 254.624); /* text-blue-400 */ --app-icon-audio: oklch(71.4% 0.203 305.504); /* text-purple-400 */ --app-icon-table: oklch(79.2% 0.209 151.711); /* text-green-400 */ --app-icon-json: oklch(85.2% 0.199 91.936); /* text-yellow-400 */ --app-icon-study: oklch(82.8% 0.189 84.429); /* text-amber-400 */ --app-tab-hover: rgba(0, 0, 0, 0.05); /* hover:bg-black/5 (no dark variant) */ --app-tab-line-inactive: rgba(229, 229, 229, 0.5); /* border at 50% */ --app-hover: rgba(10, 10, 10, 0.08); /* hover:bg-foreground/8 */ --app-selected: rgba(23, 23, 23, 0.15); /* bg-primary/15 (tree selection) */ --app-radius: 7.2px; /* --radius 0.45rem = rounded-lg */ --app-radius-md: 5.2px; /* rounded-md */ --app-radius-xl: 11.2px; /* rounded-xl (pane frame) */ --app-side-w: 260px; /* App.tsx sidebarWidth (default 208, user-resizable 160+); 260 fits the header row unclipped */ --app-h: 560px; /* window height; override per mock */ container-type: inline-size; box-sizing: border-box; position: relative; overflow: hidden; font-family: 'Geist', 'Geist Variable', ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: var(--app-fg); background: var(--app-bg); border: 1px solid var(--app-window-border); border-radius: 12px; box-shadow: var(--app-window-shadow); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; user-select: none; text-align: left; } /* The app's .dark block (assets/index.css), as hex. */ html.dark .app-mock { color-scheme: dark; --app-bg: #171717; --app-background: #0a0a0a; --app-card: #171717; --app-popover: #171717; --app-fg: #fafafa; --app-primary: #2e2e2e; --app-primary-fg: #fafafa; --app-sidebar: #171717; --app-muted: #262626; --app-secondary: #262626; --app-accent: #404040; --app-muted-fg: #a1a1a1; --app-border: rgba(255, 255, 255, 0.1); --app-input: rgba(255, 255, 255, 0.15); --app-ring: #737373; --app-root: #141414; /* dark:bg-[oklch(0.19_0_0)] */ --app-hover: rgba(250, 250, 250, 0.08); --app-selected: rgba(46, 46, 46, 0.15); --app-muted-fg-70: rgba(161, 161, 161, 0.7); --app-muted-fg-60: rgba(161, 161, 161, 0.6); --app-tab-line-inactive: rgba(255, 255, 255, 0.05); /* A dark macOS window: a faint light hairline, and a deeper shadow. */ --app-window-border: rgba(255, 255, 255, 0.12); --app-window-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -8px rgba(0, 0, 0, 0.5), 0 30px 60px -20px rgba(0, 0, 0, 0.7); --app-traffic-edge: rgba(0, 0, 0, 0.2); } .app-mock *, .app-mock *::before, .app-mock *::after { box-sizing: border-box; } .app-mock p { margin: 0; } /* Inline tabler icon: */ .app-mock .i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .app-mock .app-faint { opacity: 0.3; } /* empty-tab square icon */ /* Toolbar icon button: w-6 h-6 rounded, muted, 12px icon by default */ .app-mock .app-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; color: var(--app-muted-fg); } .app-mock .app-btn .i { width: 12px; height: 12px; } .app-mock .app-btn.is-hover { background: var(--app-hover); color: var(--app-fg); } .app-mock .app-btn.is-disabled { opacity: 0.35; } /* ── macOS window ─────────────────────────────────────────────────────────── */ .app-mock .app-window { position: relative; display: flex; height: var(--app-h); background: var(--app-root); /* data-app-root bg-muted */ } /* hiddenInset traffic lights: 12px dots, 20px apart, centred in the 40px header, ending at the 72px spacer. Coloured as in a focused window. */ .app-mock .app-traffic { position: absolute; z-index: 5; top: 14px; left: 20px; display: flex; gap: 8px; pointer-events: none; } .app-mock .app-traffic span { width: 12px; height: 12px; border-radius: 50%; background: var(--app-traffic-close); box-shadow: inset 0 0 0 0.5px var(--app-traffic-edge); } .app-mock .app-traffic span:nth-child(2) { background: var(--app-traffic-min); } .app-mock .app-traffic span:nth-child(3) { background: var(--app-traffic-max); } /* ── Sidebar ──────────────────────────────────────────────────────────────── */ .app-mock .app-sidebar { flex: none; width: var(--app-side-w); height: 100%; display: flex; flex-direction: column; min-width: 0; background: var(--app-sidebar); border-right: 1px solid var(--app-border); } .app-mock .app-side-header { height: 40px; flex: none; display: flex; align-items: center; padding-left: 72px; /* traffic-light spacer */ overflow: hidden; } .app-mock .app-side-header-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; padding-right: 8px; flex: none; } .app-mock .app-side-tree { /* FileTree: flex-1 pl-1 pr-2, inner py-1 */ flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 4px 8px 4px 4px; } .app-mock .app-side-section { /* shrink-0 border-t */ flex: none; border-top: 1px solid var(--app-border); } .app-mock .app-side-head { /* px-3 py-1.5 text-xs muted gap-1.5 */ display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); white-space: nowrap; } .app-mock .app-side-head .i { width: 12px; height: 12px; } .app-mock .app-side-head-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .app-mock .app-side-count { /* tabular-nums text-[10px] muted/70 */ margin-left: auto; font-size: 10px; line-height: 15px; font-variant-numeric: tabular-nums; color: var(--app-muted-fg-70); } .app-mock .app-side-list { padding: 0 8px 4px 4px; } /* pl-1 pr-2 pb-1 */ .app-mock .app-side-empty { padding: 4px 12px; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); } /* Row: py-0.5 gap-1.5 rounded, label text-xs leading-5 (24px tall). Section rows indent pl-3; tree rows indent 8px + depth × 12px. */ .app-mock .app-side-row { --depth: 0; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 8px 2px 12px; border-radius: 4px; color: var(--app-fg); } .app-mock .app-side-tree .app-side-row { padding-left: calc(8px + var(--depth) * 12px); padding-right: 0; } .app-mock .app-side-row .i { width: 14px; height: 14px; color: var(--app-muted-fg); } /* FileTree fileIcon tints (a PDF is IconFile in red; other files muted). */ .app-mock .app-side-row .i:has(> use[href="#ti-photo"]) { color: var(--app-icon-image); } .app-mock .app-side-row .i:has(> use[href="#ti-music"]) { color: var(--app-icon-audio); } .app-mock .app-side-row .i:has(> use[href="#ti-json"]) { color: var(--app-icon-json); } .app-mock .app-side-row .i.is-pdf { color: var(--app-icon-pdf); } .app-mock .app-side-row > span:not(.app-side-chev):not(.app-side-slot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 20px; } .app-mock .app-side-row.is-active { background: var(--app-selected); } .app-mock .app-side-row.is-hover { background: var(--app-accent); } /* hover:bg-accent */ .app-mock .app-side-chev, /* tree chevron, or the empty slot files get */ .app-mock .app-side-slot { flex: none; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--app-muted-fg); } .app-mock .app-side-dot { /* unread agent: w-1.5 h-1.5 bg-foreground */ width: 6px; height: 6px; border-radius: 50%; background: var(--app-fg); } .app-mock .app-side-footer { /* px-2 py-2 border-t gap-1 */ flex: none; display: flex; align-items: center; gap: 4px; padding: 8px; border-top: 1px solid var(--app-border); } .app-mock .app-side-vault { /* px-2 py-1.5 rounded-md text-sm gap-2 */ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--app-radius-md); font-size: 14px; line-height: 20px; color: var(--app-muted-fg); } .app-mock .app-side-vault .i { width: 16px; height: 16px; } .app-mock .app-side-vault span { font-weight: 500; color: var(--app-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-mock .app-side-gear { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--app-radius-md); color: var(--app-muted-fg); } .app-mock .app-side-gear .i { width: 16px; height: 16px; } /* ── Panes ────────────────────────────────────────────────────────────────── */ /* Each pane keeps 4px on every side; beside the sidebar the 8px handle gap replaces its left gap. Between two panes: 8px. */ .app-mock .app-panes { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; gap: 8px; padding: 4px 4px 4px 8px; } .app-mock .app-sidebar[hidden] + .app-panes, .app-mock .app-panes.is-full { padding-left: 4px; } .app-mock .app-col { /* a vertical split: panes stacked, 8px apart */ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .app-mock .app-pane { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius-xl); } /* Tab strip: muted, closed by a 1px line the active tab bleeds through. */ .app-mock .app-tabs { --app-tab-line: var(--app-border); flex: none; display: flex; align-items: flex-end; position: relative; background: linear-gradient(to bottom, var(--app-muted) calc(100% - 1px), var(--app-tab-line) 100%); } .app-mock .app-pane.is-inactive .app-tabs { --app-tab-line: var(--app-tab-line-inactive); } .app-mock .app-tabs-strip { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; overflow: hidden; } .app-mock .app-tab { /* h-10 px-3 gap-1.5 text-xs, 72–180px */ position: relative; flex: 0 1 auto; display: flex; align-items: center; gap: 6px; height: 40px; min-width: 72px; max-width: 180px; padding: 0 12px; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); border: 1px solid transparent; border-top: 0; border-bottom: 0; border-radius: var(--app-radius) var(--app-radius) 0 0; } .app-mock .app-tab:first-child { border-left: 0; } .app-mock .app-tab .i { width: 14px; height: 14px; } /* TabBar tabIcon: these view types carry a tint; the rest take the tab's text colour, and folders text-muted-foreground. Keyed by glyph so every mock's tabs follow without a class of their own. */ .app-mock .app-tab .i:has(> use[href="#ti-file-type-pdf"]) { color: var(--app-icon-pdf); } .app-mock .app-tab .i:has(> use[href="#ti-photo"]) { color: var(--app-icon-image); } .app-mock .app-tab .i:has(> use[href="#ti-music"]) { color: var(--app-icon-audio); } .app-mock .app-tab .i:has(> use[href="#ti-table"]) { color: var(--app-icon-table); } .app-mock .app-tab .i:has(> use[href="#ti-cards"]) { color: var(--app-icon-study); } .app-mock .app-tab .i:has(> use[href="#ti-folder"]), .app-mock .app-tab .i:has(> use[href="#ti-archive"]) { color: var(--app-muted-fg); } .app-mock .app-tab-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-mock .app-tab.is-active { z-index: 1; background: var(--app-card); color: var(--app-fg); border-color: var(--app-border); } /* Close button: hidden. The app shows it on hover; on the site it would only invite a click that does nothing. */ .app-mock .app-tab-close { flex: none; width: 0; height: 20px; overflow: hidden; opacity: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; } .app-mock .app-tab-close .i { width: 14px; height: 14px; } .app-mock .app-tab.is-hover:not(.is-active) { background: var(--app-tab-hover); color: var(--app-fg); } /* Divider between tabs (w-px h-4), hidden beside the active tab. */ .app-mock .app-tab-sep { flex: none; align-self: center; width: 1px; height: 16px; background: var(--app-border); } .app-mock .app-tab.is-active + .app-tab-sep, .app-mock .app-tab-sep:has(+ .app-tab.is-active) { opacity: 0; } .app-mock .app-tabs-actions { /* fixed right buttons: px-2 gap-0.5 */ flex: none; align-self: center; display: flex; align-items: center; gap: 2px; padding: 0 8px; } .app-mock .app-tabs-plus .i { width: 12px; height: 12px; } /* Leftmost-top pane with the sidebar hidden: tabs clear the traffic lights. */ .app-mock .app-tabs.is-inset .app-tabs-strip { padding-left: 72px; } /* ── Viewer ───────────────────────────────────────────────────────────────── */ .app-mock .app-viewer-header { /* h-10 px-4 gap-2 border-b bg-card */ flex: none; position: relative; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--app-border); background: var(--app-card); } .app-mock .app-nav { flex: none; display: flex; align-items: center; margin-left: -8px; } .app-mock .app-nav .app-btn .i { width: 14px; height: 14px; } .app-mock .app-crumbs { /* text-xs muted gap-1.5, chevron size-3.5 */ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); white-space: nowrap; } .app-mock .app-crumb { flex: none; } .app-mock .app-crumb.is-current { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--app-fg); } .app-mock .app-crumb-sep { flex: none; width: 14px; height: 14px; } .app-mock .app-viewer-header-right { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; } .app-mock .app-viewer { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; background: var(--app-card); } /* ── ⌘-hover preview card ─────────────────────────────────────────────────── */ .app-mock .app-card, .app-card.app-mock { display: flex; flex-direction: column; overflow: hidden; background: var(--app-popover); border: 1px solid var(--app-border); border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-md); font-size: 14px; line-height: 20px; } .app-mock .app-card { position: absolute; z-index: 20; width: 440px; max-width: calc(100% - 24px); height: 380px; max-height: calc(100% - 24px); } .app-mock .app-card-head { /* px-3 py-1.5 gap-2 border-b */ flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--app-border); } .app-mock .app-card-head .app-nav { margin-left: -6px; } .app-mock .app-card-name { flex: 1 1 auto; min-width: 0; } .app-mock .app-card-title, .app-mock .app-card-folder { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-mock .app-card-title { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--app-fg); } .app-mock .app-card-folder { font-size: 10px; line-height: 14px; color: var(--app-muted-fg); } .app-mock .app-card-btn { /* IconButton size sm: w-5 h-5, 12px, muted/60 */ flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--app-muted-fg-60); } .app-mock .app-card-btn .i { width: 12px; height: 12px; } .app-mock .app-card-btn.is-on { background: var(--app-muted); color: var(--app-muted-fg); } .app-mock .app-card-body { /* markdown field: px-3 py-2 */ flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 8px 12px; } /* ── Small atoms ──────────────────────────────────────────────────────────── */ .app-mock .app-kbd { /* CommandPalette kbd */ display: inline-block; padding: 2px 4px; border-radius: 4px; background: var(--app-muted); border: 1px solid var(--app-border); box-shadow: 0 1px 0 var(--app-border); color: var(--app-muted-fg); font-family: inherit; font-size: 10px; line-height: 1.2; white-space: nowrap; } .app-mock .app-link { /* theme.ts .cm-md-link-exists */ font-weight: 600; color: var(--app-fg); text-decoration: underline dotted var(--app-muted-fg); text-underline-offset: 3px; } .app-mock .app-spin { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .app-mock .app-spin { animation: app-spin 1s linear infinite; } } @keyframes app-spin { to { transform: rotate(360deg); } } /* ── Container rules ──────────────────────────────────────────────────────── */ @container (max-width: 759.98px) { .app-mock .app-sidebar { display: none; } .app-mock .app-panes { padding-left: 4px; } /* The first pane's tab strip now sits under the traffic lights. */ .app-mock .app-panes > .app-pane:first-child .app-tabs-strip, .app-mock .app-panes > .app-col:first-child > .app-pane:first-child .app-tabs-strip { padding-left: 72px; } } @container (max-width: 559.98px) { /* One pane is all a phone-width window shows. */ .app-mock .app-panes > :not(:first-child) { display: none; } /* A floating card spans the window, whatever offsets the mock gave it. */ .app-mock .app-card { left: 12px !important; right: 12px !important; width: auto; } } @container (max-width: 419.98px) { .app-mock .app-tab { padding: 0 8px; min-width: 56px; } .app-mock .app-tabs-actions { padding: 0 4px; } .app-mock .app-viewer-header { padding: 0 10px; gap: 6px; } .app-mock .app-nav { margin-left: -4px; } .app-mock .app-card-head { padding: 6px 8px; } .app-mock .app-card-body { padding: 6px 8px; } } /* ───── hero ───── */ /* ========================================================================== Hero mock: the whole window. Chat page (pages/Chat.tsx) on the left, MarkdownViewer on the right, a ⌘-hover card (LinkPreviewPopover) on top. Editor text is theme.ts: 13px Geist, line-height 1.7 (22.1px a line). ========================================================================== */ .app-mock.mk-hero { --app-h: 640px; } /* Header toggles: p-1 rounded, 14px icon (useObjectGraph / MarkdownViewer). */ .mk-hero .mk-hero-hbtns { display: flex; align-items: center; gap: 2px; } /* gap-0.5; Search sits after it at gap-1 */ .mk-hero .mk-hero-hbtn { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 4px; color: var(--app-muted-fg); } .mk-hero .mk-hero-hbtn .i { width: 14px; height: 14px; } .mk-hero .mk-hero-hbtn.is-on { background: var(--app-muted); color: var(--app-fg); } /* Editor text, shared by messages, the note and the card body. */ .mk-hero .mk-hero-bubble, .mk-hero .mk-hero-reply, .mk-hero .mk-hero-editor, .mk-hero .app-card-body.mk-hero-card-body { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; } .mk-hero .mk-hero-line { min-height: 22.1px; } .mk-hero .mk-hero-h2 { font-size: 1.5em; font-weight: 700; line-height: 1.3; } .mk-hero .mk-hero-li { padding-left: 14px; text-indent: -14px; } .mk-hero .mk-hero-bullet { /* .cm-md-bullet-circle, plus the space after it */ display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(115, 115, 115, 0.4); vertical-align: middle; position: relative; top: -1px; margin-left: 4px; margin-right: 6px; text-indent: 0; } /* ── Chat page ────────────────────────────────────────────────────────────── */ .mk-hero .mk-hero-chat { display: flex; flex-direction: column; } .mk-hero .mk-hero-transcript { /* pt-4 pb-[48px], column centred */ flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 16px 0 48px; } .mk-hero .mk-hero-col { /* max-w-48rem, px = 1rem + --md-gutter */ width: 100%; max-width: 48rem; padding: 0 40px; display: flex; flex-direction: column; gap: 16px; } .mk-hero .mk-hero-msg { display: flex; flex-direction: column; } .mk-hero .mk-hero-msg-user { display: flex; justify-content: flex-end; } .mk-hero .mk-hero-bubble { /* max-w-80% rounded-xl px-4 py-2.5 bg-primary */ max-width: 80%; padding: 10px 16px; border-radius: var(--app-radius-xl); background: var(--app-primary); color: var(--app-primary-fg); } .mk-hero .mk-hero-reply { width: 100%; color: var(--app-fg); } /* MessageActions: always 20px tall + mt-3, faded out until hover. */ .mk-hero .mk-hero-actions { display: flex; align-items: center; gap: 2px; height: 20px; margin-top: 12px; opacity: 0; } .mk-hero .mk-hero-actions-right { justify-content: flex-end; } .mk-hero .mk-hero-act { /* IconButton sm: w-5 h-5, 12px, muted/60 */ flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--app-muted-fg-60); } .mk-hero .mk-hero-act .i { width: 12px; height: 12px; } .mk-hero .mk-hero-act.is-disabled { opacity: 0.4; } .mk-hero .mk-hero-rowtext { /* ROW_TEXT: time and price */ padding: 2px 4px; border-radius: 4px; white-space: nowrap; font-size: 11px; line-height: 16px; color: var(--app-muted-fg-60); } /* Tool group / working row: -ml-2 text-xs font-mono muted, button px-2 py-1. */ .mk-hero .mk-hero-tool { margin-left: -8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Geist Mono', monospace; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); } .mk-hero .mk-hero-tool-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border-radius: 4px; } .mk-hero .mk-hero-tool-btn .i { width: 12px; height: 12px; } .mk-hero .mk-hero-tool-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-hero .mk-hero-check { color: oklch(72.3% 0.219 149.579); } /* ToolCallGroup: IconCheck text-green-500 (Tailwind v4, ~#00c950, not v3's #22c55e), light and dark */ /* Hook for the site's typing script (it adds .done when the reply is in). Never painted: the Chat page draws no caret in a streaming reply; the Thinking… row and the Stop button are what show the run is live. */ .mk-hero .caret { display: inline-block; width: 0; background: none; } .mk-hero .caret.done { display: none; } /* Composer zone: pt-2 pb-4, eased fade over the transcript's last 48px. */ .mk-hero .mk-hero-compose { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 0 16px; } .mk-hero .mk-hero-compose .mk-hero-col { gap: 0; } .mk-hero .mk-hero-fade { position: absolute; bottom: 100%; left: 0; right: 0; height: 48px; pointer-events: none; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.66) 40%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0)); } .mk-hero .mk-hero-box { /* rounded-2xl border bg-card */ border: 1px solid var(--app-border); border-radius: calc(var(--app-radius) * 1.8); /* --radius-2xl */ background: var(--app-card); } .mk-hero .mk-hero-box-row { /* flex items-end gap-2 pl-3.5 pr-3 py-2.5 */ display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 10px 14px; } .mk-hero .mk-hero-input { flex: 1 1 auto; min-width: 0; align-self: center; font-size: 13px; line-height: 22px; color: var(--app-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-hero .mk-hero-ib { /* IconButton md: w-6 h-6 rounded-md, 14px */ flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--app-radius-md); color: var(--app-muted-fg-60); } .mk-hero .mk-hero-ib .i { width: 14px; height: 14px; } .mk-hero .mk-hero-ib.is-disabled { opacity: 0.4; } .mk-hero .mk-hero-send { display: none; } .mk-hero .mk-hero-foot { /* flex items-center gap-1 pt-2 px-0.5 */ display: flex; align-items: center; gap: 4px; padding: 8px 2px 0; } .mk-hero .mk-hero-foot-right { margin-left: auto; display: flex; align-items: center; gap: 2px; } .mk-hero .mk-hero-asst { /* h-6 px-1.5 rounded-md text-xs muted */ display: inline-flex; align-items: center; height: 24px; padding: 0 6px; border-radius: var(--app-radius-md); font-size: 12px; line-height: 16px; color: var(--app-muted-fg); white-space: nowrap; } .mk-hero .mk-hero-ring { /* ContextRing: 14px ring, r 7 of 18, stroke 2 */ flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .mk-hero .mk-hero-ring svg { width: 14px; height: 14px; transform: rotate(-90deg); color: var(--app-muted-fg); } /* Once the reply is in: the run ends. The working row goes, Stop turns back into a disabled Send, the reply's row shows its time and cost (as on hover), and the sidebar's spinner becomes the unread dot (the note pane has focus). */ .mk-hero .mk-hero-agent .mk-hero-agent-dot { display: none; } .mk-hero:has(.caret.done) .mk-hero-working, .mk-hero:has(.caret.done) .mk-hero-stop, .mk-hero:has(.caret.done) .mk-hero-agent-spin { display: none; } .mk-hero:has(.caret.done) .mk-hero-send { display: inline-flex; } .mk-hero:has(.caret.done) .mk-hero-agent .mk-hero-agent-dot { display: block; } .mk-hero:has(.caret.done) .mk-hero-reply-actions { opacity: 1; } /* ── Markdown viewer ──────────────────────────────────────────────────────── */ .mk-hero .mk-hero-doc { /* DocumentWrapper: px-4 pt-12 pb-16 gap-6 */ max-width: 48rem; margin: 0 auto; padding: 48px 16px 64px; display: flex; flex-direction: column; gap: 24px; } .mk-hero .mk-hero-block, .mk-hero .mk-hero-editor { padding: 0 24px; } /* --md-gutter */ .mk-hero .mk-hero-title { /* text-2xl font-bold */ margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--app-fg); overflow-wrap: anywhere; } .mk-hero .mk-hero-props { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; } .mk-hero .mk-hero-pill { /* pl-2.5 pr-1 py-1 rounded-md bg-muted text-xs */ display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; padding: 4px 4px 4px 10px; border-radius: var(--app-radius-md); background: var(--app-muted); font-size: 12px; line-height: 16px; } .mk-hero .mk-hero-pill-key { flex: none; font-weight: 500; color: var(--app-muted-fg); } .mk-hero .mk-hero-pill-val { min-width: 0; padding-right: 6px; color: var(--app-fg); overflow-wrap: anywhere; } .mk-hero .mk-hero-pill-add { /* w-6 h-6 rounded-md bg-muted "+" */ flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--app-radius-md); background: var(--app-muted); color: var(--app-muted-fg); font-size: 14px; line-height: 1; } /* ReferencePanel: Backlinks, Unlinked mentions, Graphics, all collapsed (ReferenceSection: border-t py-2.5, button gap-1.5 text-xs muted). */ .mk-hero .mk-hero-ref { border-top: 1px solid var(--app-border); padding: 10px 0; } .mk-hero .mk-hero-ref-btn { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); white-space: nowrap; } .mk-hero .mk-hero-ref-btn .i { flex: none; width: 14px; height: 14px; } .mk-hero .mk-hero-ref-title { font-weight: 500; } /* Editable embed while its editor has focus: an outline and the "Editing in x.md" row hung under it (index.css .cm-transclusion-*). */ .mk-hero .mk-hero-embed { outline: 1px solid var(--app-border); border-radius: 4px; background: var(--app-background); } .mk-hero .mk-hero-embed-label-anchor { position: relative; height: 0; } .mk-hero .mk-hero-embed-label { position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin-top: 2px; padding: 1px 6px; font-size: 10px; line-height: 1.6; color: var(--app-muted-fg); background: var(--app-muted); border-top: 1px solid var(--app-border); border-radius: 0 0 4px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-hero .mk-hero-cursor { /* .cm-cursor */ display: inline-block; width: 0; height: 1.2em; margin-left: 1px; vertical-align: -0.25em; border-left: 1.2px solid var(--app-fg); text-indent: 0; } /* ── ⌘-hover card ─────────────────────────────────────────────────────────── */ /* markdown-field default 440x380 (link-preview-size.ts), cut to what fits below. The hovered link is in the reply's first sentence, so even with an extra wrapped line it ends well above top: 300px. */ .mk-hero .app-card.mk-hero-card { top: 300px; left: min(calc(var(--app-side-w) + 232px), calc(100% - 452px)); width: 440px; height: min(380px, calc(100% - 312px)); } .mk-hero .app-card-body.mk-hero-card-body { padding: 8px 12px; } /* ── Motion ───────────────────────────────────────────────────────────────── */ .mk-hero .mk-hero-hovered { opacity: 0.6; } /* .cm-md-link-exists:hover */ @media (prefers-reduced-motion: no-preference) { .mk-hero .mk-hero-cursor { animation: mk-hero-blink 1.2s steps(1, end) infinite; } .mk-hero .app-card.mk-hero-card { animation: mk-hero-card-in 180ms ease-out 3.6s both; } .mk-hero .mk-hero-hovered { animation: mk-hero-hover 120ms linear 3.45s both; } .mk-hero .mk-hero-actions { transition: opacity 150ms; } } @keyframes mk-hero-blink { 50% { opacity: 0; } } @keyframes mk-hero-card-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes mk-hero-hover { from { opacity: 1; } to { opacity: 0.6; } } /* ── Container rules ──────────────────────────────────────────────────────── */ @container (max-width: 959.98px) { .mk-hero .mk-hero-pane-note { display: none; } } @container (max-width: 759.98px) { /* Sidebar hidden by base. */ .mk-hero .app-card.mk-hero-card { left: min(220px, calc(100% - 452px)); } } @container (max-width: 619.98px) { .mk-hero .app-window { --app-h: 560px; } /* the root can't query itself */ .mk-hero .app-card.mk-hero-card { display: none; } /* A chat taller than its pane sits pinned to the bottom. */ .mk-hero .mk-hero-transcript { justify-content: flex-end; } .mk-hero .mk-hero-col { padding: 0 24px; } } @container (max-width: 419.98px) { .mk-hero .mk-hero-col { padding: 0 16px; } .mk-hero .mk-hero-bubble { max-width: 88%; } } /* ── Dark (html.dark, the app's .dark block) ──────────────────────────────── */ /* .cm-md-bullet-circle: muted-foreground/40, so it follows the dark muted fg. */ html.dark .mk-hero .mk-hero-bullet { background: rgba(161, 161, 161, 0.4); } /* The composer fade is drawn from var(--card): #171717 in dark. */ html.dark .mk-hero .mk-hero-fade { background: linear-gradient(to top, var(--app-card), color-mix(in srgb, var(--app-card) 66%, transparent) 40%, color-mix(in srgb, var(--app-card) 30%, transparent) 72%, transparent); } /* ───── note ───── */ /* ========================================================================== "note" mock: one pane, MarkdownViewer on Nephrolithiasis. Measured from the renderer source (light theme): - DocumentWrapper mx-auto max-w 48rem px-4 pt-12 pb-16 flex-col gap-6 - MarkdownBlock padding-inline var(--md-gutter) = 24px - Title h1 text-2xl font-bold (filename, above the properties) - FrontmatterPanel flex-wrap gap-2; pill pl-2.5 pr-1 py-1 rounded-md bg-muted text-xs gap-1.5, key muted font-medium; "+" w-6 h-6 rounded-md bg-muted - Editor theme.ts 13px / 1.7; h2 1.5em, h3 1.25em bold lh 1.3; bullet 4px circle at 40% muted; open token = 600 muted; block-id pill 0.65em rounded-full; fold caret 14px box, 10px triangle, muted at 50%, right when folded - Embed editable embed has no chrome at rest (its open button and the line's drag handle only show on hover) - ViewerHeader right Note / Object tree toggles (p-1, 14px icon, active bg-accent) then Search ========================================================================== */ .app-mock.mk-note { --app-h: 640px; } /* Header toggles: p-1 rounded, 14px icon */ .mk-note .mk-note-view { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: var(--app-muted-fg); } .mk-note .mk-note-view .i { width: 14px; height: 14px; } .mk-note .mk-note-view.is-on { background: var(--app-accent); color: var(--app-fg); } .mk-note .mk-note-view + .mk-note-view { margin-left: -2px; } /* gap-0.5 inside the right group's gap-1 */ /* ── Document column ───────────────────────────────────────────────────── */ .mk-note .mk-note-doc { max-width: 768px; margin: 0 auto; padding: 48px 16px 64px; display: flex; flex-direction: column; gap: 24px; } .mk-note .mk-note-block { padding: 0 24px; } .mk-note .mk-note-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--app-fg); overflow-wrap: anywhere; } /* ── Properties ────────────────────────────────────────────────────────── */ .mk-note .mk-note-props { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; } .mk-note .mk-note-pill { display: flex; align-items: flex-start; /* WikilinkValue pills: items-start */ gap: 6px; max-width: 100%; padding: 4px 10px 4px 10px; /* pr-1 plus the gap before the hidden w-0 delete button */ border-radius: var(--app-radius-md); background: var(--app-muted); font-size: 12px; line-height: 16px; color: var(--app-fg); overflow-wrap: anywhere; } /* String values render through a MarkdownField: items-center, leading-tight */ .mk-note .mk-note-pill.is-cm { align-items: center; line-height: 15px; } .mk-note .mk-note-key { flex: none; font-weight: 500; color: var(--app-muted-fg); } .mk-note .mk-note-add { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--app-radius-md); background: var(--app-muted); color: var(--app-muted-fg); font-size: 16px; /* no text size set: inherits the 16px root */ line-height: 1; } /* ── Editor body (CodeMirror, theme.ts) ────────────────────────────────── */ .mk-note .mk-note-cm { padding: 0 24px; font-size: 13px; line-height: 1.7; color: var(--app-fg); white-space: normal; overflow-wrap: break-word; } .mk-note .mk-note-line { min-height: 1.7em; } .mk-note .mk-note-li { padding-left: 13px; text-indent: -13px; } /* hanging indent under the bullet */ .mk-note .mk-note-h2 { font-size: 1.5em; font-weight: 700; line-height: 1.3; } .mk-note .mk-note-h3 { font-size: 1.25em; font-weight: 700; line-height: 1.3; } .mk-note .mk-note-bullet { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--app-muted-fg) 40%, transparent); vertical-align: middle; position: relative; top: -1px; margin-left: 4px; margin-right: 2px; text-indent: 0; } /* Token under the cursor: raw markdown in the flat editing gray. */ .mk-note .mk-note-raw { font-weight: 600; color: var(--app-muted-fg); } .mk-note .mk-note-caret { display: inline-block; width: 0; height: 1.3em; margin-right: -1.2px; border-left: 1.2px solid var(--app-fg); vertical-align: -0.28em; } @media (prefers-reduced-motion: no-preference) { .mk-note .mk-note-caret { animation: mk-note-blink 1.2s steps(1) infinite; } } @keyframes mk-note-blink { 50% { opacity: 0; } } /* Block-id pill: backlink count */ .mk-note .mk-note-pill-id { display: inline-block; padding: 0 4px; margin-left: 4px; font-size: 0.65em; line-height: 1.6; border-radius: 9999px; background: var(--app-muted); color: var(--app-muted-fg); vertical-align: middle; white-space: nowrap; text-indent: 0; } /* Fold caret: 14px box, 10px right-pointing triangle (open rotates it down). */ .mk-note .mk-note-fold { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 6px; vertical-align: middle; color: var(--app-muted-fg); opacity: 0.5; } .mk-note .mk-note-fold::before { content: ''; width: 10px; height: 10px; background: currentColor; clip-path: polygon(25% 15%, 80% 50%, 25% 85%); transform: rotate(90deg); } .mk-note .mk-note-fold.is-folded::before { transform: none; } /* Editable embed: no chrome at rest, it reads as part of the note. */ .mk-note .mk-note-embed { display: block; width: 100%; } /* ── Container rules ───────────────────────────────────────────────────── */ @container (max-width: 559.98px) { .mk-note .mk-note-tab-extra { display: none; } .mk-note .app-window { height: 600px; } } @container (max-width: 419.98px) { /* Narrow window: the breadcrumb drops the vault root. */ .mk-note .mk-note-crumb-root { display: none; } } /* ───── tools ───── */ /* ========================================================================== "tools" mock: one pane with the chat Kidney stones, tool group expanded. Measured from: - pages/Chat.tsx transcript pt-4 pb-[48px]; column max-w 48rem, px = 1rem + --md-gutter (24px) = 40px, gap-4; user bubble max-w-80% rounded-xl px-4 py-2.5 bg-primary; composer pt-2 pb-4 + 48px fade; formatToolCall() labels (find_similar and str_replace have no case: the raw tool name) - ToolCallGroup.tsx text-xs font-mono muted, -ml-2; rows px-2 py-1 gap-1.5, 12px status icon; list mt-0.5 ml-[13px] pl-1 border-l; detail ml-[18px] mr-2 mb-1 gap-1.5, pre rounded bg-muted/60 px-2 py-1.5 - MessageActions.tsx h-5 mt-3 row, opacity-0 until hover (space kept) - ChatInput.tsx toolbarBelow: rounded-2xl border box, pl-3.5 pr-3 py-2.5 gap-2, Send IconButton; footer pt-2 px-0.5 gap-1: Search, Attach, Voice input, assistant button (h-6 px-1.5 rounded-md text-xs), ring - editor/theme.ts 13px / 1.7, links 600 + dotted underline, bullet circle 4px at 40% muted Colours as in the app: the "done" check is green-500 (Tailwind v4 oklch(72.3% 0.219 149.579), ~#00c950) in both themes (StatusIcon has no dark: variant); everything else is neutral. Dark: tokens follow html.dark; the bubble's link colours are the cm-message--on-dark ones in both themes (the bubble is always dark). ========================================================================== */ .mk-tools { --app-h: 720px; --mk-tools-gutter: 40px; --mk-tools-line: 22.1px; /* 13px × 1.7 */ max-width: 640px; } /* Object graph toggle (useObjectGraph): p-1 rounded, 14px icon, muted. */ .mk-tools .mk-tools-graph { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 3.2px; color: var(--app-muted-fg); } .mk-tools .mk-tools-graph .i { width: 14px; height: 14px; } /* ── Layout ───────────────────────────────────────────────────────────────── */ .mk-tools .mk-tools-chat { display: flex; flex-direction: column; } .mk-tools .mk-tools-transcript { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 16px 0 48px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; /* pinned to the bottom: overflow clips the top */ } .mk-tools .mk-tools-col { width: 100%; max-width: 48rem; padding: 0 var(--mk-tools-gutter); display: flex; flex-direction: column; gap: 16px; } .mk-tools .mk-tools-composer .mk-tools-col { gap: 0; } /* ── Messages ─────────────────────────────────────────────────────────────── */ .mk-tools .mk-tools-msg { display: flex; flex-direction: column; } .mk-tools .mk-tools-line { font-size: 13px; line-height: var(--mk-tools-line); overflow-wrap: break-word; } .mk-tools .mk-tools-blank { height: var(--mk-tools-line); } .mk-tools .mk-tools-line b { font-weight: 600; } .mk-tools .mk-tools-user { display: flex; justify-content: flex-end; } .mk-tools .mk-tools-bubble { max-width: 80%; min-width: 0; padding: 10px 16px; border-radius: var(--app-radius-xl); background: var(--app-primary); color: var(--app-primary-fg); } .mk-tools .mk-tools-reply { width: 100%; min-width: 0; color: var(--app-fg); } /* Reserved hover row (h-5 mt-3), invisible at rest. */ .mk-tools .mk-tools-actions { height: 20px; margin-top: 12px; } /* [[links]]: .cm-md-link-exists; on the dark bubble, cm-message--on-dark. */ .mk-tools .mk-tools-link { font-weight: 600; color: var(--app-fg); text-decoration: underline dotted var(--app-muted-fg); text-underline-offset: 3px; } .mk-tools .mk-tools-bubble .mk-tools-link { color: #e3e3e3; text-decoration-color: #b4b4b4; } /* Bullet: hidden "- " drawn as a 4px circle (margin-left 4px, gap 2px), wrapped lines hang at the text column. */ .mk-tools .mk-tools-li { position: relative; padding-left: 10px; } .mk-tools .mk-tools-dot { position: absolute; left: 4px; top: calc(var(--mk-tools-line) / 2 - 2px); width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--app-muted-fg) 40%, transparent); } /* ── Tool group ───────────────────────────────────────────────────────────── */ .mk-tools .mk-tools-group { margin-left: -8px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); } .mk-tools .mk-tools-group .i { width: 12px; height: 12px; } .mk-tools .mk-tools-summary, .mk-tools .mk-tools-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 3.2px; min-width: 0; } .mk-tools .mk-tools-summary { width: fit-content; max-width: 100%; } .mk-tools .mk-tools-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* StatusIcon done: IconCheck text-green-500, the same in both themes. Tailwind v4's green-500 (the app is on v4), not v3's #22c55e. */ .mk-tools .mk-tools-ok { color: oklch(72.3% 0.219 149.579); } .mk-tools .mk-tools-chev.is-open { transform: rotate(90deg); } .mk-tools .mk-tools-rows { margin: 2px 0 0 13px; padding-left: 4px; border-left: 1px solid var(--app-border); display: flex; flex-direction: column; } .mk-tools .mk-tools-detail { margin: 0 8px 4px 18px; display: flex; flex-direction: column; gap: 6px; } .mk-tools .mk-tools-pre { margin: 0; max-height: 256px; overflow: hidden; padding: 6px 8px; border-radius: 3.2px; background: color-mix(in srgb, var(--app-muted) 60%, transparent); font: inherit; white-space: pre-wrap; overflow-wrap: break-word; } .mk-tools .mk-tools-pre.is-input { max-height: 192px; } /* max-h-48 */ /* ── Composer ─────────────────────────────────────────────────────────────── */ .mk-tools .mk-tools-composer { position: relative; flex: none; padding: 8px 0 16px; display: flex; flex-direction: column; align-items: center; } .mk-tools .mk-tools-fade { position: absolute; left: 0; right: 0; bottom: 100%; height: 48px; pointer-events: none; background: linear-gradient(to top, var(--app-card), color-mix(in srgb, var(--app-card) 66%, transparent) 40%, color-mix(in srgb, var(--app-card) 30%, transparent) 72%, transparent); } .mk-tools .mk-tools-box { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 10px 14px; border: 1px solid var(--app-border); border-radius: 12.96px; /* rounded-2xl: --radius-2xl = --radius × 1.8 (index.css @theme) */ background: var(--app-card); /* ChatInput: bg-card */ } .mk-tools .mk-tools-input { flex: 1 1 auto; min-width: 0; align-self: center; font-size: 13px; line-height: var(--mk-tools-line); color: var(--app-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* IconButton md: w-6 h-6 rounded-md, 14px glyph, muted/60. */ .mk-tools .mk-tools-ib { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--app-radius-md); color: var(--app-muted-fg-60); } .mk-tools .mk-tools-ib .i { width: 14px; height: 14px; } .mk-tools .mk-tools-ib.is-disabled { opacity: 0.4; } .mk-tools .mk-tools-footer { display: flex; align-items: center; gap: 4px; padding: 8px 2px 0; } .mk-tools .mk-tools-footer-right { margin-left: auto; display: flex; align-items: center; gap: 2px; min-width: 0; } .mk-tools .mk-tools-assistant { height: 24px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--app-radius-md); font-size: 12px; line-height: 16px; color: var(--app-muted-fg); white-space: nowrap; } /* ContextRing: 24px slot, 14px SVG (viewBox 18, r 7, stroke 2), track at 25%, used arc with round caps, rotated −90° so it starts at 12 o'clock. */ .mk-tools .mk-tools-ring { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--app-muted-fg); } .mk-tools .mk-tools-ring-svg { width: 14px; height: 14px; transform: rotate(-90deg); } /* ── Narrow windows ───────────────────────────────────────────────────────── */ @container (max-width: 519.98px) { /* The gutter stays 40px as on the Mac; collapse by hiding instead. */ .mk-tools .mk-tools-root, .mk-tools .app-tab:not(.is-active), .mk-tools .app-tab-sep { display: none; } } @container (max-width: 439.98px) { /* Keep the reply in view: the find_similar row shows closed. */ .mk-tools .mk-tools-detail { display: none; } } /* ───── palette ───── */ /* ========================================================================== mk-palette: the ⌘K palette (GlobalPalette.tsx) over a dimmed window. - Scrim fixed inset-0 bg-black/40 py-20, card max-w-[580px] mx-4 rounded-2xl (--radius × 1.8) border bg-card shadow-2xl - Composer ChatInput toolbarBelow + flush: editor row pl-3.5 pr-3 py-2.5, 13px editor text, Send IconButton; footer px-3 pt-2 pb-2 gap-1 (Search toggled, Attach, Voice input, assistant name ml-auto) - Results border-t, CommandPalette compact: sticky section header text-[10px] semibold uppercase tracking-wider bg-muted border-b px-2.5 py-0.5; rows gap-2 px-2.5 py-1, w-5 h-5 rounded-md icon box (11px glyph, stroke 1.75), label text-xs; nothing selected at rest The scrim sits under the native traffic lights (they are not web content). ========================================================================== */ .mk-palette { --app-h: 480px; } /* Background note: the note mock's structure, simplified (DocumentWrapper pt-12 px-4, 24px gutter, title text-2xl bold, CodeMirror 13px / 1.7 lines with no margins; blank lines separate blocks). */ .mk-palette .mk-palette-view { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: var(--app-muted-fg); } .mk-palette .mk-palette-view .i { width: 14px; height: 14px; } .mk-palette .mk-palette-view.is-on { background: var(--app-accent); color: var(--app-fg); } .mk-palette .mk-palette-view + .mk-palette-view { margin-left: -2px; } .mk-palette .mk-palette-doc { max-width: 768px; margin: 0 auto; padding: 48px 16px 64px; display: flex; flex-direction: column; gap: 24px; } .mk-palette .mk-palette-title { padding: 0 24px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--app-fg); overflow-wrap: anywhere; } .mk-palette .mk-palette-cm { padding: 0 24px; font-size: 13px; line-height: 1.7; color: var(--app-fg); overflow-wrap: break-word; } .mk-palette .mk-palette-line { min-height: 1.7em; } .mk-palette .mk-palette-li { padding-left: 13px; text-indent: -13px; } .mk-palette .mk-palette-h2 { font-size: 1.5em; font-weight: 700; line-height: 1.3; } .mk-palette .mk-palette-bullet { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(115, 115, 115, 0.4); vertical-align: middle; position: relative; top: -1px; margin-left: 4px; margin-right: 2px; text-indent: 0; } /* .cm-md-bullet-circle: muted-foreground at 40%, so it follows the dark token. */ html.dark .mk-palette .mk-palette-bullet { background: rgba(161, 161, 161, 0.4); } /* ── Scrim + card ─────────────────────────────────────────────────────────── */ .mk-palette .mk-palette-scrim { position: absolute; inset: 0; z-index: 4; /* under .app-traffic (z 5) */ display: flex; justify-content: center; align-items: flex-start; padding: 80px 0; background: rgba(0, 0, 0, 0.4); } .mk-palette .mk-palette-card { width: 100%; max-width: 580px; margin: 0 16px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--app-card); border: 1px solid var(--app-border); border-radius: 12.96px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* ── Composer ─────────────────────────────────────────────────────────────── */ .mk-palette .mk-palette-box { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 10px 14px; } .mk-palette .mk-palette-editor { flex: 1 1 auto; min-width: 0; align-self: center; display: flex; align-items: center; font-size: 13px; line-height: 1.7; color: var(--app-fg); white-space: nowrap; overflow: hidden; } .mk-palette .mk-palette-caret { flex: none; width: 1.2px; height: 15px; margin-left: 1px; background: var(--app-fg); } @media (prefers-reduced-motion: no-preference) { .mk-palette .mk-palette-caret { animation: mk-palette-blink 1.2s steps(1, end) infinite; } } @keyframes mk-palette-blink { 50% { opacity: 0; } } /* IconButton size md: w-6 h-6 rounded-md, muted/60, 14px glyph. */ .mk-palette .mk-palette-ibtn { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--app-radius-md); color: var(--app-muted-fg-60); } .mk-palette .mk-palette-ibtn .i { width: 14px; height: 14px; } .mk-palette .mk-palette-ibtn.is-on { background: var(--app-accent); color: var(--app-muted-fg); } .mk-palette .mk-palette-footer { display: flex; align-items: center; gap: 4px; padding: 8px 12px; } .mk-palette .mk-palette-assistant { margin-left: auto; flex: none; height: 24px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: var(--app-radius-md); font-size: 12px; line-height: 16px; color: var(--app-muted-fg); } /* ── Results (CommandPalette compact) ─────────────────────────────────────── */ .mk-palette .mk-palette-results { min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--app-border); overflow: hidden; } .mk-palette .mk-palette-head { flex: none; display: flex; align-items: center; justify-content: space-between; background: var(--app-muted); border-bottom: 1px solid var(--app-border); font-size: 10px; line-height: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-muted-fg); white-space: nowrap; } .mk-palette .mk-palette-head > span { padding: 2px 10px; } .mk-palette .mk-palette-head .mk-palette-showall { text-transform: none; } .mk-palette .mk-palette-row { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px; } .mk-palette .mk-palette-ico { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--app-border); border-radius: var(--app-radius-md); background: var(--app-muted); color: var(--app-muted-fg); } .mk-palette .mk-palette-ico .i { width: 11px; height: 11px; stroke-width: 1.75; } .mk-palette .mk-palette-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--app-fg); } /* PDF rows (the page thumbnail is the rendered PDF, white in dark mode too): page 1 rendered to fit 56px, object-cover in the 20px box, so a portrait page shows its vertical middle: evenly spaced body lines. */ .mk-palette .mk-palette-ico.is-thumb { overflow: hidden; align-items: stretch; justify-content: stretch; } .mk-palette .mk-palette-page { flex: 1 1 auto; background: linear-gradient(#a3a3a3, #a3a3a3) 3px 3px / 12px 1px no-repeat, linear-gradient(#a3a3a3, #a3a3a3) 3px 6px / 11px 1px no-repeat, linear-gradient(#a3a3a3, #a3a3a3) 3px 9px / 12px 1px no-repeat, linear-gradient(#a3a3a3, #a3a3a3) 3px 12px / 12px 1px no-repeat, linear-gradient(#a3a3a3, #a3a3a3) 3px 15px / 9px 1px no-repeat, #ffffff; } .mk-palette .mk-palette-page.is-alt { background: linear-gradient(#a3a3a3, #a3a3a3) 3px 3px / 10px 1px no-repeat, linear-gradient(#a3a3a3, #a3a3a3) 3px 6px / 12px 1px no-repeat, linear-gradient(#a3a3a3, #a3a3a3) 3px 9px / 7px 1px no-repeat, linear-gradient(#a3a3a3, #a3a3a3) 3px 12px / 12px 1px no-repeat, linear-gradient(#a3a3a3, #a3a3a3) 3px 15px / 11px 1px no-repeat, #ffffff; } /* ── Container rules ──────────────────────────────────────────────────────── */ @container (max-width: 479.98px) { .mk-palette .mk-palette-tab2 { display: none; } .mk-palette .app-tab-sep:has(+ .mk-palette-tab2) { display: none; } } @container (max-width: 379.98px) { .mk-palette .mk-palette-doc { padding: 32px 4px 48px; } } /* ───── database ───── */ /* ========================================================================== mk-database: DatabaseViewer (components/viewers/DatabaseViewer.tsx) with lib/grid-style.ts. Name column 180px (HEADER_COL_W), properties 128px (GRID_DEFAULT_COL_W), rows at least 28px (GRID_DEFAULT_ROW_H) and grown by wrapped cell text, header bar as tall as a row. Gridlines are border-r border-b border-border/50; header and Name cells are bg-muted. Toolbar is ViewerHeader's `right`: three text-xs px-2 py-0.5 buttons in a gap-1 flex. No search button: the viewer passes no searchConfig. ========================================================================== */ .mk-database { --app-h: 400px; } /* ViewerHeader right slot: ml-auto flex items-center gap-1 shrink-0 */ .mk-database .mk-database-toolbar { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; } .mk-database .mk-database-tbtn { /* rounded px-2 py-0.5 text-xs */ flex: none; padding: 2px 8px; border-radius: 4px; font-size: 12px; line-height: 16px; color: var(--app-fg); white-space: nowrap; } /* db-grid: relative overflow-auto text-xs */ .mk-database .mk-database-grid { --mk-database-line: color-mix(in srgb, var(--app-border) 50%, transparent); /* border-border/50 */ position: absolute; top: 0; left: 0; width: 564px; /* 180 + 3 × 128 */ font-size: 12px; } .mk-database .mk-database-row { display: flex; align-items: stretch; min-height: 28px; } /* gridHeadCls: text-[11px] muted bg-muted, + !items-start px-1.5 py-1 */ .mk-database .mk-database-head { position: relative; flex: none; width: 128px; min-width: 0; display: flex; align-items: flex-start; justify-content: flex-start; padding: 4px 6px; overflow: hidden; background: var(--app-muted); border-right: 1px solid var(--mk-database-line); border-bottom: 1px solid var(--mk-database-line); font-size: 11px; color: var(--app-muted-fg); } .mk-database .mk-database-name { width: 180px; } .mk-database .mk-database-headrow .mk-database-head { height: 28px; } /* Header button: flex items-center gap-1 truncate text-xs font-semibold text-foreground */ .mk-database .mk-database-hlabel { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--app-fg); } .mk-database .mk-database-sort { /* text-[10px] muted ▲ */ font-size: 10px; line-height: 16px; /* text-[10px] sets size only; inherits text-xs leading */ font-weight: 400; color: var(--app-muted-fg); } /* Note names: a read-only MarkdownField of [[name]] under GRID_EDITOR_CLS (text-xs, leading-tight, line wrapping): a long name wraps and grows the row. */ .mk-database .mk-database-name .app-link { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 15px; } .mk-database .mk-database-cell .app-link { overflow-wrap: anywhere; } /* BreadcrumbEllipsis (size-4 box, 14px IconDots) + separator: shown in place of the parents once ViewerHeader collapses them. */ .mk-database .mk-database-ellipsis { width: 16px; height: 16px; display: none; align-items: center; justify-content: center; } .mk-database .mk-database-ellipsis .i { width: 14px; height: 14px; } .mk-database .mk-database-ellipsis-sep { display: none; } /* gridCellCls: relative border-r border-b px-1.5 py-1 text-xs; the cell's MarkdownField wraps at leading-tight. */ .mk-database .mk-database-cell { position: relative; flex: none; width: 128px; min-width: 0; padding: 4px 6px; overflow: hidden; overflow-wrap: anywhere; border-right: 1px solid var(--mk-database-line); border-bottom: 1px solid var(--mk-database-line); font-size: 12px; line-height: 15px; color: var(--app-fg); } /* A selected cell: GRID_CELL_SEL bg-primary/3 + data-sel-outline border-foreground/40 */ .mk-database .mk-database-cell.is-selected { background: color-mix(in srgb, var(--app-primary) 3%, transparent); } .mk-database .mk-database-cell.is-selected::after { content: ''; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--app-fg) 40%, transparent); pointer-events: none; } /* Dark: the gridlines and outline follow the dark tokens on their own; only GRID_CELL_SEL's fill changes (dark:bg-primary/20). Over the dark card it is nearly invisible, as in the app, so the outline carries the selection. */ html.dark .mk-database .mk-database-cell.is-selected { background: color-mix(in srgb, var(--app-primary) 20%, transparent); } /* The pane clips the table at a whole gridline rather than mid-column. */ @container (max-width: 579.98px) { .mk-database .mk-database-row > :nth-child(4) { display: none; } } @container (max-width: 459.98px) { .mk-database .mk-database-row > :nth-child(3) { display: none; } } /* ViewerHeader hides the parents behind an ellipsis; the current crumb then truncates (truncateLast). Toolbar never changes. */ @container (max-width: 479.98px) { .mk-database .mk-database-parent { display: none; } .mk-database .mk-database-ellipsis { display: flex; } .mk-database .mk-database-ellipsis-sep { display: block; } } /* ───── canvas ───── */ /* ========================================================================== mk-canvas: a pane showing a canvas note (CanvasViewer.tsx). - Header right slot: AnnotationToolbar's Annotate (p-1, 16px icon), a w-px h-4 mx-1 rule, Run + Add node (IconButton md: 24px, 14px icon, muted/60), a rule, the Object graph toggle (p-1, 14px icon), Canvas view. - Board: React Flow with the app's theme vars (index.css [data-canvas-flow]): dots = muted-foreground 35%, edges muted-foreground 1px, Controls and MiniMap bordered rounded-lg, attribution transparent. - Workflow node: CanvasNodeCard (bg-card border rounded-lg min-w-48 shadow-sm; header px-3 py-2 text-sm font-medium + text-xs badge; one px-3 py-1 text-xs row per frontmatter key with 10px handles at ±6px). - Box: CanvasTextNode (h-3 drag strip, px-3 pb-2 MarkdownField 13px/1.7, 32px corner grip). - Ink: AnnotationLayer pen path, stroke 2 × zoom, round caps, in the pen's default colour (use-pdf-annotations.ts: #e23b3b), the same in dark. - Node badge: the note's type "disease" isn't a workflow kind, so it takes TYPE_BADGES.unknown (bg-muted text-muted-foreground): neutral in the app. ========================================================================== */ .mk-canvas { --app-h: 440px; } /* The zoom lives on a descendant: a container query can't style its container. */ .mk-canvas .app-window { --mk-canvas-s: 1; --mk-canvas-top: calc(50% - 150px * var(--mk-canvas-s)); } /* ── Header toolbar ───────────────────────────────────────────────────────── */ .mk-canvas .mk-canvas-tools { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; } .mk-canvas .mk-canvas-tool, .mk-canvas .mk-canvas-ibtn { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; } .mk-canvas .mk-canvas-tool { padding: 4px; color: var(--app-muted-fg); } .mk-canvas .mk-canvas-tool .i { width: 16px; height: 16px; } .mk-canvas .mk-canvas-tool-sm .i { width: 14px; height: 14px; } .mk-canvas .mk-canvas-ibtn { width: 24px; height: 24px; border-radius: var(--app-radius-md); color: var(--app-muted-fg-60); } .mk-canvas .mk-canvas-ibtn .i { width: 14px; height: 14px; } .mk-canvas .mk-canvas-sep { flex: none; width: 1px; height: 16px; margin: 0 4px; background: var(--app-border); } /* ── Board ────────────────────────────────────────────────────────────────── */ .mk-canvas .mk-canvas-flow { /* : 1px dots on a 20px gap, scaled by zoom */ /* --xy-background-color: var(--background); dots muted-foreground 35% */ --mk-canvas-dot: rgba(115, 115, 115, 0.35); background-color: var(--app-background); background-image: radial-gradient(circle, var(--mk-canvas-dot) calc(0.5px * var(--mk-canvas-s)), transparent calc(0.5px * var(--mk-canvas-s) + 0.5px)); background-size: calc(20px * var(--mk-canvas-s)) calc(20px * var(--mk-canvas-s)); background-position: calc(10px * var(--mk-canvas-s)) calc(10px * var(--mk-canvas-s)); } .mk-canvas .mk-canvas-board { position: absolute; /* The board's content (x 59-583) is centred in the pane at the zoom below; narrow panes pan it to the top so nothing sits under the panels. */ left: calc(50% - 321px * var(--mk-canvas-s)); top: var(--mk-canvas-top); width: 600px; height: 300px; transform-origin: 0 0; transform: scale(var(--mk-canvas-s)); } .mk-canvas .mk-canvas-edges, .mk-canvas .mk-canvas-ink { position: absolute; left: 0; top: 0; overflow: visible; fill: none; } .mk-canvas .mk-canvas-edges path { stroke: var(--app-muted-fg); stroke-width: 1; } .mk-canvas .mk-canvas-ink { z-index: 5; } .mk-canvas .mk-canvas-ink path { stroke: #e23b3b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Workflow node */ .mk-canvas .mk-canvas-node { position: absolute; z-index: 1; min-width: 192px; background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow-sm); } .mk-canvas .mk-canvas-node-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--app-border); } .mk-canvas .mk-canvas-node-title { min-width: 0; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--app-fg); } .mk-canvas .mk-canvas-badge { flex: none; padding: 2px 6px; border-radius: 4px; background: var(--app-muted); color: var(--app-muted-fg); font-size: 12px; line-height: 16px; } .mk-canvas .mk-canvas-field { position: relative; display: flex; align-items: center; padding: 4px 12px; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); } .mk-canvas .mk-canvas-field > span:not(.mk-canvas-handle) { flex: 1 1 auto; } .mk-canvas .mk-canvas-handle { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--app-muted-fg-60); border: 2px solid var(--app-card); } .mk-canvas .mk-canvas-handle.is-in { left: -6px; transform: translate(-50%, -50%); } .mk-canvas .mk-canvas-handle.is-out { right: -6px; transform: translate(50%, -50%); } /* Markdown box */ .mk-canvas .mk-canvas-box { position: absolute; z-index: 1; background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow-sm); } .mk-canvas .mk-canvas-box-strip { height: 12px; } .mk-canvas .mk-canvas-box-body { padding: 0 12px 8px; font-size: 13px; line-height: 1.7; color: var(--app-fg); } .mk-canvas .mk-canvas-box-body p { overflow-wrap: anywhere; } .mk-canvas .mk-canvas-grip { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; padding: 4px; display: flex; align-items: flex-end; justify-content: flex-end; color: var(--app-muted-fg); } .mk-canvas .mk-canvas-grip svg { display: block; } /* ── React Flow panels (15px margin) ──────────────────────────────────────── */ .mk-canvas .mk-canvas-controls { position: absolute; z-index: 6; left: 15px; bottom: 15px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--app-border); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .mk-canvas .mk-canvas-controls span { padding: 4px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--app-popover); color: var(--app-muted-fg); border-bottom: 1px solid var(--app-border); } .mk-canvas .mk-canvas-controls span:last-child { border-bottom: 0; } .mk-canvas .mk-canvas-controls svg { /* React Flow's own filled glyphs */ width: 100%; max-width: 12px; max-height: 12px; fill: currentColor; } .mk-canvas .mk-canvas-minimap { position: absolute; z-index: 6; right: 15px; bottom: 15px; overflow: hidden; background: var(--app-popover); border: 1px solid var(--app-border); border-radius: 8px; } .mk-canvas .mk-canvas-minimap svg { display: block; } .mk-canvas .mk-canvas-minimap rect { fill: var(--app-muted); stroke: var(--app-border); stroke-width: 2; } .mk-canvas .mk-canvas-attr { position: absolute; z-index: 6; right: 0; bottom: 0; padding: 2px 3px; font-size: 10px; line-height: 1.2; color: #999999; } /* Breadcrumb: parents that don't fit fold into ViewerHeader's ellipsis. */ .mk-canvas .mk-canvas-crumb-more { display: none; } .mk-canvas span.mk-canvas-crumb-more { width: 16px; height: 16px; align-items: center; justify-content: center; } .mk-canvas span.mk-canvas-crumb-more .i { width: 14px; height: 14px; } /* ── fitView: the board zooms to the pane ─────────────────────────────────── */ /* Below 640px the board zooms out; below 560px the window grows and the board pans to the top, so the text box clears Controls and the MiniMap. */ @container (max-width: 639.98px) { .mk-canvas .app-window { --mk-canvas-s: 0.88; } } @container (max-width: 559.98px) { .mk-canvas .app-window { --app-h: 480px; --mk-canvas-s: 0.78; --mk-canvas-top: 36px; } .mk-canvas .mk-canvas-crumb-folder { display: none; } .mk-canvas .mk-canvas-crumb-more { display: block; } .mk-canvas span.mk-canvas-crumb-more { display: flex; } } @container (max-width: 469.98px) { .mk-canvas .app-window { --mk-canvas-s: 0.68; --mk-canvas-top: 28px; } } @container (max-width: 399.98px) { .mk-canvas .app-window { --mk-canvas-s: 0.6; --mk-canvas-top: 30px; } .mk-canvas .mk-canvas-tools { gap: 2px; } .mk-canvas .mk-canvas-sep { margin: 0 2px; } } /* ── Dark (html.dark, the app's .dark tokens) ─────────────────────────────── */ /* The dots are muted-foreground 35% (#a1a1a1 in dark); the board is --background (#0a0a0a). Ink keeps its stored colour (#e23b3b) in dark too. */ html.dark .mk-canvas .mk-canvas-flow { --mk-canvas-dot: rgba(161, 161, 161, 0.35); } /* ───── pdf ───── */ /* ========================================================================== mk-pdf: PdfViewer (components/viewers/PdfViewer.tsx) in annotate mode. - Header right slot: ViewerHeader `rightScrolls` = ml-auto min-w-0 max-w-[70%] holding PdfViewer's inner scroller (overflow-x-auto, no scrollbar) and, beside it, the Search button. Only the scroller is cut off, so Search always shows, as in the app. - AnnotationToolbar: Annotate (pencil) toggle, w-px h-4 bg-border mx-1, Select, Add shape (square), Pen, Highlight, Text, Comment, Eraser, Crop, a w-5 h-5 color input, a w-16 range, divider, Undo, Redo. Tool buttons p-1 rounded, 16px icons; active bg-accent text-foreground. - Page: react-pdf-viewer at PageWidth, first page top 8px; page-layer box-shadow 0 2px 8px rgba(0,0,0,.15), radius 4px, on the pane's card bg. - Highlight (AnnotationLayer): rect, fill = color at 0.35 opacity. - Comment badge (CommentMarkers): 20px circle at the shape's top-right corner, bg = color, white IconMessage 13px stroke 2.2, shadow 0 1px 3px rgba(0,0,0,.4). - Crop region: rect fill rgba(128,128,128,.08), stroke #888 1px dashed 4 3, eight 8px handles fill #fff stroke #888 1.5. Annotation colour: the app default, #e23b3b (use-pdf-annotations), on the colour swatch, the highlight and the comment badge. The crop region really is gray in the app (REGION_STROKE #888). Dark: none of these components has a dark: variant or .dark rule. The page is the PDF's own render (white), the overlay colours are fixed inline values, and the colour/range inputs get no color-scheme, so they keep Chromium's light look; only the chrome follows the tokens. ========================================================================== */ .mk-pdf .app-window { height: clamp(300px, 76cqw, 480px); } /* The app sets no color-scheme, so native controls stay Chromium-light in dark mode; undo base.css's dark color-scheme for this mock. */ html.dark .mk-pdf { color-scheme: light; } .mk-pdf .mk-pdf-tabicon { color: var(--app-icon-pdf); } /* text-red-400 */ /* Crumbs: parent shown when it fits, otherwise the breadcrumb ellipsis. */ .mk-pdf .mk-pdf-ellipsis { display: none; width: 16px; height: 16px; align-items: center; justify-content: center; } .mk-pdf .mk-pdf-ellipsis .i { width: 14px; height: 14px; } /* ── Header right slot ──────────────────────────────────────────────────── */ .mk-pdf .mk-pdf-right { /* ml-auto flex items-center gap-1 min-w-0 max-w-[70%] */ margin-left: auto; min-width: 0; max-width: 70%; display: flex; align-items: center; gap: 4px; } /* PdfViewer's inner scroller (overflow-x-auto, no scrollbar): only this is cut off; the Search button after it always stays in view. */ .mk-pdf .mk-pdf-scroller { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; } .mk-pdf .mk-pdf-scroller > * { flex: none; } .mk-pdf .mk-pdf-search { flex: none; } .mk-pdf .mk-pdf-tool { /* p-1 rounded, w-4 h-4 icon */ display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 4px; color: var(--app-muted-fg); } .mk-pdf .mk-pdf-tool .i { width: 16px; height: 16px; } .mk-pdf .mk-pdf-tool.is-on { background: var(--app-accent); color: var(--app-fg); } /* bg-accent */ .mk-pdf .mk-pdf-tool.is-disabled { opacity: 0.3; } .mk-pdf .mk-pdf-tool.mk-pdf-plain { color: var(--app-fg); } /* page nav buttons set no text colour */ .mk-pdf .mk-pdf-tool.mk-pdf-small { color: var(--app-fg); } .mk-pdf .mk-pdf-tool.mk-pdf-small .i { width: 14px; height: 14px; } .mk-pdf .mk-pdf-tool.mk-pdf-graph { color: var(--app-muted-fg); } /* object-graph toggle, off */ .mk-pdf .mk-pdf-sep { /* w-px h-4 bg-border mx-1 */ width: 1px; height: 16px; margin: 0 4px; background: var(--app-border); } .mk-pdf .mk-pdf-page { font-size: 12px; line-height: 16px; color: var(--app-muted-fg); white-space: nowrap; } .mk-pdf .mk-pdf-page b { font-weight: 500; color: var(--app-fg); } /* : Chromium draws a small bordered swatch inside the 20px box. */ .mk-pdf .mk-pdf-color { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } .mk-pdf .mk-pdf-color span { width: 14px; height: 11px; border: 1px solid #777777; background: #e23b3b; /* value = the default annotation colour */ } /* , Chromium style: no accent-color is set, so fill and thumb are Chromium's default #0075ff. */ .mk-pdf .mk-pdf-range { position: relative; width: 64px; height: 16px; display: inline-flex; align-items: center; } .mk-pdf .mk-pdf-range::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 2px; background: #efefef; box-shadow: inset 0 0 0 1px #b2b2b2; } .mk-pdf .mk-pdf-range-fill { position: absolute; left: 0; top: 6px; width: 11px; height: 4px; border-radius: 2px 0 0 2px; background: #0075ff; } .mk-pdf .mk-pdf-range-thumb { position: absolute; left: 4px; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: #0075ff; } /* ── Page ───────────────────────────────────────────────────────────────── */ .mk-pdf .mk-pdf-scroll { position: absolute; inset: 0; overflow: hidden; padding: 8px 8px 0; } /* Page width = root width − borders − pane gaps − scroller padding. Everything inside is in em, so the page scales like a rendered PDF. */ .mk-pdf .mk-pdf-page-sheet { position: relative; width: 100%; aspect-ratio: 612 / 792; overflow: hidden; background: #ffffff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-family: 'Times New Roman', Times, Tinos, 'Liberation Serif', 'Nimbus Roman', serif; font-size: calc((100cqw - 28px) * 0.0158); line-height: 1.42; color: #1a1a1a; padding: 5.4% 9% 0; /* % of the page width */ } .mk-pdf .mk-pdf-runhead { display: flex; justify-content: space-between; padding-bottom: 0.35em; margin-bottom: 1.6em; border-bottom: 0.06em solid #1a1a1a; font-size: 0.82em; letter-spacing: 0.06em; font-variant: small-caps; white-space: nowrap; } .mk-pdf .mk-pdf-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4.4%; align-items: start; } .mk-pdf .mk-pdf-col { min-width: 0; } .mk-pdf .mk-pdf-h { margin: 0 0 0.3em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 0.92em; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .mk-pdf .mk-pdf-col .mk-pdf-h:not(:first-child) { margin-top: 1.1em; } /* One printed line each, justified like the source, as a PDF fixes them. */ .mk-pdf .mk-pdf-l { white-space: nowrap; overflow: hidden; text-align: justify; text-align-last: justify; } .mk-pdf .mk-pdf-l.is-end { text-align-last: left; } .mk-pdf .mk-pdf-l.is-start { text-indent: 1.3em; } /* Table 2 */ .mk-pdf .mk-pdf-fig { position: relative; margin: 1em 0 0.4em; font-size: 0.92em; line-height: 1.38; } .mk-pdf .mk-pdf-cap { padding-bottom: 0.3em; border-bottom: 0.08em solid #1a1a1a; white-space: nowrap; overflow: hidden; } .mk-pdf .mk-pdf-cap b { margin-right: 0.4em; } .mk-pdf .mk-pdf-tr { display: flex; justify-content: space-between; gap: 1em; padding: 0.12em 0; white-space: nowrap; } .mk-pdf .mk-pdf-tr.is-head { font-weight: 700; border-bottom: 0.05em solid #1a1a1a; } .mk-pdf .mk-pdf-tr.is-last { border-bottom: 0.08em solid #1a1a1a; } .mk-pdf .mk-pdf-tr span:last-child { min-width: 7em; } /* ── Annotations ────────────────────────────────────────────────────────── */ .mk-pdf .mk-pdf-hl { position: relative; } .mk-pdf .mk-pdf-hl-box { position: absolute; left: -0.35em; right: -0.2em; top: 0.08em; bottom: 0.02em; background: rgba(226, 59, 59, 0.35); /* #e23b3b, fillOpacity 0.35 */ } .mk-pdf .mk-pdf-badge { position: absolute; z-index: 2; top: calc(0.08em - 10px); right: calc(-0.2em - 10px); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e23b3b; color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .mk-pdf .mk-pdf-badge .i { width: 13px; height: 13px; stroke-width: 2.2; } .mk-pdf .mk-pdf-crop { position: absolute; z-index: 2; top: -0.7em; left: -0.7em; right: -0.7em; bottom: -0.6em; } .mk-pdf .mk-pdf-crop-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .mk-pdf .mk-pdf-crop-line rect { fill: rgba(128, 128, 128, 0.08); stroke: #888888; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; } .mk-pdf .mk-pdf-handle { position: absolute; width: 9.5px; height: 9.5px; margin: -4.75px 0 0 -4.75px; background: #ffffff; border: 1.5px solid #888888; } /* ── Container rules ────────────────────────────────────────────────────── */ @container (max-width: 619.98px) { .mk-pdf .mk-pdf-parent { display: none; } .mk-pdf .mk-pdf-ellipsis { display: inline-flex; } } /* ───── study ───── */ /* ========================================================================== Study mock (.mk-study): a Study tab reviewing the Renal deck. Measured from the renderer source: - Tab TabBar.tsx IconCards w-3.5 text-amber-400 - Header FolderViewer.tsx crumbs folder › card; right: Study / List / Grid / Object tree, p-1 rounded, 14px icons, gap-1; the active one bg-accent text-fg - Card Study.tsx max-w-2xl px-8 pt-8 pb-8; label text-xs medium muted mb-2; section mb-4; rule border-t my-4; fields are MarkdownField (markdownTheme: 13px / 1.7) - Hint Study.tsx text-center text-xs muted/60 pt-6 pb-2, kbd px-1.5 py-0.5 rounded bg-muted mono xs - Rating bar Study.tsx border-t pt-3 pb-1, px-8 gap-2; buttons flex-1 py-1.5 rounded-xl, 20% tint bg; label text-sm semibold leading-tight, interval text-xs mt-0.5 at 60% opacity - Knowledge bar StudyKnowledgeBar h-1.5 rounded-full bg-muted; reviewed (≥90% / <90% buckets), due, buried; stats dots w-2 h-2, "|" separators muted/40 Colours are the app's own: rating tokens from index.css (--study-btn-*, the same in light and dark), bar and dots from StudyKnowledgeBar/Study.tsx. ========================================================================== */ .mk-study { --app-h: 560px; max-width: 560px; } /* Tab icon: TabBar's text-amber-400. */ .mk-study .mk-study-tabicon { color: var(--app-icon-study); } /* FolderViewer header: view switcher (p-1 rounded, 14px icons, gap-1). */ .mk-study .mk-study-views { gap: 4px; } .mk-study .mk-study-view { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: var(--app-muted-fg); } .mk-study .mk-study-view .i { width: 14px; height: 14px; } .mk-study .mk-study-view.is-on { background: var(--app-accent); color: var(--app-fg); } /* ── Study card view ─────────────────────────────────────────────────────── */ .mk-study .mk-study-body { display: flex; flex-direction: column; } .mk-study .mk-study-scroll { flex: 1 1 auto; min-height: 0; overflow: hidden; } .mk-study .mk-study-col { /* max-w-2xl mx-auto px-8 */ max-width: 672px; margin: 0 auto; padding: 0 32px; } .mk-study .mk-study-scroll > .mk-study-col { padding-top: 32px; padding-bottom: 32px; } .mk-study .mk-study-section { margin-bottom: 16px; } .mk-study .mk-study-label { margin-bottom: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--app-muted-fg); } .mk-study .mk-study-field { /* CodeMirror markdownTheme */ font-size: 13px; line-height: 1.7; color: var(--app-fg); overflow-wrap: break-word; } .mk-study .mk-study-rule { border-top: 1px solid var(--app-border); margin: 16px 0; } .mk-study .mk-study-hint { padding: 24px 0 8px; text-align: center; font-size: 12px; line-height: 16px; color: var(--app-muted-fg-60); } .mk-study .mk-study-kbd { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--app-muted); color: var(--app-muted-fg); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* font-mono: no --font-mono, so system mono */ font-size: 12px; line-height: 16px; } /* Rating bar */ .mk-study .mk-study-rating { flex: none; border-top: 1px solid var(--app-border); padding: 12px 0 4px; } .mk-study .mk-study-buttons { display: flex; gap: 8px; } .mk-study .mk-study-rate { --mk-study-fg: #525252; --mk-study-bg: rgba(82, 82, 82, 0.2); flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; /* py-1.5, no horizontal padding */ border-radius: 11.2px; /* rounded-xl */ background: var(--mk-study-bg); color: var(--mk-study-fg); text-align: center; } /* index.css --study-btn-1..4: red-500 / amber-500 / blue-500 / green-500, each fg at 20% for the bg; the same in light and dark. */ .mk-study .mk-study-rate-1 { --mk-study-fg: #ef4444; --mk-study-bg: color-mix(in srgb, #ef4444 20%, transparent); } .mk-study .mk-study-rate-2 { --mk-study-fg: #f59e0b; --mk-study-bg: color-mix(in srgb, #f59e0b 20%, transparent); } .mk-study .mk-study-rate-3 { --mk-study-fg: #3b82f6; --mk-study-bg: color-mix(in srgb, #3b82f6 20%, transparent); } .mk-study .mk-study-rate-4 { --mk-study-fg: #22c55e; --mk-study-bg: color-mix(in srgb, #22c55e 20%, transparent); } .mk-study .mk-study-rate-label { font-size: 14px; line-height: 1.25; font-weight: 600; } .mk-study .mk-study-rate-ivl { margin-top: 2px; font-size: 12px; line-height: 16px; opacity: 0.6; } /* Knowledge bar row: shrink-0 py-1.5 relative -top-1, flex gap-3 */ .mk-study .mk-study-health { flex: none; position: relative; top: -4px; padding: 6px 0; } .mk-study .mk-study-health-row { display: flex; align-items: center; gap: 12px; } .mk-study .mk-study-kbar { /* w-full rounded-md px-1.5 py-1 -mx-1.5 */ flex: 1 1 auto; min-width: 0; margin: 0 -6px; padding: 4px 6px; border-radius: var(--app-radius-md); } .mk-study .mk-study-track { display: flex; height: 6px; overflow: hidden; border-radius: 9999px; background: var(--app-muted); } .mk-study .mk-study-seg { height: 100%; } /* 48 cards: 31 reviewed (22 at ≥90%, 9 below), 6 due, 11 new. */ .mk-study .mk-study-seg-handled { width: 64.58%; background: linear-gradient(to right, #22c55e 0%, #22c55e 70.97%, #84cc16 70.97%, #84cc16 100%); } .mk-study .mk-study-seg-due { width: 12.5%; background: #fdd120; } .mk-study .mk-study-stats { /* text-xs muted tabular-nums gap-1.5 px-1.5 py-1 -my-1 */ flex: none; display: flex; align-items: center; gap: 6px; margin: -4px 0; padding: 4px 6px; border-radius: var(--app-radius-md); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--app-muted-fg); } .mk-study .mk-study-stat { display: flex; align-items: center; gap: 6px; } .mk-study .mk-study-pipe { color: color-mix(in srgb, var(--app-muted-fg) 40%, transparent); } /* muted-foreground/40 */ .mk-study .mk-study-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; } .mk-study .mk-study-dot-new { background: var(--app-muted-fg); opacity: 0.25; } .mk-study .mk-study-dot-due { background: #fdd120; } .mk-study .mk-study-dot-reviewed { background: #22c55e; } /* ── Dark ── the app uses the same hues in dark (index.css ":root, .dark"). */ /* Breadcrumb collapse (ViewerHeader): parents hide one at a time behind an IconDots crumb (size-4 box, 14px icon) + chevron; the last crumb truncates only once every parent is hidden. */ .mk-study .app-crumbs .mk-study-crumb-more { display: none; } .mk-study span.mk-study-crumb-more { width: 16px; height: 16px; align-items: center; justify-content: center; } .mk-study span.mk-study-crumb-more .i { width: 14px; height: 14px; } /* ── Narrow ──────────────────────────────────────────────────────────────── */ @container (max-width: 479.98px) { .mk-study .app-window { height: 640px; } /* the card wraps; keep it whole */ .mk-study .app-crumbs span.mk-study-crumb-more { display: inline-flex; } .mk-study .app-crumbs svg.mk-study-crumb-more { display: block; } .mk-study .app-crumbs .mk-study-crumb-root { display: none; } .mk-study .mk-study-col { padding: 0 24px; } /* phone --md-gutter */ } @container (max-width: 419.98px) { .mk-study .app-crumbs .mk-study-crumb-mid { display: none; } } @container (max-width: 399.98px) { .mk-study .app-window { height: 680px; } .mk-study .mk-study-tab2 { display: none; } } /* ───── sticky ───── */ /* ========================================================================== "sticky" mock: a sticky window on the desktop beside an app window whose ⌘-hover card is open. Measured from the renderer source (light theme): - StickyView bg-popover text-sm; strip h-7 px-1.5 gap-1 border-b: Close (IconButton sm), ‹ › (TabNavArrows, w-6 h-6, 14px chevrons), name text-xs font-medium px-1 + folder ml-2 text-[10px] muted, then Float on top, Translucent, Collapse, Open, Open in new pane: opacity-0 until the sticky is hovered, so this mock draws it hovered - IconButton hover hover:bg-accent hover:text-muted-foreground - IconButton sm w-5 h-5 rounded, 12px glyph, muted/60 - main/stickies.ts frameless, hasShadow; default 440 × 380, strip 28px (drawn here at 300 × 259, the same ratio) - link-preview-size markdown card 440 × 380, never under 240 a side (drawn at 300 × 260, the same ratio) - PreviewCardBody MarkdownField px-3 py-2 - theme.ts 13px / 1.7; task marker = 13px box, 1px border oklch(0.55), radius 3, mr 3px, top -1px; checked = foreground fill + background check; bullet 4px circle at 40% muted, ml 4px mr 2px - LinkPreviewPopover header px-3 py-1.5 gap-2: ‹ ›, name/folder, Pin, Pop out as sticky, Open, Open in new pane ========================================================================== */ .app-mock.mk-sticky { height: 520px; background: #e7e7e7; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 18px 40px -24px rgba(0, 0, 0, 0.25); } /* The desktop: a soft, out-of-focus wash in grays. */ .mk-sticky .mk-sticky-desk { position: absolute; inset: 0; background: radial-gradient(60% 70% at 85% 15%, #fbfbfb 0%, rgba(251, 251, 251, 0) 70%), radial-gradient(55% 60% at 10% 95%, #d2d2d2 0%, rgba(210, 210, 210, 0) 70%), radial-gradient(45% 50% at 70% 85%, #f1f1f1 0%, rgba(241, 241, 241, 0) 70%), linear-gradient(160deg, #eeeeee 0%, #dedede 100%); } /* ── The app window behind ─────────────────────────────────────────────── */ .mk-sticky .mk-sticky-app { position: absolute; top: 24px; left: 16px; bottom: -28px; /* runs off the bottom of the picture */ width: calc(100% - 250px); /* its right edge runs under the sticky */ overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px -8px rgba(0, 0, 0, 0.14), 0 30px 60px -20px rgba(0, 0, 0, 0.2); } .mk-sticky .mk-sticky-app .app-window { height: 100%; } .mk-sticky .mk-sticky-doc { /* DocumentWrapper px-4 pt-12 gap-6 */ display: flex; flex-direction: column; gap: 24px; padding: 48px 16px 0; } .mk-sticky .mk-sticky-h1, .mk-sticky .mk-sticky-doc .mk-sticky-md { padding: 0 24px; } /* --md-gutter */ .mk-sticky .mk-sticky-h1 { font-size: 24px; line-height: 32px; font-weight: 700; overflow-wrap: anywhere; } /* Editor text (theme.ts) */ .mk-sticky .mk-sticky-md { font-size: 13px; line-height: 1.7; color: var(--app-fg); overflow-wrap: anywhere; } .mk-sticky .mk-sticky-bullet { display: inline-block; width: 4px; height: 4px; margin: 0 2px 0 4px; border-radius: 50%; background: rgba(115, 115, 115, 0.4); /* muted-fg at 40% */ vertical-align: middle; position: relative; top: -1px; } /* The ⌘-hover card, opened just under the link on the paragraph's first line: pane top 4 + border 1 + tabs 40 + header 40 + pt-12 48 + h1 32 + gap 24 = 189, line 22 → 211, card 4px below. Link starts at x 45. */ .app-mock.mk-sticky .mk-sticky-card { top: 215px; left: 40px; width: 300px; height: 260px; } .mk-sticky .mk-sticky-card .app-card-body { padding: 8px 12px; } /* ── The sticky ────────────────────────────────────────────────────────── */ .mk-sticky .mk-sticky-win { position: absolute; z-index: 30; top: 120px; /* clears the app's tab strip and viewer header */ right: 18px; width: 300px; height: 259px; display: flex; flex-direction: column; overflow: hidden; background: var(--app-popover); /* StickyView bg-popover */ border-radius: 12px; /* same window corner as the app window */ font-size: 14px; line-height: 20px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08), 0 16px 40px -8px rgba(0, 0, 0, 0.28); } .mk-sticky .mk-sticky-strip { /* h-7 px-1.5 gap-1 border-b */ flex: none; height: 28px; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-bottom: 1px solid var(--app-border); } .mk-sticky .mk-sticky-nav { margin-left: 0; } /* TabNavArrows className="" */ .mk-sticky .mk-sticky-title { flex: 1 1 auto; min-width: 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 500; } .mk-sticky .mk-sticky-folder { margin-left: 8px; font-size: 10px; font-weight: 400; color: var(--app-muted-fg); } .mk-sticky .mk-sticky-tools { /* gap-0.5; shown because the sticky is hovered */ flex: none; display: flex; align-items: center; gap: 2px; } .mk-sticky .mk-sticky-hover { /* the button under the pointer */ background: var(--app-accent); /* hover:bg-accent */ color: var(--app-muted-fg); } .mk-sticky .mk-sticky-body { /* MarkdownField px-3 py-2 */ flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 8px 12px; } .mk-sticky .mk-sticky-box { display: inline-block; width: 13px; height: 13px; margin-right: 3px; border: 1px solid #717171; /* oklch(0.55 0 0) */ border-radius: 3px; vertical-align: middle; position: relative; top: -1px; } .mk-sticky .mk-sticky-box.is-checked { border-color: var(--app-fg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-4.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat, var(--app-fg); } /* ── Dark ──────────────────────────────────────────────────────────────── */ /* A dark desktop wash, dark macOS window edges (faint light hairline, deeper shadow), and the checked task's tick in --background (hide-plugin.ts). */ html.dark .app-mock.mk-sticky { background: #1c1c1c; border-color: var(--app-window-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -24px rgba(0, 0, 0, 0.6); } html.dark .mk-sticky .mk-sticky-desk { background: radial-gradient(60% 70% at 85% 15%, #2a2a2a 0%, rgba(42, 42, 42, 0) 70%), radial-gradient(55% 60% at 10% 95%, #0e0e0e 0%, rgba(14, 14, 14, 0) 70%), radial-gradient(45% 50% at 70% 85%, #232323 0%, rgba(35, 35, 35, 0) 70%), linear-gradient(160deg, #202020 0%, #151515 100%); } html.dark .mk-sticky .mk-sticky-app { border-color: var(--app-window-border); box-shadow: var(--app-window-shadow); } html.dark .mk-sticky .mk-sticky-win { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.8), inset 0 0 0 0.5px var(--app-window-border), /* the app window's hairline */ 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px -8px rgba(0, 0, 0, 0.7); } html.dark .mk-sticky .mk-sticky-bullet { background: rgba(161, 161, 161, 0.4); /* dark muted-fg at 40% (theme.ts) */ } html.dark .mk-sticky .mk-sticky-box.is-checked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-4.5' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat, var(--app-fg); } /* ── Narrower ──────────────────────────────────────────────────────────── */ /* Below 700px the card would run under the sticky, so the app window goes and the sticky sits alone on the desktop at its default 440 × 380. */ @container (max-width: 699.98px) { .mk-sticky .mk-sticky-app { display: none; } .mk-sticky .mk-sticky-win { top: 70px; left: 0; right: 0; margin: 0 auto; width: 440px; max-width: calc(100% - 32px); height: auto; aspect-ratio: 440 / 380; } } /* ───── phone ───── */ /* ========================================================================== mk-phone: the home-screen web app on an iPhone, chat "Kidney stones". Measured from the renderer source, light theme: - Shell PhoneShell.tsx page bg-card, rounded-b-[16px], over bg-sidebar; 12px status strip (standalone inset 0); nav: five flex-1 h-11 buttons, 20px icons, muted-foreground (Sidebar, Tabs count box h-5 min-w-5 rounded border-current text-xs, Command palette, New tab, Tab menu) - Header ViewerHeader h-10 px-4 border-b, ‹ › then crumbs, the object-graph toggle (p-1, 14px) on the right - Transcript Chat.tsx pt-4, column gap-4, phone column 24px each side (index.css [data-phone-column] --md-gutter); user bubble max-w-80% rounded-xl px-4 py-2.5 bg-primary; message text 13px / 1.7 (theme.ts) - Actions MessageActions always shown under touch: h-5 mt-3 gap-0.5, IconButton sm 20px / 12px glyph muted/60, time + cost 11px/16px muted/60 - Tools ToolCallGroup -ml-2 text-xs mono muted, px-2 py-1 gap-1.5, 12px status + chevron - Composer ChatInput toolbarBelow: rounded-2xl border, row pl-3.5 pr-3 py-2.5, Send IconButton md 24px; footer pt-2 px-0.5 gap-1 (Search, Attach, Voice input, assistant name, context ring); wrapper pt-2 pb-4, 48px fade above it Colours as in the app: the done check is ToolCallGroup's text-green-500 (Tailwind v4: oklch(72.3% 0.219 149.579), ~#00c950, not v3's #22c55e; light and dark); everything else here is the app's neutrals, and the iOS chrome is drawn in neutrals. Device drawn at iPhone 16 size (393 x 852 screen, 54px status bar, 126 x 37 island, 34px home inset) and zoomed 0.7 as a whole. ========================================================================== */ .app-mock.mk-phone { width: 100%; max-width: 300px; margin: 0 auto; padding: 6px 0 24px; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; --mk-phone-bar: var(--app-sidebar); /* BAR_BG: bg-sidebar */ --mk-phone-battery-edge: rgba(10, 10, 10, 0.4); --mk-phone-check: oklch(72.3% 0.219 149.579); /* ToolCallGroup: text-green-500 (v4) */ } /* Dark: PhoneShell's BAR_BG is dark:bg-[oklch(0.195_0_0)], a shade under the card so the page's rounded corners still show; the status bar and page are the card (index.css html[data-phone-shell] background: var(--card)). */ html.dark .app-mock.mk-phone { --mk-phone-bar: #151515; --mk-phone-battery-edge: rgba(250, 250, 250, 0.4); } html.dark .mk-phone .mk-phone-device { /* deeper shadow on a dark page */ box-shadow: inset 0 0 0 2px #3f3f3f, inset 0 0 0 4px #111111, 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.4), 0 20px 40px -14px rgba(0, 0, 0, 0.6), 0 50px 90px -34px rgba(0, 0, 0, 0.7); } /* ── Device: an iPhone 16 screen at its true 393 x 852 CSS px, shrunk by one factor so the app inside keeps a screenshot's real proportions. ─────────── */ .mk-phone .mk-phone-device { position: relative; width: 413px; height: 872px; margin: 0 auto; padding: 10px; border-radius: 64px; background: #1c1c1c; box-shadow: inset 0 0 0 2px #3f3f3f, inset 0 0 0 4px #111111, 0 1px 3px rgba(0, 0, 0, 0.12), 0 20px 40px -14px rgba(0, 0, 0, 0.30), 0 50px 90px -34px rgba(0, 0, 0, 0.35); zoom: 0.7; } .mk-phone .mk-phone-screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 55px; background: var(--mk-phone-bar); /* the bar's colour, under the page */ } /* ── iOS status bar ───────────────────────────────────────────────────────── */ .mk-phone .mk-phone-status { flex: none; position: relative; height: 54px; display: flex; align-items: center; padding-top: 6px; background: var(--app-bg); font-family: -apple-system, 'SF Pro Text', 'Geist', system-ui, sans-serif; } .mk-phone .mk-phone-time { width: 133px; padding-left: 18px; text-align: center; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--app-fg); font-variant-numeric: tabular-nums; } .mk-phone .mk-phone-island { position: absolute; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 19px; background: #000; } .mk-phone .mk-phone-sys { margin-left: auto; width: 133px; padding-right: 18px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--app-fg); } .mk-phone .mk-phone-signal { display: flex; align-items: flex-end; gap: 2px; height: 12px; } .mk-phone .mk-phone-signal i { display: block; width: 3px; border-radius: 1px; background: var(--app-fg); } .mk-phone .mk-phone-signal i:nth-child(1) { height: 4px; } .mk-phone .mk-phone-signal i:nth-child(2) { height: 6.5px; } .mk-phone .mk-phone-signal i:nth-child(3) { height: 9px; } .mk-phone .mk-phone-signal i:nth-child(4) { height: 12px; } .mk-phone .mk-phone-wifi { width: 17px; height: 12px; background: radial-gradient(circle at 50% 100%, var(--app-fg) 0 2.6px, transparent 2.6px 4.6px, var(--app-fg) 4.6px 7.1px, transparent 7.1px 9.1px, var(--app-fg) 9.1px 11.6px, transparent 11.6px); clip-path: polygon(50% 100%, 0 26%, 0 0, 100% 0, 100% 26%); } .mk-phone .mk-phone-battery { position: relative; width: 27px; height: 13px; padding: 2px; border: 1px solid var(--mk-phone-battery-edge); border-radius: 4px; } .mk-phone .mk-phone-battery::after { content: ''; position: absolute; top: 3.5px; right: -3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: var(--mk-phone-battery-edge); } .mk-phone .mk-phone-battery i { display: block; width: 78%; height: 100%; border-radius: 2px; background: var(--app-fg); } /* ── Shell ────────────────────────────────────────────────────────────────── */ .mk-phone .mk-phone-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--mk-phone-bar); } .mk-phone .mk-phone-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--app-bg); border-radius: 0 0 16px 16px; } .mk-phone .mk-phone-strip { flex: none; height: 12px; background: var(--app-bg); } /* Beats base's narrow-container rule (the root is ~300px wide, the screen 393). */ .app-mock.mk-phone .mk-phone-header { padding: 0 16px; gap: 8px; } .app-mock.mk-phone .mk-phone-header .app-nav { margin-left: -8px; } .mk-phone .mk-phone-graph { /* p-1 rounded, 14px glyph */ display: inline-flex; padding: 4px; border-radius: 4px; color: var(--app-muted-fg); } .mk-phone .mk-phone-graph .i { width: 14px; height: 14px; } /* ── Chat ─────────────────────────────────────────────────────────────────── */ .mk-phone .mk-phone-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .mk-phone .mk-phone-transcript { /* stuck to the bottom, like a live chat */ flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 16px; display: flex; flex-direction: column; justify-content: flex-end; } .mk-phone .mk-phone-col { width: 100%; padding: 0 24px; display: flex; flex-direction: column; } .mk-phone .mk-phone-transcript .mk-phone-col { gap: 16px; } .mk-phone .mk-phone-msg { display: flex; flex-direction: column; } .mk-phone .mk-phone-user, .mk-phone .mk-phone-assistant { font-size: 13px; line-height: 1.7; overflow-wrap: break-word; } .mk-phone .mk-phone-user { align-self: flex-end; max-width: 80%; padding: 10px 16px; border-radius: var(--app-radius-xl); background: var(--app-primary); color: var(--app-primary-fg); } .mk-phone .mk-phone-assistant { width: 100%; color: var(--app-fg); } .mk-phone .mk-phone-user p, .mk-phone .mk-phone-assistant p { margin: 0; } /* Links inside the dark bubble: index.css .cm-message--on-dark .cm-md-link-exists */ .mk-phone .mk-phone-user .app-link { color: oklch(0.92 0 0); text-decoration-color: oklch(0.75 0 0); } /* Message action row: always visible under a finger. */ .mk-phone .mk-phone-actions { display: flex; align-items: center; gap: 2px; height: 20px; margin-top: 12px; min-width: 0; } .mk-phone .mk-phone-actions.is-right { justify-content: flex-end; } .mk-phone .mk-phone-ib { /* IconButton sm */ flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--app-muted-fg-60); } .mk-phone .mk-phone-ib .i { width: 12px; height: 12px; } .mk-phone .mk-phone-ib.is-md { width: 24px; height: 24px; border-radius: var(--app-radius-md); } .mk-phone .mk-phone-ib.is-md .i { width: 14px; height: 14px; } .mk-phone .mk-phone-ib.is-disabled { opacity: 0.4; } .mk-phone .mk-phone-rowtext { /* ROW_TEXT */ flex: none; padding: 2px 4px; border-radius: 4px; white-space: nowrap; font-size: 11px; line-height: 16px; color: var(--app-muted-fg-60); } /* Collapsed tool group: "Used 6 tools". */ .mk-phone .mk-phone-tools { margin-left: -8px; font-family: ui-monospace, SFMono-Regular, Menlo, 'Geist Mono', monospace; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); } .mk-phone .mk-phone-tools-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border-radius: 4px; } .mk-phone .mk-phone-tools-btn .i { width: 12px; height: 12px; } .mk-phone .mk-phone-tools-btn .i:first-child { color: var(--mk-phone-check); } /* done check, green-500 */ .mk-phone .mk-phone-tools-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Composer */ .mk-phone .mk-phone-composer { flex: none; position: relative; padding: 8px 0 16px; } .mk-phone .mk-phone-fade { position: absolute; left: 0; right: 0; bottom: 100%; height: 48px; pointer-events: none; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.66) 40%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0)); } html.dark .mk-phone .mk-phone-fade { /* Chat.tsx: the same fade from var(--card) */ background: linear-gradient(to top, #171717, rgba(23, 23, 23, 0.66) 40%, rgba(23, 23, 23, 0.3) 72%, rgba(23, 23, 23, 0)); } .mk-phone .mk-phone-box { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 10px 14px; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-bg); } .mk-phone .mk-phone-placeholder { flex: 1 1 auto; min-width: 0; align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 22px; color: var(--app-muted-fg); } .mk-phone .mk-phone-footer { display: flex; align-items: center; gap: 4px; padding: 8px 2px 0; } .mk-phone .mk-phone-footer-right { margin-left: auto; display: flex; align-items: center; gap: 2px; min-width: 0; } .mk-phone .mk-phone-assistant-name { height: 24px; padding: 0 6px; display: inline-flex; align-items: center; border-radius: var(--app-radius-md); font-size: 12px; line-height: 16px; color: var(--app-muted-fg); white-space: nowrap; } .mk-phone .mk-phone-ring { /* ContextRing: h-6 w-6 box, 14px svg, ~12% used */ flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--app-muted-fg); } .mk-phone .mk-phone-ring-svg { width: 14px; height: 14px; transform: rotate(-90deg); } /* ── Bottom bar ───────────────────────────────────────────────────────────── */ .mk-phone .mk-phone-bar { flex: none; display: flex; background: var(--mk-phone-bar); } .mk-phone .mk-phone-bar-btn { flex: 1 1 0; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--app-muted-fg); } .mk-phone .mk-phone-bar-btn .i { width: 20px; height: 20px; } .mk-phone .mk-phone-count { min-width: 20px; height: 20px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } .mk-phone .mk-phone-home { /* safe-area inset, the bar's colour */ flex: none; height: 34px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; background: var(--mk-phone-bar); } .mk-phone .mk-phone-home span { width: 139px; height: 5px; border-radius: 3px; background: var(--app-fg); } /* ── Fit narrower columns: the whole device scales ────────────────────────── */ @container (max-width: 289.98px) { .mk-phone .mk-phone-device { zoom: 0.65; } } @container (max-width: 269.98px) { .mk-phone .mk-phone-device { zoom: 0.6; } } /* ───── addtofile ───── */ /* ========================================================================== "addtofile" concept mock: Add to file in two steps, stacked. Step 1, measured from: - TextSelectPopover.tsx w-72 bg-card border rounded-[10px] shadow-[0_12px_40px_rgba(0,0,0,0.14)]; compact ChatInput: editor px-2.5 pt-2 pb-2, placeholder "Ask about this, or search…", ⌃Tab kbd (text-[9px]); results border-t; toolbar px-2.5 pt-1 pb-2 gap-1.5: paperclip (disabled, opacity-50), mic, assistant (h-6 border text-[11px] sparkles), send bg-primary (disabled opacity-40) - CommandPalette compact header text-[10px] semibold uppercase bg-muted border-b px-2.5 py-0.5; rows gap-2 px-2.5 py-1, w-5 h-5 icon box, label text-xs; selected bg-accent - command-registry.ts cmd.add-to-file "Save to file" (ti-file-plus), submenu Create new file / Add to file on this page / Add to existing file; cmd.new-note pinned first, then the vault's commands (starter: Explain this, Summarize this, ti-message-bolt), Save to file kept in view; ai.find-related "Find related notes in vault" (ti-search) under AI Actions - Add to file on this page arms a link pick: clicking the reply's [[Hypercalciuria]] picks that note as the target - ContextMenu.tsx min-w-160 rounded-md border bg-popover shadow-md py-1, items px-3 py-1.5 text-xs, no icons (the palette passes labels only); opens at pointer x + 4, 4px below the row's top - theme.ts selection = foreground at 15% (neutral, as in the app; the popover is open, so no .cm-pick-source yet) Step 2, measured from: - AddressFinder.tsx bg-popover border rounded-lg shadow-xl p-5 gap-3, h2 text-sm medium; File row w-16 label, name bold + underlined Change; Original row: Leave text / Embed backlink / Remove (px-2 py-1 rounded border; pressed border-foreground; disabled opacity-30: a chat reply gives no place in a note, so only a copy can be made); Cancel border, Add bg-foreground - FinderDrafts.tsx "Properties" / "Preview" text-xs muted -mb-2; FrontmatterPanel pills; preview border rounded, the body draft editor (13px / 1.7, 24px gutters) - locked-block-plugin .cm-locked-block: inline-block, 1px 8px, 3px left border, radius 2px; theme.ts: border #3b82f6 at 70%, background #3b82f6 at 7%, both themes - finder-target.ts no address: the block lands at the end of the body, here the Treatment section ========================================================================== */ .app-mock.mk-addtofile { background: var(--app-root); padding: 20px; } .mk-addtofile .mk-addtofile-steps { display: flex; flex-direction: column; gap: 22px; } .mk-addtofile .mk-addtofile-step { min-width: 0; display: flex; flex-direction: column; gap: 10px; } /* Step caption: a small circled number and a short line. */ .mk-addtofile .mk-addtofile-cap { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--app-fg); } .mk-addtofile .mk-addtofile-num { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--app-ring); border-radius: 50%; font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--app-muted-fg); background: var(--app-bg); } /* ── Shared text atoms (editor theme.ts: 13px / 1.7) ────────────────────── */ .mk-addtofile .mk-addtofile-line { font-size: 13px; line-height: 22.1px; min-height: 22.1px; overflow-wrap: break-word; color: var(--app-fg); } /* Bullets as in the note mock: hanging indent under an inline-block dot. */ .mk-addtofile .mk-addtofile-li { padding-left: 13px; text-indent: -13px; } .mk-addtofile .mk-addtofile-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--app-muted-fg) 40%, transparent); vertical-align: middle; position: relative; top: -1px; margin-left: 4px; margin-right: 2px; text-indent: 0; } .mk-addtofile .mk-addtofile-h2 { font-size: 1.5em; font-weight: 700; line-height: 1.3; } /* ── Step 1: chat reply crop + popover ──────────────────────────────────── */ .mk-addtofile .mk-addtofile-shot { position: relative; min-width: 0; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: var(--app-radius-xl); padding: 14px 24px 20px; } .mk-addtofile .mk-addtofile-reply { max-width: 440px; } /* Which chat the reply is in: the chat's title, small and muted. */ .mk-addtofile .mk-addtofile-chat { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-chat .i { width: 14px; height: 14px; } .mk-addtofile .mk-addtofile-sel { background: color-mix(in srgb, var(--app-fg) 15%, transparent); border-radius: 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .mk-addtofile .mk-addtofile-popwrap { position: relative; width: min(288px, 100%); margin: 8px 0 0 max(0px, min(64px, calc(100% - 288px))); } .mk-addtofile .mk-addtofile-pop { width: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--app-card); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14); } .mk-addtofile .mk-addtofile-pop-input { position: relative; height: 36px; display: flex; align-items: center; padding: 8px 10px; } .mk-addtofile .mk-addtofile-ph { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-kbd { flex: none; padding: 1px 2px; border-radius: 4px; background: var(--app-muted); border: 1px solid var(--app-border); box-shadow: 0 1px 0 var(--app-border); font-size: 9px; line-height: 1.2; color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-results { border-top: 1px solid var(--app-border); } .mk-addtofile .mk-addtofile-head { height: 20px; padding: 2px 10px; background: var(--app-muted); border-bottom: 1px solid var(--app-border); font-size: 10px; line-height: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-row { height: 28px; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px; } .mk-addtofile .mk-addtofile-row.is-on { background: var(--app-accent); } .mk-addtofile .mk-addtofile-ico { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--app-border); border-radius: var(--app-radius-md); background: var(--app-muted); color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-ico .i { width: 11px; height: 11px; stroke-width: 1.75; } .mk-addtofile .mk-addtofile-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--app-fg); } .mk-addtofile .mk-addtofile-bar { height: 36px; display: flex; align-items: center; gap: 6px; padding: 4px 10px 8px; } .mk-addtofile .mk-addtofile-tb, .mk-addtofile .mk-addtofile-send { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--app-radius-md); } .mk-addtofile .mk-addtofile-tb { border: 1px solid var(--app-border); color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-tb.is-off { opacity: 0.5; } .mk-addtofile .mk-addtofile-tb .i, .mk-addtofile .mk-addtofile-send .i, .mk-addtofile .mk-addtofile-asst .i { width: 12px; height: 12px; } .mk-addtofile .mk-addtofile-asst { flex: none; height: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--app-border); border-radius: var(--app-radius-md); font-size: 11px; line-height: 1; color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-send { margin-left: auto; background: var(--app-primary); color: var(--app-primary-fg); opacity: 0.4; /* empty input: Send disabled */ } /* Submenu: opened at the pointer over the Save to file row (header 36 + 1 + 20, three rows of 28 above it → row top 141, menu 4px below it). */ .mk-addtofile .mk-addtofile-menu { position: absolute; z-index: 2; top: 145px; left: min(132px, calc(100% - 162px)); min-width: 160px; max-width: 280px; padding: 4px 0; background: var(--app-popover); border: 1px solid var(--app-border); border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-md); } .mk-addtofile .mk-addtofile-item { padding: 6px 12px; font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--app-fg); } .mk-addtofile .mk-addtofile-item.is-hover { background: var(--app-accent); } /* ── Step 2: the Address Finder dialog ──────────────────────────────────── */ .mk-addtofile .mk-addtofile-dialog { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--app-popover); border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .mk-addtofile .mk-addtofile-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--app-fg); } .mk-addtofile .mk-addtofile-field { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 16px; min-width: 0; } .mk-addtofile .mk-addtofile-field.is-actions { align-items: center; flex-wrap: wrap; } .mk-addtofile .mk-addtofile-key { flex: none; width: 64px; color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-field:not(.is-actions) .mk-addtofile-key { padding-top: 4px; } .mk-addtofile .mk-addtofile-file { display: flex; align-items: center; gap: 8px; padding-top: 4px; min-width: 0; } .mk-addtofile .mk-addtofile-file b { font-weight: 500; color: var(--app-fg); } .mk-addtofile .mk-addtofile-change { color: var(--app-muted-fg); text-decoration: underline; } .mk-addtofile .mk-addtofile-sub { margin-bottom: -8px; font-size: 12px; line-height: 16px; color: var(--app-muted-fg); } /* FrontmatterPanel (note mock's pills) */ .mk-addtofile .mk-addtofile-props { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 4px; } .mk-addtofile .mk-addtofile-pill { display: flex; align-items: flex-start; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: var(--app-radius-md); background: var(--app-muted); font-size: 12px; line-height: 16px; color: var(--app-fg); overflow-wrap: anywhere; } .mk-addtofile .mk-addtofile-pill.is-cm { align-items: center; line-height: 15px; } .mk-addtofile .mk-addtofile-pkey { flex: none; font-weight: 500; color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-add { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--app-radius-md); background: var(--app-muted); color: var(--app-muted-fg); font-size: 16px; line-height: 1; } /* Preview: the body draft editor in a bordered box */ .mk-addtofile .mk-addtofile-draft { min-width: 0; padding: 4px 24px 8px; border: 1px solid var(--app-border); border-radius: 4px; } /* The locked card standing in for the selection */ .mk-addtofile .mk-addtofile-locked { display: inline-block; vertical-align: top; max-width: 100%; padding: 1px 8px; border-left: 3px solid color-mix(in srgb, #3b82f6 70%, transparent); border-radius: 2px; background: color-mix(in srgb, #3b82f6 7%, transparent); color: var(--app-fg); } .mk-addtofile .mk-addtofile-locked-line { display: block; white-space: pre-wrap; } .mk-addtofile .mk-addtofile-choice { padding: 4px 8px; border: 1px solid var(--app-border); border-radius: 4px; color: var(--app-muted-fg); white-space: nowrap; } .mk-addtofile .mk-addtofile-choice.is-on { border-color: var(--app-fg); color: var(--app-fg); } .mk-addtofile .mk-addtofile-choice.is-off { opacity: 0.3; } .mk-addtofile .mk-addtofile-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .mk-addtofile .mk-addtofile-cancel, .mk-addtofile .mk-addtofile-ok { padding: 6px 12px; border-radius: 4px; font-size: 12px; line-height: 16px; } .mk-addtofile .mk-addtofile-cancel { border: 1px solid var(--app-border); color: var(--app-muted-fg); } .mk-addtofile .mk-addtofile-ok { background: var(--app-fg); color: var(--app-popover); } /* ── Narrow cards ───────────────────────────────────────────────────────── */ @container (max-width: 459.98px) { .app-mock.mk-addtofile { padding: 14px; } .mk-addtofile .mk-addtofile-shot { padding: 12px 12px 16px; } .mk-addtofile .mk-addtofile-dialog { padding: 14px; } .mk-addtofile .mk-addtofile-draft { padding: 4px 14px 8px; } .mk-addtofile .mk-addtofile-key { width: 52px; } } @container (max-width: 359.98px) { .app-mock.mk-addtofile { padding: 10px; } .mk-addtofile .mk-addtofile-dialog { padding: 12px; } .mk-addtofile .mk-addtofile-draft { padding: 4px 10px 8px; } .mk-addtofile .mk-addtofile-field.is-actions .mk-addtofile-key { width: 100%; } } /* ───── cost ───── */ /* ========================================================================== "cost" concept mock: chat cost controls in three stacked pieces plus the Cost settings group. Measured from: - MessageActions.tsx row h-5 mt-3 gap-0.5; ROW_TEXT = px-1 py-0.5 rounded text-[11px] leading-4 muted/60, hover bg-muted/60 + foreground. Shown here hovered (it fades in on hover). - ui/IconButton.tsx size sm: w-5 h-5, 12px icon, muted/60, disabled 40% - Chat.tsx assistant actions Copy / Add to input / Speak (coming soon, disabled); trailing after the time; error row text-xs rounded px-3 py-2 bg-destructive/10 border-destructive/20 text-destructive - ChatCostRows.tsx TurnCost tooltip = describeTurns + chatCostLines (a native title, drawn as a macOS tooltip); ChatSummarized = tool-row look (TOOL_ROW_GUTTER: -ml-2 text-xs mono muted), sections Context saved / Summary / Cost Report in a ml-[13px] pl-1 border-l list, detail ml-[18px] mr-2 mb-1, pre rounded bg-muted/60 px-2 py-1.5 - chat-engine.ts pauseNotice text; turn-usage.ts costReport lines - Settings.tsx "Cost" group: StoredNumberField labels and help; SettingsLayout group = rounded-lg border divide-y, row px-4 py-3, title text-xs semibold uppercase; NumberInput w-28 text-right px-3 py-1.5 rounded-md Colours: ToolCallGroup's StatusIcon "done" check is text-green-500 (#22c55e) in both modes; the error row uses --destructive from index.css (:root oklch(0.58 0.22 27), .dark oklch(0.704 0.191 22.216)). Dark: tokens follow base.css's html.dark block; --mk-cost-destructive and the native tooltip have dark overrides below. ========================================================================== */ .mk-cost { --mk-cost-destructive: oklch(0.58 0.22 27); /* index.css :root --destructive */ --mk-cost-line: 22.1px; /* 13px × 1.7 (editor/theme.ts) */ --mk-cost-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; max-width: 560px; display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--app-root); /* data-app-root: #f5f5f5 / #141414 */ } /* ── Step captions ────────────────────────────────────────────────────────── */ .mk-cost .mk-cost-step { display: flex; flex-direction: column; gap: 6px; } .mk-cost .mk-cost-cap { display: flex; align-items: center; gap: 8px; padding: 0 2px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--app-muted-fg); } .mk-cost .mk-cost-num { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--app-ring); font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--app-fg); background: var(--app-bg); } /* ── A cropped piece of the chat pane ─────────────────────────────────────── */ .mk-cost .mk-cost-piece { position: relative; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: var(--app-radius-xl); padding: 14px 0; overflow: hidden; } .mk-cost .mk-cost-piece-price { padding-bottom: 54px; } /* room for the tooltip */ .mk-cost .mk-cost-col { padding: 0 24px; display: flex; flex-direction: column; gap: 16px; } .mk-cost .mk-cost-msg { display: flex; flex-direction: column; } .mk-cost .mk-cost-user { display: flex; justify-content: flex-end; } .mk-cost .mk-cost-bubble { max-width: 80%; padding: 10px 16px; border-radius: var(--app-radius-xl); background: var(--app-primary); color: var(--app-primary-fg); font-size: 13px; line-height: var(--mk-cost-line); } .mk-cost .mk-cost-text { font-size: 13px; line-height: var(--mk-cost-line); color: var(--app-fg); } .mk-cost .mk-cost-link { font-weight: 600; color: var(--app-fg); text-decoration: underline dotted var(--app-muted-fg); text-underline-offset: 3px; } /* Action row, shown hovered. */ .mk-cost .mk-cost-actions { display: flex; align-items: center; gap: 2px; height: 20px; margin-top: 12px; } .mk-cost .mk-cost-ib { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3.2px; color: var(--app-muted-fg-60); } .mk-cost .mk-cost-ib .i { width: 12px; height: 12px; } .mk-cost .mk-cost-ib.is-disabled { opacity: 0.4; } .mk-cost .mk-cost-rowtext { flex: none; padding: 2px 4px; border-radius: 3.2px; white-space: nowrap; font-size: 11px; line-height: 16px; color: var(--app-muted-fg-60); } .mk-cost .mk-cost-rowtext.is-hover { background: color-mix(in srgb, var(--app-muted) 60%, transparent); color: var(--app-fg); } .mk-cost .mk-cost-price { position: relative; flex: none; } /* The native title tooltip, as macOS draws it. */ .mk-cost .mk-cost-tip { position: absolute; z-index: 2; top: calc(100% + 6px); left: 6px; width: max-content; padding: 3px 7px; border-radius: 5px; background: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.16); font-family: -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif; font-size: 11px; line-height: 15px; color: var(--app-fg); white-space: nowrap; } /* A dark-mode macOS tooltip: dark gray, light hairline, deeper shadow. */ html.dark .mk-cost .mk-cost-tip { background: #2b2b2b; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5); } /* ── Tool-row look (StatusIcon, Chevron, TOOL_ROW_GUTTER) ─────────────────── */ .mk-cost .mk-cost-tool { margin-left: -8px; min-width: 0; font-family: var(--mk-cost-mono); font-size: 12px; line-height: 16px; color: var(--app-muted-fg); } .mk-cost .mk-cost-tool .i { width: 12px; height: 12px; } .mk-cost .mk-cost-tool .i.is-open { transform: rotate(90deg); } .mk-cost .mk-cost-toolrow { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 4px 8px; border-radius: 3.2px; } .mk-cost .mk-cost-toollabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-cost .mk-cost-ok { color: oklch(72.3% 0.219 149.579); } /* StatusIcon done: text-green-500 (Tailwind v4) */ .mk-cost .mk-cost-sub { margin: 2px 0 0 13px; padding-left: 4px; border-left: 1px solid var(--app-border); display: flex; flex-direction: column; } .mk-cost .mk-cost-pre { margin: 0 8px 4px 18px; padding: 6px 8px; border-radius: 3.2px; background: color-mix(in srgb, var(--app-muted) 60%, transparent); font-family: inherit; font-size: 12px; line-height: 16px; white-space: pre-wrap; overflow-wrap: break-word; color: var(--app-muted-fg); } /* Error row: bg-destructive/10 text-destructive border-destructive/20. */ .mk-cost .mk-cost-error { padding: 8px 12px; border-radius: 3.2px; background: color-mix(in srgb, var(--mk-cost-destructive) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mk-cost-destructive) 20%, transparent); font-size: 12px; line-height: 16px; color: var(--mk-cost-destructive); } /* Dark: index.css .dark --destructive. */ html.dark .mk-cost { --mk-cost-destructive: oklch(0.704 0.191 22.216); } /* ── Settings: the Cost group ─────────────────────────────────────────────── */ .mk-cost .mk-cost-settings { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .mk-cost .mk-cost-group-title { padding: 0 4px; font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--app-muted-fg); } .mk-cost .mk-cost-group { background: var(--app-bg); border: 1px solid var(--app-border); border-radius: var(--app-radius); } .mk-cost .mk-cost-srow { display: flex; align-items: flex-start; gap: 16px; padding: 12px 16px; } .mk-cost .mk-cost-srow + .mk-cost-srow { border-top: 1px solid var(--app-border); } .mk-cost .mk-cost-slabel { flex: 1 1 auto; min-width: 0; } .mk-cost .mk-cost-sname { font-size: 14px; line-height: 20px; font-weight: 500; } .mk-cost .mk-cost-shelp { margin-top: 2px; font-size: 12px; line-height: 1.625; color: var(--app-muted-fg); } .mk-cost .mk-cost-input { flex: none; width: 112px; padding: 6px 12px; border-radius: var(--app-radius-md); border: 1px solid var(--app-input); /* border-input */ background: var(--app-background); /* bg-background */ color: var(--app-fg); font-size: 14px; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; } /* ── Narrow cards ─────────────────────────────────────────────────────────── */ @container (max-width: 439.98px) { .mk-cost { padding: 12px; gap: 12px; } .mk-cost .mk-cost-col { padding: 0 16px; } .mk-cost .mk-cost-actions { position: relative; } .mk-cost .mk-cost-price { position: static; } .mk-cost .mk-cost-tip { left: 0; white-space: normal; width: auto; max-width: 100%; } .mk-cost .mk-cost-piece-price { padding-bottom: 70px; } .mk-cost .mk-cost-srow { padding: 10px 12px; gap: 10px; } .mk-cost .mk-cost-input { width: 76px; padding: 6px 8px; } .mk-cost .mk-cost-sname { font-size: 13px; line-height: 18px; } } /* ───── undo ───── */ /* ========================================================================== mk-undo: concept storyboard. One timeline (lib/undo-journal.ts) fed by every surface: a database cell (its MarkdownField records "Typing"), a PDF annotation (use-pdf-annotations.ts, "Annotation"), a file-tree rename (FileTree pushUndo, `Rename ${entry.name}`). Then ⌘K: CommandPalette compact draws the app.undo row as its label "Undo" + kbd ⌘ Z (formatBindingParts); the step label lives in the row's title tooltip (meta: "Undo Rename Kidney stone.md"), shown here as the native tooltip. Pieces sit on the app root's bg-muted; each is a cropped pane (rounded-xl, border, bg-card). ========================================================================== */ .app-mock.mk-undo { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 10px; background: var(--app-root); } /* ── Steps ────────────────────────────────────────────────────────────────── */ /* Always stacked: at card widths (320-560px) three columns leave each piece too narrow for its own text. Each step is a row: number, then the piece. */ .mk-undo .mk-undo-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .mk-undo .mk-undo-step { min-width: 0; display: flex; flex-direction: row; align-items: flex-start; gap: 8px; } .mk-undo .mk-undo-step.is-palette .mk-undo-palwrap { flex: 1 1 auto; min-width: 0; } .mk-undo .mk-undo-num { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--app-border); background: var(--app-bg); font-size: 10px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--app-muted-fg); margin-top: 7px; } .mk-undo .mk-undo-piece { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: var(--app-radius-xl); } .mk-undo .mk-undo-head { /* a tab's look: 14px icon, text-xs */ flex: none; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid var(--app-border); font-size: 12px; line-height: 16px; color: var(--app-fg); white-space: nowrap; overflow: hidden; } .mk-undo .mk-undo-head .i { width: 14px; height: 14px; } /* inherits the tab's colour */ .mk-undo .mk-undo-head .i.is-pdf { color: var(--app-icon-pdf); } /* TabBar: text-red-400, light and dark */ .mk-undo .mk-undo-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .mk-undo .mk-undo-caret { display: inline-block; width: 1.2px; height: 13px; margin-left: 1px; vertical-align: -2px; background: var(--app-fg); } @media (prefers-reduced-motion: no-preference) { .mk-undo .mk-undo-caret.is-blink { animation: mk-undo-blink 1.2s steps(1, end) infinite; } } @keyframes mk-undo-blink { 50% { opacity: 0; } } /* 1. Database: Name column bg-muted, cells border-border/50, text-xs leading-tight */ .mk-undo .mk-undo-db { flex: 1 1 auto; font-size: 12px; line-height: 15px; } .mk-undo .mk-undo-db-row { display: flex; min-height: 28px; } .mk-undo .mk-undo-db-name, .mk-undo .mk-undo-db-cell { position: relative; min-width: 0; padding: 4px 6px; overflow-wrap: anywhere; border-right: 1px solid var(--app-tab-line-inactive); /* border-border/50 */ border-bottom: 1px solid var(--app-tab-line-inactive); } .mk-undo .mk-undo-db-name { flex: 0 0 46%; background: var(--app-muted); } .mk-undo .mk-undo-db-name .app-link { white-space: normal; overflow-wrap: anywhere; } .mk-undo .mk-undo-db-cell { flex: 1 1 0; border-right: 0; color: var(--app-fg); } /* Header bar: gridHeadCls (bg-muted, text-[11px] muted), GRID_HEADER_H 24px; the Name button and address labels are text-xs font-semibold fg. */ .mk-undo .mk-undo-db-row.is-headrow { min-height: 24px; } .mk-undo .mk-undo-db-cell.is-head { background: var(--app-muted); font-size: 11px; color: var(--app-muted-fg); } .mk-undo .mk-undo-db-hlabel { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--app-fg); } .mk-undo .mk-undo-db-cell.is-selected { background: rgba(23, 23, 23, 0.03); } .mk-undo .mk-undo-db-cell.is-selected::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(10, 10, 10, 0.4); pointer-events: none; } /* 2. PDF: a cropped page on the viewer's muted ground. The highlight is the annotation colour use-pdf-annotations.ts starts with (#e23b3b) at the AnnotationLayer's fillOpacity 0.35, the same in light and dark. */ .mk-undo .mk-undo-pdf { flex: 1 1 auto; padding: 8px 8px 0; background: var(--app-muted); overflow: hidden; } .mk-undo .mk-undo-sheet { padding: 8px 10px; background: #ffffff; border-radius: 4px 4px 0 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-family: 'Times New Roman', Times, Tinos, 'Liberation Serif', serif; font-size: 9.5px; line-height: 1.42; color: #1a1a1a; } .mk-undo .mk-undo-pl { white-space: nowrap; overflow: hidden; } .mk-undo .mk-undo-hl { position: relative; } .mk-undo .mk-undo-hl-box { position: absolute; left: -0.35em; right: -0.2em; top: 0.08em; bottom: 0.02em; background: rgba(226, 59, 59, 0.35); } /* 3. File tree: sidebar ground; the committed row after the rename */ .mk-undo .mk-undo-piece.is-tree { background: var(--app-sidebar); } .mk-undo .mk-undo-tree { padding: 6px 8px 6px 4px; } .mk-undo .mk-undo-tree .app-side-row { padding-left: calc(8px + var(--depth) * 12px); padding-right: 0; } /* ── 4. ⌘K palette ────────────────────────────────────────────────────────── */ .mk-undo .mk-undo-palwrap { position: relative; padding-bottom: 22px; } .mk-undo .mk-undo-card { overflow: hidden; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 12.96px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .mk-undo .mk-undo-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; } .mk-undo .mk-undo-editor { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; font-size: 13px; line-height: 1.7; white-space: nowrap; } .mk-undo .mk-undo-editor .mk-undo-caret { height: 15px; vertical-align: 0; } .mk-undo .mk-undo-ibtn { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--app-radius-md); color: var(--app-muted-fg-60); } .mk-undo .mk-undo-ibtn .i { width: 14px; height: 14px; } .mk-undo .mk-undo-ibtn.is-on { background: var(--app-accent); color: var(--app-muted-fg); } /* IconButton toggled: bg-accent */ .mk-undo .mk-undo-footer { display: flex; align-items: center; gap: 4px; padding: 8px 12px; } .mk-undo .mk-undo-assistant { margin-left: auto; padding: 0 6px; font-size: 12px; line-height: 24px; color: var(--app-muted-fg); } .mk-undo .mk-undo-results { border-top: 1px solid var(--app-border); } .mk-undo .mk-undo-rhead { background: var(--app-muted); border-bottom: 1px solid var(--app-border); padding: 2px 10px; font-size: 10px; line-height: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-muted-fg); } .mk-undo .mk-undo-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 10px; } .mk-undo .mk-undo-row.is-hover { background: var(--app-accent); } /* hover:bg-accent */ .mk-undo .mk-undo-ico { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--app-border); border-radius: var(--app-radius-md); background: var(--app-muted); color: var(--app-muted-fg); } .mk-undo .mk-undo-ico .i { width: 11px; height: 11px; stroke-width: 1.75; } .mk-undo .mk-undo-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; } .mk-undo .mk-undo-kbd { flex: none; display: flex; gap: 2px; } .mk-undo .mk-undo-kbd kbd { /* compact: text-[9px] px-0.5 py-px */ padding: 1px 2px; border-radius: 4px; background: var(--app-muted); border: 1px solid var(--app-border); box-shadow: 0 1px 0 var(--app-border); font-family: inherit; font-size: 9px; line-height: 1.2; color: var(--app-muted-fg); } /* The native title tooltip under the hovered row, aligned with its label (row px-2.5 + 20px icon + gap-2 = 38px). */ .mk-undo .mk-undo-tip { position: absolute; left: 38px; bottom: 0; z-index: 2; max-width: calc(100% - 44px); padding: 2px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 5px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14); font-size: 11px; line-height: 15px; color: var(--app-fg); } /* ── Dark (html.dark) ─────────────────────────────────────────────────────── */ /* GRID_CELL_SEL bg-primary/3 dark:bg-primary/20; the outline is border-foreground/40. */ html.dark .mk-undo .mk-undo-db-cell.is-selected { background: rgba(46, 46, 46, 0.2); } html.dark .mk-undo .mk-undo-db-cell.is-selected::after { border-color: rgba(250, 250, 250, 0.4); } /* The PDF page stays a white sheet in dark (pdf.js page, same shadow). Its ground is the pane's bg-card: the scroller has no background and the rpv viewer layers are transparent (index.css). */ html.dark .mk-undo .mk-undo-pdf { background: var(--app-card); } /* The native title tooltip in a dark-appearance window. */ html.dark .mk-undo .mk-undo-tip { background: #2a2a2a; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); } /* ── Container rules ──────────────────────────────────────────────────────── */ @container (max-width: 359.98px) { .app-mock.mk-undo { padding: 12px 10px 8px; } .mk-undo .mk-undo-assistant { display: none; } } /* ───── walkthrough ───── */ /* ========================================================================== "walkthrough" mock: card 4 of 6 of the intro walkthrough ("Find anything") pointing at the sidebar's Mission Control button (data-tour="command-palette"). Measured from the renderer source; colours are --app-* tokens, so dark follows base.css (as in the app, the dark ring and shadow are faint): - Ring WalkthroughHost fixed, the target's box + RING_PAD 4px, rounded-lg, ring-2 ring-primary ring-offset-2 ring-offset-background. No dimming scrim: the rest of the window stays live. - Card WalkthroughHost CARD_W 300, rounded-xl border bg-popover p-4 shadow-xl flex-col gap-2; title text-sm semibold leading-snug + X (p-1, 14px); body text-sm leading-relaxed muted; footer mt-1 gap-2: "4 of 6" text-xs tabular muted, Back px-2.5 py-1 text-xs muted, Next bg-primary px-3 py-1 text-xs medium - Place walkthrough.ts placeCard: right of the target (gap 12) when there is room (margin 16), centred on it and clamped to the margin; else below it. The brain button sits at x 123–147, y 8–32 of the window (sidebar 260, border 1, pr-2, five 24px buttons gap-0.5). ========================================================================== */ .app-mock.mk-walkthrough { --app-h: 380px; } /* The target lives in the sidebar, so keep it at every width (base.css hides it under 760px). The pane beside it narrows to whatever is left. */ .app-mock.mk-walkthrough .app-sidebar { display: flex; } .app-mock.mk-walkthrough .app-panes { padding-left: 8px; } .app-mock.mk-walkthrough .app-panes > .app-pane:first-child .app-tabs-strip { padding-left: 0; } /* ── Ring around the target ────────────────────────────────────────────── */ .mk-walkthrough .mk-walkthrough-target { position: relative; /* the ring is its own element; the button keeps its colour */ } .mk-walkthrough .mk-walkthrough-target::after { content: ''; position: absolute; inset: -4px; border-radius: var(--app-radius); box-shadow: 0 0 0 2px var(--app-background), 0 0 0 4px var(--app-primary); /* ring-offset-background, ring-primary */ pointer-events: none; } /* ── Note body behind the card ─────────────────────────────────────────── */ .mk-walkthrough .mk-walkthrough-doc { min-width: 260px; /* a narrow pane clips the note rather than rewrap it */ padding: 48px 40px 0; display: flex; flex-direction: column; gap: 16px; } .mk-walkthrough .mk-walkthrough-title { font-size: 24px; line-height: 32px; font-weight: 700; overflow-wrap: anywhere; } .mk-walkthrough .mk-walkthrough-text { font-size: 13px; line-height: 1.7; } /* ── Card ──────────────────────────────────────────────────────────────── */ .mk-walkthrough .mk-walkthrough-card { position: absolute; z-index: 30; left: 16px; /* placeCard "bottom": clamped to the margin */ top: 44px; /* target bottom 32 + gap 12 */ width: 300px; max-width: calc(100% - 20px); display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--app-popover); color: var(--app-fg); border: 1px solid var(--app-border); border-radius: var(--app-radius-xl); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .mk-walkthrough .mk-walkthrough-head { display: flex; align-items: flex-start; gap: 8px; } .mk-walkthrough .mk-walkthrough-card-title { flex: 1 1 auto; font-size: 14px; line-height: 1.375; font-weight: 600; } .mk-walkthrough .mk-walkthrough-close { flex: none; margin: -4px -4px 0 0; padding: 4px; display: inline-flex; border-radius: 4px; color: var(--app-muted-fg); } .mk-walkthrough .mk-walkthrough-close .i { width: 14px; height: 14px; } .mk-walkthrough .mk-walkthrough-body { font-size: 14px; line-height: 1.625; color: var(--app-muted-fg); } .mk-walkthrough .mk-walkthrough-foot { margin-top: 4px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; } .mk-walkthrough .mk-walkthrough-count { flex: 1 1 auto; font-variant-numeric: tabular-nums; color: var(--app-muted-fg); } .mk-walkthrough .mk-walkthrough-back { padding: 4px 10px; border-radius: var(--app-radius-md); color: var(--app-muted-fg); } .mk-walkthrough .mk-walkthrough-next { padding: 4px 12px; border-radius: var(--app-radius-md); background: var(--app-primary); color: var(--app-primary-fg); font-weight: 500; } /* Room to the right of the target (159 + 300 + 16): placeCard "right", centred on the target's middle (y 20) and clamped to the 16px margin. */ @container (min-width: 475px) { .mk-walkthrough .mk-walkthrough-card { left: 159px; top: 16px; } } /* Too narrow for a usable pane beside the 260px sidebar (and no room for the card on the right): the window is the sidebar alone. Its buttons stay right-aligned, so the ring follows; placeCard still puts the card below, clamped to the 16px margin. */ @container (max-width: 474.98px) { .app-mock.mk-walkthrough .app-sidebar { flex: 1 1 auto; width: auto; border-right: 0; } .app-mock.mk-walkthrough .app-panes { display: none; } } /* Concession: at the narrowest sizes keep both card margins at 16px (the app would clamp only the left) so the card and its shadow are not cut. */ @container (max-width: 339.98px) { .mk-walkthrough .mk-walkthrough-card { max-width: calc(100% - 32px); } }