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

feat(theme): [data-theme=custom]-Block + Theme-Builder-Panel-Styling

Browse Source
This commit is contained in:
Jon Kazama
2026-06-15 02:34:42 +02:00
parent 22e74d41bc
commit 96d4eaa8a1
1 changed files with 51 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.css
+51
View File
@@ -349,6 +349,30 @@
--toggle-on-bg: color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent);
--bg-solid-fallback: #0d0f12;
}
/* ============================================
THEME: CUSTOM (User-Theme-Builder, neutrale Defaults)
Inline-Vars aus applyCustomTheme() ueberschreiben die 6 Picker-Werte.
============================================ */
[data-theme="custom"] {
--accent: #6c8cff;
--accent-glow-pct: 5%;
--board-hover-border-pct: 20%;
--logo-shadow-pct: 38%;
--toggle-on-bg-pct: 20%;
--bg-primary: #0b0d12;
--bg-board: rgba(20, 24, 33, 0.55);
--border: rgba(255, 255, 255, 0.06);
--text-primary: #e6e8ef;
--text-secondary: #9aa3b8;
--text-muted: #5b6478;
--font-display: 'Rajdhani', sans-serif;
--font-body: 'Inter', sans-serif;
--overlay-bg: radial-gradient(circle at center, color-mix(in srgb, var(--bg-primary) 35%, transparent) 0%, color-mix(in srgb, var(--bg-primary) 88%, transparent) 100%);
--header-bg: color-mix(in srgb, var(--bg-primary) 92%, transparent);
--toggle-on-bg: color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent);
--bg-solid-fallback: var(--bg-primary);
}
}
/* ============================================
@@ -413,6 +437,8 @@
[data-theme="hellion-stealth"] .board-title { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; }
[data-theme="hellion-stealth"] .board { border-color: rgba(94, 194, 255, 0.15); backdrop-filter: blur(10px); }
[data-theme="hellion-stealth"] .bm-item:hover { background: rgba(94, 194, 255, 0.10); border-left: 2px solid var(--accent); }
[data-theme="custom"] .board { border-color: color-mix(in srgb, var(--accent) 15%, transparent); }
[data-theme="custom"] .bm-item:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
}
/* ============================================
@@ -2391,6 +2417,31 @@ body.show-desc .bm-desc { display: block; }
padding: 2px 0 6px;
line-height: 1.4;
}
.theme-card-custom-swatch {
width: 100%; height: 56px; border-radius: 8px;
border: 1.5px dashed var(--accent);
background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 6px, rgba(255,255,255,0.06) 6px 12px);
}
.theme-builder-panel { padding: 10px 0 4px; }
.theme-builder-panel.hidden { display: none; }
.tb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.tb-picker { display: flex; align-items: center; gap: 9px; }
.tb-picker input[type="color"] {
width: 30px; height: 30px; padding: 0; border: 1px solid var(--border);
border-radius: 6px; background: none; cursor: pointer;
}
.tb-picker label { font-size: 12px; color: var(--text-secondary); }
.tb-contrast { margin-top: 12px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.tb-contrast .tb-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.tb-contrast.good { color: #7bd88f; } .tb-contrast.good .tb-dot { background: #3fbf6f; }
.tb-contrast.ok { color: #e3c97a; } .tb-contrast.ok .tb-dot { background: #d8b24a; }
.tb-contrast.bad { color: #e58f8f; } .tb-contrast.bad .tb-dot { background: #d65c5c; }
.tb-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.tb-reset {
font-size: 11px; color: var(--text-secondary); background: none;
border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer;
}
@media (max-width: 480px) { .tb-grid { grid-template-columns: 1fr; } }
/* ============================================
ACCORDION SETTINGS