mirror of
https://github.com/OpenSquawk/OpenSquawk
synced 2026-08-01 22:26:04 +08:00
c2717d6a89
The first light-mode pass only covered Tailwind utility classes in the template. ~40 hand-written classes (.pm-flow-node, .pm-readback-*, .freq-*, .pm-seg-*, .pm-bottomnav, signal bars) still hardcoded rgba(255,255,255,N)/#fff, so scenario chips, the readback panel, and the frequency display were unreadable in light mode. Switched them to var(--text/--t2/--t3/--border) and color-mix() so they follow the theme. Debug panel (dev-only) left as-is.
63 lines
1.8 KiB
CSS
63 lines
1.8 KiB
CSS
/* assets/css/global.css */
|
|
|
|
/* CI-Variablen */
|
|
:root {
|
|
--bg: #0b1020;
|
|
--bg2: #0a0f1c;
|
|
--accent: #22d3ee;
|
|
--accent2: #0ea5e9;
|
|
--text: #ffffff;
|
|
--t2: rgba(255, 255, 255, .80);
|
|
--t3: rgba(255, 255, 255, .60);
|
|
--t4: rgba(255, 255, 255, .35);
|
|
--border: rgba(255, 255, 255, .10);
|
|
/* Subtle raised-panel fills used throughout /pm's custom (non-Tailwind) CSS. */
|
|
--pm-surface-1: rgba(255, 255, 255, .05);
|
|
--pm-surface-2: rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
/* Light theme override — currently only used by /pm (scoped via [data-theme="light"]
|
|
on .pm-page), not applied app-wide. */
|
|
[data-theme="light"] {
|
|
--bg: #f4f6fb;
|
|
--bg2: #e7ebf3;
|
|
--accent: #0891b2;
|
|
--accent2: #0369a1;
|
|
--text: #0f1420;
|
|
--t2: rgba(15, 20, 32, .75);
|
|
--t3: rgba(15, 20, 32, .55);
|
|
--t4: rgba(15, 20, 32, .38);
|
|
--border: rgba(15, 20, 32, .14);
|
|
--pm-surface-1: rgba(15, 20, 32, .035);
|
|
--pm-surface-2: rgba(15, 20, 32, .06);
|
|
}
|
|
|
|
/* Reset + Base */
|
|
html, body, #__nuxt {
|
|
min-height: 100vh;
|
|
min-width: 100vw;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: system-ui, sans-serif;
|
|
background: radial-gradient(800px 400px at 80% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
|
|
radial-gradient(600px 300px at 10% -5%, color-mix(in srgb, var(--accent2) 15%, transparent), transparent 60%),
|
|
linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, var(--bg2) 100%);
|
|
}
|
|
|
|
/* Vuetify Overrides global */
|
|
.v-field, .v-textarea, .v-switch, .v-slider {
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.panel {
|
|
backdrop-filter: blur(5deg);
|
|
}
|
|
|
|
/* Tooltip overrides */
|
|
.v-tooltip > .v-overlay__content {
|
|
background-color: color-mix(in srgb, var(--bg2) 90%, black 10%) !important;
|
|
border: 1px solid var(--border) !important;
|
|
color: var(--text) !important;
|
|
}
|