ops: glance neon-ops look - card styling, glows, sattere theme-farben
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -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 {
|
/* --- Seiten-Hintergrund: dunkel mit zwei dezenten Farb-Glows --- */
|
||||||
background: hsl(212, 100%, 50%, 0.35);
|
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 */
|
/* --- Jedes Widget wird eine Karte --- */
|
||||||
.widget-content {
|
.widget {
|
||||||
transition: opacity 0.15s ease;
|
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 */
|
.widget:hover {
|
||||||
.size-h1,
|
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-h2,
|
||||||
.size-h3 {
|
.size-h3 {
|
||||||
letter-spacing: 0.01em;
|
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);
|
||||||
|
}
|
||||||
|
|||||||
@@ -8,12 +8,12 @@ branding:
|
|||||||
hide-footer: true
|
hide-footer: true
|
||||||
|
|
||||||
theme:
|
theme:
|
||||||
background-color: 210 20 13
|
background-color: 220 25 9
|
||||||
primary-color: 212 100 50
|
primary-color: 208 100 58
|
||||||
positive-color: 140 70 40
|
positive-color: 150 80 45
|
||||||
negative-color: 4 78 57
|
negative-color: 350 90 60
|
||||||
contrast-multiplier: 1.25
|
contrast-multiplier: 1.3
|
||||||
text-saturation-multiplier: 0.9
|
text-saturation-multiplier: 1.0
|
||||||
disable-picker: false
|
disable-picker: false
|
||||||
custom-css-file: /assets/custom.css
|
custom-css-file: /assets/custom.css
|
||||||
presets:
|
presets:
|
||||||
|
|||||||
Reference in New Issue
Block a user