/* docgen-rs theme — hand-authored, no bundler. * * Layout: sticky topbar + left sidebar doc tree + centered readable content + * a 3-section right rail. Dark is the DEFAULT theme (bare :root); * :root[data-theme='light'] overrides to the warm-paper light palette. A * pre-paint inline script in sets data-theme before first paint (no * flash); the docgenThemeToggle island persists the choice to localStorage. * * Code blocks are highlighted at build time by syntect's class-based output * (ClassStyle::Spaced). The token COLORS live in the separate code.css * (owned by STRUCTURE, theme-aware for both themes). This file styles only the * code CARD chrome (padding / border / radius / overflow) via tokens. */ /* ============================ design tokens ============================ */ :root { --bg: #0d0c0a; --bg-elev: #131210; --bg-soft: #ffffff08; --surface: #15140f; --surface-hi: #1c1b16; --border: #232220; --border-strong: #2d2b27; --hairline: #1d1c19; --text: #ecebe5; --text-dim: #a8a59a; --text-mute: #6f6d64; --text-error: #ff8a8a; --accent: oklch(0.78 0.13 75); --accent-soft: oklch(0.78 0.13 75 / 0.14); --accent-line: oklch(0.78 0.13 75 / 0.4); --warn: oklch(0.82 0.13 55); --warn-soft: oklch(0.82 0.13 55 / 0.12); --info: oklch(0.78 0.09 220); --info-soft: oklch(0.78 0.09 220 / 0.12); --talk: oklch(0.78 0.1 320); --talk-soft: oklch(0.78 0.1 320 / 0.12); --code-bg: #1a1814; --code-border: #262320; --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', 'JetBrains Mono', monospace; --font-serif: 'Times New Roman', serif; --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --left-rail-width: 264px; --right-rail-width: 238px; --topbar-height: 52px; font-family: var(--font-sans); background: var(--bg); color: var(--text); /* private diff tokens (not part of the canonical palette block) */ --diff-added: oklch(0.76 0.12 145); --diff-added-bg: oklch(0.76 0.12 145 / 0.09); --diff-removed: var(--text-error); --diff-removed-bg: oklch(0.67 0.16 25 / 0.1); --diff-modified: oklch(0.82 0.13 55); --diff-renamed: oklch(0.74 0.12 300); } :root[data-theme='light'] { --bg: #faf8f3; --bg-elev: #ffffff; --bg-soft: #00000005; --surface: #f4f1ea; --surface-hi: #ece8de; --border: #e2ddd0; --border-strong: #d5cfbf; --hairline: #e8e3d6; --text: #181712; --text-dim: #5f5d54; --text-mute: #918e83; --text-error: #dc2626; --accent: oklch(0.55 0.14 60); --accent-soft: oklch(0.55 0.14 60 / 0.1); --accent-line: oklch(0.55 0.14 60 / 0.3); --warn-soft: oklch(0.82 0.13 55 / 0.1); --info-soft: oklch(0.78 0.09 220 / 0.1); --talk-soft: oklch(0.78 0.1 320 / 0.1); --code-bg: #efebdf; --code-border: #ddd7c5; /* private diff tokens — light */ --diff-added: #1a7f37; --diff-added-bg: #e6ffec; --diff-removed: #cf222e; --diff-removed-bg: #ffebe9; --diff-modified: #9a6700; --diff-renamed: #8250df; } /* ============================== reset / base ============================== */ * { box-sizing: border-box; } /* Alpine cloak — ships here (not just dev) so x-show elements (e.g. the mobile sidebar backdrop) stay hidden until Alpine boots, preventing a flash. */ [x-cloak] { display: none !important; } /* skip-to-content — visually hidden until focused (WCAG 2.4.1 Bypass Blocks). */ .docgen-skip-link { position: fixed; top: 8px; left: 8px; z-index: 1100; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-elev); color: var(--text); font-size: 13px; font-weight: 600; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); transform: translateY(-150%); transition: transform 0.12s ease; } .docgen-skip-link:focus-visible { transform: none; } html { scroll-padding-top: calc(var(--topbar-height) + 18px); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input { font-family: inherit; } button { cursor: pointer; } a { color: var(--accent); text-decoration: none; } :focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent-soft); } kbd, .docgen-kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border); border-bottom-width: 2px; padding: 1px 5px 0; border-radius: 4px; line-height: 1.5; } /* custom scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { border: 2px solid var(--bg); border-radius: 999px; background: var(--border); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* ================================ topbar ================================ */ .docgen-topbar { position: sticky; top: 0; /* Above the mobile drawers (z-index 40) and their backdrop (35) so the drawers slide UNDER the topbar. On phones with an auto-hiding browser toolbar this keeps the topbar painted over the drawer as the viewport resizes, instead of the drawer riding up over the topbar. */ z-index: 60; grid-column: 1 / -1; display: grid; grid-template-columns: var(--left-rail-width) minmax(0, 1fr); height: var(--topbar-height); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); } .docgen-topbar__brand { display: flex; align-items: center; gap: 10px; height: var(--topbar-height); padding: 0 18px; color: var(--text); text-decoration: none; } .docgen-topbar__brand:hover { background: var(--bg-soft); } .docgen-brand-mark { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; } .docgen-brand-mark::before, .docgen-brand-mark::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--text); } .docgen-brand-mark::after { transform: rotate(45deg) scale(0.62); border-color: var(--accent); background: var(--accent); } .docgen-brand-name { font-size: 14px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docgen-topbar__main { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topbar-height); padding: 0 22px; min-width: 0; } /* centered search trigger pill */ .docgen-search-trigger { display: flex; align-items: center; gap: 10px; min-width: min(360px, 42vw); height: 32px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-dim); font-size: 13px; transition: border-color 0.12s, background 0.12s; } .docgen-search-trigger:hover { border-color: var(--border-strong); background: var(--surface-hi); } .docgen-search-trigger__icon { width: 15px; height: 15px; flex-shrink: 0; } .docgen-search-trigger__label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docgen-topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* segmented control strip (port of btn-strip.css) */ .docgen-btn-strip { display: inline-flex; align-items: stretch; height: 32px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); } .docgen-btn-strip > * { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 100%; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: var(--text-dim); text-decoration: none; font: inherit; font-size: 13px; box-shadow: none; } .docgen-btn-strip > .icon-only { padding: 0; } .docgen-btn-strip > *:first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); } .docgen-btn-strip > *:last-child { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); } .docgen-btn-strip > *:hover:not(:disabled):not([aria-disabled='true']) { background: var(--bg-soft); color: var(--text); } .docgen-btn-strip > .is-active, .docgen-btn-strip > [aria-pressed='true'] { background: var(--bg-soft); color: var(--text); } .docgen-btn-strip > * + * { border-left: 1px solid var(--border); } .docgen-btn-strip > *:disabled, .docgen-btn-strip > *[aria-disabled='true'] { opacity: 0.55; cursor: default; } .docgen-btn-strip svg { width: 15px; height: 15px; } /* theme toggle segmented pill (port of ThemeToggle.svelte) */ .docgen-theme-toggle { display: inline-flex; align-items: center; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .docgen-theme-toggle__btn { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-mute); transition: color 0.12s; } .docgen-theme-toggle__btn:hover { color: var(--text); } .docgen-theme-toggle__btn.is-active { background: var(--bg-elev); color: var(--text); box-shadow: 0 0 0 1px var(--border); } .docgen-theme-toggle__btn svg { width: 15px; height: 15px; } /* compact-only topbar icon buttons: nav hamburger (left), page-contents / rail toggle and overflow (⋯) menu (right). All hidden on desktop; the compact media query below reveals them. They share the same square icon-button chrome. */ .docgen-sidebar-toggle, .docgen-rail-toggle, .docgen-overflow-toggle { display: none; flex-shrink: 0; width: 34px; height: 32px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); } .docgen-sidebar-toggle:hover, .docgen-rail-toggle:hover, .docgen-overflow-toggle:hover { border-color: var(--border-strong); } .docgen-overflow-toggle[aria-expanded='true'], .docgen-rail-toggle[aria-expanded='true'] { background: var(--bg-soft); border-color: var(--border-strong); } .docgen-sidebar-backdrop, .docgen-rail-backdrop { display: none; } /* ================================ layout ================================ */ .docgen-layout { display: grid; grid-template-columns: var(--left-rail-width) 5px minmax(0, 1fr) var(--right-rail-width); align-items: start; /* No max-width / auto-margins: the sidebar and right rail are nailed to the viewport edges on wide screens. The readable measure is constrained by `.docgen-doc-content` (max-width) inside the content column instead, so only the page body gets horizontal breathing room — not the whole shell. */ } /* draggable sidebar resize handle (port of starter +layout .rail-resizer); occupies the 5px grid track between sidebar and content. layout.js drives it. */ .docgen-rail-resizer { position: sticky; top: var(--topbar-height); margin-left: -3px; height: calc(100vh - var(--topbar-height)); width: 5px; cursor: col-resize; background: transparent; touch-action: none; user-select: none; z-index: 5; } .docgen-rail-resizer::before { content: ''; position: absolute; left: 2px; top: 0; bottom: 0; width: 1px; background: var(--border); transition: background 0.12s, width 0.12s, left 0.12s; } .docgen-rail-resizer:hover::before, .docgen-rail-resizer.is-dragging::before { background: var(--accent); width: 2px; left: 1.5px; } .docgen-content { min-width: 0; padding: 40px 48px 96px; } .docgen-doc-content { max-width: 760px; margin: 0 auto; color: var(--text); font-size: 15px; line-height: 1.6; } /* full-width / rail-collapsed state flags (live on .docgen-app) */ .docgen-app.is-full-width .docgen-doc-content { max-width: none; } /* The desktop rail-collapse toggle only applies while the rail is an in-layout column. Below the compact flip (≤1100px) the rail is an off-canvas drawer, so these must NOT hide it — otherwise a user who collapsed the rail on desktop would find the mobile drawer stuck at display:none. */ @media (min-width: 1101px) { .docgen-app.is-rail-collapsed .docgen-rail { display: none; } .docgen-app.is-rail-collapsed .docgen-layout { grid-template-columns: var(--left-rail-width) 5px minmax(0, 1fr); } } /* =============================== sidebar =============================== */ .docgen-sidebar { position: sticky; top: var(--topbar-height); align-self: start; height: calc(100vh - var(--topbar-height)); overflow-y: auto; padding: 16px 12px; /* No border-right: the single separator line is the `.docgen-rail-resizer` hairline in the adjacent 5px track (avoids a double vertical line). The mobile drawer (≤768px) re-adds its own border-right below. */ } .docgen-sidebar__graph { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px 8px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-dim); font-size: 13px; transition: color 0.12s, border-color 0.12s; } .docgen-sidebar__graph:hover { color: var(--text); border-color: var(--border-strong); } /* doc tree (port of DocTree.svelte) */ .docgen-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .docgen-tree .docgen-tree { padding-left: 12px; margin-left: 7px; border-left: 1px solid var(--hairline); } .docgen-tree__details { margin: 0; } .docgen-tree__summary { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 26px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text-dim); font-size: 13.5px; cursor: pointer; list-style: none; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .docgen-tree__summary::-webkit-details-marker { display: none; } .docgen-tree__summary:hover { background: var(--surface); color: var(--text); } /* folder-note link: the folder label navigates to its `index.md`. Fills the summary so the click target matches a plain folder; the chevron still toggles. */ .docgen-tree__folder-link { flex: 1; min-width: 0; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docgen-tree__summary.is-active { background: var(--surface-hi); color: var(--text); } .docgen-tree__chev { width: 8px; height: 8px; flex-shrink: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.12s ease; opacity: 0.8; } .docgen-tree__details[open] > .docgen-tree__summary .docgen-tree__chev { transform: rotate(45deg); } .docgen-tree__item { position: relative; } .docgen-tree__link { display: flex; align-items: center; width: 100%; min-height: 26px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text-dim); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.1s, color 0.1s; } .docgen-tree__link:hover { background: var(--surface); color: var(--text); } .docgen-tree__item.is-active .docgen-tree__link { background: var(--surface-hi); color: var(--text); } .docgen-tree__item.is-active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent); } /* =============================== right rail =============================== */ .docgen-rail { position: sticky; top: calc(var(--topbar-height) + 32px); align-self: start; display: flex; flex-direction: column; gap: 26px; max-height: calc(100vh - var(--topbar-height) - 48px); overflow-y: auto; padding-left: 16px; padding-right: 16px; border-left: 1px solid var(--hairline); font-size: 12.5px; } .docgen-rail:empty { padding: 0; border: 0; } .docgen-rail__section { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .docgen-rail__section h2 { margin: 0; color: var(--text-mute); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } /* 1 — On this page (TOC scrollspy) */ .docgen-rail__toc { display: flex; flex-direction: column; gap: 2px; } .docgen-rail__toc-link { display: block; width: 100%; padding: 4px 0; border: 0; background: transparent; color: var(--text-mute); font: inherit; line-height: 1.4; text-align: left; cursor: pointer; } .docgen-rail__toc-link:hover { color: var(--text-dim); } .docgen-rail__toc-link.is-active { color: var(--accent); } .docgen-rail__toc-link.is-depth-3 { padding-left: 12px; font-size: 12px; } /* 2 — Additional info */ .docgen-rail__info { display: flex; flex-direction: column; gap: 7px; } .docgen-rail__info-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: baseline; color: var(--text-mute); } .docgen-rail__info-row a, .docgen-rail__info-row strong, .docgen-rail__info-row span { min-width: 0; overflow: hidden; color: var(--text-dim); font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; } /* 3 — Referenced by (backlink cards) */ .docgen-rail__backlinks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .docgen-rail__backlink { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-dim); text-decoration: none; transition: border-color 0.12s, color 0.12s; } .docgen-rail__backlink:hover { border-color: var(--accent-line); color: var(--text); } .docgen-rail__backlink small { color: var(--text-mute); font-size: 11px; line-height: 1.35; } /* ===================== doc page header (title + lede) ===================== */ /* Rendered on every non-home page from the frontmatter `title`/`description`. The body's own first `

` is hidden (below) so the title shows once, here. */ .docgen-doc-header { max-width: 760px; margin: 0 auto 32px; } .docgen-app.is-full-width .docgen-doc-header { max-width: none; } .docgen-doc-title { margin: 0; color: var(--text); font-size: 38px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; } .docgen-doc-lede { max-width: 60ch; margin: 12px 0 0; color: var(--text-dim); font-size: 17px; font-weight: 350; line-height: 1.55; } /* ============================ prose / content ============================ */ .docgen-doc-content h1, .docgen-doc-content h2, .docgen-doc-content h3, .docgen-doc-content h4 { color: var(--text); font-weight: 500; line-height: 1.25; scroll-margin-top: calc(var(--topbar-height) + 18px); } .docgen-doc-content h1 { font-size: 38px; letter-spacing: -0.025em; margin: 0 0 24px; } .docgen-doc-content h1:first-child { display: none; } .docgen-doc-content h2 { margin: 56px 0 16px; font-size: 22px; letter-spacing: -0.015em; } .docgen-doc-content h3 { margin: 36px 0 12px; font-size: 16px; letter-spacing: -0.005em; } .docgen-doc-content h4 { margin: 24px 0 10px; font-size: 14px; } .docgen-doc-content p { margin: 0 0 14px; } .docgen-doc-content img { max-width: 100%; height: auto; } .docgen-doc-content ul, .docgen-doc-content ol { margin: 0 0 18px; padding-left: 20px; } .docgen-doc-content li { margin: 6px 0; } .docgen-doc-content li::marker { color: var(--text-mute); } .docgen-doc-content a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); transition: border-color 0.12s; } .docgen-doc-content a:hover { border-bottom-color: var(--accent); } .docgen-doc-content hr { appearance: none; height: 1px; width: 100%; margin: 24px 0; border: 0; background: var(--hairline); } /* broken wikilink */ .docgen-wikilink--broken { color: var(--text-error); text-decoration: underline dotted; cursor: help; border-bottom: 0; } /* docgen-emitted error surface for broken/unknown directives — must read as an error, not ordinary prose, in both themes (tokens resolve light/dark). */ .docgen-directive-error { font-family: var(--font-mono); font-size: 0.9em; color: var(--text-error); background: var(--diff-removed-bg); border: 1px solid var(--diff-removed); border-radius: var(--r-xs); padding: 0 0.35em; } /* wikilink hover-preview tooltip. `fixed`, not `absolute`: wikilink.js positions it from getBoundingClientRect() (viewport coordinates) and clamps to window.innerWidth/Height, so it must be placed in the viewport coordinate system — otherwise on a scrolled page it lands `scrollY` px off from the link. */ .docgen-wikilink-tooltip { position: fixed; z-index: 60; max-width: 320px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-elev); color: var(--text-dim); font-size: 12.5px; line-height: 1.5; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); pointer-events: none; opacity: 0; transform: translateY(-2px); transition: opacity 90ms ease, transform 90ms ease; } .docgen-wikilink-tooltip.is-visible { opacity: 1; transform: translateY(0); } /* inline code — theme-aware */ .docgen-doc-content :not(pre) > code { padding: 1px 6px; border: 1px solid var(--code-border); border-radius: 4px; background: var(--code-bg); color: var(--text); font-family: var(--font-mono); font-size: 0.86em; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .docgen-doc-content h1 code, .docgen-doc-content h2 code, .docgen-doc-content h3 code, .docgen-doc-content h4 code { padding: 0 5px; font-size: 0.78em; overflow-wrap: normal; word-break: normal; vertical-align: 0.06em; } /* code CARD chrome only — token colors live in code.css (STRUCTURE). */ .docgen-doc-content pre { margin: 18px 0 24px; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--code-border); border-radius: var(--r-md); background: var(--code-bg); } .docgen-doc-content pre code { display: block; padding: 0; background: transparent; border: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; } /* task-list checkboxes (SVG-mask) */ .docgen-doc-content input[type='checkbox'] { appearance: none; -webkit-appearance: none; display: inline-grid; place-items: center; width: 14px; height: 14px; margin: 0 6px 0 0; padding: 0; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface); vertical-align: -2px; cursor: default; } .docgen-doc-content input[type='checkbox']:checked { border-color: var(--accent-line); background: var(--accent); } .docgen-doc-content input[type='checkbox']:checked::after { content: ''; width: 10px; height: 10px; background: var(--bg); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .docgen-doc-content li:has(> input[type='checkbox']) { list-style: none; margin-left: -18px; } /* tables — every table is wrapped at render time (tablepass.rs) in a `.docgen-table-scroll` div that owns the horizontal-scroll region and the block margin. The table itself uses `table-layout: auto` so columns size to their content (the width heuristic); a per-cell `min-width` floor keeps a short column from collapsing to a couple of characters. When the natural width exceeds the reading column the wrapper scrolls — on desktop and mobile alike — instead of squishing. */ .docgen-table-scroll { margin: 18px 0 24px; overflow-x: auto; /* clip the table's rounded corners to the scroll box */ border-radius: var(--r-sm); } .docgen-doc-content table { display: table; width: auto; min-width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: auto; border: 1px solid var(--border); border-radius: var(--r-sm); } .docgen-doc-content th, .docgen-doc-content td { padding: 7px 9px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; /* content-sizing floor: no column narrower than ~7em, so headers/values stay legible; long prose still wraps (the ceiling) rather than forcing a single column to dominate. `max-width` on a table-cell is not honored by browsers, so wrapping — not a cap — is what bounds a wide column. */ min-width: 7em; overflow-wrap: break-word; } .docgen-doc-content th:first-child, .docgen-doc-content td:first-child { border-left: 0; } .docgen-doc-content tr:last-child td { border-bottom: 0; } .docgen-doc-content th { background: var(--surface); color: var(--text); font-weight: 500; } /* blockquotes */ .docgen-doc-content blockquote { margin: 0 0 14px; padding: 2px 16px; border-left: 3px solid var(--accent-line); color: var(--text-dim); } /* ============================== callouts ============================== */ /* The callout component is fully styled by its own stylesheet, emitted as `components.css` (source: components/callout/style.css), which loads AFTER this file so its tokens resolve. The earlier legacy block here (a leftover blockquote-era `.docgen-callout` with a `strong:first-child` lead and `--todo/--warn/--info/--discussion` variants that the renderer never emits) was removed: it was dead for the typed `--warning/--note/--danger` classes the directive actually produces and only leaked conflicting flex layout. */ /* ============================== backlinks ============================== */ /* legacy in-content backlinks block (superseded by the rail's Referenced-by, kept for any page still emitting it). */ .docgen-backlinks { margin-top: 32px; border-top: 1px solid var(--hairline); padding-top: 16px; } .docgen-backlinks h2 { font-size: 16px; margin: 0 0 12px; } .docgen-backlinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .docgen-backlinks li a { display: block; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-dim); transition: border-color 0.12s, color 0.12s; } .docgen-backlinks li a:hover { border-color: var(--accent-line); color: var(--text); } .docgen-history-link { font-size: 13px; } /* ============================== search modal ============================== */ .docgen-search-modal[hidden] { display: none; } .docgen-search-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding-top: 12vh; } .docgen-search-backdrop { position: absolute; inset: 0; border: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); } .docgen-search-box { position: relative; z-index: 1; width: min(720px, 92vw); max-height: 74vh; display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--hairline); overflow: hidden; } .docgen-search-input { width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 15px; } .docgen-search-input::placeholder { color: var(--text-mute); } .docgen-search-input:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } .docgen-search-results { list-style: none; margin: 0; padding: 8px 8px 12px; overflow-y: auto; } .docgen-search-group { padding: 12px 12px 4px; color: var(--text-mute); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .docgen-search-empty { padding: 36px 18px; text-align: center; color: var(--text-mute); } .docgen-search-result a, .docgen-search-result button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-dim); text-align: left; font: inherit; } .docgen-search-result__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .docgen-search-result__title { color: var(--text); font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docgen-search-result__path { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docgen-search-result__snippet { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docgen-search-result mark { padding: 0 1px; border-radius: 2px; background: var(--accent-soft); color: var(--accent); } .docgen-search-result.is-selected { background: var(--surface-hi); } .docgen-search-result.is-selected a, .docgen-search-result.is-selected button { color: var(--text); } /* ============================ diff / history ============================ */ .docgen-history h1 { font-size: 38px; letter-spacing: -0.025em; margin: 0 0 24px; } .docgen-timeline-bucket { margin-bottom: 32px; } .docgen-timeline-bucket h2 { font-size: 16px; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin: 0 0 12px; } .docgen-commit { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); } .docgen-commit header { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .docgen-commit__hash { font-family: var(--font-mono); font-size: 13px; color: var(--text-mute); } .docgen-commit__subject { font-weight: 600; } .docgen-commit__author, .docgen-commit time { color: var(--text-mute); font-size: 13px; } .docgen-commit__stat { font-family: var(--font-mono); font-size: 13px; color: var(--text-mute); margin-left: auto; } .docgen-diff-file { margin-top: 12px; } .docgen-diff-file__path { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); margin-bottom: 4px; } .docgen-diff-file--added { color: var(--diff-added); } .docgen-diff-file--removed, .docgen-diff-file--deleted { color: var(--diff-removed); } .docgen-diff-file--modified { color: var(--diff-modified); } .docgen-diff-file--renamed { color: var(--diff-renamed); } .docgen-diff-hunk { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--code-border); border-radius: var(--r-sm); background: var(--code-bg); overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; } .docgen-diff-line { display: block; white-space: pre; } .docgen-diff-line--context { color: var(--text-dim); } .docgen-diff-line--added { background: var(--diff-added-bg); color: var(--diff-added); } .docgen-diff-line--removed { background: var(--diff-removed-bg); color: var(--diff-removed); } /* =============================== math =============================== */ .katex, .katex-display { color: var(--text); } .katex-display { margin: 1em 0; overflow-x: auto; overflow-y: hidden; } .docgen-math-error { color: var(--text-error); } /* ============================== mermaid ============================== */ .docgen-mermaid { position: relative; margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); } .docgen-mermaid::after { content: 'diagram · mermaid'; position: absolute; top: 8px; right: 12px; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); pointer-events: none; } .docgen-mermaid__out svg { max-width: 100%; height: auto; } .docgen-mermaid__error { color: var(--text-error); white-space: pre-wrap; } /* ============================== plantuml ============================== */ /* Build-time PlantUML: the SVG is inlined into the page. The container owns a horizontal-scroll region (diagrams can be wider than the reading column) and a corner label, mirroring the mermaid container. */ .docgen-plantuml { position: relative; margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow-x: auto; } .docgen-plantuml::after { content: 'diagram · plantuml'; position: absolute; top: 8px; right: 12px; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); pointer-events: none; } /* Leave the diagram at its intrinsic size and let the container scroll it. PlantUML sizes the root with an inline `style="width:..px;height:..px"`, which beats any stylesheet rule, and sets `preserveAspectRatio="none"`, which tells the SVG to stretch its content to fill whatever viewport it ends up with instead of scaling proportionally. So a `max-width: 100%` here capped the width of a wide diagram while the inline height stayed put, and the drawing came out distorted rather than merely smaller (a 1590x422 diagram rendered 726x422). Constraining either axis is unsafe while `preserveAspectRatio` is "none". */ .docgen-plantuml svg { max-width: none; } /* Detailed, visible failure block (server unreachable, syntax error, missing file, feature off). A full block — not the inline directive-error pill — so the detail text is readable. */ .docgen-plantuml-error { margin: 16px 0; padding: 12px 14px; font-family: var(--font-mono); font-size: 0.9em; color: var(--text-error); background: var(--diff-removed-bg); border: 1px solid var(--diff-removed); border-radius: var(--r-md); } .docgen-plantuml-error__id { color: var(--text-mute); margin-right: 0.4em; } .docgen-plantuml-error__reason { display: block; margin-top: 4px; white-space: pre-wrap; } /* =============================== bases =============================== */ /* Obsidian Bases (.base files + embedded ```base blocks) render at build time as static table/cards/list views. Tables reuse the shared `.docgen-table-scroll` wrapper and `.docgen-doc-content table` styling; the rules below add the view title, group rows, card/list layouts, and the failure block. */ .docgen-base { margin: 18px 0 24px; } .docgen-base-view { margin-bottom: 20px; } .docgen-base-view__title { font-size: 13px; font-weight: 500; color: var(--text-dim); margin: 0 0 8px; letter-spacing: -0.01em; } /* Grouping header row within a table. */ .docgen-base-table tr.docgen-base-group td { background: var(--surface-hi); color: var(--text-dim); font-weight: 500; font-size: 0.9em; } .docgen-base-table tfoot td { background: var(--surface); color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 0.9em; border-top: 1px solid var(--border-strong); } .docgen-base-empty { color: var(--text-mute); font-style: italic; } /* An unresolved note reference (a link with no matching page in the corpus). */ .docgen-base-link--unresolved { color: var(--text-mute); text-decoration: underline dotted; } .docgen-base-sep { color: var(--text-mute); } .docgen-base-check { color: var(--accent); } .docgen-base-check--off { color: var(--text-mute); } /* Cards view. */ .docgen-base-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .docgen-base-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); } .docgen-base-card__title { font-weight: 500; margin-bottom: 8px; } .docgen-base-card__fields { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 0.9em; } .docgen-base-card__fields dt { color: var(--text-mute); } .docgen-base-card__fields dd { margin: 0; color: var(--text); } /* Single-column card list — a card carries a full-width rendered body (e.g. release notes). One readable column instead of the tile grid, and the fields sit inline as a compact meta row above the prose. */ .docgen-base-cards--list { grid-template-columns: 1fr; gap: 14px; } .docgen-base-cards--list .docgen-base-card { padding: 16px 18px; } .docgen-base-cards--list .docgen-base-card__title { font-size: 1.15em; font-weight: 600; } .docgen-base-cards--list .docgen-base-card__fields { grid-template-columns: none; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; color: var(--text-dim); } .docgen-base-cards--list .docgen-base-card__fields dt { font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.04em; } /* The card body: rendered markdown. Reuse the prose rhythm but tighten the outer margins so it sits snugly inside the card. */ .docgen-base-card__body { border-top: 1px solid var(--border); padding-top: 12px; color: var(--text); line-height: 1.6; } .docgen-base-card__body > :first-child { margin-top: 0; } .docgen-base-card__body > :last-child { margin-bottom: 0; } /* List view. */ .docgen-base-list { margin: 0; padding-left: 18px; } .docgen-base-list li { margin: 2px 0; } /* Non-fatal filter parse warning (a malformed filter expression). */ .docgen-base-warning { margin: 6px 0; font-size: 0.85em; color: var(--warn); } /* Detailed, visible failure block for a malformed `.base` (YAML parse error) — a full block, mirroring the PlantUML error component. */ .docgen-base-error { margin: 16px 0; padding: 12px 14px; font-family: var(--font-mono); font-size: 0.9em; color: var(--text-error); background: var(--diff-removed-bg); border: 1px solid var(--diff-removed); border-radius: var(--r-md); } /* ---- Interactive controls (islands/bases.js enhances the static views) ---- All structure/classes come from the island's DOM contract (see bases.js). Everything is token-driven so light/dark themes are automatic. When JS is off none of these elements exist and the static view renders unchanged. */ /* The island toggles elements via the `hidden` attribute; the `display` rules below would otherwise beat the UA's `[hidden] { display: none }`. Keep this first so it covers every control, including ones added later. */ .docgen-base-controls[hidden], .docgen-base-controls [hidden], .docgen-base-pager[hidden] { display: none; } .docgen-base-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; } /* Shared field/input look. */ .docgen-base-controls input[type='search'], .docgen-base-controls input[type='date'], .docgen-base-controls input[type='number'], .docgen-base-controls select, .docgen-base-facet__button, .docgen-base-reset, .docgen-base-pager button { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 9px; line-height: 1.4; transition: border-color 0.12s ease, background 0.12s ease; } .docgen-base-controls input[type='search'] { min-width: 190px; flex: 0 1 240px; } .docgen-base-controls input[type='date'], .docgen-base-controls input[type='number'] { width: auto; max-width: 148px; } .docgen-base-controls input:hover, .docgen-base-controls select:hover, .docgen-base-facet__button:hover, .docgen-base-reset:hover, .docgen-base-pager button:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-hi); } .docgen-base-controls input:focus-visible, .docgen-base-controls select:focus-visible, .docgen-base-facet__button:focus-visible, .docgen-base-reset:focus-visible, .docgen-base-pager button:focus-visible, .docgen-base-sort-th:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; border-color: var(--accent); } /* Generic label+control wrapper (date/number ranges wrap two inputs). */ .docgen-base-field, .docgen-base-daterange, .docgen-base-numrange { display: inline-flex; align-items: center; gap: 5px; } .docgen-base-field__label { color: var(--text-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } /* Faceted-enum filter: a toggle button + a popover panel of checkboxes. */ .docgen-base-facet { position: relative; display: inline-flex; } .docgen-base-facet__button { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .docgen-base-facet__button[aria-expanded='true'] { border-color: var(--accent); background: var(--surface-hi); } .docgen-base-facet__badge { background: var(--accent-soft); color: var(--accent); border-radius: var(--r-xs); padding: 0 5px; font-size: 0.85em; font-variant-numeric: tabular-nums; } .docgen-base-facet__panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 180px; max-height: 280px; overflow-y: auto; padding: 6px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: 0 8px 24px -8px #00000073; display: flex; flex-direction: column; gap: 1px; } .docgen-base-facet__option { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; } .docgen-base-facet__option:hover { background: var(--surface-hi); } .docgen-base-facet__option input { accent-color: var(--accent); } .docgen-base-reset { cursor: pointer; color: var(--text-dim); } /* Result count — pushed to the trailing edge of the control bar. Uses --text-dim (not --text-mute) to clear the WCAG 4.5:1 contrast minimum in both themes, since this is the primary "your filter took effect" feedback. */ .docgen-base-status { margin-left: auto; color: var(--text-dim); font-size: 0.9em; font-variant-numeric: tabular-nums; } /* Separator between the two inputs of a date/number range (decorative). */ .docgen-base-range__sep { color: var(--text-mute); } /* Sortable table headers become buttons with an aria-sort caret. */ .docgen-base-sort-th { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; width: 100%; text-align: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } /* Direction caret — a real aria-hidden (set by the island), not ::after, so screen readers don't speak it over the authoritative aria-sort state. */ .docgen-base-sort-caret { opacity: 0.35; font-size: 0.85em; } .docgen-base-table th[aria-sort='ascending'] .docgen-base-sort-caret, .docgen-base-table th[aria-sort='descending'] .docgen-base-sort-caret { opacity: 1; color: var(--accent); } .docgen-base-sort-th:hover { color: var(--accent); } /* Pagination. */ .docgen-base-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; } .docgen-base-pager button { cursor: pointer; } .docgen-base-pager button:disabled { opacity: 0.45; cursor: default; } .docgen-base-pager__label { color: var(--text-dim); font-variant-numeric: tabular-nums; } /* The island hides filtered-out / off-page rows with the `hidden` attribute; make sure a `tr { display: table-row }`-style rule can't override it. */ .docgen-base-view [data-row][hidden], .docgen-base-view tr.docgen-base-group[hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .docgen-base-controls input, .docgen-base-controls select, .docgen-base-facet__button, .docgen-base-reset, .docgen-base-pager button { transition: none; } } /* =============================== graph =============================== */ .docgen-graph-page h1 { font-size: 38px; letter-spacing: -0.025em; margin: 0 0 8px; } .docgen-graph { position: relative; margin: 12px 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; } .docgen-graph__svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; } .docgen-graph__svg.docgen-graph--grabbing { cursor: grabbing; } .docgen-graph__meta { color: var(--text-mute); font-size: 13px; margin: 0 0 12px; } /* ===== home dashboard (hero + stats + search + sections + recent) ===== */ /* Ported from the original DocsIndexPage/home route. The outer page padding is supplied by `.docgen-content`, so this only lays out the dashboard internals. */ .docgen-home { display: grid; /* Explicit single column with a 0 minimum: without it, the implicit `auto` track sizes to the max-content of the children (a long Recent entry or wikilink title), blowing the dashboard past the content column and into the right rail. `minmax(0, 1fr)` clamps it to the available width. */ grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 8px; min-width: 0; } .docgen-home__head { display: grid; /* `minmax(0, …)` so a long title/subtitle can't force the track wider than the content column (see `.docgen-home`). */ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: end; padding-bottom: 26px; border-bottom: 1px solid var(--hairline); } .docgen-home__title { margin: 0 0 6px; color: var(--text); font-size: 42px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; } .docgen-home__sub { max-width: 52ch; margin: 0; color: var(--text-dim); font-size: 15.5px; } .docgen-home__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .docgen-home__stat { min-width: 0; padding-left: 14px; border-left: 1px solid var(--hairline); } .docgen-home__stat-num { overflow: hidden; color: var(--text); font-size: 24px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .docgen-home__stat-lbl, .docgen-home__col-title { color: var(--text-mute); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; } .docgen-home__stat-lbl { margin-top: 5px; } .docgen-home__search { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-dim); font: inherit; text-align: left; cursor: pointer; } .docgen-home__search:hover { border-color: var(--accent-line, var(--border-strong)); color: var(--text); } .docgen-home__search-ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docgen-home__search-hint { color: var(--text-mute); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; } .docgen-home__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; } .docgen-home__col-title { display: flex; justify-content: space-between; margin: 0 0 12px 2px; } .docgen-home__cards { display: grid; gap: 12px; } .docgen-home__card { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elev); color: inherit; text-decoration: none; } .docgen-home__card:hover { border-color: var(--border-strong); background: var(--surface-hi); } .docgen-home__card-title { color: var(--text); font-weight: 500; } .docgen-home__card-meta { color: var(--text-mute); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; } .docgen-home__card-meta b { color: var(--text-dim); font-family: var(--font-sans); font-size: 14px; } .docgen-home__recent { margin: 0; padding: 16px 18px 14px; list-style: none; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elev); } .docgen-home__recent li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--hairline); font-size: 13px; } .docgen-home__recent li:last-child { border-bottom: 0; } .docgen-home__recent-when { width: 96px; flex-shrink: 0; overflow: hidden; color: var(--text-mute); font-family: var(--font-mono); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; } .docgen-home__recent-what { flex: 1; min-width: 0; overflow: hidden; color: var(--text-dim); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .docgen-home__recent-what:hover { color: var(--text); } @media (max-width: 980px) { .docgen-home__head, .docgen-home__grid { grid-template-columns: 1fr; } } /* home-page graph embed (the original surfaces the doc graph on the home page) */ .docgen-home-graph { max-width: 760px; margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--hairline); } .docgen-home-graph__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .docgen-home-graph__head h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; } .docgen-home-graph__head .docgen-graph__meta { margin: 0; } /* the home graph follows the content measure unless full-width is on */ .docgen-app.is-full-width .docgen-home-graph { max-width: none; } .docgen-graph__links line { stroke: var(--text-mute); stroke-linecap: round; stroke-opacity: 0.42; stroke-width: 2.2; transition: stroke 0.16s, stroke-opacity 0.16s, stroke-width 0.16s; } .docgen-graph__links line.active { stroke: var(--accent); stroke-opacity: 0.92; stroke-width: 3; } /* Radius is set per-node on the SVG `r` attribute (degree-scaled, 6–14) — do NOT pin it here or every node collapses to one size. */ .docgen-graph__nodes circle { fill: var(--text-dim); stroke: var(--surface); stroke-width: 2.4; cursor: pointer; transition: fill 0.16s, opacity 0.16s, stroke 0.16s; } .docgen-graph__nodes circle.active, .docgen-graph__nodes a:hover circle, .docgen-graph__nodes a:focus-visible circle { fill: var(--accent); stroke: var(--text); } .docgen-graph__nodes circle.dimmed { opacity: 0.34; } /* hover tooltip (ported from the original HomeDocGraph .graph-tip) */ .docgen-graph__tip { position: absolute; z-index: 3; width: min(280px, calc(100% - 24px)); padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg-elev) 94%, transparent); box-shadow: 0 18px 48px #00000055; pointer-events: none; } .docgen-graph__tip[hidden] { display: none; } .docgen-graph__tip-title { color: var(--text); font-weight: 600; line-height: 1.25; } .docgen-graph__tip-path { margin-top: 5px; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; line-height: 1.4; word-break: break-all; } .docgen-graph__nodes a { text-decoration: none; } /* ============================== responsive ============================== */ /* One compact flip at ≤1100px turns the whole shell mobile: both rails become off-canvas drawers, and the topbar's layout buttons + theme toggle collapse into the ⋯ overflow menu. Above 1100px the desktop layout is untouched. A second pass at ≤600px tightens things for phones. */ @media (max-width: 1100px) { /* --- topbar: reveal the compact icon buttons, collapse the actions --- */ /* brand shrinks to its content so the nav hamburger (first child of __main) sits just left of the search field. */ .docgen-topbar { grid-template-columns: auto minmax(0, 1fr); } .docgen-topbar__main { gap: 8px; padding: 0 10px; } .docgen-search-trigger { min-width: 0; flex: 1; } .docgen-sidebar-toggle, .docgen-rail-toggle, .docgen-overflow-toggle { display: inline-grid; place-items: center; } /* the layout button strip + theme toggle relocate into a dropdown panel under the ⋯ button (no markup duplication — just position + visibility). */ .docgen-topbar__actions { position: absolute; top: calc(100% + 6px); right: 8px; z-index: 45; display: none; flex-direction: column; /* Left-align at intrinsic width: the button strip and theme toggle are fixed-width pills, so stretching them full-panel-width leaves their inner buttons stranded in dead space. Sizing the panel to its content (width: max-content) and letting each control keep its natural width reads as a tidy stack of pills instead. */ align-items: flex-start; gap: 10px; width: max-content; padding: 10px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-elev); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28); } .docgen-topbar__actions.is-menu-open { display: flex; } /* the desktop rail-collapse toggle is meaningless in compact (the rail is a drawer), so drop it from the menu. */ .docgen-ctl--rail { display: none; } /* --- both rails become off-canvas drawers --- */ .docgen-layout { grid-template-columns: 1fr; } /* the sidebar is a drawer now, so the inline drag handle no longer applies */ .docgen-rail-resizer { display: none; } .docgen-content { padding: 32px 28px 80px; } /* Both drawers anchor at the true viewport top (top:0) and take the full dynamic viewport height (100dvh, tracking a phone's auto-hiding toolbar), sliding UNDER the higher-z topbar. Their content clears the topbar with a padding-top, so the first row isn't hidden behind it. Anchoring at 0 with an explicit height — rather than top:var(--topbar-height)+bottom:0 — is what makes them reliably full-height (the rail has no base `height`, so the old top/bottom pair let it collapse to content height) and immune to the topbar shifting during a mobile toolbar show/hide. */ .docgen-sidebar, .docgen-rail { position: fixed; top: 0; height: 100vh; height: 100dvh; z-index: 40; background: var(--bg-elev); transition: transform 0.2s ease; } /* left drawer (doc tree) */ .docgen-sidebar { left: 0; width: min(86vw, 320px); padding-top: calc(var(--topbar-height) + 16px); border-right: 1px solid var(--border); transform: translateX(-100%); } .docgen-sidebar.is-open { transform: none; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); } /* right drawer (On this page / info / backlinks) */ .docgen-rail { right: 0; width: min(86vw, 340px); max-height: none; margin: 0; padding: calc(var(--topbar-height) + 20px) 18px 20px; border-left: 1px solid var(--border); overflow-y: auto; transform: translateX(100%); } .docgen-rail.is-open { transform: none; box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18); } /* one shared backdrop style for whichever drawer is open — full viewport, under the topbar (which paints over its top edge). */ .docgen-sidebar-backdrop, .docgen-rail-backdrop { display: block; position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 35; background: rgba(0, 0, 0, 0.4); } /* roomier touch targets in the tree */ .docgen-tree__summary, .docgen-tree__link { min-height: 36px; } } @media (max-width: 600px) { /* phone: reclaim the brand column for content, tighten padding + headings */ .docgen-topbar { grid-template-columns: 1fr; } .docgen-topbar__brand { display: none; } .docgen-content { padding: 24px 16px 64px; } .docgen-doc-title, .docgen-doc-content h1 { font-size: 30px; } .docgen-home__title { font-size: 32px; } } /* ============================ reduced motion ============================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }