/* ============================================================================ DeepDive · unified page chrome ---------------------------------------------------------------------------- Injected by scripts/deepdive/inject_chrome.py into every article, regardless of which design generation the article was authored in (v1 paper/ink, v2 dark tokens, or bespoke one-offs). HARD RULES 1. Every selector is scoped under a .dd-* chrome class. Nothing here may leak into article body styles. 2. Every colour is `var(--token, fallback)`. 58 of the article files never load colors_and_type.css, so the fallback must be legible on BOTH a dark ink background and a light paper background. Fallbacks are therefore mid-tone warm greys / translucent neutrals that read either way. 3. No JavaScript is required for anything in here. The revision-diff mode switch is a pure-CSS checkbox toggle. ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ /* Local aliases so every rule below reads cleanly. Declared on the chrome roots only (never on :root) so nothing is inherited by article content. */ .dd-topbar, .dd-endmatter { --ddc-fg: var(--fg, currentColor); --ddc-mute: var(--fg-mute, #8a8276); --ddc-dim: var(--fg-dim, #9d958a); --ddc-accent: var(--accent, #c2603f); --ddc-line: var(--line, rgba(140, 132, 120, 0.30)); --ddc-line-hi: var(--line-bright, rgba(140, 132, 120, 0.55)); --ddc-surface: var(--bg-2, rgba(140, 132, 120, 0.10)); --ddc-surface-2: var(--bg-3, rgba(140, 132, 120, 0.16)); --ddc-mono: var(--mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace); --ddc-sans: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif); --ddc-serif: var(--serif, "EB Garamond", Georgia, "Noto Serif SC", "Songti SC", serif); } /* CJK is never italic; several legacy articles set body{font-style:italic} inside scoped blocks, so we assert normal on the whole chrome subtree. */ .dd-topbar, .dd-topbar *, .dd-endmatter, .dd-endmatter * { font-style: normal; font-synthesis-style: none; } /* --------------------------------------------------------- skip to main -- */ .dd-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 10px 16px; font-family: var(--ddc-mono, monospace); font-size: 12px; letter-spacing: 0.08em; text-decoration: none; color: var(--fg, #f0ece4); background: var(--accent, #c2603f); } .dd-skip:focus, .dd-skip:focus-visible { left: 8px; top: 8px; outline: 2px solid var(--accent, #c2603f); outline-offset: 2px; } /* ----------------------------------------------- visually hidden control -- */ /* The revision-mode checkbox lives at the very top of so that both the :has() rule and the sibling-combinator fallback can reach the article body. It stays focusable (label is far away in the endmatter) but takes no space. */ .dd-vis { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; appearance: none; border: 0; } /* ================================================================ TOPBAR == */ .dd-topbar { position: sticky; top: 0; z-index: 90; box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; width: 100%; padding: 9px 20px; font-family: var(--ddc-mono, monospace); font-size: 11px; line-height: 1.5; letter-spacing: 0.06em; color: var(--ddc-mute); background: var(--ddc-surface); border-bottom: 1px solid var(--ddc-line); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); } .dd-topbar a { text-decoration: none; color: inherit; } .dd-back { font-weight: 500; color: var(--ddc-fg) !important; white-space: nowrap; transition: color 0.15s ease; } .dd-back:hover { color: var(--ddc-accent) !important; } .dd-bc { color: var(--ddc-mute); white-space: nowrap; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } a.dd-bc:hover { color: var(--ddc-accent); border-bottom-color: var(--ddc-accent); } .dd-sp { opacity: 0.45; } .dd-date { font-variant-numeric: tabular-nums; color: var(--ddc-mute); white-space: nowrap; } .dd-upd-badge { padding: 2px 7px; font-size: 10px; letter-spacing: 0.1em; white-space: nowrap; color: var(--ddc-accent); border: 1px solid var(--ddc-accent); opacity: 0.85; } .dd-right { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .dd-lang { padding: 3px 9px; font-size: 10px; letter-spacing: 0.14em; color: var(--ddc-mute) !important; border: 1px solid var(--ddc-line-hi); transition: color 0.15s ease, border-color 0.15s ease; } .dd-lang:hover { color: var(--ddc-accent) !important; border-color: var(--ddc-accent); } /* lang-switcher.js fills the sibling span with a richer control; once it has, the static crawler-facing link steps aside. Falls back to showing both on browsers without :has(), which is harmless. */ .dd-topbar:has([data-lang-switcher]:not(:empty)) .dd-lang { display: none; } .dd-mode { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-family: inherit; font-size: 10px; letter-spacing: 0.14em; cursor: pointer; color: var(--ddc-mute); background: transparent; border: 1px solid var(--ddc-line-hi); border-radius: 0; transition: color 0.15s ease, border-color 0.15s ease; } .dd-mode:hover { color: var(--ddc-accent); border-color: var(--ddc-accent); } #dd-main-start { display: block; height: 0; scroll-margin-top: 56px; } @media (max-width: 640px) { .dd-topbar { position: static; padding: 8px 14px; font-size: 10px; gap: 4px 8px; -webkit-backdrop-filter: none; backdrop-filter: none; } .dd-right { margin-left: 0; width: 100%; } .dd-topbar .dd-bc { max-width: 100%; } } /* ============================================================= ENDMATTER == */ .dd-endmatter { box-sizing: border-box; width: 100%; padding: 56px 20px 72px; font-family: var(--ddc-sans); color: var(--ddc-mute); border-top: 1px solid var(--ddc-line); } .dd-em-wrap { box-sizing: border-box; max-width: 860px; margin: 0 auto; } .dd-em-block { margin-bottom: 44px; } .dd-em-block:last-child { margin-bottom: 0; } .dd-em-h { margin: 0 0 16px; padding: 0; font-family: var(--ddc-mono, monospace); font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ddc-accent); border: 0; } .dd-em-list { margin: 0; padding: 0; list-style: none; } .dd-em-list > li { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--ddc-line); } .dd-em-list > li:first-child { border-top: 1px solid var(--ddc-line); } .dd-em-list a { display: block; font-family: var(--ddc-serif); font-size: 16px; line-height: 1.5; text-decoration: none; color: var(--ddc-fg); transition: color 0.15s ease; } .dd-em-list a:hover { color: var(--ddc-accent); } .dd-em-meta { display: block; margin-top: 5px; font-family: var(--ddc-mono, monospace); font-size: 10px; letter-spacing: 0.1em; color: var(--ddc-mute); font-variant-numeric: tabular-nums; } .dd-em-meta .dd-sp { margin: 0 6px; } /* ------------------------------------------------- revision mode switch -- */ .dd-diffswitch { display: inline-flex; margin: 0 0 16px; border: 1px solid var(--ddc-line-hi); } .dd-diffswitch label { padding: 5px 12px; font-family: var(--ddc-mono, monospace); font-size: 10px; letter-spacing: 0.12em; line-height: 1.4; cursor: pointer; color: var(--ddc-mute); background: transparent; user-select: none; transition: color 0.15s ease, background-color 0.15s ease; } .dd-diffswitch label + label { border-left: 1px solid var(--ddc-line-hi); } .dd-diffswitch label:hover { color: var(--ddc-accent); } /* Default (unchecked) = "latest version only" is the active segment. */ .dd-diff-off { color: var(--ddc-fg) !important; background: var(--ddc-surface-2) !important; pointer-events: none; } /* Keyboard focus on the far-away hidden checkbox still gets a visible ring. */ .dd-vis:focus-visible ~ * .dd-diffswitch { outline: 2px solid var(--ddc-accent); outline-offset: 2px; } body:has(.dd-vis:focus-visible) .dd-diffswitch { outline: 2px solid var(--ddc-accent); outline-offset: 2px; } /* Checked = "show inline revisions" becomes the active segment. Two selector families on purpose: · #dd-diffmode:checked ~ * … baseline; valid because the checkbox is the first child of , so every later block is a following sibling · body:has(#dd-diffmode:checked) … modern, works at any nesting depth They are deliberately kept in SEPARATE rules: a selector list containing an unsupported :has() is dropped whole, which would take the fallback with it. */ #dd-diffmode:checked ~ * .dd-diff-off { color: var(--ddc-mute) !important; background: transparent !important; pointer-events: auto; } body:has(#dd-diffmode:checked) .dd-diff-off { color: var(--ddc-mute) !important; background: transparent !important; pointer-events: auto; } #dd-diffmode:checked ~ * .dd-diff-on { color: var(--ddc-fg) !important; background: var(--ddc-surface-2) !important; pointer-events: none; } body:has(#dd-diffmode:checked) .dd-diff-on { color: var(--ddc-fg) !important; background: var(--ddc-surface-2) !important; pointer-events: none; } /* -------------------------------------------- inline revision rendering -- */ /* Default: the article reads as a clean final draft. */ .dd-upd-del { display: none; } .dd-upd-ins { background: none; text-decoration: none; color: inherit; } /* Revision mode: show what changed. Again, one rule per selector family. */ #dd-diffmode:checked ~ * .dd-upd-del { display: inline; text-decoration: line-through; text-decoration-thickness: 1px; color: var(--fg-mute, #8a8276); opacity: 0.7; } body:has(#dd-diffmode:checked) .dd-upd-del { display: inline; text-decoration: line-through; text-decoration-thickness: 1px; color: var(--fg-mute, #8a8276); opacity: 0.7; } #dd-diffmode:checked ~ * .dd-upd-ins { background: var(--accent-soft, rgba(194, 96, 63, 0.22)); box-shadow: inset 0 -1px 0 var(--accent, #c2603f); padding: 0 2px; } body:has(#dd-diffmode:checked) .dd-upd-ins { background: var(--accent-soft, rgba(194, 96, 63, 0.22)); box-shadow: inset 0 -1px 0 var(--accent, #c2603f); padding: 0 2px; } /* ------------------------------------------------------------ changelog -- */ .dd-changelog { margin: 0; padding: 0; border: 1px solid var(--ddc-line); } .dd-changelog > summary { padding: 10px 14px; font-family: var(--ddc-mono, monospace); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; color: var(--ddc-mute); background: var(--ddc-surface); list-style: none; } .dd-changelog > summary::-webkit-details-marker { display: none; } .dd-changelog > summary::before { content: "▸ "; display: inline-block; margin-right: 4px; transition: transform 0.15s ease; } .dd-changelog[open] > summary::before { content: "▾ "; } .dd-vlist { margin: 0; padding: 4px 14px 12px; list-style: none; counter-reset: none; } .dd-vlist > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ddc-line); } .dd-vlist > li:last-child { border-bottom: none; } .dd-v { font-family: var(--ddc-mono, monospace); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; color: var(--ddc-accent); } .dd-vdate { font-family: var(--ddc-mono, monospace); font-size: 10px; letter-spacing: 0.08em; color: var(--ddc-mute); font-variant-numeric: tabular-nums; } .dd-vsum { flex: 1 1 260px; font-family: var(--ddc-serif); font-size: 14px; line-height: 1.6; color: var(--ddc-dim); } .dd-vlink { font-family: var(--ddc-mono, monospace); font-size: 10px; letter-spacing: 0.1em; text-decoration: none; white-space: nowrap; color: var(--ddc-mute); border-bottom: 1px solid var(--ddc-line-hi); transition: color 0.15s ease, border-color 0.15s ease; } .dd-vlink:hover { color: var(--ddc-accent); border-bottom-color: var(--ddc-accent); } .dd-first-pub { margin: 0; font-family: var(--ddc-mono, monospace); font-size: 11px; letter-spacing: 0.08em; color: var(--ddc-mute); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- footnav -- */ .dd-footnav { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 24px; border-top: 1px solid var(--ddc-line); } .dd-footnav a { font-family: var(--ddc-mono, monospace); font-size: 11px; letter-spacing: 0.12em; text-decoration: none; color: var(--ddc-mute); transition: color 0.15s ease; } .dd-footnav a:hover { color: var(--ddc-accent); } @media (max-width: 640px) { .dd-endmatter { padding: 40px 16px 56px; } .dd-em-block { margin-bottom: 34px; } .dd-em-list a { font-size: 15px; } .dd-diffswitch { width: 100%; } .dd-diffswitch label { flex: 1 1 auto; text-align: center; } } /* -------------------------------------------------------- print / a11y -- */ @media print { .dd-topbar, .dd-skip, .dd-diffswitch, .dd-footnav { display: none !important; } .dd-endmatter { border-top: 1px solid #999; color: #333; } } @media (prefers-reduced-motion: reduce) { .dd-topbar *, .dd-endmatter *, .dd-skip, .dd-back, .dd-bc, .dd-lang, .dd-mode { transition: none !important; animation: none !important; } .dd-changelog > summary::before { transition: none !important; } } /* ---------------------------------------- de-duplicate legacy controls -- */ /* Many articles shipped their own mode toggle before the unified topbar existed. Two toggles on one page is confusing (and they can disagree visually), so the injected .dd-mode in .dd-topbar is the canonical one and any other [data-toggle-mode] is hidden. mode-toggle.js still binds to it — hiding, not removing, keeps those pages working if the topbar is ever dropped. Same for a second standalone lang switcher. */ [data-toggle-mode]:not(.dd-mode) { display: none !important; } .dd-topbar [data-lang-switcher] ~ [data-lang-switcher] { display: none !important; } /* ------------------------------------------ CJK typography hard rule ----- */ /* 51 of the articles that load this file never adopted colors_and_type.css, so they miss its "CJK never goes italic" enforcement and render synthetic obliques on Han glyphs (smeared pixels, no semantics). Mirrored here so the rule holds on every article page regardless of which stylesheets it loads. Real italics survive where they belong: Latin-tagged pullquote attribution. */ :lang(zh), :lang(zh-Hans), :lang(zh-Hant), :lang(ja), :lang(ko), .cjk, .cjk * { font-style: normal !important; font-synthesis-style: none; } .dd-pull cite:lang(en), .dd-pull cite[lang^="en"], cite[lang^="en"], em[lang^="en"], i[lang^="en"] { font-style: italic !important; }