JonKazama-Hellion/Hellion-NewTab
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 11 Wiki Activity

refactor(css): theme-scoped Komponenten-Regeln aus den 11 Theme-Bloecken in Sammelblock extrahieren

Browse Source
This commit is contained in:
Jon Kazama
2026-06-13 19:07:44 +02:00
parent af2a5c4912
commit 829914a271
1 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.css
+57 -52
View File
@@ -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; }