denshooter
946c0a5377
Complete multiroom audio + navigation dashboard: - Docker stack: SignalK, Snapcast (4 zones), librespot, shairport-sync, Mopidy, Jellyfin, Portainer - React 18 + Vite dashboard with nautical dark theme - Full mock system (SignalK NMEA simulation, Snapcast zones, Mopidy player) - Real API clients for all services with reconnect logic - SVG instruments: Compass, WindRose, Gauge, DepthSounder, SpeedLog - Pages: Overview, Navigation, Audio (zones/radio/library), Systems - Dev mode runs fully without hardware (make dev) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
80 lines
2.5 KiB
CSS
80 lines
2.5 KiB
CSS
/* ─── CSS Custom Properties ───────────────────────────────────────────────── */
|
|
:root {
|
|
--bg: #07111f;
|
|
--surface: #0a1928;
|
|
--surface2: #0d2035;
|
|
--border: #1e2a3a;
|
|
--text: #e2eaf2;
|
|
--muted: #4a6080;
|
|
--accent: #38bdf8;
|
|
--success: #34d399;
|
|
--warning: #f59e0b;
|
|
--danger: #ef4444;
|
|
--spotify: #1DB954;
|
|
--airplay: #60a5fa;
|
|
|
|
--font-ui: 'DM Sans', system-ui, sans-serif;
|
|
--font-mono: 'DM Mono', 'Courier New', monospace;
|
|
|
|
--radius: 8px;
|
|
--radius-lg: 16px;
|
|
}
|
|
|
|
/* ─── Reset ───────────────────────────────────────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body, #root {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-ui);
|
|
font-size: 16px;
|
|
-webkit-tap-highlight-color: transparent;
|
|
user-select: none;
|
|
}
|
|
|
|
/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
|
|
::-webkit-scrollbar { width: 4px; }
|
|
::-webkit-scrollbar-track { background: var(--surface); }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
|
|
|
/* ─── Utilities ───────────────────────────────────────────────────────────── */
|
|
.mono { font-family: var(--font-mono); }
|
|
.muted { color: var(--muted); }
|
|
.accent { color: var(--accent); }
|
|
|
|
button {
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius);
|
|
transition: background 0.15s, opacity 0.15s;
|
|
}
|
|
button:active { opacity: 0.7; }
|
|
|
|
input[type=range] {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: var(--border);
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
cursor: pointer;
|
|
}
|