dashboard/src/app.css - main - GreyCat/RuView

dashboard/src/app.css
92 строки3 KB
rUv
feat(nvsim): full simulator stack — Rust crate, dashboard, server, App Store, Ghost Murmur [ADR-089/090/091/092/093]
27 апр 2026, 19:41
27 апр 2026, 19:417f5a692
/* 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; }