93 lines
2.7 KiB
CSS
93 lines
2.7 KiB
CSS
/* nvsim dashboard — global styles
|
|
Ported from `assets/NVsim Dashboard.zip` per ADR-092 §7.1.
|
|
Per-component scoped styles live in each Lit element. */
|
|
|
|
:root {
|
|
--bg-0: #07090d;
|
|
--bg-1: #0d1117;
|
|
--bg-2: #131a23;
|
|
--bg-3: #1a232f;
|
|
--line: #1f2a38;
|
|
--line-2: #2a3848;
|
|
--ink: #e6edf3;
|
|
--ink-2: #b8c2cc;
|
|
--ink-3: #7c8694;
|
|
--ink-4: #4a5462;
|
|
--accent: oklch(0.78 0.14 70);
|
|
--accent-2: oklch(0.78 0.12 195);
|
|
--accent-3: oklch(0.72 0.18 330);
|
|
--accent-4: oklch(0.78 0.14 145);
|
|
--warn: oklch(0.7 0.18 35);
|
|
--ok: oklch(0.78 0.14 145);
|
|
--bad: oklch(0.65 0.22 25);
|
|
--grid: rgba(255, 255, 255, 0.04);
|
|
--shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6),
|
|
0 4px 12px -4px rgba(0, 0, 0, 0.4);
|
|
--radius: 12px;
|
|
--radius-sm: 8px;
|
|
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--sans: 'Inter', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg-0: #f4f5f7;
|
|
--bg-1: #fbfbfc;
|
|
--bg-2: #ffffff;
|
|
--bg-3: #f0f2f5;
|
|
--line: #d8dde3;
|
|
--line-2: #c1c8d1;
|
|
--ink: #0e131a;
|
|
--ink-2: #2c3744;
|
|
--ink-3: #54606e; /* AA on --bg-1 #fbfbfc — was #6b7684 (3.7:1), now ~5.4:1 */
|
|
--ink-4: #7a8390; /* improved from #9ba4b0 for incidental UI labels */
|
|
--grid: rgba(0, 0, 0, 0.05);
|
|
--shadow: 0 12px 40px -16px rgba(15, 30, 55, 0.18),
|
|
0 2px 8px -2px rgba(15, 30, 55, 0.08);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
body {
|
|
font-family: var(--sans);
|
|
background: var(--bg-0);
|
|
color: var(--ink);
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
button { font-family: inherit; color: inherit; cursor: pointer; }
|
|
input, select { font-family: inherit; color: inherit; }
|
|
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
|
|
|
|
@keyframes pulse { 50% { opacity: 0.5; } }
|
|
@keyframes dash { to { stroke-dashoffset: -200; } }
|
|
@keyframes float-up {
|
|
0% { opacity: 0; transform: translateY(8px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes diamond-spin {
|
|
0% { transform: rotateY(0) rotateX(8deg); }
|
|
100% { transform: rotateY(360deg) rotateX(8deg); }
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
body.reduce-motion *,
|
|
body.reduce-motion *::before,
|
|
body.reduce-motion *::after {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Density (set via class on <body> by setDensity()) */
|
|
body.density-comfy { font-size: 15px; }
|
|
body.density-default { font-size: 14px; }
|
|
body.density-compact { font-size: 13px; }
|