From f8a6d12db114024ce9ba72a7f8f068c7a2d49eda Mon Sep 17 00:00:00 2001 From: Ronny Date: Sun, 12 Apr 2026 15:11:57 +0200 Subject: [PATCH] style: comprehensive Light Mode overrides MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Dashboard: - Hero card: white glass (rgba 255,255,255,0.75) instead of dark glass - Reduced shadows (no more extreme 40px shadow) - LED digits: dark gold (#9A6500) with subtle shadow - Countdown/tip badges: dark gold on light background - Flag boxes: lighter shadows, no dark glow aura MatchCards: - LED time: dark gold for contrast on light bg - Flag boxes: lighter shadows BottomNav: - White background with subtle top border - Inactive tabs: darker for readability Global: - text-muted: 0.45 opacity (was 0.35) — better readability - text-secondary: 0.65 (was 0.60) - Gold: #B8740A (darker for light bg contrast) - shadow-card: much lighter (was too heavy) Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/components/BottomNav.module.css | 14 +++++ frontend/src/components/MatchCard.module.css | 17 ++++++ frontend/src/index.css | 20 +++---- frontend/src/pages/DashboardPage.module.css | 55 ++++++++++++++++++++ 4 files changed, 96 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/BottomNav.module.css b/frontend/src/components/BottomNav.module.css index a150198..ecdb3c2 100644 --- a/frontend/src/components/BottomNav.module.css +++ b/frontend/src/components/BottomNav.module.css @@ -35,6 +35,20 @@ color: var(--text-secondary); } +/* Light mode */ +:global([data-theme="light"]) .bottomNav { + background: rgba(255, 255, 255, 0.9); + border-top: 1px solid rgba(0, 0, 0, 0.08); +} + +:global([data-theme="light"]) .tab { + color: rgba(13, 21, 38, 0.4); +} + +:global([data-theme="light"]) .tabActive { + color: var(--primary); +} + @media (min-width: 768px) { .bottomNav { display: none; diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css index 86141cd..24645ea 100644 --- a/frontend/src/components/MatchCard.module.css +++ b/frontend/src/components/MatchCard.module.css @@ -567,3 +567,20 @@ 50% { box-shadow: 0 0 16px rgba(254, 174, 50, 0.5); } 100% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); } } + +/* ═══ Light Mode Overrides ═══ */ +:global([data-theme="light"]) .kickoffLED { + color: #9A6500; + text-shadow: + 0 0 2px rgba(154, 101, 0, 0.3), + 0 0 6px rgba(154, 101, 0, 0.1); +} + +:global([data-theme="light"]) .flagBox { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + border-color: rgba(0, 0, 0, 0.08); +} + +:global([data-theme="light"]) .flagBox::before { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%); +} diff --git a/frontend/src/index.css b/frontend/src/index.css index 1a7e64a..953fb9a 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -46,20 +46,20 @@ --bg-mid: #E8EEF7; --surface-low: #FFFFFF; --surface-mid: #FFFFFF; - --surface-high: #DDE5F0; - --border-subtle: rgba(0,0,0,0.08); + --surface-high: #E4EAF2; + --border-subtle: rgba(0,0,0,0.1); --primary: #1A8FE3; --primary-dim: rgba(26,143,227,0.10); - --gold: #D4880A; - --gold-glow: rgba(212,136,10,0.3); + --gold: #B8740A; + --gold-glow: rgba(184,116,10,0.3); --cyan: #0080C6; --text-primary: #0D1526; - --text-secondary: rgba(13,21,38,0.6); - --text-muted: rgba(13,21,38,0.35); - --success: #1AAB72; - --error: #D93025; - --shadow-card: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08); - --card-shine: rgba(255,255,255,0.85); + --text-secondary: rgba(13,21,38,0.65); + --text-muted: rgba(13,21,38,0.45); + --success: #168A5C; + --error: #C92A1F; + --shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); + --card-shine: rgba(255,255,255,0.9); --scrollbar-bg: var(--surface-high); --primary-rgb: 26, 143, 227; } diff --git a/frontend/src/pages/DashboardPage.module.css b/frontend/src/pages/DashboardPage.module.css index 06b1357..8c12281 100644 --- a/frontend/src/pages/DashboardPage.module.css +++ b/frontend/src/pages/DashboardPage.module.css @@ -363,6 +363,61 @@ /* ═══════════════════════════════════════ STATES ═══════════════════════════════════════ */ +/* ═══════════════════════════════════════ + LIGHT MODE OVERRIDES + ═══════════════════════════════════════ */ +:global([data-theme="light"]) .hero { + background: rgba(255, 255, 255, 0.75); + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); +} + +:global([data-theme="light"]) .hero::before { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 100%); +} + +:global([data-theme="light"]) .heroGlow { + background: radial-gradient(circle at center, rgba(26, 143, 227, 0.08) 0%, transparent 65%); +} + +:global([data-theme="light"]) .heroLED, +:global([data-theme="light"]) .ledDigit, +:global([data-theme="light"]) .ledColon { + color: #9A6500; + text-shadow: + 0 0 3px rgba(154, 101, 0, 0.4), + 0 0 8px rgba(154, 101, 0, 0.15); +} + +:global([data-theme="light"]) .heroCrestBox { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.08); +} + +:global([data-theme="light"]) .heroCrestBox::before { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%); +} + +:global([data-theme="light"]) .heroCrestBox::after { + display: none; +} + +:global([data-theme="light"]) .heroTip { + background: rgba(184, 116, 10, 0.08); + border: 1px solid rgba(184, 116, 10, 0.2); + color: #8B5E00; +} + +:global([data-theme="light"]) .heroCountdown { + background: rgba(184, 116, 10, 0.08); + border-color: rgba(184, 116, 10, 0.2); + color: #8B5E00; +} + +:global([data-theme="light"]) .statTile { + border: 1px solid rgba(0, 0, 0, 0.06) !important; +} + .loading, .error { text-align: center;