bd292fbe32
The Requests and Indexers cards sit side by side but read as two unrelated lists: requests led with a type badge, indexers with a status dot, and the rows drifted out of alignment once the share bar landed. Give a request row the same anatomy as an indexer row — status dot, title over a dimmed detail line, badge on the right — folding the type into the detail line and mapping request status onto the existing dot colours (a new .warn light covers pending). Both row types now share a --row-h floor so the two cards line up row for row; the share bar's top margin is trimmed so an indexer row reaches that height without overshooting it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
75 lines
2.6 KiB
CSS
75 lines
2.6 KiB
CSS
/* ═══════════════════════════════════════════════════════
|
|
Media Centre — shared design tokens + base reset.
|
|
|
|
Single source of truth for the palette. Loaded by
|
|
dashboard.html, login.html and settings.html; page-specific
|
|
rules live in dashboard.css / login.css / settings.css.
|
|
|
|
To reshade the whole app, change the four hues below —
|
|
every dim/border variant is derived from them via color-mix.
|
|
═══════════════════════════════════════════════════════ */
|
|
:root {
|
|
/* ── Surfaces ── */
|
|
--bg: #141416;
|
|
--surface: #1a1a1d;
|
|
--surface-2: #202024;
|
|
--border: #2c2c31;
|
|
--border-lt: #38383f;
|
|
|
|
/* ── Text (all ≥ 4.5:1 on every surface above) ── */
|
|
--text: #edecf1;
|
|
--text-2: #a8a7b0;
|
|
--text-3: #7c7b84;
|
|
|
|
/* ── Accent + semantics (the four source hues) ── */
|
|
--accent: #7c86ff;
|
|
--ok: #68b98a;
|
|
--warn: #d0a75a;
|
|
--danger: #dc5b52;
|
|
|
|
/* ── Derived tints — never hardcode these as literals ── */
|
|
--accent-dim: color-mix(in srgb, var(--accent) 14%, transparent);
|
|
--ok-dim: color-mix(in srgb, var(--ok) 14%, transparent);
|
|
--warn-dim: color-mix(in srgb, var(--warn) 14%, transparent);
|
|
--danger-dim: color-mix(in srgb, var(--danger) 14%, transparent);
|
|
--danger-border: color-mix(in srgb, var(--danger) 35%, transparent);
|
|
|
|
/* ── Type scale (6 steps, no one-offs) ── */
|
|
--fs-xs: 0.75rem; /* 12px — smallest permitted */
|
|
--fs-sm: 0.8125rem; /* 13px */
|
|
--fs-base: 0.9375rem; /* 15px */
|
|
--fs-lg: 1.125rem; /* 18px */
|
|
--fs-xl: 1.5rem; /* 24px */
|
|
--fs-2xl: 2rem; /* 32px */
|
|
|
|
/* ── Spacing / shape ── */
|
|
--gap: 1rem;
|
|
--gap-lg: 1.5rem;
|
|
--radius: 10px;
|
|
--radius-sm: 7px;
|
|
--tap: 44px; /* minimum touch target */
|
|
--row-h: 4.25rem; /* paired Requests / Indexers row height */
|
|
|
|
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: var(--fs-base);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a { color: var(--accent); }
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|