/* theme-draft.css -- draft overlay theme for CyberChef v11.2.0 * * Strategy (chosen over registering a new named theme): override the VALUES of * the default theme's custom properties. CyberChef switches themes via a class * on and ships default `class="classic"`, with variables defined under * `:root.classic { ... }`. This file is injected after upstream main.css, so * the same selector at the same specificity wins on source order -- no JS, no * !important (except the data-panel mono guard), nothing patched upstream. * Survives upstream changes as long as the variable names hold; the pinned * inventory is overlay/vars.txt, the diff basis for the next version bump. * * Palette lifted from the infectioncloud hub + lightbox so draft reads as part * of the family (spec 4.3 "沿用 infectioncloud 語彙"). UI font is LXGW WenKai TC * per spec 5; colours carry the family resemblance, the font is draft's own. */ /* WenKai TC, self-hosted subset, UI chrome only (spec 5). Aliased so it can * never collide with any WenKai the OS already has installed. */ @font-face { font-family: "LXGW WenKai TC Draft"; src: url("assets/fonts-draft/LXGWWenKaiTC-Regular.subset.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root.classic { /* ---- ink ladder (infectioncloud hub / lightbox) ---- */ --d-bg-sunken: #050608; /* deepest: data panels & arg fields -> 凹陷 */ --d-bg: #0a0d10; /* primary three-column background */ --d-bg-raise: #12161b; /* raised surfaces: titles, list items */ --d-bg-raise2: #1a1e24; /* hover / secondary raise */ --d-border: #1c2126; /* low-contrast divider -- no hard edges */ --d-ink: #c9c4b8; /* primary text: warm grey-white, not pure white */ --d-ink-dim: #7d7a71; /* subtext */ --d-ink-faint: #55534c; /* disabled / faint */ /* ---- single accent: infectioncloud firefly-green glow (spec 4.3) ---- */ --d-accent: #a9d8b8; /* accent line / active border+text */ --d-accent-bg: rgba(180, 255, 200, .10); /* selected / active fill */ --d-accent-solid: #5f9e79; /* the one solid accent: Bake button */ /* ---- error / warning: MUST stay loud (spec 4.3 hard requirement) ---- */ --d-error: #ff5b52; --d-error-bg: #2a0f0d; --d-error-brd: #7a231d; /* ================= semantic overrides (upstream var names) ================= */ /* backgrounds */ --primary-background-colour: var(--d-bg); --secondary-background-colour: var(--d-bg-raise); --title-background-colour: var(--d-bg-raise); --popover-background: var(--d-bg-raise2); --banner-bg-colour: var(--d-bg-raise); --arg-background: var(--d-bg-sunken); --arg-disabled-background: var(--d-bg-raise); --disabled-bg-colour: var(--d-bg-raise); --code-background: var(--d-bg-sunken); --loader-background-colour: var(--d-bg-raise); /* borders */ --primary-border-colour: var(--d-border); --secondary-border-colour: var(--d-border); --arg-border-colour: var(--d-border); --btn-default-border-colour: var(--d-border); --popover-border-colour: var(--d-border); --table-border-colour: var(--d-border); --disabled-border-colour: var(--d-border); /* text */ --primary-font-colour: var(--d-ink); --title-colour: var(--d-ink); --banner-font-colour: var(--d-ink); --arg-font-colour: var(--d-ink); --arg-label-colour: var(--d-ink-dim); --category-list-font-colour: var(--d-ink-dim); --subtext-font-colour: var(--d-ink-dim); --disabled-font-colour: var(--d-ink-faint); --code-font-colour: var(--d-accent); --banner-url-colour: var(--d-accent); --input-highlight-colour: var(--d-accent); /* left operations list */ --op-list-operation-bg-colour: var(--d-bg-raise); --op-list-operation-border-colour: var(--d-border); --op-list-operation-font-colour: var(--d-ink); /* middle recipe list */ --rec-list-operation-bg-colour: var(--d-bg-raise); --rec-list-operation-border-colour: var(--d-border); --rec-list-operation-font-colour: var(--d-ink); /* selected / active operation -- the accent's home (spec 4.3) */ --selected-operation-bg-colour: var(--d-accent-bg); --selected-operation-border-colour: var(--d-accent); --selected-operation-font-color: var(--d-ink); /* upstream spells this -color */ /* favourite-category operation chips */ --fc-operation-bg-colour: var(--d-bg-raise); --fc-operation-border-colour: var(--d-border); --fc-operation-font-colour: var(--d-ink); /* default buttons */ --btn-default-bg-colour: var(--d-bg-raise); --btn-default-font-colour: var(--d-ink); --btn-default-hover-bg-colour: var(--d-bg-raise2); --btn-default-hover-border-colour: var(--d-accent); --btn-default-hover-font-colour: var(--d-ink); /* the primary action -- Bake -- carries the one solid accent */ --btn-success-bg-colour: var(--d-accent-solid); --btn-success-border-colour: var(--d-accent-solid); --btn-success-font-colour: #06110b; --btn-success-hover-bg-colour: var(--d-accent); --btn-success-hover-border-colour: var(--d-accent); --btn-success-hover-font-colour: #06110b; /* error / breakpoint -- loud on purpose */ --breakpoint-bg-colour: var(--d-error-bg); --breakpoint-border-colour: var(--d-error-brd); --breakpoint-font-colour: var(--d-error); --breakpoint-icon-colour: var(--d-ink-dim); --breakpoint-icon-selected-colour: var(--d-error); --disable-icon-colour: var(--d-ink-dim); --disable-icon-selected-colour: var(--d-error); --fc-breakpoint-operation-bg-colour: var(--d-error-bg); --fc-breakpoint-operation-border-colour: var(--d-error-brd); --fc-breakpoint-operation-font-colour: var(--d-error); /* scrollbars */ --scrollbar-track: var(--d-bg); --scrollbar-thumb: #23282d; --scrollbar-hover: #2f353b; /* drop-file hint */ --drop-file-border-colour: var(--d-accent); /* search-match highlights -- muted but distinguishable */ --hl1: rgba(180, 255, 200, .22); --hl2: rgba(149, 223, 255, .18); --hl3: rgba(255, 182, 182, .18); --hl4: rgba(252, 248, 227, .14); --hl5: rgba(141, 231, 104, .18); /* ---- fonts (spec 5) ---- */ /* UI chrome -> WenKai, keeping the ecosystem serif + system fallbacks */ --primary-font-family: "LXGW WenKai TC Draft", "Noto Serif TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* data / mono -> explicit monospace stack; drives .cm-content via this var */ --fixed-width-font-family: ui-monospace, "Cascadia Mono", "SF Mono", "Consolas", "Liberation Mono", Menlo, monospace; } /* Reserve the provenance footer's 24px at the app's bottom edge so the fixed * footer never covers the output status bar / last line. #content-wrapper is * the full-height app container (position:absolute); shrinking it leaves the * footer a gap to sit in. Not !important -- the id+class selector already * outranks upstream's #content-wrapper rule (keeps the mono guard the only one). */ :root.classic #content-wrapper { height: calc(100vh - 24px); } /* Data-panel mono guard -- the ONLY !important in the overlay. It defends * correctness (0/O and l/1/I legibility, spec 5), not aesthetics. .cm-content * already binds --fixed-width-font-family; this pins it even if a chrome rule * or a future upstream change tries to override, across every theme. */ .cm-content, .cm-line { font-family: ui-monospace, "Cascadia Mono", "SF Mono", "Consolas", "Liberation Mono", Menlo, monospace !important; } /* EN / 繁 language toggle injected into the banner by i18n-draft.js */ #draft-lang-toggle { margin-left: 12px; padding: 1px 8px; border: 1px solid var(--d-border, #1c2126); border-radius: 3px; color: var(--d-ink-dim, #7d7a71); font-size: 12px; line-height: 1.6; text-decoration: none; cursor: pointer; } #draft-lang-toggle:hover { color: var(--d-accent, #a9d8b8); border-color: var(--d-accent, #a9d8b8); }