/* ───────────────────────────────────────────────────────────────────── markdown.kuberscan.com — Anthropic-docs palette (matches kuberscan.com) ───────────────────────────────────────────────────────────────────── */ :root { --bg: #faf9f5; --surface: #ffffff; --surface-soft: #f3f1ec; --text: #181818; --text-soft: #2d2d2d; --text-muted: #6e6e6e; --text-faint: #8a8a8a; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.16); --accent: #cc785c; --accent-hover: #b6664a; --accent-soft: rgba(204, 120, 92, 0.12); --success: #2c7a3a; --error: #b3413a; --code-bg: #f3f1ec; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --nav-bg: rgba(250, 249, 245, 0.85); /* The brand dot needs to read clearly against the beige bg even at the small 15px nav font size. The body --accent is too muted at that scale; this slightly more saturated shade actually looks orange instead of just "dark dot". */ --brand-dot: #e8693c; } /* Dark theme. Activated when ; an early-load script in sets it before paint to prevent flash. */ [data-theme="dark"] { --bg: #1e1d1a; --surface: #262524; --surface-soft: #2e2d2b; --text: #efedea; --text-soft: #d9d6d2; --text-muted: #9b9893; --text-faint: #6e6b67; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --accent: #d98a6e; --accent-hover: #e8a087; --accent-soft: rgba(217, 138, 110, 0.16); --code-bg: #2e2d2b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --nav-bg: rgba(30, 29, 26, 0.85); /* Slightly lighter for the dark bg, but same saturated-orange vibe. */ --brand-dot: #e89171; } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } /* ── Top nav ─────────────────────────────────────────────────────── */ .nav { background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; } /* Wrapper that stacks the link + the small "Mermaid | PDF | Share" tagline. */ .nav-brand-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; flex: 1 1 auto; } .nav-tagline { font-size: 11.5px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.1; } .nav-brand { font-weight: 700; font-size: 15px; letter-spacing: -0.3px; color: var(--text); white-space: nowrap; line-height: 1.2; } .nav-brand:hover { color: var(--text); text-decoration: none; } .nav-brand .dot { color: var(--brand-dot); font-size: 1.1em; /* one-char accent reads stronger when slightly larger */ font-weight: 700; margin: 0 1px; } .nav-brand .domain { color: var(--text-muted); font-weight: 600; } .nav-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .nav-info { font-size: 12.5px; color: var(--text-muted); margin-right: 6px; } /* ── Buttons ─────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease, transform 0.1s ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-hover); color: #fff; text-decoration: none; } .btn-primary:active { transform: scale(0.98); } .btn-primary:disabled { opacity: 0.5; cursor: progress; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-soft); text-decoration: none; } .btn-ghost { background: transparent; color: var(--text-soft); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-soft); text-decoration: none; } .btn-small { padding: 4px 10px; font-size: 12px; } /* Toggle-style buttons (Sync scroll). is-active = currently on. */ .btn.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .btn.is-active:hover { background: var(--accent-soft); color: var(--accent); } /* Icon-only round button (theme toggle). */ .btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; } /* Theme icon swap. Sun shown in light mode, moon in dark mode. */ .theme-sun { display: inline; } .theme-moon { display: none; } [data-theme="dark"] .theme-sun { display: none; } [data-theme="dark"] .theme-moon { display: inline; } /* Visual separator inside the nav between button groups. */ .nav-divider { display: inline-block; width: 1px; height: 22px; background: var(--border-strong); margin: 0 2px; align-self: center; } /* ── Share banner (after Save) ───────────────────────────────────── */ .share-banner { background: rgba(204, 120, 92, 0.07); border-bottom: 1px solid var(--border); padding: 10px 18px; display: none; align-items: center; gap: 12px; font-size: 13.5px; flex-wrap: wrap; } .share-banner.is-open { display: flex; } .share-banner .label { font-weight: 600; color: var(--text); } .share-banner .url-pill { flex: 1; min-width: 240px; font-family: 'SF Mono', Menlo, Consolas, monospace; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text); font-size: 13px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .share-banner .expires { color: var(--text-muted); font-size: 12.5px; } .share-banner .close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; } .share-banner .close:hover { color: var(--text); } /* ── Editor: two-pane layout with draggable splitter ─────────────── */ /* Splitter-driven layout variables. ALL declared on :root so the editor.js setProperty(document.documentElement, ...) actually takes effect — element-scoped declarations would shadow it and the drag would silently no-op. (That was the v2.0 splitter bug.) --split web mode markdown pane width % of mainEl --sidebar-pct MarkView sidebar width % of mainEl --md-pct MarkView markdown pane width % of mainEl --splitter-size fixed pixel width of every splitter strip */ :root { --split: 50%; --sidebar-pct: 22%; --md-pct: 39%; /* 8px is a sweet spot: visible enough to know it's draggable, narrow enough not to eat real estate. 6px was technically grabbable but users were missing it. */ --splitter-size: 8px; } main.editor { flex: 1 1 auto; display: grid; grid-template-columns: var(--split) var(--splitter-size) 1fr; min-height: 0; /* Required for the children's overflow:auto to work. */ } /* MarkView desktop adds a sidebar (workspace pane) on the left. The three-pane layout is: [sidebar] [splitter-left] [markdown] [splitter] [preview] `--sidebar-pct` controls the leftmost; `--md-pct` controls the middle. The middle splitter writes to `--md-pct` (not `--split`) when the sidebar exists, so the two modes don't fight over one variable. IMPORTANT: do NOT redeclare these vars on this rule — that would create an element-scoped value that shadows the JS-set ones on :root. (Lesson learned the hard way in v2.0.) */ main.editor.editor-with-sidebar { grid-template-columns: var(--sidebar-pct) var(--splitter-size) var(--md-pct) var(--splitter-size) 1fr; } .pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; } /* No more border between panes — the splitter itself is the divider. */ .splitter { background: var(--border); position: relative; cursor: col-resize; user-select: none; touch-action: none; /* don't scroll while dragging on touch */ transition: background 0.12s ease; } .splitter:hover { background: var(--border-strong); } .splitter:focus { outline: none; background: var(--accent-soft); } .splitter.is-dragging { background: var(--accent-soft); } /* Centered grab-handle pip — vertical on desktop. */ .splitter::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 36px; border-radius: 3px; background: var(--text-muted); opacity: 0.35; transition: opacity 0.15s ease, background 0.15s ease; pointer-events: none; } .splitter:hover::before, .splitter:focus::before { opacity: 0.65; } .splitter.is-dragging::before { opacity: 1; background: var(--accent); } .pane-header { padding: 8px 14px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); background: var(--surface-soft); flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; } .pane-header .pane-meta { font-size: 11px; text-transform: none; letter-spacing: 0.2px; color: var(--text-faint); font-weight: 500; } #editor { flex: 1 1 auto; border: none; outline: none; resize: none; padding: 22px 26px; background: var(--bg); color: var(--text); font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 14px; line-height: 1.7; tab-size: 2; -webkit-tab-size: 2; -moz-tab-size: 2; } #editor::placeholder { color: var(--text-faint); } #preview { flex: 1 1 auto; overflow-y: auto; padding: 22px 28px 60px; background: var(--surface); /* Explicitly allow text selection. Browsers default to this for non-form content, but WKWebView (the engine the MarkView desktop bundle uses via pywebview) treats container
s as non- selectable unless told otherwise. Force it on every descendant so the user can highlight + copy any rendered content. */ user-select: text; -webkit-user-select: text; cursor: auto; } #preview * { user-select: text; -webkit-user-select: text; } /* Markdown-rendered preview content. Mirrors kuberscan.com .prose. */ #preview h1, #preview h2, #preview h3, #preview h4 { color: var(--text); letter-spacing: -0.4px; margin: 1.8em 0 0.5em; line-height: 1.25; } #preview h1 { font-size: 1.9em; margin-top: 0; } #preview h2 { font-size: 1.5em; padding-top: 0.3em; border-top: 1px solid var(--border); } #preview h3 { font-size: 1.22em; } #preview h4 { font-size: 1.05em; } #preview p, #preview ul, #preview ol, #preview blockquote, #preview pre, #preview table { margin-bottom: 1em; color: var(--text-soft); } #preview ul, #preview ol { padding-left: 1.4em; } #preview li { margin-bottom: 0.25em; } #preview blockquote { border-left: 3px solid var(--accent); padding: 0.2em 1em; color: var(--text-muted); background: var(--surface-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } #preview code { background: var(--code-bg); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; color: var(--text); } #preview pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; font-size: 13px; } #preview pre code { background: none; padding: 0; } #preview img { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); } #preview table { width: 100%; border-collapse: collapse; font-size: 14px; } #preview th, #preview td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); } #preview th { background: var(--surface-soft); font-weight: 600; } #preview hr { border: none; border-top: 1px solid var(--border); margin: 1.8em 0; } #preview a { color: var(--accent); font-weight: 500; } #preview .empty { color: var(--text-faint); font-style: italic; padding: 40px 0; text-align: center; } /* ── Workspace sidebar (MarkView desktop only) ────────────────────── */ .sidebar { /* No border-right: the splitter-left between sidebar and editor IS the divider. Having both made the 1px sidebar border look like the draggable line, but it isn't — users were trying to drag it and wondering why the pane didn't resize. */ background: var(--surface); } .sidebar .pane-header { /* a tighter header so the action buttons fit */ padding-right: 8px; } .sidebar-actions { display: inline-flex; gap: 4px; align-items: center; } .sidebar-action-btn { background: none; border: 1px solid transparent; color: var(--text-muted); font-family: inherit; cursor: pointer; padding: 3px; border-radius: var(--radius-sm); line-height: 0; /* keep button height pinned to the SVG height */ transition: background 0.12s ease, color 0.12s ease; display: inline-flex; align-items: center; justify-content: center; } .sidebar-action-btn:hover { background: var(--surface-soft); color: var(--text); } .sidebar-action-btn svg { display: block; /* drop the inline-baseline gap */ } .sidebar-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 4px 16px; font-size: 13px; } .sidebar-empty { padding: 18px 14px; color: var(--text-faint); font-style: italic; text-align: center; } /* Tree rows: Obsidian-style minimal layout. Each row is just a chevron (SVG, only visible on folders) + name. Indentation is handled by .tree-children's margin-left + border-left, which doubles as the vertical guide line you see in Obsidian. No per-row depth padding — the visual depth comes from the nested DOM. */ .tree-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px; cursor: pointer; border-radius: var(--radius-sm); user-select: none; -webkit-user-select: none; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tree-row:hover { background: var(--surface-soft); } .tree-row.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .tree-row.is-drop-target { outline: 1px solid var(--accent); outline-offset: -1px; background: var(--accent-soft); } .tree-row.is-dragging { opacity: 0.4; } /* SVG chevron, points right when closed, rotates 90° to point down when the folder is open. Notes (leaves) hide the chevron entirely but keep its slot so names stay vertically aligned with folders' names at the same depth. */ .tree-chevron { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-faint); transition: transform 0.12s ease; } .tree-row.is-open > .tree-chevron { transform: rotate(90deg); } .tree-row.tree-leaf > .tree-chevron { visibility: hidden; } .tree-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } /* Inline-rename mode: the name span becomes contenteditable. Visual chrome makes it obvious you're editing in place, with a tiny accent outline and the active-row background lifted to var(--surface) so text contrast stays good against the accent. */ .tree-name[contenteditable="true"] { outline: 1.5px solid var(--accent); outline-offset: 2px; background: var(--surface); color: var(--text); font-weight: 400; border-radius: 3px; padding: 0 4px; margin: 0 -4px; cursor: text; user-select: text; -webkit-user-select: text; white-space: nowrap; overflow: visible; /* let the caret + selection extend past the cell */ } .tree-row.is-renaming { background: var(--surface-soft); } .tree-row.is-renaming.is-active { /* Don't keep the accent-soft tint underneath the editable span; the outline + surface bg already say "active". */ background: var(--surface-soft); color: var(--text); } /* Nested children: indent + vertical guide line. The margin-left pushes the children block right so the border-left sits roughly under the parent's chevron. */ .tree-children { margin-left: 12px; padding-left: 4px; border-left: 1px solid var(--border); } /* Right-click context menu over the sidebar tree. */ .ctx-menu { position: fixed; z-index: 250; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 4px; font-size: 13px; list-style: none; margin: 0; min-width: 160px; } .ctx-menu[hidden] { display: none; } .ctx-menu li { padding: 6px 12px; cursor: pointer; border-radius: var(--radius-sm); color: var(--text-soft); } .ctx-menu li:hover { background: var(--surface-soft); color: var(--text); } .ctx-menu li.ctx-danger { color: var(--error); } .ctx-menu li.ctx-danger:hover { background: rgba(179, 65, 58, 0.08); } .ctx-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; } /* Sort dropdown: same chrome as ctx-menu but more compact — font size matches the tree row text (13px) and rows have a leading checkmark column so the active option reads at a glance. */ #sortMenu { font-size: 13px; min-width: 0; padding: 3px; } #sortMenu li { display: flex; align-items: center; gap: 6px; padding: 3px 10px; line-height: 1.4; } #sortMenu hr { margin: 3px 0; } #sortMenu .sort-check { width: 10px; flex-shrink: 0; color: var(--accent); font-weight: 700; text-align: center; } #sortMenu .sort-label { flex: 1 1 auto; white-space: nowrap; } /* The leftmost splitter (between sidebar and editor) uses the same .splitter visuals. Just here for clarity. */ .splitter-left { /* nothing extra */ } /* ── Import-from-URL floating panel ────────────────────────────── */ /* Anchored under the Import button by editor.js. Same chrome as the share banner but a single row, focus-trapped to the input. */ .import-panel { position: fixed; z-index: 250; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 8px; display: flex; gap: 6px; align-items: center; min-width: 380px; max-width: 600px; } .import-panel[hidden] { display: none; } .import-panel input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; background: var(--bg); color: var(--text); outline: none; } .import-panel input[type="text"]:focus { border-color: var(--accent); } /* "URL / GitHub" hint chip before the input. Tells users at a glance that both source types work without making it a separate label. */ .import-source-tag { display: inline-flex; align-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; white-space: nowrap; flex-shrink: 0; user-select: none; } /* ── EN/VN language toggle button ───────────────────────────────── */ /* The toggle shows current language as 2-letter text instead of an icon — easier to scan than a flag, plays nicely with macOS accessibility, and works in monochrome PDFs. */ .btn-lang { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; font-family: inherit; } /* ── Vault picker dialog ─────────────────────────────────────────── */ .vault-setup-dialog { max-width: 520px; text-align: left; } .vault-setup-dialog > p { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 6px 0 14px; } .vault-default-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; cursor: pointer; user-select: none; } .vault-default-toggle input[type="checkbox"] { accent-color: var(--accent); } .vault-path-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } .vault-path-row input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; outline: none; } .vault-path-row input[type="text"]:focus { border-color: var(--accent); } .vault-path-row input[type="text"]:read-only { background: var(--surface-soft); color: var(--text-muted); } .vault-error { color: var(--error); font-size: 12.5px; margin: 6px 0 10px; } /* Vault section inside the Settings dialog. */ .settings-vault-row { font-size: 12.5px; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 4px; } .settings-vault-label { color: var(--text-muted); } .settings-vault-path { display: block; background: var(--surface-soft); padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11.5px; word-break: break-all; color: var(--text-soft); } /* ── Update-available dialog (shown on launch + from Settings) ───── */ .update-dialog { max-width: 460px; text-align: center; } .update-dialog #updateMessage { font-size: 14px; color: var(--text-soft); margin: 10px 0 18px; line-height: 1.5; } .update-dialog #updateMessage strong { color: var(--accent); font-weight: 700; } .update-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 6px; } .update-buttons .btn { min-width: 120px; justify-content: center; } /* `[hidden]` is supposed to imply `display: none`, but the rule above gives .update-buttons an explicit `display: flex` which wins the cascade. Without this override the buttons stayed visible (and clickable!) after "Update Now" — the user could click Update again mid-install. Explicit > implicit here. */ .update-buttons[hidden] { display: none; } .update-status { font-size: 13.5px; color: var(--text-muted); padding: 14px 8px; /* match the height of the button row so the layout doesn't jump when we swap them */ min-height: 42px; display: flex; align-items: center; justify-content: center; } .update-status[hidden] { display: none; } /* "Check for updates" button inside the Settings dialog reads as a tiny secondary action next to the version string. */ #settingsVersion + .btn { margin-left: 10px; } /* ── Settings dialog (extends the existing export-overlay/dialog) ─── */ .settings-dialog { max-width: 460px; text-align: left; } .settings-section { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .settings-section:last-of-type { border-bottom: none; margin-bottom: 6px; } .settings-section h4 { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; } .settings-radio-group { display: flex; flex-direction: column; gap: 6px; } .settings-radio { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; color: var(--text); transition: background 0.12s ease, border-color 0.12s ease; } .settings-radio:hover { background: var(--surface-soft); } .settings-radio input[type="radio"] { accent-color: var(--accent); cursor: pointer; } .settings-radio:has(input[type="radio"]:checked) { border-color: var(--accent); background: var(--accent-soft); } .settings-dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; row-gap: 6px; font-size: 13px; margin: 0; } .settings-dl dt { color: var(--text-muted); font-weight: 600; } .settings-dl dd { margin: 0; color: var(--text); } .settings-dl a { color: var(--accent); } /* ── Mobile bar (hidden on desktop, shown ≤760 px) ──────────────── */ .nav-mobile-bar { display: none; gap: 8px; align-items: center; } .nav-toggle { font-size: 18px; line-height: 1; } .nav-mobile-save { padding: 6px 14px; font-size: 13px; } /* ── Mobile: stack panes vertically + collapse toolbar ──────────── */ @media (max-width: 760px) { /* On phones we stack vertically — split applies to row height instead. */ main.editor { grid-template-columns: 1fr; grid-template-rows: var(--split) var(--splitter-size) 1fr; } /* MarkView's three-column layout doesn't fit on a phone — collapse to the two-pane (markdown / preview) layout and hide the sidebar + its splitter entirely. The sidebar isn't very usable on a phone anyway. */ main.editor.editor-with-sidebar { grid-template-columns: 1fr; grid-template-rows: var(--split) var(--splitter-size) 1fr; } main.editor.editor-with-sidebar > .sidebar, main.editor.editor-with-sidebar > .splitter-left { display: none; } /* Splitter becomes a horizontal bar between top + bottom panes. */ .splitter { cursor: row-resize; } .splitter::before { width: 36px; height: 3px; } /* Nav becomes the anchor for the dropdown. */ .nav { position: relative; padding: 10px 14px; gap: 8px; } /* Keep the full domain "markdown.kuberscan.com" visible. Let the brand shrink rather than wrap if width is tight; the mobile bar stays fixed in size. */ .nav-brand { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-tagline { font-size: 10.5px; letter-spacing: 0.3px; } /* Show the mobile-only theme/save/hamburger bar. */ .nav-mobile-bar { display: inline-flex; flex-shrink: 0; } /* The dropdown's own theme button is redundant — the mobile bar has one. */ .nav-actions #themeBtn { display: none; } /* Hide the rest of the toolbar by default; reveal via .is-open. */ .nav-actions { display: none; position: absolute; top: 100%; right: 8px; left: 8px; margin-top: 6px; z-index: 30; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); } .nav-actions.is-open { display: flex; } /* Stretch buttons in the dropdown and left-align labels. */ .nav-actions .btn { width: 100%; justify-content: flex-start; padding: 10px 14px; font-size: 14px; } .nav-actions .btn-icon { width: auto; border-radius: var(--radius-sm); } /* The inline Save & share inside the dropdown is redundant since the mobile bar already has one — hide it to keep the menu tidy. */ .nav-actions #saveBtn { display: none; } /* Hide the desktop divider; the dropdown has its own visual grouping. */ .nav-divider { display: none; } .nav-info { display: none; } } /* ── Errors ──────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 100px 24px 60px; color: var(--text-muted); } .empty-state h1 { color: var(--text); margin-bottom: 12px; font-size: 28px; letter-spacing: -0.5px; } .empty-state p { font-size: 15px; margin-bottom: 8px; } .empty-state .actions { margin-top: 24px; display: flex; gap: 10px; justify-content: center; } /* ── Toasts (download confirmation, errors) ──────────────────────── */ .toast-stack { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; } .toast { background: var(--text); color: var(--surface); padding: 10px 16px; border-radius: var(--radius); font-size: 13.5px; box-shadow: var(--shadow-md); pointer-events: auto; animation: toast-in 0.18s ease; } .toast.error { background: var(--error); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Highlight.js theme — small overrides to match the palette ───── */ .hljs { background: var(--code-bg); color: var(--text); } .hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--accent); } .hljs-string, .hljs-attr { color: #6a4a2c; } .hljs-comment { color: var(--text-faint); font-style: italic; } .hljs-number, .hljs-literal { color: #8b5e34; } [data-theme="dark"] .hljs-string, [data-theme="dark"] .hljs-attr { color: #c19075; } [data-theme="dark"] .hljs-number, [data-theme="dark"] .hljs-literal { color: #c69774; } /* ── Mermaid diagrams ─────────────────────────────────────────────── Before mermaid.run() processes them, blocks render as a muted code- like placeholder. Once mermaid attaches data-processed="true", they become a centered SVG with light decoration. */ #preview pre.mermaid { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 1em 0; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; color: var(--text-muted); overflow-x: auto; white-space: pre; } #preview pre.mermaid[data-processed="true"] { background: transparent; border-color: var(--border); padding: 16px; font-family: inherit; font-size: inherit; color: inherit; white-space: normal; text-align: center; } #preview pre.mermaid[data-processed="true"] svg { max-width: 100%; height: auto; } /* ── Export-PDF chooser dialog (modal overlay) ───────────────────── */ .export-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; } [data-theme="dark"] .export-overlay { background: rgba(0, 0, 0, 0.6); } .export-overlay[hidden] { display: none; } .export-dialog { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 22px 22px 14px; max-width: 480px; width: 100%; box-shadow: var(--shadow-md); } .export-dialog h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 4px; color: var(--text); } .export-dialog > p { color: var(--text-muted); font-size: 13.5px; margin-bottom: 16px; } .export-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; } @media (max-width: 480px) { .export-options { grid-template-columns: 1fr; } } .export-option { text-align: left; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 4px; color: var(--text); transition: border-color 0.12s ease, background 0.12s ease, transform 0.1s ease; } .export-option:hover { border-color: var(--accent); background: var(--surface-soft); } .export-option:active { transform: scale(0.98); } .export-option-primary { border-color: var(--accent); background: var(--accent-soft); } .export-option-primary:hover { background: var(--accent-soft); } .export-option-title { font-weight: 700; font-size: 14.5px; } .export-option-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; } .export-cancel { background: none; border: none; color: var(--text-muted); cursor: pointer; width: 100%; padding: 10px; font-family: inherit; font-size: 13.5px; } .export-cancel:hover { color: var(--text); } /* ── Print stylesheet ───────────────────────────────────────────── Two modes selected by a body class set just before window.print(): body.print-styled ← preserve the live preview exactly (light or dark theme passes through) body.print-default ← pure black & white, including mermaid diagrams If neither class is set (e.g. someone uses the browser's File→Print menu directly), the Default rules apply via the `body:not(.print-styled)` fallback selector. */ @media print { @page { margin: 16mm; } /* Common: hide every UI chrome. */ .no-print, .nav, .share-banner, .pane-header, .toast-stack, .export-overlay { display: none !important; } /* Common: lay out the preview pane as a flat document. */ main.editor { display: block !important; grid-template-columns: none !important; grid-template-rows: none !important; } .pane:first-child { display: none !important; } .pane + .pane { border-left: none !important; border-top: none !important; } #preview { overflow: visible !important; padding: 0 !important; } /* Common: avoid awkward mid-block page breaks. */ #preview h1, #preview h2, #preview h3 { page-break-after: avoid; break-after: avoid; } #preview pre, #preview blockquote, #preview table { page-break-inside: avoid; break-inside: avoid; } /* Mermaid diagrams: keep the whole chart on a single page. - page-break-inside / break-inside: avoid → never split a chart across two pages (which used to cause overlapping text). - max-height on the 
 + SVG → if the chart is taller than a
         page, scale it down via the SVG's viewBox so it still fits
         instead of being clipped or pushed onto a blank trailing page.
       - vh units in print resolve to the page height, so 92vh leaves a
         small safety margin under the page's top/bottom @page margin.
     Combined with the heading's page-break-after:avoid above, a chart
     that follows a header will move to a new page together with that
     header instead of being orphaned. */
  #preview pre.mermaid {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    max-height: 92vh !important;
    overflow: hidden !important;
    text-align: center !important;
    padding: 8px 0 !important;
    margin: 0.6em 0 !important;
  }
  #preview pre.mermaid svg {
    max-width: 100% !important;
    max-height: 88vh !important;
    width: auto !important;
    height: auto !important;
  }
  /* Discourage a page break landing right between a heading and the
     mermaid chart that follows it — keep them together when possible. */
  #preview h1 + pre.mermaid,
  #preview h2 + pre.mermaid,
  #preview h3 + pre.mermaid,
  #preview h4 + pre.mermaid,
  #preview h5 + pre.mermaid,
  #preview h6 + pre.mermaid {
    page-break-before: avoid !important;
    break-before: avoid !important;
  }

  /* ── Mode: Default (pure B&W) ───────────────────────────────────
     Also the fallback when no mode class is set (browser File→Print).
     Pure white background, black text, white code-block background,
     and any mermaid diagrams / images are forced to grayscale so the
     whole PDF prints as black & white regardless of whether the user
     was viewing the editor in dark or light mode.

     The element-by-element selectors (rather than `*`) keep SVG
     descendants untouched so mermaid's own text fills aren't
     overridden into invisible same-color-as-background paint. */
  body:not(.print-styled) {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-scheme: light !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  body:not(.print-styled) #preview {
    background: #ffffff !important;
    color: #000000 !important;
  }
  body:not(.print-styled) #preview p,
  body:not(.print-styled) #preview h1,
  body:not(.print-styled) #preview h2,
  body:not(.print-styled) #preview h3,
  body:not(.print-styled) #preview h4,
  body:not(.print-styled) #preview h5,
  body:not(.print-styled) #preview h6,
  body:not(.print-styled) #preview ul,
  body:not(.print-styled) #preview ol,
  body:not(.print-styled) #preview li,
  body:not(.print-styled) #preview td,
  body:not(.print-styled) #preview th,
  body:not(.print-styled) #preview blockquote,
  body:not(.print-styled) #preview pre,
  body:not(.print-styled) #preview code,
  body:not(.print-styled) #preview .hljs,
  body:not(.print-styled) #preview [class*="hljs-"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
  }
  body:not(.print-styled) #preview a {
    color: #000000 !important;
    text-decoration: underline;
  }
  body:not(.print-styled) #preview a::after { content: "" !important; }
  body:not(.print-styled) #preview pre {
    border: 1px solid #cccccc !important;
  }
  body:not(.print-styled) #preview blockquote {
    border-left: 3px solid #000000 !important;
  }
  /* Grayscale mermaid diagrams + any embedded images so the Default
     PDF is genuinely black & white. The diagrams are also re-rendered
     with mermaid's "neutral" theme via JS before window.print() so
     this filter applies to an already-B&W-ish SVG, not a colored one. */
  body:not(.print-styled) #preview img,
  body:not(.print-styled) #preview pre.mermaid svg {
    filter: grayscale(100%) contrast(1.05) !important;
  }

  /* ── Mode: Styled — keep the light-theme preview look ───────────
     Both export modes produce a light-themed PDF: this one preserves
     the live preview's colors (accent links, syntax-highlighted code,
     colored mermaid). Variables are re-declared with the light palette
     so a dark-mode UI doesn't bleed through. print-color-adjust:exact
     preserves background colors even when "Background graphics" is
     off in the print dialog. */
  body.print-styled {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-scheme: light !important;
    --bg: #faf9f5;
    --surface: #ffffff;
    --surface-soft: #f3f1ec;
    --text: #181818;
    --text-soft: #2d2d2d;
    --text-muted: #6e6e6e;
    --text-faint: #8a8a8a;
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.16);
    --accent: #cc785c;
    --code-bg: #f3f1ec;
    background: #faf9f5 !important;
    color: #181818 !important;
  }
  body.print-styled #preview {
    background: #ffffff !important;
    color: #181818 !important;
  }
  /* Force the light-mode highlight.js colors so syntax stays readable
     on white paper, overriding any dark-theme rules. */
  body.print-styled .hljs-keyword,
  body.print-styled .hljs-selector-tag,
  body.print-styled .hljs-built_in { color: #cc785c !important; }
  body.print-styled .hljs-string,
  body.print-styled .hljs-attr     { color: #6a4a2c !important; }
  body.print-styled .hljs-number,
  body.print-styled .hljs-literal  { color: #8b5e34 !important; }
  body.print-styled .hljs-comment  { color: #8a8a8a !important; font-style: italic; }
}