Micha/homelab-infra
1
0
Fork 0
Code Issues 1 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

ops: glance neon-ops v2 - rotierende akzentfarben, gradient-zahlen, animierte header

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Micha
2026-06-12 18:30:38 +02:00
parent c0a39f5dfc
commit 3c4a48d7e5
1 changed files with 69 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ops/glance/assets/custom.css
+69 -38
View File
@@ -1,38 +1,48 @@
/* ============================================================ /* ============================================================
KalliLab "Neon Ops" - Glance Custom CSS KalliLab "Neon Ops v2" - Glance Custom CSS
Karten-Look, Farb-Glows, Akzent-Header, Hover-Effekte Rotierende Akzentfarben pro Widget, Gradient-Zahlen,
animierte Header-Linien, kraeftige Glows
============================================================ */ ============================================================ */
/* --- Seiten-Hintergrund: dunkel mit zwei dezenten Farb-Glows --- */ /* --- Akzentfarben rotieren ueber die Widgets --- */
.widget { --kl-accent: 208 100% 60%; }
.widget:nth-of-type(4n+2) { --kl-accent: 275 95% 66%; }
.widget:nth-of-type(4n+3) { --kl-accent: 175 90% 48%; }
.widget:nth-of-type(4n) { --kl-accent: 330 95% 62%; }
/* --- Seiten-Hintergrund: kraeftigere Farb-Glows --- */
body { body {
background: background:
radial-gradient(1200px 600px at 85% -10%, hsla(212, 100%, 55%, 0.10), transparent 60%), radial-gradient(1300px 700px at 85% -10%, hsla(212, 100%, 55%, 0.16), transparent 60%),
radial-gradient(900px 500px at -10% 30%, hsla(280, 80%, 55%, 0.07), transparent 55%), radial-gradient(1000px 600px at -10% 25%, hsla(280, 90%, 58%, 0.12), transparent 55%),
radial-gradient(800px 600px at 50% 110%, hsla(160, 80%, 45%, 0.06), transparent 60%), radial-gradient(900px 700px at 50% 115%, hsla(170, 90%, 45%, 0.10), transparent 60%),
radial-gradient(700px 500px at 110% 70%, hsla(330, 90%, 55%, 0.08), transparent 55%),
var(--color-background); var(--color-background);
background-attachment: fixed; background-attachment: fixed;
} }
/* --- Jedes Widget wird eine Karte --- */ /* --- Widgets als Karten mit Akzentrand --- */
.widget { .widget {
background: linear-gradient( background: linear-gradient(
160deg, 160deg,
hsla(220, 30%, 100%, 0.045), hsla(220, 30%, 100%, 0.05),
hsla(220, 30%, 100%, 0.015) hsla(220, 30%, 100%, 0.015)
); );
border: 1px solid hsla(220, 40%, 70%, 0.12); border: 1px solid hsl(var(--kl-accent) / 0.18);
border-radius: 14px; border-radius: 14px;
padding: 14px 16px; padding: 14px 16px;
box-shadow: box-shadow:
0 10px 30px hsla(220, 60%, 3%, 0.35), 0 10px 30px hsla(220, 60%, 3%, 0.4),
0 0 24px hsl(var(--kl-accent) / 0.06),
inset 0 1px 0 hsla(220, 40%, 90%, 0.05); inset 0 1px 0 hsla(220, 40%, 90%, 0.05);
transition: border-color 0.2s ease, box-shadow 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.25s ease;
} }
.widget:hover { .widget:hover {
border-color: hsla(212, 100%, 60%, 0.35); border-color: hsl(var(--kl-accent) / 0.55);
box-shadow: box-shadow:
0 12px 36px hsla(212, 80%, 30%, 0.18), 0 12px 36px hsla(220, 60%, 3%, 0.45),
0 0 36px hsl(var(--kl-accent) / 0.16),
inset 0 1px 0 hsla(220, 40%, 90%, 0.07); inset 0 1px 0 hsla(220, 40%, 90%, 0.07);
} }
@@ -45,12 +55,13 @@ body {
box-shadow: none; box-shadow: none;
} }
/* --- Widget-Titel: Akzentfarbe + Farbverlauf-Unterstreichung --- */ /* --- Widget-Titel: animierte Farbverlaufs-Linie in Akzentfarbe --- */
.widget-header { .widget-header {
letter-spacing: 0.14em; letter-spacing: 0.14em;
position: relative; position: relative;
padding-bottom: 6px; padding-bottom: 7px;
margin-bottom: 4px; margin-bottom: 4px;
color: hsl(var(--kl-accent) / 0.85);
} }
.widget-header::after { .widget-header::after {
@@ -58,58 +69,71 @@ body {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 42px; width: 64px;
height: 2px; height: 2px;
border-radius: 2px; border-radius: 2px;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
hsl(212, 100%, 55%), hsl(var(--kl-accent)),
hsla(280, 80%, 60%, 0.6), hsl(var(--kl-accent) / 0.25),
transparent hsl(var(--kl-accent))
); );
background-size: 200% 100%;
animation: kl-shimmer 4s linear infinite;
} }
/* --- Grosse Zahlen mit leichtem Glow --- */ @keyframes kl-shimmer {
.size-h2, 0% { background-position: 0% 0; }
.size-h3 { 100% { background-position: 200% 0; }
letter-spacing: 0.01em;
} }
/* --- Grosse Zahlen: Gradient-Text + Glow --- */
.color-highlight.size-h2,
.color-highlight.size-h3,
.color-primary.size-h2, .color-primary.size-h2,
.color-primary.size-h3, .color-primary.size-h3 {
.color-highlight.size-h3 { background: linear-gradient(
text-shadow: 0 0 18px hsla(212, 100%, 60%, 0.35); 120deg,
hsl(var(--kl-accent)),
hsl(var(--kl-accent) / 0.55) 60%,
hsl(210, 30%, 95%)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 14px hsl(var(--kl-accent) / 0.35));
} }
.color-positive { .color-positive {
text-shadow: 0 0 14px hsla(150, 90%, 45%, 0.3); text-shadow: 0 0 16px hsla(150, 95%, 45%, 0.45);
} }
.color-negative { .color-negative {
text-shadow: 0 0 14px hsla(350, 90%, 55%, 0.3); text-shadow: 0 0 16px hsla(350, 95%, 58%, 0.45);
} }
/* --- Status-Punkte/Monitore etwas lebendiger --- */ /* --- Status-Punkte leuchten --- */
.monitor-site-status-icon-compact, .monitor-site-status-icon-compact,
.monitor-site-status-icon { .monitor-site-status-icon {
filter: drop-shadow(0 0 6px hsla(150, 90%, 45%, 0.45)); filter: drop-shadow(0 0 7px hsla(150, 95%, 45%, 0.55));
} }
/* --- Navigation: aktiver Tab mit Glow-Unterstreichung --- */ /* --- Navigation --- */
.nav-item.nav-item-current { .nav-item.nav-item-current {
text-shadow: 0 0 16px hsla(212, 100%, 60%, 0.5); text-shadow: 0 0 18px hsla(212, 100%, 60%, 0.6);
} }
/* --- Suchleiste als Karte --- */ /* --- Suchleiste --- */
.search { .search {
border: 1px solid hsla(220, 40%, 70%, 0.14); border: 1px solid hsla(212, 90%, 65%, 0.2);
border-radius: 12px; border-radius: 12px;
background: hsla(220, 30%, 100%, 0.035); background: hsla(220, 30%, 100%, 0.04);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
} }
.search:focus-within { .search:focus-within {
border-color: hsla(212, 100%, 60%, 0.45); border-color: hsla(212, 100%, 60%, 0.55);
box-shadow: 0 0 0 3px hsla(212, 100%, 55%, 0.12); box-shadow: 0 0 0 3px hsla(212, 100%, 55%, 0.15), 0 0 28px hsla(212, 100%, 55%, 0.12);
} }
/* --- Feinschliff --- */ /* --- Feinschliff --- */
@@ -127,5 +151,12 @@ body {
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: hsla(212, 80%, 55%, 0.4); background: hsla(212, 80%, 55%, 0.45);
}
/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
.widget-header::after {
animation: none;
}
} }