ops: glance neon-ops look - card styling, glows, sattere theme-farben

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

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);
+}

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: