ff9203f754
- Cinzel + Alegreya fonts for old-tome D&D book feel - Dark parchment (default), light parchment, white, and abyss themes - CSS custom properties system for all colors, borders, shadows - Generated PNG textures for parchment grain, speckle, and wood grain - Ornamental gold gradient separators and decorative header lines - Deep dramatic shadows and gold-tinted borders on all panels - ThemeToggle component with localStorage persistence - Embossed gold buttons with gradient and inner shadow Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
182 lines
4.8 KiB
CSS
182 lines
4.8 KiB
CSS
/* ============================================================
|
|
Shadowdark Theme System
|
|
============================================================
|
|
All theme-dependent colors use CSS custom properties.
|
|
Themes are activated via data-theme attribute on <html>.
|
|
Default (no attribute) = dark-parchment.
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* --- Color components (for rgba() usage) --- */
|
|
--gold-rgb: 201, 168, 76;
|
|
--shadow-rgb: 0, 0, 0;
|
|
--danger-rgb: 231, 76, 60;
|
|
--crit-rgb: 255, 215, 0;
|
|
|
|
/* --- Backgrounds --- */
|
|
--bg-body: #0a0908;
|
|
--bg-body-vignette: rgba(25, 22, 18, 0.6);
|
|
--bg-surface: #2a2520;
|
|
--bg-modal: #201c18;
|
|
--bg-input: #15130f;
|
|
--bg-inset: rgba(0, 0, 0, 0.3);
|
|
--bg-overlay: rgba(0, 0, 0, 0.75);
|
|
--bg-roll-log: #1a1714;
|
|
--bg-roll-entry: #252118;
|
|
|
|
/* --- Text --- */
|
|
--text-primary: #dad5c9;
|
|
--text-secondary: #908878;
|
|
--text-tertiary: #665e52;
|
|
--text-faint: #4a4238;
|
|
|
|
/* --- Gold accent --- */
|
|
--gold: #c9a84c;
|
|
--gold-hover: #d4b65a;
|
|
--gold-bright: #dcc06a;
|
|
--btn-gold-bg: linear-gradient(180deg, #d4b65a, #c9a84c 40%, #b8973e);
|
|
--btn-active-text: #1a1a2e;
|
|
|
|
/* --- Status colors --- */
|
|
--hp: #4caf50;
|
|
--ac: #5dade2;
|
|
--danger: #e74c3c;
|
|
--warning: #ff9800;
|
|
--crit: #ffd700;
|
|
--copper: #b87333;
|
|
--silver: #a0a0a0;
|
|
|
|
/* --- Textures --- */
|
|
--texture-surface: url("/textures/parchment-noise.png");
|
|
--texture-speckle: url("/textures/speckle.png");
|
|
--texture-body: url("/textures/wood-grain.png");
|
|
--texture-surface-size: 256px 256px;
|
|
--texture-speckle-size: 128px 128px;
|
|
--texture-body-size: 512px 512px;
|
|
}
|
|
|
|
/* ============================================================
|
|
Light Parchment — warm beige, like reading by daylight
|
|
============================================================ */
|
|
[data-theme="light-parchment"] {
|
|
--gold-rgb: 140, 110, 40;
|
|
--shadow-rgb: 80, 60, 30;
|
|
--danger-rgb: 200, 60, 45;
|
|
|
|
--bg-body: #c4b594;
|
|
--bg-body-vignette: rgba(160, 140, 100, 0.3);
|
|
--bg-surface: #ddd0b0;
|
|
--bg-modal: #d5c8a8;
|
|
--bg-input: #c8bb9a;
|
|
--bg-inset: rgba(0, 0, 0, 0.06);
|
|
--bg-overlay: rgba(0, 0, 0, 0.5);
|
|
--bg-roll-log: #d0c3a0;
|
|
--bg-roll-entry: #d8cbb0;
|
|
|
|
--text-primary: #2a2218;
|
|
--text-secondary: #5a5040;
|
|
--text-tertiary: #7a7060;
|
|
--text-faint: #9a9080;
|
|
|
|
--gold: #8a6d2b;
|
|
--gold-hover: #a0832e;
|
|
--gold-bright: #b89530;
|
|
--btn-gold-bg: linear-gradient(180deg, #a08335, #8a6d2b 40%, #7a5d20);
|
|
--btn-active-text: #f0e8d0;
|
|
|
|
--hp: #2e8b34;
|
|
--ac: #2e7da8;
|
|
--danger: #c83c2d;
|
|
--warning: #c87800;
|
|
--crit: #b8960a;
|
|
--copper: #8a5520;
|
|
--silver: #707070;
|
|
|
|
--texture-surface: url("/textures/parchment-noise-light.png");
|
|
--texture-speckle: url("/textures/speckle-light.png");
|
|
--texture-body: url("/textures/wood-grain-light.png");
|
|
}
|
|
|
|
/* ============================================================
|
|
White — clean, minimal, near-white
|
|
============================================================ */
|
|
[data-theme="white"] {
|
|
--gold-rgb: 154, 125, 48;
|
|
--shadow-rgb: 0, 0, 0;
|
|
--danger-rgb: 200, 60, 45;
|
|
|
|
--bg-body: #f0ede8;
|
|
--bg-body-vignette: transparent;
|
|
--bg-surface: #faf8f4;
|
|
--bg-modal: #f5f3ef;
|
|
--bg-input: #eae7e0;
|
|
--bg-inset: rgba(0, 0, 0, 0.04);
|
|
--bg-overlay: rgba(0, 0, 0, 0.4);
|
|
--bg-roll-log: #f2f0ec;
|
|
--bg-roll-entry: #f8f6f2;
|
|
|
|
--text-primary: #1a1816;
|
|
--text-secondary: #555048;
|
|
--text-tertiary: #807870;
|
|
--text-faint: #aaa498;
|
|
|
|
--gold: #9a7d30;
|
|
--gold-hover: #b0932e;
|
|
--gold-bright: #c8a830;
|
|
--btn-gold-bg: linear-gradient(180deg, #b09335, #9a7d30 40%, #8a6d25);
|
|
--btn-active-text: #f5f3ef;
|
|
|
|
--hp: #2e8b34;
|
|
--ac: #2e7da8;
|
|
--danger: #c83c2d;
|
|
--warning: #c87800;
|
|
--crit: #8a7010;
|
|
--copper: #8a5520;
|
|
--silver: #707070;
|
|
|
|
--texture-surface: none;
|
|
--texture-speckle: none;
|
|
--texture-body: none;
|
|
}
|
|
|
|
/* ============================================================
|
|
Abyss — maximum dark, pitch black
|
|
============================================================ */
|
|
[data-theme="abyss"] {
|
|
--gold-rgb: 212, 182, 90;
|
|
--shadow-rgb: 0, 0, 0;
|
|
--danger-rgb: 231, 76, 60;
|
|
|
|
--bg-body: #050505;
|
|
--bg-body-vignette: transparent;
|
|
--bg-surface: #0e0e14;
|
|
--bg-modal: #0a0a10;
|
|
--bg-input: #08080e;
|
|
--bg-inset: rgba(0, 0, 0, 0.5);
|
|
--bg-overlay: rgba(0, 0, 0, 0.85);
|
|
--bg-roll-log: #0a0a10;
|
|
--bg-roll-entry: #0e0e14;
|
|
|
|
--text-primary: #e8e8e8;
|
|
--text-secondary: #888888;
|
|
--text-tertiary: #606060;
|
|
--text-faint: #404040;
|
|
|
|
--gold: #d4b65a;
|
|
--gold-hover: #e0c870;
|
|
--gold-bright: #edd880;
|
|
--btn-gold-bg: linear-gradient(180deg, #e0c870, #d4b65a 40%, #c4a64a);
|
|
--btn-active-text: #0a0a10;
|
|
|
|
--hp: #4caf50;
|
|
--ac: #5dade2;
|
|
--danger: #e74c3c;
|
|
--warning: #ff9800;
|
|
--crit: #ffd700;
|
|
--copper: #b87333;
|
|
--silver: #a0a0a0;
|
|
|
|
--texture-surface: none;
|
|
--texture-speckle: none;
|
|
--texture-body: none;
|
|
}
|