ops: glance neon-ops v2 - rotierende akzentfarben, gradient-zahlen, animierte header
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,38 +1,48 @@
|
||||
/* ============================================================
|
||||
KalliLab "Neon Ops" - Glance Custom CSS
|
||||
Karten-Look, Farb-Glows, Akzent-Header, Hover-Effekte
|
||||
KalliLab "Neon Ops v2" - Glance Custom CSS
|
||||
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 {
|
||||
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%),
|
||||
radial-gradient(1300px 700px at 85% -10%, hsla(212, 100%, 55%, 0.16), transparent 60%),
|
||||
radial-gradient(1000px 600px at -10% 25%, hsla(280, 90%, 58%, 0.12), transparent 55%),
|
||||
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);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* --- Jedes Widget wird eine Karte --- */
|
||||
/* --- Widgets als Karten mit Akzentrand --- */
|
||||
.widget {
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
hsla(220, 30%, 100%, 0.045),
|
||||
hsla(220, 30%, 100%, 0.05),
|
||||
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;
|
||||
padding: 14px 16px;
|
||||
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);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: border-color 0.2s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.widget:hover {
|
||||
border-color: hsla(212, 100%, 60%, 0.35);
|
||||
border-color: hsl(var(--kl-accent) / 0.55);
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -45,12 +55,13 @@ body {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* --- Widget-Titel: Akzentfarbe + Farbverlauf-Unterstreichung --- */
|
||||
/* --- Widget-Titel: animierte Farbverlaufs-Linie in Akzentfarbe --- */
|
||||
.widget-header {
|
||||
letter-spacing: 0.14em;
|
||||
position: relative;
|
||||
padding-bottom: 6px;
|
||||
padding-bottom: 7px;
|
||||
margin-bottom: 4px;
|
||||
color: hsl(var(--kl-accent) / 0.85);
|
||||
}
|
||||
|
||||
.widget-header::after {
|
||||
@@ -58,58 +69,71 @@ body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 42px;
|
||||
width: 64px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
hsl(212, 100%, 55%),
|
||||
hsla(280, 80%, 60%, 0.6),
|
||||
transparent
|
||||
hsl(var(--kl-accent)),
|
||||
hsl(var(--kl-accent) / 0.25),
|
||||
hsl(var(--kl-accent))
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: kl-shimmer 4s linear infinite;
|
||||
}
|
||||
|
||||
/* --- Grosse Zahlen mit leichtem Glow --- */
|
||||
.size-h2,
|
||||
.size-h3 {
|
||||
letter-spacing: 0.01em;
|
||||
@keyframes kl-shimmer {
|
||||
0% { background-position: 0% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
/* --- Grosse Zahlen: Gradient-Text + Glow --- */
|
||||
.color-highlight.size-h2,
|
||||
.color-highlight.size-h3,
|
||||
.color-primary.size-h2,
|
||||
.color-primary.size-h3,
|
||||
.color-highlight.size-h3 {
|
||||
text-shadow: 0 0 18px hsla(212, 100%, 60%, 0.35);
|
||||
.color-primary.size-h3 {
|
||||
background: linear-gradient(
|
||||
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 {
|
||||
text-shadow: 0 0 14px hsla(150, 90%, 45%, 0.3);
|
||||
text-shadow: 0 0 16px hsla(150, 95%, 45%, 0.45);
|
||||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
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 {
|
||||
border: 1px solid hsla(220, 40%, 70%, 0.14);
|
||||
border: 1px solid hsla(212, 90%, 65%, 0.2);
|
||||
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 {
|
||||
border-color: hsla(212, 100%, 60%, 0.45);
|
||||
box-shadow: 0 0 0 3px hsla(212, 100%, 55%, 0.12);
|
||||
border-color: hsla(212, 100%, 60%, 0.55);
|
||||
box-shadow: 0 0 0 3px hsla(212, 100%, 55%, 0.15), 0 0 28px hsla(212, 100%, 55%, 0.12);
|
||||
}
|
||||
|
||||
/* --- Feinschliff --- */
|
||||
@@ -127,5 +151,12 @@ body {
|
||||
}
|
||||
|
||||
::-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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user