Apply the Nocturne fidelity pass to the web UI

2026-09-21 19:31:29 +02:00
parent 267c31337c
commit a4d61781e9
10 changed files with 1336 additions and 100 deletions
@@ -0,0 +1,168 @@
+/* ─────────────────────────────────────────────────────────────────────────
+   Veskslop style overrides — Nocturne fidelity pass.
+
+   Small corrections to style.css. Load LAST, after style.css and media.css.
+   Fold into style.css when convenient; kept separate here so nothing you
+   edited gets clobbered.
+   ───────────────────────────────────────────────────────────────────────── */
+
+/* ── 1. Weight ────────────────────────────────────────────────────────────
+   Nocturne: headings never go past 500; hierarchy is size and space.
+   "Speaking" was font-weight 700, which also reflows the row as it toggles.
+   Carry it in color instead — the level meter beside it is the loud signal. */
+
+.vk-person-name.speaking,
+.vk-voice-member .speaking,
+.vk-right-name .speaking,
+.vk-right-name .vk-name.speaking {
+    font-weight: 500;
+    color: var(--color-accent-200);
+}
+
+/* ── 2. Focus ─────────────────────────────────────────────────────────────
+   nocturne.css gives :focus-visible a 2px accent ring, but every control
+   built from a bare <button> that resets background and border loses the
+   ring's contrast against its own surface. Pin it back on explicitly. */
+
+.vk-rail-row:focus-visible,
+.vk-rail-voice-head:focus-visible,
+.vk-menu-item:focus-visible,
+.vk-guild-mark:focus-visible,
+.vk-scope-btn:focus-visible,
+.vk-console-tab:focus-visible,
+.vk-console-button:focus-visible,
+.vk-chip:focus-visible,
+.vk-star:focus-visible,
+.vk-tab:focus-visible,
+.vk-settings-summary:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+}
+
+/* Inset the ring where the control sits flush in a scroller, so it is not
+   clipped by the overflow edge. */
+.vk-rail-row:focus-visible,
+.vk-menu-item:focus-visible {
+    outline-offset: -2px;
+}
+
+/* ── 3. Presence ──────────────────────────────────────────────────────────
+   idle and dnd both landed on neutral-200, so they were indistinguishable.
+   idle drops a step; dnd keeps the bright dot and adds the bar that makes
+   it readable without color. */
+
+.vk-presence.idle {
+    background: var(--color-neutral-400);
+}
+
+.vk-presence.dnd {
+    display: grid;
+    place-items: center;
+    background: var(--color-neutral-200);
+}
+
+.vk-presence.dnd::after {
+    content: "";
+    width: 4px;
+    height: 1.5px;
+    background: var(--color-surface);
+}
+
+/* ── 4. Rules ─────────────────────────────────────────────────────────────
+   Nocturne rules fade to transparent over 48px a side. The channel header
+   does this; the settings panel's dozens of flat rules do not, which is
+   what makes that panel read as a different product. */
+
+.vk-settings-head,
+.vk-status-row {
+    box-shadow: none;
+    background: linear-gradient(
+            to right,
+            transparent,
+            var(--color-neutral-900) 24px,
+            var(--color-neutral-900) calc(100% - 24px),
+            transparent
+        )
+        no-repeat bottom / 100% 1px;
+}
+
+.vk-settings-head {
+    background: linear-gradient(
+            to right,
+            transparent,
+            var(--color-neutral-800) 24px,
+            var(--color-neutral-800) calc(100% - 24px),
+            transparent
+        )
+        no-repeat bottom / 100% 1px;
+}
+
+.vk-status-row:last-child {
+    background: none;
+}
+
+/* ── 5. Toasts ────────────────────────────────────────────────────────────
+   The error toast was a neutral-200 stripe — the same mark the ok toast
+   used, one hue apart. Now they are genuinely different roles. */
+
+.vk-toast.error {
+    box-shadow: var(--shadow-md), inset 3px 0 0 var(--color-danger-400);
+}
+
+.vk-toast.warn {
+    box-shadow: var(--shadow-md), inset 3px 0 0 var(--color-warn-400);
+}
+
+.vk-toast.ok {
+    box-shadow: var(--shadow-md), inset 3px 0 0 var(--color-ok-400);
+}
+
+/* ── 6. Offline ───────────────────────────────────────────────────────────
+   opacity .5 + saturate .6 pushes every label under 3:1 — the one state
+   where you most need to read what is on screen. Dim the chrome, not the
+   type, and say why. */
+
+.vk-offline .vk-body,
+.vk-offline .vk-console {
+    opacity: 1;
+    filter: none;
+    pointer-events: none;
+}
+
+.vk-offline .vk-body::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: color-mix(in srgb, var(--color-bg) 45%, transparent);
+}
+
+.vk-offline .vk-body {
+    position: relative;
+}
+
+.vk-offline .vk-composer,
+.vk-offline .vk-rail,
+.vk-offline .vk-right {
+    opacity: 0.72;
+}
+
+/* ── 7. The bridge dot ────────────────────────────────────────────────────
+   .error was neutral-200 — a white dot reads as "on". */
+
+.vk-dot.error {
+    background: var(--color-danger-400);
+}
+
+.vk-dot.warn {
+    background: var(--color-warn-400);
+}
+
+/* ── 8. QR ────────────────────────────────────────────────────────────────
+   Pure white is correct here (scanner contrast), but give it the system's
+   edge so it is not a bare rectangle floating on the panel. */
+
+.vk-qr {
+    box-shadow: var(--shadow-sm);
+}