169 lines
6.1 KiB
CSS
169 lines
6.1 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
|
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);
|
|
}
|