87 lines
4.0 KiB
CSS
87 lines
4.0 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
|
Nocturne status + data tokens — additive layer for Veskslop.
|
|
|
|
Why this file exists: Nocturne ships one accent and a neutral ramp. It has
|
|
no error / warning / success role and no categorical data scale, so every
|
|
feature that needed one invented its own hex (#e5484d, #ffaa33, #44cc88,
|
|
#4f8cff, #ff8080 …). That is how a system drifts.
|
|
|
|
These roles are generated the same way Nocturne's own ramps are: OKLCH,
|
|
on the SAME shared lightness scale, so step 400 of danger has the same
|
|
visual weight as step 400 of accent or neutral. Chroma stays low — the
|
|
accent is still the loudest thing on screen.
|
|
|
|
Lightness scale, read off Nocturne's neutral ramp:
|
|
200 .924 · 300 .859 · 400 .763 · 700 .443 · 800 .339 · 900 .240
|
|
|
|
Load AFTER nocturne.css and BEFORE style.css.
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
/* danger — hue 25. Failed jobs, rate limits, destructive confirms. */
|
|
--color-danger-200: oklch(0.924 0.045 25);
|
|
--color-danger-300: oklch(0.859 0.075 25);
|
|
--color-danger-400: oklch(0.763 0.105 25);
|
|
--color-danger-700: oklch(0.443 0.085 25);
|
|
--color-danger-800: oklch(0.339 0.065 25);
|
|
--color-danger-900: oklch(0.24 0.045 25);
|
|
|
|
/* warn — hue 75. Paused, degraded, over-threshold, mentions. */
|
|
--color-warn-200: oklch(0.924 0.045 75);
|
|
--color-warn-300: oklch(0.859 0.075 75);
|
|
--color-warn-400: oklch(0.763 0.105 75);
|
|
--color-warn-700: oklch(0.443 0.085 75);
|
|
--color-warn-800: oklch(0.339 0.065 75);
|
|
--color-warn-900: oklch(0.24 0.045 75);
|
|
|
|
/* ok — hue 155. Completed, healthy, connected. Used sparingly: the
|
|
accent already carries "live", so ok is for terminal success only. */
|
|
--color-ok-200: oklch(0.924 0.05 155);
|
|
--color-ok-300: oklch(0.859 0.08 155);
|
|
--color-ok-400: oklch(0.763 0.11 155);
|
|
--color-ok-700: oklch(0.443 0.09 155);
|
|
--color-ok-800: oklch(0.339 0.07 155);
|
|
--color-ok-900: oklch(0.24 0.05 155);
|
|
|
|
/* Categorical data scale — for the media storage bar and nothing else.
|
|
One lightness, five hues stepping away from the accent, all at low
|
|
chroma so the bar reads as a muted family rather than five alarms.
|
|
Always pair with a text legend: hue is never the only channel. */
|
|
--color-data-1: oklch(0.62 0.075 289); /* image — the accent's own hue */
|
|
--color-data-2: oklch(0.62 0.075 250); /* gif */
|
|
--color-data-3: oklch(0.62 0.075 205); /* video */
|
|
--color-data-4: oklch(0.62 0.075 155); /* audio */
|
|
--color-data-5: oklch(0.62 0.02 289); /* other — near-neutral */
|
|
|
|
/* Mention highlight: was a loose #d29922 declared mid-stylesheet. */
|
|
--color-mention: var(--color-warn-400);
|
|
}
|
|
|
|
/* ── Status helpers ────────────────────────────────────────────────────────
|
|
Tinted, never flooded. Full-opacity ink on the tint so small text clears
|
|
contrast; the fill is a deep ramp step, not an alpha wash. */
|
|
|
|
.vk-status-tint-danger {
|
|
background: var(--color-danger-900);
|
|
box-shadow: inset 0 0 0 1px var(--color-danger-700);
|
|
color: var(--color-danger-200);
|
|
}
|
|
|
|
.vk-status-tint-warn {
|
|
background: var(--color-warn-900);
|
|
box-shadow: inset 0 0 0 1px var(--color-warn-700);
|
|
color: var(--color-warn-200);
|
|
}
|
|
|
|
.vk-status-tint-ok {
|
|
background: var(--color-ok-900);
|
|
box-shadow: inset 0 0 0 1px var(--color-ok-700);
|
|
color: var(--color-ok-200);
|
|
}
|
|
|
|
.vk-status-tint-neutral {
|
|
background: var(--color-neutral-900);
|
|
box-shadow: inset 0 0 0 1px var(--color-neutral-800);
|
|
color: var(--color-neutral-300);
|
|
}
|