diff --git a/ops/glance/assets/custom.css b/ops/glance/assets/custom.css index 6e69fed..272541b 100644 --- a/ops/glance/assets/custom.css +++ b/ops/glance/assets/custom.css @@ -1,17 +1,131 @@ -/* KalliLab Feinschliff - bewusst minimal, Theme bleibt in glance.yml */ +/* ============================================================ + KalliLab "Neon Ops" - Glance Custom CSS + Karten-Look, Farb-Glows, Akzent-Header, Hover-Effekte + ============================================================ */ -::selection { - background: hsl(212, 100%, 50%, 0.35); +/* --- Seiten-Hintergrund: dunkel mit zwei dezenten Farb-Glows --- */ +body { + background: + radial-gradient(1200px 600px at 85% -10%, hsla(212, 100%, 55%, 0.10), transparent 60%), + radial-gradient(900px 500px at -10% 30%, hsla(280, 80%, 55%, 0.07), transparent 55%), + radial-gradient(800px 600px at 50% 110%, hsla(160, 80%, 45%, 0.06), transparent 60%), + var(--color-background); + background-attachment: fixed; } -/* Karten leicht abheben beim Hover, ohne Layout-Shift */ -.widget-content { - transition: opacity 0.15s ease; +/* --- Jedes Widget wird eine Karte --- */ +.widget { + background: linear-gradient( + 160deg, + hsla(220, 30%, 100%, 0.045), + hsla(220, 30%, 100%, 0.015) + ); + border: 1px solid hsla(220, 40%, 70%, 0.12); + border-radius: 14px; + padding: 14px 16px; + box-shadow: + 0 10px 30px hsla(220, 60%, 3%, 0.35), + inset 0 1px 0 hsla(220, 40%, 90%, 0.05); + transition: border-color 0.2s ease, box-shadow 0.2s ease; } -/* Grosse Zahlen etwas ruhiger setzen */ -.size-h1, +.widget:hover { + border-color: hsla(212, 100%, 60%, 0.35); + box-shadow: + 0 12px 36px hsla(212, 80%, 30%, 0.18), + inset 0 1px 0 hsla(220, 40%, 90%, 0.07); +} + +/* Widgets in Gruppen/Tabs nicht doppelt einrahmen */ +.widget .widget { + background: none; + border: none; + border-radius: 0; + padding: 0; + box-shadow: none; +} + +/* --- Widget-Titel: Akzentfarbe + Farbverlauf-Unterstreichung --- */ +.widget-header { + letter-spacing: 0.14em; + position: relative; + padding-bottom: 6px; + margin-bottom: 4px; +} + +.widget-header::after { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 42px; + height: 2px; + border-radius: 2px; + background: linear-gradient( + 90deg, + hsl(212, 100%, 55%), + hsla(280, 80%, 60%, 0.6), + transparent + ); +} + +/* --- Grosse Zahlen mit leichtem Glow --- */ .size-h2, .size-h3 { letter-spacing: 0.01em; } + +.color-primary.size-h2, +.color-primary.size-h3, +.color-highlight.size-h3 { + text-shadow: 0 0 18px hsla(212, 100%, 60%, 0.35); +} + +.color-positive { + text-shadow: 0 0 14px hsla(150, 90%, 45%, 0.3); +} + +.color-negative { + text-shadow: 0 0 14px hsla(350, 90%, 55%, 0.3); +} + +/* --- Status-Punkte/Monitore etwas lebendiger --- */ +.monitor-site-status-icon-compact, +.monitor-site-status-icon { + filter: drop-shadow(0 0 6px hsla(150, 90%, 45%, 0.45)); +} + +/* --- Navigation: aktiver Tab mit Glow-Unterstreichung --- */ +.nav-item.nav-item-current { + text-shadow: 0 0 16px hsla(212, 100%, 60%, 0.5); +} + +/* --- Suchleiste als Karte --- */ +.search { + border: 1px solid hsla(220, 40%, 70%, 0.14); + border-radius: 12px; + background: hsla(220, 30%, 100%, 0.035); +} + +.search:focus-within { + border-color: hsla(212, 100%, 60%, 0.45); + box-shadow: 0 0 0 3px hsla(212, 100%, 55%, 0.12); +} + +/* --- Feinschliff --- */ +::selection { + background: hsla(212, 100%, 50%, 0.35); +} + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-thumb { + background: hsla(220, 30%, 50%, 0.25); + border-radius: 8px; +} + +::-webkit-scrollbar-thumb:hover { + background: hsla(212, 80%, 55%, 0.4); +} diff --git a/ops/glance/config/glance.yml b/ops/glance/config/glance.yml index 723e945..62ba14b 100644 --- a/ops/glance/config/glance.yml +++ b/ops/glance/config/glance.yml @@ -8,12 +8,12 @@ branding: hide-footer: true theme: - background-color: 210 20 13 - primary-color: 212 100 50 - positive-color: 140 70 40 - negative-color: 4 78 57 - contrast-multiplier: 1.25 - text-saturation-multiplier: 0.9 + background-color: 220 25 9 + primary-color: 208 100 58 + positive-color: 150 80 45 + negative-color: 350 90 60 + contrast-multiplier: 1.3 + text-saturation-multiplier: 1.0 disable-picker: false custom-css-file: /assets/custom.css presets: