/* 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, #draft-ops-btn:hover { color: var(--d-accent, #a9d8b8); border-color: var(--d-accent, #a9d8b8); } /* 功能說明 trigger, styled like the language toggle */ #draft-ops-btn { margin-left: 8px; 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; } /* ---- operation reference panel (ops-reference.js) ---- */ #draft-ops-panel { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .6); } #draft-ops-panel[hidden] { display: none; } #draft-ops-panel .dop-box { display: flex; flex-direction: column; width: min(920px, 100%); max-height: 100%; overflow: hidden; border: 1px solid var(--d-border, #1c2126); border-radius: 4px; background: var(--d-bg, #0a0d10); color: var(--d-ink, #c9c4b8); } #draft-ops-panel .dop-head { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--d-border, #1c2126); background: var(--d-bg-raise, #12161b); } #draft-ops-panel .dop-title { font-size: 14px; white-space: nowrap; } #draft-ops-panel .dop-search { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--d-border, #1c2126); border-radius: 3px; background: var(--d-bg-sunken, #050608); color: var(--d-ink, #c9c4b8); font: inherit; font-size: 13px; } #draft-ops-panel .dop-search:focus { outline: none; border-color: var(--d-accent, #a9d8b8); } #draft-ops-panel .dop-count { color: var(--d-ink-faint, #55534c); font-size: 12px; white-space: nowrap; } #draft-ops-panel .dop-close { border: 0; background: transparent; color: var(--d-ink-dim, #7d7a71); font-size: 15px; line-height: 1; cursor: pointer; } #draft-ops-panel .dop-close:hover { color: var(--d-accent, #a9d8b8); } #draft-ops-panel .dop-list { overflow-y: auto; padding: 4px 0; } #draft-ops-panel .dop-row { display: grid; grid-template-columns: minmax(150px, 260px) 1fr; gap: 12px; padding: 5px 12px; border-bottom: 1px solid rgba(255, 255, 255, .03); font-size: 13px; } #draft-ops-panel .dop-row:hover { background: var(--d-bg-raise, #12161b); } #draft-ops-panel .dop-row code { color: var(--d-accent, #a9d8b8); background: transparent; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; word-break: break-word; } #draft-ops-panel .dop-row span { color: var(--d-ink-dim, #7d7a71); } #draft-ops-panel .dop-empty, #draft-ops-panel .dop-foot { padding: 10px 12px; color: var(--d-ink-faint, #55534c); font-size: 12px; } #draft-ops-panel .dop-foot { border-top: 1px solid var(--d-border, #1c2126); background: var(--d-bg-raise, #12161b); } @media (max-width: 620px) { #draft-ops-panel .dop-row { grid-template-columns: 1fr; gap: 2px; } #draft-ops-panel .dop-head { flex-wrap: wrap; } }