From 829914a27154a966946adc7f0ffe27cc57d333dc Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 19:07:44 +0200 Subject: [PATCH] refactor(css): theme-scoped Komponenten-Regeln aus den 11 Theme-Bloecken in Sammelblock extrahieren --- src/css/main.css | 109 +++++++++++++++++++++++++---------------------- 1 file changed, 57 insertions(+), 52 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index a4a32d1..6b5b46c 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -115,8 +115,6 @@ --logo-shadow: rgba(179,89,255,0.35); --bg-solid-fallback: #0a060e; } -[data-theme="nebula"] .board { border-color: rgba(214,92,255,0.10); } -[data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); } /* ============================================ THEME: CRESCENT (gold / minimalist night) @@ -143,12 +141,6 @@ letter-spacing: 0.5px; } -[data-theme="crescent"] .logo { font-family: 'Cinzel', serif; letter-spacing: 4px; } -[data-theme="crescent"] .clock { font-family: 'Cinzel', serif; } -[data-theme="crescent"] .board-title { letter-spacing: 2px; } -[data-theme="crescent"] .bm-item:hover { background: rgba(200,168,74,0.05); } -[data-theme="crescent"] .board { border-color: rgba(200,168,74,0.10); } - /* ============================================ THEME: EVENT HORIZON (Cosmic Purple / deep space) ============================================ */ @@ -172,9 +164,6 @@ --logo-shadow: rgba(157, 92, 255, 0.45); --bg-solid-fallback: #08050f; } -[data-theme="event-horizon"] .board { border-color: rgba(157, 92, 255, 0.15); } -[data-theme="event-horizon"] .bm-item:hover { background: rgba(157, 92, 255, 0.08); } - /* ============================================ THEME: MERCHANTMAN (Emerald / industrial sci-fi) @@ -199,8 +188,6 @@ --logo-shadow: rgba(46, 184, 184, 0.45); --bg-solid-fallback: #060a0a; } -[data-theme="merchantman"] .board { border-color: rgba(46, 184, 184, 0.12); } -[data-theme="merchantman"] .bm-item:hover { background: rgba(46, 184, 184, 0.06); } /* ============================================ THEME: JULIA & JIN (Aetherial Night / FFXIV) @@ -225,11 +212,6 @@ --logo-shadow: rgba(125, 179, 255, 0.50); --bg-solid-fallback: #070a14; } -[data-theme="julia-jin"] .logo { font-family: 'Cinzel', serif; letter-spacing: 5px; text-transform: uppercase; } -[data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; font-weight: 600; } -[data-theme="julia-jin"] .board-title { letter-spacing: 2px; font-weight: 500; } -[data-theme="julia-jin"] .board { border-color: rgba(125, 179, 255, 0.15); backdrop-filter: blur(4px); } -[data-theme="julia-jin"] .bm-item:hover { background: rgba(125, 179, 255, 0.08); } /* ============================================ THEME: SC Sunset - Horizon Glow @@ -254,11 +236,6 @@ --logo-shadow: rgba(255, 140, 61, 0.45); --bg-solid-fallback: #0f0a08; } -[data-theme="sc-sunset"] .board { - border-color: rgba(255, 140, 61, 0.15); - backdrop-filter: blur(6px);} -[data-theme="sc-sunset"] .bm-item:hover { - background: rgba(255, 140, 61, 0.08); } /* ============================================ THEME: HELLION HUD (circuit board / red+green) @@ -284,16 +261,6 @@ --bg-solid-fallback: #050805; --danger: #ff4d4d; } -[data-theme="hellion-hud"] .board { - border-color: rgba(50, 255, 106, 0.15); - backdrop-filter: blur(8px) brightness(1.1); -} - -[data-theme="hellion-hud"] .clock { - font-family: 'Rajdhani', sans-serif; - font-weight: 700; - text-shadow: 0 0 10px var(--accent-glow); -} /* ============================================ THEME: HELLION ENERGY (matrix / tactical green) @@ -318,15 +285,6 @@ --logo-shadow: rgba(30, 255, 142, 0.60); --bg-solid-fallback: #040705; } -[data-theme="hellion-energy"] .board { - border-color: rgba(30, 255, 142, 0.15); - backdrop-filter: blur(10px) saturate(1.2); -} - -[data-theme="hellion-energy"] .bm-item:hover { - background: rgba(30, 255, 142, 0.10); - box-shadow: inset 0 0 10px rgba(30, 255, 142, 0.05); -} /* ============================================ THEME: SATISFACTORY (Industrial Desert) @@ -354,11 +312,6 @@ --logo-shadow: rgba(0, 180, 216, 0.40); --bg-solid-fallback: #1a0f08; } -[data-theme="satisfactory"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } -[data-theme="satisfactory"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); } -[data-theme="satisfactory"] .board-title { font-family: 'Rajdhani', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } -[data-theme="satisfactory"] .board { border-color: rgba(0, 180, 216, 0.20); backdrop-filter: blur(12px); } -[data-theme="satisfactory"] .bm-item:hover { background: rgba(0, 180, 216, 0.10); } /* ============================================ THEME: AVORION (Deep Void) @@ -385,11 +338,6 @@ --logo-shadow: rgba(46, 196, 160, 0.50); --bg-solid-fallback: #020d0c; } -[data-theme="avorion"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; } -[data-theme="avorion"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 400; color: var(--accent); } -[data-theme="avorion"] .board-title { font-family: 'Rajdhani', sans-serif; font-weight: 500; text-transform: uppercase; } -[data-theme="avorion"] .board { border-color: rgba(46, 196, 160, 0.15); backdrop-filter: blur(8px); } -[data-theme="avorion"] .bm-item:hover { background: rgba(46, 196, 160, 0.08); } /* ============================================ THEME: HELLION STEALTH (Tactical Recon) @@ -416,6 +364,63 @@ --logo-shadow: rgba(94, 194, 255, 0.45); --bg-solid-fallback: #0d0f12; } + +/* ============================================ + THEME-SCOPED KOMPONENTEN-REGELN (Sammelblock fuer @layer theme-overrides) + Aus den 11 [data-theme]-Bloecken extrahiert. Muss spaeter als components + greifen, sonst verlieren Board-Blur, Cinzel-Logos und Hover-Tints. + ============================================ */ + +[data-theme="nebula"] .board { border-color: rgba(214,92,255,0.10); } +[data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); } +[data-theme="crescent"] .logo { font-family: 'Cinzel', serif; letter-spacing: 4px; } +[data-theme="crescent"] .clock { font-family: 'Cinzel', serif; } +[data-theme="crescent"] .board-title { letter-spacing: 2px; } +[data-theme="crescent"] .bm-item:hover { background: rgba(200,168,74,0.05); } +[data-theme="crescent"] .board { border-color: rgba(200,168,74,0.10); } +[data-theme="event-horizon"] .board { border-color: rgba(157, 92, 255, 0.15); } +[data-theme="event-horizon"] .bm-item:hover { background: rgba(157, 92, 255, 0.08); } +[data-theme="merchantman"] .board { border-color: rgba(46, 184, 184, 0.12); } +[data-theme="merchantman"] .bm-item:hover { background: rgba(46, 184, 184, 0.06); } +[data-theme="julia-jin"] .logo { font-family: 'Cinzel', serif; letter-spacing: 5px; text-transform: uppercase; } +[data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; font-weight: 600; } +[data-theme="julia-jin"] .board-title { letter-spacing: 2px; font-weight: 500; } +[data-theme="julia-jin"] .board { border-color: rgba(125, 179, 255, 0.15); backdrop-filter: blur(4px); } +[data-theme="julia-jin"] .bm-item:hover { background: rgba(125, 179, 255, 0.08); } +[data-theme="sc-sunset"] .board { + border-color: rgba(255, 140, 61, 0.15); + backdrop-filter: blur(6px);} +[data-theme="sc-sunset"] .bm-item:hover { + background: rgba(255, 140, 61, 0.08); } +[data-theme="hellion-hud"] .board { + border-color: rgba(50, 255, 106, 0.15); + backdrop-filter: blur(8px) brightness(1.1); +} + +[data-theme="hellion-hud"] .clock { + font-family: 'Rajdhani', sans-serif; + font-weight: 700; + text-shadow: 0 0 10px var(--accent-glow); +} +[data-theme="hellion-energy"] .board { + border-color: rgba(30, 255, 142, 0.15); + backdrop-filter: blur(10px) saturate(1.2); +} + +[data-theme="hellion-energy"] .bm-item:hover { + background: rgba(30, 255, 142, 0.10); + box-shadow: inset 0 0 10px rgba(30, 255, 142, 0.05); +} +[data-theme="satisfactory"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } +[data-theme="satisfactory"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); } +[data-theme="satisfactory"] .board-title { font-family: 'Rajdhani', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } +[data-theme="satisfactory"] .board { border-color: rgba(0, 180, 216, 0.20); backdrop-filter: blur(12px); } +[data-theme="satisfactory"] .bm-item:hover { background: rgba(0, 180, 216, 0.10); } +[data-theme="avorion"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; } +[data-theme="avorion"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 400; color: var(--accent); } +[data-theme="avorion"] .board-title { font-family: 'Rajdhani', sans-serif; font-weight: 500; text-transform: uppercase; } +[data-theme="avorion"] .board { border-color: rgba(46, 196, 160, 0.15); backdrop-filter: blur(8px); } +[data-theme="avorion"] .bm-item:hover { background: rgba(46, 196, 160, 0.08); } [data-theme="hellion-stealth"] .logo { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 4px; } [data-theme="hellion-stealth"] .clock { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--accent); } [data-theme="hellion-stealth"] .board-title { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; }