/* ====================================================================== * * Idle Realms — themes.css * ----------------------------------------------------------------------- * * The colour-theme system. Five full palettes expressed entirely through * CSS custom properties so every component (which already reads these * tokens via `var(--x, fallback)`) restyles itself automatically: * * • Dark [data-theme="dark"] (default) * • Light [data-theme="light"] * • High Contrast [data-theme="high-contrast"] * • Forest [data-theme="forest"] * • Astral [data-theme="astral"] * * How a theme is selected * ----------------------- * `js/core/themes.js` (window.THEMES) writes `data-theme=""` onto the * `` element. An inline script in (see index.html) sets it * before first paint from localStorage, so there is never a flash of the * wrong theme. If JS is disabled entirely, components.css' `:root` dark * block is the fallback, so the game is always legible. * * Tokens defined per theme mirror the canonical set in components.css: * surfaces, text, borders, brand/accent, semantic, rarity, shadows, plus a * `--focus-ring` for keyboard accessibility. Radii / motion / z-index are * theme-agnostic and stay defined once in components.css. * * Companion UI: the theme switcher rendered by THEMES.createControls() * (a grid of `.theme-swatch` buttons + an auto-detect toggle) is styled at * the bottom of this file so the whole feature lives in one place. * ====================================================================== */ /* ---------------------------------------------------------------------- Smooth cross-fade when switching themes. Scoped to structural chrome so we never fight a component's own hover transitions, and fully disabled under prefers-reduced-motion. ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { :root, body, .top-bar, .sidebar, .game-view, .activity-log, .panel, .card, .modal, .modal__dialog, .modal__backdrop, .btn, .slot, .progress-bar, .toast, .tabs, input, select, textarea { transition: background-color var(--dur, 0.25s) var(--ease, ease), border-color var(--dur, 0.25s) var(--ease, ease), color var(--dur, 0.25s) var(--ease, ease); } } /* ====================================================================== * * 1. DARK — default. Deep slate surfaces, cool blue accent. * ====================================================================== */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg-app: #0d1117; --bg-surface: #161c26; --bg-elevated: #1f2733; --bg-sunken: #0b0f15; --bg-overlay: rgba(8, 11, 16, 0.72); --bg-track: rgba(0, 0, 0, 0.35); /* Text */ --text: #e8eaf0; --text-muted: #9aa3b2; --text-dim: #6b7280; /* Borders */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); /* Brand / accents */ --accent: #4aa3ff; --accent-strong: #6db5ff; --accent-weak: rgba(74, 163, 255, 0.16); --accent-2: #7c5cff; /* Semantic */ --gold: #ffc83d; --success: #3dd68c; --warning: #f5b042; --danger: #ff5c5c; --info: #4aa3ff; /* Rarity */ --rarity-common: #b0b7c3; --rarity-uncommon: #4ade80; --rarity-rare: #4aa3ff; --rarity-epic: #b061ff; --rarity-legendary: #ffb347; --rarity-mythic: #ff4d6d; /* Shadows */ --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30); --shadow: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); /* Accessibility */ --focus-ring: 0 0 0 3px rgba(74, 163, 255, 0.55); } /* ====================================================================== * * 2. LIGHT — bright paper-white surfaces, dark text, deeper blue accent. * ====================================================================== */ [data-theme="light"] { color-scheme: light; /* Surfaces */ --bg-app: #eef1f6; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-sunken: #e3e8f0; --bg-overlay: rgba(18, 24, 38, 0.45); --bg-track: rgba(15, 23, 42, 0.10); /* Text */ --text: #1f2733; --text-muted: #56607a; --text-dim: #8a93a8; /* Borders */ --border: rgba(15, 23, 42, 0.12); --border-strong: rgba(15, 23, 42, 0.22); /* Brand / accents — deepened for AA contrast on white */ --accent: #2f7de0; --accent-strong: #1c66c4; --accent-weak: rgba(47, 125, 224, 0.14); --accent-2: #6d4bff; /* Semantic — darkened to stay readable on white */ --gold: #b87800; --success: #1f9d5d; --warning: #b66e00; --danger: #d23b3b; --info: #2f7de0; /* Rarity — darkened for contrast */ --rarity-common: #5b6473; --rarity-uncommon: #1f9d5d; --rarity-rare: #2f7de0; --rarity-epic: #8a3df0; --rarity-legendary: #b66e00; --rarity-mythic: #d23b5e; /* Shadows — soft and lifted */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.12); --shadow: 0 6px 18px rgba(15, 23, 42, 0.14); --shadow-lg: 0 14px 40px rgba(15, 23, 42, 0.18); /* Accessibility */ --focus-ring: 0 0 0 3px rgba(47, 125, 224, 0.45); } /* ====================================================================== * * 3. HIGH CONTRAST — pure black/white, bold outlines, no translucency. * Optimised for low vision; structure is carried by solid borders. * ====================================================================== */ [data-theme="high-contrast"] { color-scheme: dark; /* Surfaces — opaque */ --bg-app: #000000; --bg-surface: #000000; --bg-elevated: #0b0b0b; --bg-sunken: #000000; --bg-overlay: rgba(0, 0, 0, 0.85); --bg-track: #1a1a1a; /* Text — maximum luminance */ --text: #ffffff; --text-muted: #f2f2f2; --text-dim: #d0d0d0; /* Borders — solid white; "strong" emphasised in signal gold */ --border: #ffffff; --border-strong: #ffd400; /* Brand / accents — high-saturation signal colours */ --accent: #ffd400; --accent-strong: #ffe44d; --accent-weak: rgba(255, 212, 0, 0.28); --accent-2: #00e5ff; /* Semantic — full brightness */ --gold: #ffd400; --success: #00ff7a; --warning: #ffb300; --danger: #ff3b3b; --info: #00e5ff; /* Rarity — maximum brightness */ --rarity-common: #ffffff; --rarity-uncommon: #00ff7a; --rarity-rare: #4aa3ff; --rarity-epic: #d06bff; --rarity-legendary: #ffb347; --rarity-mythic: #ff4d6d; /* Shadows — near-invisible on pure black; borders do the work */ --shadow-sm: 0 2px 4px #000000; --shadow: 0 4px 8px #000000; --shadow-lg: 0 8px 16px #000000; /* Accessibility — thick gold ring */ --focus-ring: 0 0 0 3px #ffd400; } /* ====================================================================== * * 4. FOREST — earthy moss greens with a fresh leaf accent. * ====================================================================== */ [data-theme="forest"] { color-scheme: dark; /* Surfaces */ --bg-app: #0e1612; --bg-surface: #15211a; --bg-elevated: #1d2c23; --bg-sunken: #0a0f0c; --bg-overlay: rgba(6, 14, 10, 0.74); --bg-track: rgba(0, 0, 0, 0.38); /* Text */ --text: #e4ede2; --text-muted: #93a894; --text-dim: #647260; /* Borders */ --border: rgba(170, 220, 180, 0.10); --border-strong: rgba(170, 220, 180, 0.22); /* Brand / accents */ --accent: #4ade80; --accent-strong: #74f0a0; --accent-weak: rgba(74, 222, 128, 0.16); --accent-2: #d9a441; /* Semantic */ --gold: #e0b34a; --success: #4ade80; --warning: #e0b34a; --danger: #ff6b6b; --info: #5fd0c4; /* Rarity — tuned to the green cast */ --rarity-common: #b7c4b6; --rarity-uncommon: #4ade80; --rarity-rare: #5fb8ff; --rarity-epic: #c98bff; --rarity-legendary: #e0b34a; --rarity-mythic: #ff6b8a; /* Shadows */ --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.34); --shadow: 0 8px 24px rgba(0, 0, 0, 0.48); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.58); /* Accessibility */ --focus-ring: 0 0 0 3px rgba(74, 222, 128, 0.55); } /* ====================================================================== * * 5. ASTRAL — cosmic indigo voids pierced by violet starlight. * ====================================================================== */ [data-theme="astral"] { color-scheme: dark; /* Surfaces */ --bg-app: #110a1f; --bg-surface: #1a1030; --bg-elevated: #241640; --bg-sunken: #0c0617; --bg-overlay: rgba(10, 5, 22, 0.74); --bg-track: rgba(0, 0, 0, 0.40); /* Text */ --text: #ece6f5; --text-muted: #aa9cc6; --text-dim: #786a92; /* Borders */ --border: rgba(200, 180, 255, 0.10); --border-strong: rgba(200, 180, 255, 0.22); /* Brand / accents */ --accent: #b061ff; --accent-strong: #c886ff; --accent-weak: rgba(176, 97, 255, 0.16); --accent-2: #4aa3ff; /* Semantic */ --gold: #ffc83d; --success: #3dd68c; --warning: #f5b042; --danger: #ff5c7a; --info: #9d7bff; /* Rarity — tuned to the violet cast */ --rarity-common: #c3b9d6; --rarity-uncommon: #4ade80; --rarity-rare: #4aa3ff; --rarity-epic: #d08bff; --rarity-legendary: #ffb347; --rarity-mythic: #ff4d6d; /* Shadows — tinted toward the void */ --shadow-sm: 0 2px 8px rgba(20, 0, 40, 0.40); --shadow: 0 8px 26px rgba(18, 0, 38, 0.55); --shadow-lg: 0 16px 50px rgba(16, 0, 34, 0.65); /* Accessibility */ --focus-ring: 0 0 0 3px rgba(176, 97, 255, 0.60); } /* ====================================================================== * * Cross-theme chrome: scrollbars, text selection, focus outline. * Driven by the active theme's variables so they always match. * ====================================================================== */ /* Native scrollbar (Firefox + standards track). */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } /* Native scrollbar (WebKit/Chromium). */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill, 999px); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; } /* Text selection — accent background, white text by default. */ ::selection { background: var(--accent); color: #ffffff; } /* High-contrast needs dark text on its bright yellow accent. */ [data-theme="high-contrast"] ::selection { color: #000000; } /* A consistent keyboard focus ring for any focusable element that doesn't define its own. `:focus-visible` keeps it off mouse clicks. */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ====================================================================== * * Theme switcher control (rendered by THEMES.createControls()) * ----------------------------------------------------------------------- * * .theme-controls * .theme-controls__hint — one-line explainer * .theme-controls__grid — responsive swatch grid * .theme-swatch — one button per theme * .theme-swatch__dot — split colour preview * .theme-swatch__label * .theme-swatch__icon * .theme-swatch__name * .theme-controls__auto — auto-detect toggle button * ====================================================================== */ .theme-controls { display: flex; flex-direction: column; gap: 12px; } .theme-controls__hint { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .theme-controls__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .theme-swatch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--bg-elevated); color: var(--text); cursor: pointer; font: inherit; text-align: left; transition: border-color var(--dur-fast, 0.15s) var(--ease, ease), background-color var(--dur-fast, 0.15s) var(--ease, ease), transform var(--dur-fast, 0.15s) var(--ease, ease); } .theme-swatch:hover { border-color: var(--border-strong); background: var(--bg-surface); } .theme-swatch:active { transform: translateY(1px); } /* Explicitly selected by the player. */ .theme-swatch--active { border-color: var(--accent); background: var(--accent-weak); } /* The theme currently applied (informational, also true in auto mode). */ .theme-swatch--current .theme-swatch__dot { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--bg-elevated); } .theme-swatch__dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); } .theme-swatch__label { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .theme-swatch__icon { font-size: 1rem; } .theme-swatch__name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-controls__auto { align-self: flex-start; } /* Hide the swatch grid's per-button outline — focus ring is enough. */ .theme-swatch:focus-visible { outline: none; }