/* ---- themes ------------------------------------------------------------- Every colour on this site comes from the variables below, so a theme is just another block of them -- no per-theme rules anywhere else in this file. The set is applied by static/themes.js, which stamps data-theme="" on from the visitor's own localStorage; it is never sent to the server and never leaves the browser. The block below is the default (also what an unset data-theme gets, so the site is fully styled before any JS runs). Named themes further down override it via :root[data-theme="..."]. Adding a theme means adding one block there and one entry to THEMES in themes.js -- nothing else. Any variable a theme leaves out simply falls through to the default, so a partial theme is valid, not broken. */ :root, html { color-scheme: var(--color-scheme); --bg: #14161a; --bg-raised: #1c1f25; --bg-card: #20242b; --border: #2e333c; --text: #e6e8eb; --text-dim: #9aa2ad; --link: #7cb7ff; --accent: #ff8a5c; --accent-text: #17140f; --danger: #ff8a80; --tag-bg: #2a3040; --focus-ring: #7cb7ff; /* The accent at low opacity, for the pinned-Feel wash. A variable rather than a hardcoded rgba() of the default accent, which is what it used to be -- that stayed orange no matter what the theme did. */ --accent-soft: rgba(255, 138, 92, 0.12); /* Panel/modal drop shadow. Near-black is right on a dark theme and far too heavy on a light one, so themes get to soften it. */ --shadow: rgba(0, 0, 0, 0.35); --shadow-strong: rgba(0, 0, 0, 0.5); /* Greentext stays green in every theme -- it's chan convention, not decoration -- but the exact shade has to shift to stay legible against a light background. */ --green-text: #7fbf5f; /* Whether this theme is light or dark, declared to the browser rather than merely implied by its colours. Two things read it. The browser renders everything it draws ITSELF to match -- Firefox's scrollbars, native form controls, autofill, the canvas behind the page -- which until now stayed in dark mode on the five light themes here. And dark-mode extensions use it to decide whether a site already handles this, which is the polite half of the darkreader-lock meta tag in templates.layout. */ --color-scheme: dark; /* ---- chrome ----------------------------------------------------------- Colour alone cannot make a theme. Every theme here used to be a hue swap over identical furniture -- same font, same 10px corners on everything, same flat fills, same hairline borders -- so they all came out looking like one site wearing different paint, which is a fair description of "half-assed". What actually separates Aero from Aqua from a green terminal is none of those hues: it is the typeface, how round the corners are, whether a surface is flat or has a gradient down it, how a button is shaped and lit, and how heavy the borders are. The variables below are those things, so a theme can commit to a look instead of tinting one. Every default here reproduces the current appearance exactly, so a theme that sets none of them is unchanged rather than broken -- the same fall-through the colours have always had. */ --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --letter-spacing: normal; /* Corner radius, in three sizes: cards/panels, controls, and the little badges. A theme that wants hard corners sets all three to 0 and gets them everywhere at once. */ --radius: 10px; --radius-sm: 6px; --radius-xs: 4px; --border-width: 1px; /* background-image on the header and on card surfaces. "none" is a flat fill of --bg-raised / --bg-card, which is what every theme had. */ --header-image: none; --surface-image: none; --card-shadow: none; /* Buttons, which carry more of a look than anything else on the page -- Aero's gloss and Aqua's capsule are both mostly button. --btn-text is separate from --accent-text on purpose: a theme whose buttons are pale needs dark text on them while ::selection still wants light text on the accent, and those are genuinely different questions. */ --btn-image: none; --btn-radius: 6px; --btn-border: none; --btn-shadow: none; --btn-text: var(--accent-text); --input-shadow: none; --header-shadow: none; /* Text fields. Defaults to the page background, which is what every dark theme wants and what this has always done -- but a light-chrome theme needs white fields over a grey page, and those are different colours for the first time. */ --input-bg: var(--bg); /* The DEFAULT button -- the one Enter triggers. Both Aqua and Aero singled it out (Aqua's pulsed blue, Aero's carried a glow ring), and it is one of the details people actually remember about each. Falls through to the ordinary button chrome, so a theme that does not care gets exactly what it had. */ --btn-default-image: var(--btn-image); --btn-default-border: var(--btn-border); --btn-default-text: var(--btn-text); --btn-default-shadow: var(--btn-shadow); /* Body text glow. Only a CRT theme wants this, and a CRT theme is not recognisable without it -- phosphor bleed is the effect. */ --text-shadow: none; /* Text sitting ON chrome (the header, the toolbar strip) rather than on a page. Aluminium UI of this era embossed it with a 1px light shadow; on a dark theme there is no such thing, hence the neutral default. */ --chrome-text-shadow: none; /* ---- state and detail ------------------------------------------------- The pre-flat era spent most of its craft on things a flat design does not have at all: a button that visibly sinks when pressed, a field that lights up when focused, a scrollbar with a modelled thumb, a title strip across the top of every panel. None of that is colour either, and without it a "skeuomorphic" theme is still just a gradient. */ /* Pressed. Defaults to no change, which is what a flat theme wants. */ --btn-active-image: var(--btn-image); --btn-active-shadow: var(--btn-shadow); /* Focused field. Windows 7's blue glow and Aqua's blue halo are both this one property, and both are instantly recognisable. */ --input-focus-shadow: var(--input-shadow); /* The strip across the top of a post -- its title bar. Off by default: --card-head-margin pulls it out to the card's edges only when a theme asks, so a flat theme keeps the plain inset head it always had. */ --card-head-image: none; --card-head-bg: transparent; --card-head-border: none; --card-head-margin: 0 0 0.55rem; --card-head-padding: 0; --card-head-radius: 0; /* Badges: the Feel number, tags, the poster chip. Flat fills by default. */ --badge-image: none; --badge-border: none; --badge-shadow: none; /* Toolbar strip (the Feels/Hr bar) and the nav links, which in this era were chrome in their own right rather than plain text. */ --toolbar-image: none; --toolbar-bg: transparent; --toolbar-border: none; --toolbar-radius: 0; --nav-hover-image: none; --nav-hover-bg: transparent; --nav-hover-text: var(--text); --nav-radius: 0; /* A segmented-control theme needs room for its capsule; a plain-text one wants the tight original. */ --nav-padding: 0.25rem 0.1rem; /* The strip the links sit in. A segmented control is a bordered track with its segments inside it, so a theme that wants one needs to dress the container as well as the items. */ --nav-strip-bg: transparent; --nav-strip-image: none; --nav-strip-border: none; --nav-strip-radius: 0; --nav-strip-shadow: none; --nav-strip-padding: 0; --nav-strip-gap: 1.1rem; /* The segment you are on. Defaults to the hover treatment, so a theme gets a sane selected state for free the moment it defines a hover. */ --nav-active-image: var(--nav-hover-image); --nav-active-bg: var(--nav-hover-bg); --nav-active-text: var(--nav-hover-text); --nav-active-shadow: none; /* The two gutter panels -- the spell bar and the notification feed. They were carrying --bg-card and a border and nothing else, so on a themed page they read as two flat rectangles beside furniture that had grown depth. */ --panel-image: var(--surface-image); --panel-shadow: var(--card-shadow); --panel-radius: var(--radius); /* Scrollbars. Completely unstyled until now, which meant every theme -- terminal, Aero, Aqua -- had the same modern OS scrollbar down the side of it, quietly undoing the illusion on the one element that is on screen the entire time. */ --scrollbar-size: 14px; --scrollbar-track: var(--bg-raised); --scrollbar-track-image: none; --scrollbar-thumb: var(--border); --scrollbar-thumb-image: none; --scrollbar-thumb-hover: var(--text-dim); --scrollbar-thumb-border: 3px solid transparent; --scrollbar-radius: 8px; /* Hover. Aero's blue bloom around a control you are pointing at is one of its two most-copied details (the other is the focus glow), and Aqua answered the same question by simply darkening the capsule. Neither is expressible as `filter: brightness()`, which is all this had. */ --btn-hover-image: var(--btn-image); --btn-hover-shadow: var(--btn-shadow); /* Dropdowns. A pop-up menu was its own control in both systems and looks nothing like a button in either. */ --select-image: none; --select-bg: var(--bg); --select-border: 1px solid var(--border); --select-radius: var(--radius-sm); --select-shadow: none; /* The arrow. appearance:none removes the native one, so every theme has to supply something -- and in this era the arrow was not a glyph beside the text, it was its own button welded to the right end of the control. Aqua's is a blue square with a stacked up/down pair; Windows had a flat chevron in a light well. */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 2 L6 7 L11 2' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --select-arrow-size: 0.75rem auto; --select-arrow-pos: right 0.55rem center; --select-padding-right: 1.9rem; /* The search field, which both systems drew as a capsule with a magnifier rather than as an ordinary text box. */ --search-radius: var(--radius-sm); --search-icon: none; --search-padding-left: 0.7rem; /* Progress bars -- the hero panel's HP/Armor/Mana. Aqua's striped blue progress bar is possibly the single most recognisable widget of the era, and this is the only place on the site shaped like one. */ --progress-bg: var(--bg); --progress-border: 1px solid var(--border); --progress-radius: 4px; --progress-shadow: none; /* Overlaid ON the existing per-bar colour rather than replacing it, so a theme adds texture without having to restate three gradients. */ --progress-overlay: none; /* Checkboxes and radios. Left native until now, which meant the one control on the page that ignored the theme entirely -- a stock white box with a blue tick, on the green terminal, on Aero, on everything. The defaults below are a plain themed box, so no theme is worse off than the native one it replaces. */ --check-size: 1rem; --check-bg: var(--bg); --check-image: none; --check-border: 1px solid var(--border); --check-radius: 3px; --check-shadow: none; --check-on-bg: var(--accent); --check-on-image: none; --check-on-border: 1px solid var(--accent); --check-mark: var(--accent-text); /* The hero panel's three bars. Hardcoded red/grey/blue until now, so they stayed exactly the same on the green terminal, on Aero and on High Contrast -- three of the few genuinely coloured shapes on the page, ignoring the theme entirely. They still have to read as three DIFFERENT things, which is the constraint: a monochrome theme cannot separate them by hue, so it separates them by intensity instead. Defaults reproduce the previous colours exactly. */ --bar-hp: linear-gradient(90deg, #ff5c5c, #ff8a5c); --bar-armor: linear-gradient(90deg, #8b93a1, #b8bec7); --bar-mana: linear-gradient(90deg, #5c8aff, #7cb7ff); } /* Soup Dark -- the default. Given its own block rather than living in :root, so :root can stay the neutral fall-through every theme inherits from and this one's opinions are as visible as anybody else's. Flat, modern, quiet: no gradients, generous corners, and just enough shadow that a card sits above the page instead of being a differently coloured rectangle drawn on it. */ :root[data-theme="dark"] { --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); --scrollbar-track: #14161a; --scrollbar-thumb: #363c46; --scrollbar-thumb-hover: #4a515e; --btn-active-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); --color-scheme: dark; } /* Light. The one theme that inverts the whole relationship between text and background, so it's also the one that proves the variables really do carry every colour: shadows lighten, greentext darkens to stay legible on white, and --accent-text flips to light-on-orange. */ :root[data-theme="light"] { --bg: #f4f5f7; --bg-raised: #ffffff; --bg-card: #ffffff; --border: #d3d7de; --text: #1a1d23; --text-dim: #5c646f; --link: #1d68c9; --accent: #d9541e; --accent-text: #fff6f1; --danger: #c0341c; --tag-bg: #e6e9ef; --focus-ring: #1d68c9; --accent-soft: rgba(217, 84, 30, 0.10); --shadow: rgba(15, 20, 30, 0.12); --shadow-strong: rgba(15, 20, 30, 0.20); --green-text: #2f7d32; /* Airy rather than merely inverted: the cards are white on a grey page, so they need a real (if faint) shadow to separate, and slightly softer corners suit a light surface. */ --radius: 12px; --card-shadow: 0 1px 3px rgba(15, 20, 30, 0.10); --btn-shadow: 0 1px 2px rgba(15, 20, 30, 0.14); --scrollbar-track: #eceef2; --scrollbar-thumb: #c3c8d1; --scrollbar-thumb-hover: #a8aeb9; --btn-active-shadow: inset 0 2px 4px rgba(15, 20, 30, 0.22); --color-scheme: light; } /* Green terminal. Phosphor green on near-black, one hue throughout -- the dimmed text is the same green at lower intensity rather than a grey, which is what makes it read as a CRT instead of a dark theme that happens to have green links. */ :root[data-theme="hacker"] { --bg: #000600; --bg-raised: #01120a; --bg-card: #01160c; --border: #0b5c2e; --text: #33ff66; --text-dim: #1f9c46; --link: #7cffb0; --accent: #00ff41; --accent-text: #001a06; --danger: #ff5f56; --tag-bg: #06301a; --focus-ring: #00ff41; --accent-soft: rgba(0, 255, 65, 0.10); --shadow: rgba(0, 255, 65, 0.14); --shadow-strong: rgba(0, 255, 65, 0.22); --green-text: #9dff6a; /* A terminal, so: monospace throughout, no rounding anywhere, hairline borders, no shadows, and the faint horizontal scanlines of a phosphor display over every surface. The glow is what actually sells it -- a green-on-black page without bleed just reads as a colour scheme. */ --font-ui: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; --letter-spacing: 0.02em; --radius: 0; --radius-sm: 0; --radius-xs: 0; --btn-radius: 0; --btn-border: 1px solid #1f7a2f; --surface-image: repeating-linear-gradient(180deg, rgba(51, 255, 102, 0.035) 0 1px, transparent 1px 3px); --header-image: repeating-linear-gradient(180deg, rgba(51, 255, 102, 0.05) 0 1px, transparent 1px 3px); --text-shadow: 0 0 4px rgba(51, 255, 102, 0.35); /* A terminal's scrollbar is a character cell, not a pill: square, hard, and drawn in the same phosphor as everything else. */ --scrollbar-size: 12px; --scrollbar-track: #001200; --scrollbar-track-image: repeating-linear-gradient(180deg, rgba(51, 255, 102, 0.05) 0 1px, transparent 1px 3px); --scrollbar-thumb: #1f7a2f; --scrollbar-thumb-hover: #33ff66; --scrollbar-thumb-border: 1px solid #33ff66; --scrollbar-radius: 0; /* Square, inset, hard -- pressed reads as the cell inverting. */ --btn-active-shadow: inset 0 0 0 1px #33ff66; --input-focus-shadow: inset 0 0 0 1px #33ff66, 0 0 6px rgba(51, 255, 102, 0.45); --card-head-border: 1px solid #1f7a2f; --card-head-margin: -1.1rem -1.2rem 0.75rem; --card-head-padding: 0.4rem 1.2rem; --badge-border: 1px solid #1f7a2f; /* A terminal check is a bracketed cell -- square, unfilled, and the mark is drawn in the same phosphor as the text. */ --check-radius: 0; --check-bg: #001200; --check-border: 1px solid #1f7a2f; --check-on-bg: #001200; --check-on-border: 1px solid #33ff66; --check-mark: #33ff66; /* One phosphor, three intensities. A monochrome display cannot separate these by hue, so it separates them the way a real one did. */ --bar-hp: linear-gradient(90deg, #0d5c1c, #33ff66); --bar-armor: linear-gradient(90deg, #0a3d14, #1f7a2f); --bar-mana: linear-gradient(90deg, #1f7a2f, #9dffbc); --color-scheme: dark; } /* Amber CRT -- the other half of the terminal pair. Same idea as hacker, warm monochrome instead of green. */ :root[data-theme="amber"] { --bg: #0d0800; --bg-raised: #191006; --bg-card: #1d1307; --border: #5a3a10; --text: #ffb642; --text-dim: #b57a24; --link: #ffd591; --accent: #ffa31a; --accent-text: #1a0f00; --danger: #ff6b52; --tag-bg: #3a2409; --focus-ring: #ffa31a; --accent-soft: rgba(255, 163, 26, 0.10); --shadow: rgba(255, 163, 26, 0.14); --shadow-strong: rgba(255, 163, 26, 0.22); --green-text: #c8d34a; /* The same CRT chassis as Green Terminal, in amber -- deliberately identical in construction, because the two were the same hardware with a different phosphor and pretending otherwise would be inventing history. */ --font-ui: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; --letter-spacing: 0.02em; --radius: 0; --radius-sm: 0; --radius-xs: 0; --btn-radius: 0; --btn-border: 1px solid #8a5a12; --surface-image: repeating-linear-gradient(180deg, rgba(255, 176, 0, 0.04) 0 1px, transparent 1px 3px); --header-image: repeating-linear-gradient(180deg, rgba(255, 176, 0, 0.06) 0 1px, transparent 1px 3px); --text-shadow: 0 0 4px rgba(255, 176, 0, 0.32); --scrollbar-size: 12px; --scrollbar-track: #140b00; --scrollbar-track-image: repeating-linear-gradient(180deg, rgba(255, 176, 0, 0.05) 0 1px, transparent 1px 3px); --scrollbar-thumb: #8a5a12; --scrollbar-thumb-hover: #ffb000; --scrollbar-thumb-border: 1px solid #ffb000; --scrollbar-radius: 0; --btn-active-shadow: inset 0 0 0 1px #ffb000; --input-focus-shadow: inset 0 0 0 1px #ffb000, 0 0 6px rgba(255, 176, 0, 0.45); --card-head-border: 1px solid #8a5a12; --card-head-margin: -1.1rem -1.2rem 0.75rem; --card-head-padding: 0.4rem 1.2rem; --badge-border: 1px solid #8a5a12; --check-radius: 0; --check-bg: #140b00; --check-border: 1px solid #8a5a12; --check-on-bg: #140b00; --check-on-border: 1px solid #ffb000; --check-mark: #ffb000; --bar-hp: linear-gradient(90deg, #8a5a12, #ffb000); --bar-armor: linear-gradient(90deg, #5c3c0c, #8a5a12); --bar-mana: linear-gradient(90deg, #8a5a12, #ffd98a); --color-scheme: dark; } /* Midnight -- deep indigo with a violet accent. The quiet one. */ :root[data-theme="midnight"] { --bg: #0b0f1e; --bg-raised: #131a30; --bg-card: #161e38; --border: #2a3560; --text: #dfe3f5; --text-dim: #8f9ac4; --link: #8fb4ff; --accent: #a78bfa; --accent-text: #140d24; --danger: #ff7b9c; --tag-bg: #232e55; --focus-ring: #a78bfa; --accent-soft: rgba(167, 139, 250, 0.14); --shadow: rgba(0, 0, 0, 0.45); --shadow-strong: rgba(0, 0, 0, 0.6); --green-text: #7fd97f; /* Soft and deep. The only theme that gradients its own surfaces without imitating an operating system: a barely-there lift down each card, big corners, and shadows with enough spread to read as depth rather than as an outline. */ --radius: 14px; --surface-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)); --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); --btn-radius: 9px; --btn-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); --scrollbar-track: #0b1020; --scrollbar-thumb: #26304d; --scrollbar-thumb-hover: #3a4770; --scrollbar-radius: 999px; --card-head-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); --card-head-margin: -1.1rem -1.2rem 0.75rem; --card-head-padding: 0.55rem 1.2rem; --card-head-radius: 14px 14px 0 0; --btn-active-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45); --check-radius: 4px; --check-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); --color-scheme: dark; } /* Paper -- warm, low-contrast light theme for actually reading a long thread, as opposed to Light, which is a plain bright UI. */ :root[data-theme="paper"] { --bg: #efe7d7; --bg-raised: #f8f2e6; --bg-card: #f8f2e6; --border: #d6c9ae; --text: #33291b; --text-dim: #6e6047; --link: #8a5a1f; --accent: #a8641c; --accent-text: #fdf7ec; --danger: #a52f22; --tag-bg: #e3d8c0; --focus-ring: #a8641c; --accent-soft: rgba(168, 100, 28, 0.12); --shadow: rgba(80, 60, 30, 0.14); --shadow-strong: rgba(80, 60, 30, 0.24); --green-text: #4a6f21; /* Built for reading rather than for looking at: a serif face, small corners, hairline rules and no shadows at all. Nothing here should announce itself -- a page of text on warm stock, with the furniture got out of the way. */ --font-ui: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --radius: 3px; --radius-sm: 3px; --radius-xs: 2px; --btn-radius: 3px; --card-shadow: none; --btn-shadow: none; /* A rule under the head, not a strip across it -- this theme is a page, and a page separates with a line. */ --card-head-border: 1px solid #ddd2bb; --card-head-margin: 0 0 0.6rem; --card-head-padding: 0 0 0.4rem; --scrollbar-size: 12px; --scrollbar-track: #efe7d6; --scrollbar-thumb: #cbbfa6; --scrollbar-thumb-hover: #b0a288; --scrollbar-radius: 2px; --btn-active-shadow: inset 0 2px 3px rgba(90, 70, 40, 0.25); /* Ink on stock: an unfilled square with the mark drawn in the text colour, the way a form printed on paper is filled in. */ --check-radius: 2px; --check-bg: #fbf6ea; --check-on-bg: #fbf6ea; --check-on-border: 1px solid #6b5836; --check-mark: #3a2f1c; /* Printed inks rather than screen colours -- nothing here should glow. */ --bar-hp: linear-gradient(90deg, #9c3b28, #c26a4e); --bar-armor: linear-gradient(90deg, #8a7b60, #b8ab92); --bar-mana: linear-gradient(90deg, #3a5f8a, #7d9dbe); --color-scheme: light; } /* Vapor -- the loud one, to match the novelty BBCode tags. */ :root[data-theme="vapor"] { --bg: #1a0b2e; --bg-raised: #2a1247; --bg-card: #2f1450; --border: #6c2fa8; --text: #f6e8ff; --text-dim: #c39ae0; --link: #59f7f0; --accent: #ff5fd2; --accent-text: #24052a; --danger: #ff6b8a; --tag-bg: #451c6e; --focus-ring: #59f7f0; --accent-soft: rgba(255, 95, 210, 0.15); --shadow: rgba(255, 95, 210, 0.20); --shadow-strong: rgba(89, 247, 240, 0.25); --green-text: #7dffb8; /* The one theme allowed to be loud. Oversized corners, a two-hue wash across every surface, gradient buttons and a glow instead of a shadow -- the palette was already garish and the chrome may as well agree with it. */ --radius: 16px; --radius-sm: 10px; --surface-image: linear-gradient(155deg, rgba(255, 95, 210, 0.10), rgba(89, 247, 240, 0.05)); --header-image: linear-gradient(90deg, rgba(255, 95, 210, 0.16), rgba(89, 247, 240, 0.12)); --card-shadow: 0 0 0 1px rgba(255, 95, 210, 0.18), 0 6px 22px rgba(89, 247, 240, 0.10); --btn-image: linear-gradient(120deg, #ff5fd2, #59f7f0); --btn-radius: 999px; --btn-text: #24052a; --btn-shadow: 0 2px 12px rgba(255, 95, 210, 0.35); --scrollbar-size: 12px; --scrollbar-track: #1a0b2e; --scrollbar-thumb: #ff5fd2; --scrollbar-thumb-image: linear-gradient(180deg, #ff5fd2, #59f7f0); --scrollbar-thumb-hover: #59f7f0; --scrollbar-radius: 999px; --scrollbar-thumb-border: 2px solid transparent; --card-head-image: linear-gradient(90deg, rgba(255, 95, 210, 0.22), rgba(89, 247, 240, 0.12)); --card-head-margin: -1.1rem -1.2rem 0.8rem; --card-head-padding: 0.55rem 1.2rem; --card-head-radius: 16px 16px 0 0; --btn-active-shadow: inset 0 3px 10px rgba(36, 5, 42, 0.5); --input-focus-shadow: 0 0 0 2px rgba(89, 247, 240, 0.5), 0 0 14px rgba(255, 95, 210, 0.4); --check-radius: 5px; --check-on-image: linear-gradient(135deg, #ff5fd2, #59f7f0); --check-on-border: 1px solid #59f7f0; --check-mark: #24052a; --bar-hp: linear-gradient(90deg, #ff2d8a, #ff5fd2); --bar-armor: linear-gradient(90deg, #6c2fa8, #c39ae0); --bar-mana: linear-gradient(90deg, #2fb6f7, #59f7f0); --color-scheme: dark; } /* High contrast -- pure black/white with a yellow accent, for anyone who finds the default's greys too soft. Not a novelty theme; kept simple and maximally legible on purpose. */ :root[data-theme="contrast"] { --bg: #000000; --bg-raised: #0a0a0a; --bg-card: #0d0d0d; --border: #6a6a6a; --text: #ffffff; --text-dim: #d0d0d0; --link: #7fd4ff; --accent: #ffd400; --accent-text: #000000; --danger: #ff6f6f; --tag-bg: #262626; --focus-ring: #ffd400; --accent-soft: rgba(255, 212, 0, 0.15); --shadow: rgba(0, 0, 0, 0.8); --shadow-strong: rgba(0, 0, 0, 0.9); --green-text: #7dff7d; /* Everything the other themes use to suggest depth is exactly what makes an interface hard to read for the people this is for: gradients lower contrast against text, shadows blur an edge, and a rounded corner is a softer boundary than a square one. So all of it is off, and the borders double in weight to draw the edges outright. */ --radius: 0; --radius-sm: 0; --radius-xs: 0; --btn-radius: 0; --border-width: 2px; --btn-border: 2px solid var(--text); --surface-image: none; --header-image: none; --card-shadow: none; --btn-shadow: none; --text-shadow: none; /* Nothing modelled, nothing rounded, nothing blurred -- a scrollbar you can find without looking for it. */ --scrollbar-size: 18px; --scrollbar-track: #000000; --scrollbar-thumb: #ffffff; --scrollbar-thumb-hover: #ffd400; --scrollbar-thumb-border: 2px solid #000000; --scrollbar-radius: 0; --card-head-border: 2px solid #6a6a6a; --card-head-margin: -1.1rem -1.2rem 0.75rem; --card-head-padding: 0.45rem 1.2rem; --btn-active-shadow: inset 0 0 0 3px #ffd400; --input-focus-shadow: 0 0 0 3px #ffd400; /* Filled solid and outlined heavily -- checked must be obvious at a glance, not a subtle tint. */ --check-size: 1.15rem; --check-radius: 0; --check-bg: #000000; --check-border: 2px solid #ffffff; --check-on-bg: #ffd400; --check-on-border: 2px solid #ffffff; --check-mark: #000000; /* No gradients and no mid-tones: three flat fills that are each unmistakable against black at a glance. */ --bar-hp: #ff6f6f; --bar-armor: #d0d0d0; --bar-mana: #ffd400; --color-scheme: dark; } /* ---- base / typography ------------------------------------------------ */ * { box-sizing: border-box; } /* Percentage, not a fixed px, so this still respects the user's own browser font-size preference -- 118.75% of a 16px default is ~19px. Every font-size in this file is rem/em, so bumping this one value scales the whole site proportionally. */ html { font-size: 118.75%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); letter-spacing: var(--letter-spacing); text-shadow: var(--text-shadow); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin: 1.75rem 0 0.75rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; } p { margin: 0 0 0.9rem; } a { color: var(--link); text-decoration: none; text-underline-offset: 0.15em; } a:hover { text-decoration: underline; } /* Consistent, visible keyboard-focus ring on every interactive element, instead of relying on (and possibly losing) the browser default. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, .mod-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--accent); color: var(--accent-text); } /* Checkboxes and radios, themed rather than native. .mc-check is excluded: the moderation console ships its own stylesheet and its own accent-color treatment, and two systems styling one control is how it ends up looking like neither. */ input[type="checkbox"]:not(.mc-check), input[type="radio"]:not(.mc-check) { appearance: none; -webkit-appearance: none; width: var(--check-size); height: var(--check-size); margin: 0; flex: none; display: inline-grid; place-content: center; vertical-align: -0.15em; background-color: var(--check-bg); background-image: var(--check-image); border: var(--check-border); border-radius: var(--check-radius); box-shadow: var(--check-shadow); cursor: pointer; } input[type="radio"]:not(.mc-check) { border-radius: 50%; } input[type="checkbox"]:not(.mc-check)::before, input[type="radio"]:not(.mc-check)::before { content: ""; /* Scaled to nothing rather than hidden, so the mark has somewhere to come from -- checked is a transform, which stays crisp at any size. */ transform: scale(0); transition: transform 0.08s ease-out; } input[type="checkbox"]:not(.mc-check)::before { width: 0.6em; height: 0.6em; /* A real tick rather than a glyph: a font-dependent character would be a different shape in every theme that changes --font-ui. */ clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 72%); background-color: var(--check-mark); } input[type="radio"]:not(.mc-check)::before { width: 0.45em; height: 0.45em; border-radius: 50%; background-color: var(--check-mark); } input[type="checkbox"]:not(.mc-check):checked, input[type="radio"]:not(.mc-check):checked { background-color: var(--check-on-bg); background-image: var(--check-on-image); border: var(--check-on-border); } input[type="checkbox"]:not(.mc-check):checked::before, input[type="radio"]:not(.mc-check):checked::before { transform: scale(1); } input[type="checkbox"]:not(.mc-check):focus-visible, input[type="radio"]:not(.mc-check):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Scrollbars. On screen the entire time and previously untouched, so every theme -- terminal, Aero, Aqua -- had the same modern OS scrollbar down its side quietly contradicting everything else on the page. -webkit- only, because that is the only vendor prefix that can model a thumb; Firefox gets scrollbar-color, which is the two flat colours it supports and is still better than nothing. */ * { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } ::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); } ::-webkit-scrollbar-track { background-color: var(--scrollbar-track); background-image: var(--scrollbar-track-image); } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); background-image: var(--scrollbar-thumb-image); border-radius: var(--scrollbar-radius); /* A transparent border inset from the track is what gives the thumb its margin without a second element to put it on. */ border: var(--scrollbar-thumb-border); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); } ::-webkit-scrollbar-corner { background-color: var(--scrollbar-track); } /* ---- header / nav ------------------------------------------------------ */ .site-header { text-shadow: var(--chrome-text-shadow); background-color: var(--bg-raised); background-image: var(--header-image); border-bottom: var(--border-width) solid var(--border); box-shadow: var(--header-shadow); /* Above the content it shadows, or the drop shadow a title-bar theme casts lands underneath the first card and is invisible. Deliberately z-index 1, not something larger: the gutter panels (.hero-panel, .spell-column, .mana-events-sidebar) are absolutely positioned against the PAGE and their top edges sit inside the header's band, so they only stayed visible because they paint later in DOM order. Giving the header a z-index at all beat that, and hid the hero behind the nav on every theme. They take 2; nothing here needs more room than that. */ position: relative; z-index: 1; } /* Same max-width/margin/horizontal-padding recipe as .site-main below, so the logo/nav line up with the page content instead of sitting flush against the browser edge while everything under it is inset. */ .site-header-inner { display: flex; align-items: center; gap: 1.25rem; max-width: 980px; margin: 0 auto; padding: 0.85rem 1.25rem; flex-wrap: wrap; } /* The site name used to live here as .brand; it now sits on the stat bar immediately left of the Feels/Hr counters -- see .stat-bar-brand. */ .site-nav { display: flex; gap: var(--nav-strip-gap); flex-wrap: wrap; background-color: var(--nav-strip-bg); background-image: var(--nav-strip-image); border: var(--nav-strip-border); border-radius: var(--nav-strip-radius); box-shadow: var(--nav-strip-shadow); padding: var(--nav-strip-padding); } .nav-link.is-active { color: var(--nav-active-text); background-color: var(--nav-active-bg); background-image: var(--nav-active-image); box-shadow: var(--nav-active-shadow); } .nav-link { color: var(--text-dim); font-weight: 600; font-size: 0.82rem; padding: var(--nav-padding); /* Reserved at all times, just transparent -- so adding color on hover doesn't change the element's box height and shift the text. */ border-bottom: 2px solid transparent; } .nav-link { border-radius: var(--nav-radius); } .nav-link:hover { color: var(--nav-hover-text); text-decoration: none; border-bottom-color: var(--accent); background-color: var(--nav-hover-bg); background-image: var(--nav-hover-image); } /* Hero panel -- decorative video-game-style status card, living in the empty gutter beside the centered 980px content column (same max-width soupchan uses for .site-main/.site-header-inner) rather than competing for room *inside* the header row. position:absolute (not fixed) so it sits at a fixed point in the page and scrolls away normally like anything else -- not pinned to the viewport. Only shown once there's actually enough gutter width to fit it without clipping off the edge of the screen (see the max-width media query below) -- if there's no free space, it just doesn't render, rather than overlapping real content. HP/Armor/Mana all start at the anonymous default (1000/0/0) server-side and mana.js fills in the real values once /mana/status resolves (docs/mana-design.md §10), same as the rest of the Mana widget. */ .hero-panel { position: absolute; /* Above .site-header, which carries z-index 1 so its drop shadow lands over the content -- see the note there. This panel's top edge sits inside the header's band, so without this it disappears behind the nav on any theme whose header is not transparent. */ z-index: 2; top: 1rem; /* Shares its left edge and width with .spell-column below it -- the two read as one column down the left gutter, so they have to be expressed the same way or they drift apart. Both are px for the reason spelled out on .spell-column: the gutter they live in is (100vw - 980px) / 2 and the breakpoint that hides them is a px one, so sizing these in rem let a changed root font (Brave's minimum font size, a page zoom, an accessibility extension) push them wider than the space available. -692 = the content column's own left edge (50% - 490px) minus the 202px .spell-column is offset by; 190px matches its width. */ left: calc(50% - 692px); width: 190px; display: flex; flex-direction: column; gap: 0.35rem; background: var(--bg-card); border: 1px solid var(--accent); border-radius: 10px; padding: 0.7rem 0.8rem; box-shadow: 0 6px 18px var(--shadow); } .hero-name-row { display: flex; align-items: baseline; gap: 0.4rem; } .hero-name { font-weight: 700; font-size: 0.85rem; color: var(--text); } .hero-role { font-size: 0.63rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; background: var(--tag-bg); border-radius: 4px; padding: 0.05rem 0.35rem; } .hero-bar { position: relative; height: 1.05rem; border-radius: var(--progress-radius); background: var(--progress-bg); border: var(--progress-border); box-shadow: var(--progress-shadow); overflow: hidden; } .hero-bar-fill { position: absolute; inset: 0; width: 0; border-radius: 3px; transition: width 0.4s ease; } /* The texture a theme lays over the fill -- Aqua's diagonal stripes, Aero's gloss sweep. A separate layer so a theme never has to restate the three per-bar colours below just to add a highlight to them. */ .hero-bar-fill::after { content: ""; position: absolute; inset: 0; background-image: var(--progress-overlay); pointer-events: none; } .hero-bar-hp .hero-bar-fill { background: var(--bar-hp); } .hero-bar-armor .hero-bar-fill { background: var(--bar-armor); } .hero-bar-mana .hero-bar-fill { background: var(--bar-mana); } .hero-bar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.7); letter-spacing: 0.01em; white-space: nowrap; pointer-events: none; } /* The left-gutter column (docs/mana-design.md §10): the spell bar, with the Site Tagline beneath it. The tagline flows directly under the bar however tall it renders, and stays put when the bar is hidden (no signed-in identity) -- a Site Tagline is a site-wide effect everyone sees, not a caster-only one. The bar itself is populated by mana.js from GET /mana/spells; empty/hidden until a signed-in identity's status resolves, since casting requires Mana. An earlier attempt to align this with
's *top* was reverted for overlapping .hero-panel, which occupies the same gutter from top:1rem down to roughly 7rem. Aligning with the post box instead (see --post-box-top on .site-main) clears the hero panel comfortably -- the post box starts well below it -- which is what makes nesting inside main viable now where it wasn't before. position:absolute, not fixed, so it scrolls away with the page like .hero-panel does rather than trailing the viewport down a long Feel. */ .spell-column { position: absolute; z-index: 2; /* Top edge of the post box, and left of .site-main's own left edge -- both relative to .site-main now, so neither has to track the header's height the way the old page-absolute top/left pair did. */ top: var(--post-box-top); /* Horizontal geometry is in px, NOT rem, on purpose. The gutter this has to fit inside is (100vw - .site-main's 980px max-width) / 2, and the breakpoint below that hides the column is a px one -- both are rem-independent, so sizing the column in rem let the two drift apart the moment anything changed the root font size. That is exactly what Brave (and font-size-bumping privacy/accessibility extensions generally) does: at the old -12rem/11rem, a root font any larger than the page's own 19px made the column wider than the gutter it sits in, so the viewport clipped its left edge and the bar collapsed into a narrow scrolling box. At the 1401px the breakpoint lets through, the gutter is (1401 - 980) / 2 = 210px; 12 + 190 = 202px fits with room to spare, and now stays fitting whatever the root font is. .hero-panel above sits directly on top of this and uses the same two numbers -- keep them in step, or the gutter stops reading as one column. */ left: -202px; width: 190px; display: flex; flex-direction: column; gap: 0.4rem; } /* Beats .site-main > * + *, whose margin would otherwise be added to the top offset above (margins do shift an absolutely positioned box). */ .site-main > .spell-column { margin-top: 0; } .spell-bar { background-image: var(--panel-image); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); display: flex; flex-direction: column; gap: 0.4rem; /* Deliberately NOT capped with a max-height + overflow-y: auto. It used to be (so a long spell list couldn't push the tagline off-screen), but the cap was calc(100vh - 14rem) -- part viewport, part root font -- which meant an inflated root font shrank the box and grew its contents at the same time, tipping the bar into its own scroller. Since the column is absolutely positioned and scrolls away with the page rather than being pinned to the viewport, an expanded category can simply run down the page and be reached by scrolling normally, which is both nicer to use and has nothing left to mis-measure. */ } .spell-bar[hidden] { display: none; } .spell-bar-category summary { cursor: pointer; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; } .spell-bar-category { margin-bottom: 0.2rem; } .spell-bar-list { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.3rem 0 0; } .spell-btn { display: flex; flex-direction: column; gap: 0.15rem; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0.35rem 0.5rem; font-size: 0.72rem; cursor: pointer; text-align: left; } .spell-btn:hover { border-color: var(--accent); } .spell-btn:disabled { opacity: 0.4; cursor: not-allowed; } .spell-btn-head { display: flex; justify-content: space-between; gap: 0.4rem; font-weight: 600; } .spell-btn-cost { color: var(--text-dim); white-space: nowrap; font-weight: 400; } .spell-btn-desc { color: var(--text-dim); font-size: 0.66rem; font-weight: 400; line-height: 1.3; } .spell-btn.is-targeting { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .spell-cancel-btn { background: var(--bg-card); border: 1px solid var(--danger); color: var(--danger); border-radius: 6px; padding: 0.35rem 0.5rem; font-size: 0.72rem; cursor: pointer; } /* Targeting mode (sidebar Post spells): crosshair cursor everywhere, valid targets (post cards) light up on hover so it's obvious where a click will land. */ body.spell-targeting-mode { cursor: crosshair; } body.spell-targeting-mode .post-card { cursor: crosshair; } body.spell-targeting-mode .post-card:hover { outline: 2px dashed var(--accent); outline-offset: 2px; } /* Spell params panel -- collects hours/color/text for spells that need them (docs/mana-design.md §10, v2's "adjustable based on what they want to spend" duration pricing). */ .spell-params-panel { display: flex; flex-direction: column; gap: 0.4rem; background: var(--bg-card); border: 1px solid var(--accent); border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.75rem; margin-bottom: 0.3rem; } .spell-params-title { font-weight: 700; } .spell-params-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .spell-params-row input[type="text"] { flex: 1; min-width: 0; } .spell-params-cost { color: var(--text-dim); font-size: 0.7rem; } .spell-params-btn-row { display: flex; gap: 0.4rem; } .spell-params-btn-row button { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0.3rem; font-size: 0.72rem; cursor: pointer; } .spell-params-btn-row button:first-child { border-color: var(--accent); } /* Per-post spell icon + menu (docs/mana-design.md §10, v2 Post spells) -- the icon sits in each Feel's own post-head; clicking it opens a menu of just that post's Post spells, target already implied. */ .post-spell-icon-btn { margin-left: auto; } .post-spell-menu { display: flex; flex-direction: column; gap: 0.3rem; background: var(--bg-card); border: 1px solid var(--accent); border-radius: 8px; padding: 0.5rem 0.6rem; margin-top: 0.5rem; font-size: 0.78rem; } .post-spell-menu-btn { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0.35rem 0.5rem; font-size: 0.78rem; text-align: left; cursor: pointer; } .post-spell-menu-btn:hover { border-color: var(--accent); } .post-spell-menu-btn:disabled { opacity: 0.4; cursor: not-allowed; } .post-spell-menu-close { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.75rem; cursor: pointer; } /* Right-sidebar recent-activity feed. position:absolute, same as .spell-bar above -- scrolls away normally with the page. */ .mana-events-sidebar { background-image: var(--panel-image); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); position: absolute; z-index: 2; top: 1rem; /* px for the same reason .spell-column is -- this sits in the mirror image of that gutter (50% of the viewport puts it at the centre, +490 walks out to the right edge of the 980px content column), so a rem width here overflowed the gutter under an inflated root font too. 12 + 186 = 198px against the 210px the breakpoint guarantees. */ left: calc(50% + 490px + 12px); width: 186px; /* Deliberately NOT capped with a max-height + overflow-y: auto, for the same reason .spell-bar above isn't. The cap was calc(100vh - 2rem), which put a scroller inside a box that is already absolutely positioned and already scrolls away with the page -- so the reader got two scrollbars for one list, and the inner one hid its own overflow behind a thumb most people never touch. The feed is bounded by constants.EVENTS_FEED_LIMIT instead, which bounds the height at the source rather than hiding it. Anything past the fold simply uses the page's own scrollbar. */ background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.8rem; box-shadow: 0 6px 18px var(--shadow); } .mana-events-sidebar[hidden] { display: none; } .mana-events-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 0.4rem; } .mana-event-row { font-size: 0.72rem; color: var(--text-dim); padding: 0.3rem 0; /* Pinned rather than left to the browser's "normal" so the row's line spacing is a known quantity and does not shift with the font stack. */ line-height: 1.45; border-top: 1px solid var(--border); /* Anchors the dismiss ×, and the right padding is what stops a long message running underneath it. */ position: relative; padding-right: 1rem; } .mana-event-row:first-child { border-top: none; } /* Dismiss ×, top right of every notification. Deliberately faint until the row is hovered: it sits on every row in the feed, so at full contrast a dozen of them would read as the loudest thing in the sidebar. NO explicit height, and that is the point. An earlier version gave this a height of one text line box and matched line-height, reasoning that the glyph would then centre on the message's first line. It does not: a