/* * EFC Theme * All color tokens are defined here. Change a variable to affect every * element that references it across the entire UI. * * Three themes, selected via data-theme on : * (none / "dark") – default deep black * "dim" – slightly lifted darks, more readable * "light" – warm off-white bright mode * * Layer model (darkest → lightest): * void → base → elevated → surface → control */ /* ══════════════════════════════════════════════════════════════════════ DARK (default) Deep black base, maximum contrast reduction, subtle layering. ══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { /* ─── Surfaces ─────────────────────────────────────────────────────── */ --bg-void: #090909; /* deepest shadow */ --bg-base: #0c0c0c; /* page / iframe floor */ --bg-elevated: #0a0a0a; /* taskbar, window shell */ --bg-surface: #0d0d0d; /* window titlebar, inset panels */ --bg-control: #111111; /* buttons, inputs */ --bg-icon-hi: #1a1a1a; --bg-icon-lo: #0e0e0e; /* ─── Borders ─────────────────────────────────────────────────────── */ --border-faint: #1a1a1a; --border-default: #1e1e1e; --border-control: #222222; --border-mid: #2a2a2a; --border-focus: #2e2e2e; --border-icon: #363636; /* ─── Text ─────────────────────────────────────────────────────────── */ --text-primary: #b8b8b8; --text-muted: #808080; --text-dim: #555555; --text-bright: #ffffff; /* ─── Accent ────────────────────────────────────────────────────────── */ --accent: #ff7100; --accent-dot: rgba(255,113,0,0.08); --accent-danger: #ff4444; /* ─── Composite ─────────────────────────────────────────────────────── */ --shadow-win: 0 0 0 1px var(--bg-void), 0 12px 50px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.02); /* ─── Semantic / Game ──────────────────────────────────────────────── */ --color-kill: #4ec462; /* green — kill / positive */ --color-kill-hover: #5ec872; --color-kill-bg: #1a3020; /* suggestion / badge green tint bg */ --color-death: #c04444; /* red — death / loss */ --color-death-hover: #e05858; --color-system: #5080a8; /* blue — system links */ --color-system-hover: #80b0d8; --color-system-bg: #101828; /* suggestion blue tint bg */ --color-score: #c0a830; /* gold — score / kills */ --color-score-hover: #d4b840; --color-score-bg: #2a2010; /* suggestion gold tint bg */ --medal-gold: #c0a830; --medal-silver: #909090; --medal-bronze: #7c4e28; --col-ships: #6a8a6a; /* leaderboard ship count col */ --col-structs: #a05020; /* leaderboard structure count col */ --col-total: #c0a830; /* leaderboard total count col */ --badge-ship-bg: #1a1008; --badge-ship-text: #c0a830; --badge-ship-border: #2a1e08; --badge-struct-bg: #0f0f1a; --badge-struct-text: #6080c0; --badge-struct-border: #1e1e3a; --badge-capsule-bg: #1a0a1a; --badge-capsule-text: #a060c0; --badge-capsule-border: #2e1a2e; --map-bg: #0a0a0a; --map-edge: #1c1c1c; --map-edge-mini: #191919; --map-dot-inactive: #484848; --map-dot-inactive-mini:#2c2c2c; --row-alt-bg: #0d0d0d; --ticker-color: #686868; --sub-tab-active-bg: #181008; } /* ══════════════════════════════════════════════════════════════════════ DIM Wider gaps between surface layers and borders so elements are clearly distinguishable. Keeps the same mid-dark base tone. ══════════════════════════════════════════════════════════════════════ */ :root[data-theme="dim"] { /* ─── Surfaces ─────────────────────────────────────────────────────── */ --bg-void: #0e0e0e; /* deepest shadow */ --bg-base: #181818; /* page floor — same dim tone */ --bg-elevated: #141414; /* taskbar, window shell */ --bg-surface: #222222; /* panels, titlebars — wider gap from base */ --bg-control: #2e2e2e; /* buttons, inputs — clearly above surface */ --bg-icon-hi: #3c3c3c; --bg-icon-lo: #252525; /* ─── Borders ─────────────────────────────────────────────────────── */ --border-faint: #2c2c2c; /* subtle panel dividers */ --border-default: #3c3c3c; /* standard element borders */ --border-control: #505050; /* interactive borders — buttons, inputs */ --border-mid: #5a5a5a; /* prominent separators */ --border-focus: #4a4a4a; /* focus ring — neutral, no accent */ --border-icon: #686868; /* icon borders */ /* ─── Text ─────────────────────────────────────────────────────────── */ --text-primary: #d8d8d8; /* main text — clearly readable */ --text-muted: #a8a8a8; /* secondary text */ --text-dim: #787878; /* labels, annotations */ --text-bright: #ffffff; /* ─── Accent ────────────────────────────────────────────────────────── */ --accent: #ff7100; --accent-dot: rgba(255,113,0,0.10); --accent-danger: #ff5555; /* ─── Composite ─────────────────────────────────────────────────────── */ --shadow-win: 0 0 0 1px var(--bg-void), 0 10px 40px rgba(0,0,0,0.70), inset 0 0 0 1px rgba(255,255,255,0.04); /* ─── Semantic / Game ──────────────────────────────────────────────── */ --color-kill: #5acc6e; /* lifted green — more readable on dim */ --color-kill-hover: #6ed87e; --color-kill-bg: #1e3824; --color-death: #cc5050; /* lifted red */ --color-death-hover: #e06868; --color-system: #5c8ec0; /* de-saturated blue */ --color-system-hover: #88b8e0; --color-system-bg: #141c2a; --color-score: #c8b040; /* slightly warmer gold */ --color-score-hover: #dcc050; --color-score-bg: #2e2414; --medal-gold: #c8b040; --medal-silver: #a0a0a0; /* brighter on dim bg */ --medal-bronze: #906040; /* softer bronze */ --col-ships: #72987c; /* muted teal-green */ --col-structs: #b06030; /* lightened orange-brown */ --col-total: #c8b040; --badge-ship-bg: #20160a; --badge-ship-text: #c8b040; --badge-ship-border: #32220e; --badge-struct-bg: #14142a; --badge-struct-text: #6a8acc; --badge-struct-border: #20204a; --badge-capsule-bg: #201020; --badge-capsule-text: #aa72cc; --badge-capsule-border: #341634; --map-bg: #0a0a0a; --map-edge: #1c1c1c; --map-edge-mini: #191919; --map-dot-inactive: #484848; --map-dot-inactive-mini:#2c2c2c; --row-alt-bg: #1c1c1c; --ticker-color: #787878; --sub-tab-active-bg: #281c0a; } /* ══════════════════════════════════════════════════════════════════════ LIGHT Muted warm grey – comfortable mid-tone, not white. Orange accent darkened slightly so it reads on light backgrounds. ══════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* ─── Surfaces ─────────────────────────────────────────────────────── */ --bg-void: #848076; /* shadow tone */ --bg-base: #acabab; /* page / iframe floor – medium warm grey */ --bg-elevated: #a0a09a; /* taskbar, window shell */ --bg-surface: #969690; /* window titlebar, inset panels */ --bg-control: #8e8e88; /* buttons, inputs */ --bg-icon-hi: #7a7a74; --bg-icon-lo: #828280; /* ─── Borders ─────────────────────────────────────────────────────── */ --border-faint: #929290; --border-default: #888882; --border-control: #7e7e78; --border-mid: #727270; /* separators */ --border-focus: #525250; /* neutral dark, no accent */ --border-icon: #646460; /* ─── Text ─────────────────────────────────────────────────────────── */ --text-primary: #1e1e1c; /* dark, high contrast on mid-grey bg */ --text-muted: #3e3e3a; --text-dim: #626260; --text-bright: #0a0a08; /* near-black for emphasis */ /* ─── Accent ────────────────────────────────────────────────────────── */ --accent: #d05e00; /* darkened orange, readable on light bg */ --accent-dot: rgba(180,80,0,0.08); --accent-danger: #cc2222; /* ─── Composite ─────────────────────────────────────────────────────── */ --shadow-win: 0 0 0 1px var(--bg-void), 0 8px 30px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.40); /* ─── Semantic / Game ──────────────────────────────────────────────── */ --color-kill: #2a8840; /* darker green — readable on light */ --color-kill-hover: #1e6830; --color-kill-bg: #c8e0d0; --color-death: #a82828; /* darker red */ --color-death-hover: #882020; --color-system: #2860a8; /* darker blue */ --color-system-hover: #1a4888; --color-system-bg: #c0cce0; --color-score: #8a6010; /* darker amber */ --color-score-hover: #6a4808; --color-score-bg: #e0d0a8; --medal-gold: #9a7018; --medal-silver: #606060; --medal-bronze: #7a4820; --col-ships: #3a6840; --col-structs: #8a4818; --col-total: #8a6010; --badge-ship-bg: #d8e8dc; --badge-ship-text: #8a6010; --badge-ship-border: #b0c8b8; --badge-struct-bg: #d4d8ec; --badge-struct-text: #3060a8; --badge-struct-border: #a0a8cc; --badge-capsule-bg: #e0d4ec; --badge-capsule-text: #7830a8; --badge-capsule-border: #b890cc; --map-bg: #949490; --map-edge: #7c7c78; --map-edge-mini: #808078; --map-dot-inactive: #707070; --map-dot-inactive-mini:#747470; --row-alt-bg: #a0a09c; --ticker-color: #5a5a58; --sub-tab-active-bg: #b0a890; }