/* ============================================================
Chud — Hextech Relic theme pack
6 themes: relic (default) · verdant · ember · abyss · amethyst · tome (light)
INSTALL
1. Load AFTER neon.css:
2. On boot:
document.documentElement.dataset.theme =
localStorage.getItem('chud-theme') || 'relic';
3. To switch:
document.documentElement.dataset.theme = id;
localStorage.setItem('chud-theme', id);
A missing/unknown attribute = the `relic` values from neon.css's :root.
NOTES
· These blocks set ONLY the design-system tokens. Everything else
(backgrounds, frames, glows, key art) is expressed in neon.css against
--bg0/--metal/--gem/--glow1/--glow2/--art-filter, so it re-cascades for
free on an attribute swap. The legacy names (--gold/--cyan/--bg-panel …)
are aliased to these in neon.css's :root, so untouched page stylesheets
follow the theme too.
· LEGACY IDS: the pre-Relic themes were `neon` and `graphite`. Existing
installs have those ids in localStorage AND in the Rust config, and
theme-boot.js stamps the stored id on before main.js can migrate
it — so `neon` and `graphite` are carried as selector aliases of `relic`
and `tome`. Without them an upgrading user gets one unstyled frame (or a
permanently unstyled overlay window, which never runs main.js).
· overlay.html links THIS file but not neon.css, so its --ov-* palette
lives at the bottom — :root defaults plus one block per theme.
============================================================ */
/* ── RELIC — hextech gold + teal gem (default) ─────────────── */
:root[data-theme="relic"],
:root[data-theme="neon"] {
--bg0: #010a13;
--bg1: #051520;
--panel: rgba(4,17,26,.72);
--inset: rgba(2,10,16,.6);
--metal: #c8aa6e;
--metal-dim: #785a28;
--metal-faint: #463714;
--metal-hi: #f0e6d2;
--gem: #0ac8b9;
--gem-soft: #5ee6da;
--text: #f0e6d2;
--sub: #b5af9f;
--dim: #7d7969;
--ok: #3ddc97;
--warn: #e6a23c;
--bad: #e56a5e;
--on-metal: #010a13;
--glow1: rgba(10,200,185,.14);
--glow2: rgba(200,170,110,.09);
--art-filter: none;
--art-op: 1;
}
/* ── VERDANT — emerald grove ───────────────────────────────── */
:root[data-theme="verdant"] {
--bg0: #041109;
--bg1: #082015;
--panel: rgba(6,22,14,.72);
--inset: rgba(3,13,8,.6);
--metal: #9dd3a8;
--metal-dim: #47795a;
--metal-faint: #2b4d38;
--metal-hi: #eafff0;
--gem: #14e0a0;
--gem-soft: #86ffbe;
--text: #e9fff4;
--sub: #9fcab3;
--dim: #5d8570;
--ok: #33e0a0;
--warn: #ffc24d;
--bad: #ff5f6e;
--on-metal: #04130c;
--glow1: rgba(20,224,160,.13);
--glow2: rgba(157,211,168,.08);
--art-filter: saturate(.85);
--art-op: 1;
}
/* ── EMBER — forge & flame ─────────────────────────────────── */
:root[data-theme="ember"] {
--bg0: #160709;
--bg1: #241014;
--panel: rgba(30,12,14,.72);
--inset: rgba(18,6,8,.6);
--metal: #dd9a62;
--metal-dim: #8a5230;
--metal-faint: #4e2d1c;
--metal-hi: #ffe9d6;
--gem: #ff6a35;
--gem-soft: #ffa47c;
--text: #fff1ea;
--sub: #cfa093;
--dim: #91695e;
--ok: #3ddc97;
--warn: #ffb347;
--bad: #ff4757;
--on-metal: #1a060d;
--glow1: rgba(255,106,53,.13);
--glow2: rgba(221,154,98,.08);
--art-filter: sepia(.25) saturate(1.05);
--art-op: 1;
}
/* ── ABYSS — deep-sea sapphire ─────────────────────────────── */
:root[data-theme="abyss"] {
--bg0: #050c1c;
--bg1: #0a1730;
--panel: rgba(8,18,38,.72);
--inset: rgba(4,9,20,.6);
--metal: #a9c1e0;
--metal-dim: #4e6a96;
--metal-faint: #2b3d5c;
--metal-hi: #eaf3ff;
--gem: #35e4ff;
--gem-soft: #7ceeff;
--text: #eaf3ff;
--sub: #9db1cf;
--dim: #5a6c90;
--ok: #33e0a0;
--warn: #e6a23c;
--bad: #ff5470;
--on-metal: #04101f;
--glow1: rgba(53,228,255,.12);
--glow2: rgba(169,193,224,.07);
--art-filter: saturate(.9) hue-rotate(-10deg);
--art-op: 1;
}
/* ── AMETHYST — arcane regalia ─────────────────────────────── */
:root[data-theme="amethyst"] {
--bg0: #110723;
--bg1: #1c0d3a;
--panel: rgba(21,10,43,.72);
--inset: rgba(12,5,26,.6);
--metal: #c9aef0;
--metal-dim: #6a4b9e;
--metal-faint: #3d2a60;
--metal-hi: #f5eeff;
--gem: #ff85e0;
--gem-soft: #ffb5ec;
--text: #f5eeff;
--sub: #b1a0d4;
--dim: #716099;
--ok: #3ddc97;
--warn: #e6a23c;
--bad: #ff5470;
--on-metal: #120826;
--glow1: rgba(162,91,255,.15);
--glow2: rgba(255,133,224,.08);
--art-filter: saturate(1.05);
--art-op: 1;
}
/* ── TOME — parchment (LIGHT) ──────────────────────────────── */
:root[data-theme="tome"],
:root[data-theme="graphite"] {
--bg0: #eef0f6;
--bg1: #f7f8fc;
--panel: rgba(255,255,255,.82);
--inset: rgba(232,235,244,.85);
--metal: #3d445c;
--metal-dim: #9aa2ba;
--metal-faint: #d3d8e8;
--metal-hi: #171a26;
--gem: #3050e0;
--gem-soft: #4868ff;
--text: #171a26;
--sub: #4c5268;
--dim: #8288a0;
--ok: #0f9f6e;
--warn: #a96f10;
--bad: #d9365e;
--on-metal: #ffffff;
--glow1: rgba(72,104,255,.07);
--glow2: rgba(61,68,92,.05);
--art-filter: grayscale(1) brightness(1.12) contrast(.9);
--art-op: .35;
color-scheme: light;
}
/* Light-theme specifics the tokens alone can't express: on a light page a
panel needs a cast shadow to read as raised, and neon.css's white
selection text would vanish on the pale selection fill. */
[data-theme="tome"] ::selection,
[data-theme="graphite"] ::selection { color: var(--text); }
[data-theme="tome"] .glass, [data-theme="tome"] .hx, [data-theme="tome"] .forge,
[data-theme="tome"] .mod, [data-theme="tome"] .hero,
[data-theme="graphite"] .glass, [data-theme="graphite"] .hx, [data-theme="graphite"] .forge,
[data-theme="graphite"] .mod, [data-theme="graphite"] .hero { box-shadow: 0 10px 30px rgba(38,48,92,0.08); }
[data-theme="tome"] .toast, [data-theme="tome"] .update-card,
[data-theme="tome"] .bug-card, [data-theme="tome"] .adv-card,
[data-theme="graphite"] .toast, [data-theme="graphite"] .update-card,
[data-theme="graphite"] .bug-card, [data-theme="graphite"] .adv-card { box-shadow: 0 18px 60px rgba(38,48,92,0.22); }
[data-theme="tome"] .rc-overlay, [data-theme="tome"] .adv-overlay,
[data-theme="tome"] .update-overlay, [data-theme="tome"] .bug-overlay,
[data-theme="graphite"] .rc-overlay, [data-theme="graphite"] .adv-overlay,
[data-theme="graphite"] .update-overlay, [data-theme="graphite"] .bug-overlay { background: rgba(90,100,140,.35); }
/* ============================================================
OVERLAY TOKENS — overlay.html tokenizes its palette with these
--ov-* variables (it links this file but NOT neon.css, so the
relic defaults live here on :root, not in neon.css). Each theme's
block below overrides them; the attribute selector out-specifies
the bare :root default so the active theme wins.
Values are remapped onto the Relic palette (--ov-acc = the theme's
gem, --ov-acc2/--ov-gold = its metal) so the in-game overlay stays
coherent with the app. Its LAYOUT retheme — square corners, gold
frames, diamond motifs — is a separate follow-up pass on
overlay.html itself; nothing here changes its shape.
============================================================ */
:root {
--ov-bg: rgba(1,10,19,0.97); --ov-panel: #051520; --ov-inset: #0a2230;
--ov-line: #463714; --ov-card-line: #33280f; --ov-btn: #10222c;
--ov-text: #f0e6d2; --ov-muted: #b5af9f; --ov-dim: #7d7969;
--ov-acc: #0ac8b9; --ov-acc-soft: #5ee6da; --ov-on-acc: #010a13;
--ov-acc2: #c8aa6e; --ov-acc2-soft: #f0e6d2; --ov-on-acc2: #010a13; --ov-gold: #c8aa6e;
}
:root[data-theme="relic"],
:root[data-theme="neon"] {
--ov-bg: rgba(1,10,19,0.97); --ov-panel: #051520; --ov-inset: #0a2230;
--ov-line: #463714; --ov-card-line: #33280f; --ov-btn: #10222c;
--ov-text: #f0e6d2; --ov-muted: #b5af9f; --ov-dim: #7d7969;
--ov-acc: #0ac8b9; --ov-acc-soft: #5ee6da; --ov-on-acc: #010a13;
--ov-acc2: #c8aa6e; --ov-acc2-soft: #f0e6d2; --ov-on-acc2: #010a13; --ov-gold: #c8aa6e;
}
:root[data-theme="verdant"] {
--ov-bg: rgba(4,17,9,0.97); --ov-panel: #082015; --ov-inset: #0d2c1d;
--ov-line: #2b4d38; --ov-card-line: #1e3a29; --ov-btn: #123626;
--ov-text: #e9fff4; --ov-muted: #9fcab3; --ov-dim: #5d8570;
--ov-acc: #14e0a0; --ov-acc-soft: #86ffbe; --ov-on-acc: #04130c;
--ov-acc2: #9dd3a8; --ov-acc2-soft: #eafff0; --ov-on-acc2: #04130c; --ov-gold: #9dd3a8;
}
:root[data-theme="ember"] {
--ov-bg: rgba(22,7,9,0.97); --ov-panel: #241014; --ov-inset: #2f171b;
--ov-line: #4e2d1c; --ov-card-line: #3b2116; --ov-btn: #3a1a1e;
--ov-text: #fff1ea; --ov-muted: #cfa093; --ov-dim: #91695e;
--ov-acc: #ff6a35; --ov-acc-soft: #ffa47c; --ov-on-acc: #1a060d;
--ov-acc2: #dd9a62; --ov-acc2-soft: #ffe9d6; --ov-on-acc2: #1a060d; --ov-gold: #dd9a62;
}
:root[data-theme="abyss"] {
--ov-bg: rgba(5,12,28,0.97); --ov-panel: #0a1730; --ov-inset: #0f2040;
--ov-line: #2b3d5c; --ov-card-line: #1e2d47; --ov-btn: #14264a;
--ov-text: #eaf3ff; --ov-muted: #9db1cf; --ov-dim: #5a6c90;
--ov-acc: #35e4ff; --ov-acc-soft: #7ceeff; --ov-on-acc: #04101f;
--ov-acc2: #a9c1e0; --ov-acc2-soft: #eaf3ff; --ov-on-acc2: #04101f; --ov-gold: #a9c1e0;
}
:root[data-theme="amethyst"] {
--ov-bg: rgba(17,7,35,0.97); --ov-panel: #1c0d3a; --ov-inset: #251148;
--ov-line: #3d2a60; --ov-card-line: #2e1f4c; --ov-btn: #2a1c50;
--ov-text: #f5eeff; --ov-muted: #b1a0d4; --ov-dim: #716099;
--ov-acc: #ff85e0; --ov-acc-soft: #ffb5ec; --ov-on-acc: #120826;
--ov-acc2: #c9aef0; --ov-acc2-soft: #f5eeff; --ov-on-acc2: #120826; --ov-gold: #c9aef0;
}
:root[data-theme="tome"],
:root[data-theme="graphite"] {
--ov-bg: rgba(247,248,252,0.98); --ov-panel: #eef0f6; --ov-inset: #e4e8f2;
--ov-line: #d3d8e8; --ov-card-line: #dfe3ef; --ov-btn: #e8ebf4;
--ov-text: #171a26; --ov-muted: #4c5268; --ov-dim: #8288a0;
--ov-acc: #3050e0; --ov-acc-soft: #4868ff; --ov-on-acc: #ffffff;
--ov-acc2: #3d445c; --ov-acc2-soft: #262c40; --ov-on-acc2: #ffffff; --ov-gold: #a96f10;
}