160 lines
5.3 KiB
CSS
160 lines
5.3 KiB
CSS
:root,
|
|
[data-ui-theme="dark"] {
|
|
color-scheme: dark;
|
|
--ui-color-background: #0b0f0d;
|
|
--ui-color-backdrop-edge: #020403;
|
|
--ui-color-canvas: #0b0f0d;
|
|
--ui-color-surface: #111713;
|
|
--ui-color-surface-raised: #151d18;
|
|
--ui-color-surface-elevated: #19231d;
|
|
--ui-color-surface-panel: rgba(15, 21, 17, 0.94);
|
|
--ui-color-surface-module: rgba(18, 25, 21, 0.96);
|
|
--ui-color-surface-footer: rgba(11, 15, 13, 0.98);
|
|
--ui-color-surface-inset: #070b09;
|
|
--ui-color-surface-icon: #101711;
|
|
--ui-color-border-subtle: rgba(209, 222, 198, 0.13);
|
|
--ui-color-border: rgba(211, 225, 199, 0.2);
|
|
--ui-color-border-strong: rgba(219, 234, 207, 0.34);
|
|
--ui-color-line: var(--ui-color-border);
|
|
--ui-color-line-strong: var(--ui-color-border-strong);
|
|
--ui-color-grid-line: rgba(222, 238, 211, 0.045);
|
|
--ui-color-backdrop-vignette: rgba(0, 0, 0, 0.24);
|
|
--ui-color-frame-spine: rgba(198, 230, 160, 0.1);
|
|
--ui-color-frame-wash: rgba(10, 15, 12, 0.52);
|
|
--ui-color-card-gradient-start: rgba(24, 33, 27, 0.94);
|
|
--ui-color-card-gradient-end: rgba(10, 15, 12, 0.98);
|
|
--ui-color-hover: rgba(190, 225, 146, 0.075);
|
|
--ui-color-text-primary: #edf1e6;
|
|
--ui-color-text-secondary: #b4bda9;
|
|
--ui-color-text-muted: #7f8a7a;
|
|
--ui-color-text: var(--ui-color-text-primary);
|
|
--ui-color-muted: var(--ui-color-text-muted);
|
|
--ui-color-dim: #4e594d;
|
|
--ui-color-accent: #c7ef5f;
|
|
--ui-color-accent-soft: rgba(199, 239, 95, 0.12);
|
|
--ui-color-accent-contrast: #0a100b;
|
|
--ui-color-success: #9fd85a;
|
|
--ui-color-ok: var(--ui-color-success);
|
|
--ui-color-warning: #d99a3a;
|
|
--ui-color-critical: #f04463;
|
|
--ui-color-danger: var(--ui-color-critical);
|
|
--ui-color-info: #86a8bd;
|
|
--ui-color-stale: #8a9a93;
|
|
--ui-color-unavailable: #6f7a76;
|
|
--ui-font-mono: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
|
|
--ui-font-display: "Teko", "IBM Plex Mono", "Roboto Mono", monospace;
|
|
--ui-space-1: 0.25rem;
|
|
--ui-space-2: 0.5rem;
|
|
--ui-space-3: 0.75rem;
|
|
--ui-space-4: 1rem;
|
|
--ui-space-5: 1.25rem;
|
|
--ui-space-6: 1.5rem;
|
|
--ui-radius-none: 0;
|
|
--ui-border: 1px solid var(--ui-color-border);
|
|
--ui-border-strong: 1px solid var(--ui-color-border-strong);
|
|
--ui-shadow-hard: 0 0 0 1px rgba(199, 239, 95, 0.1) inset;
|
|
--ui-shadow-inset-panel:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.04),
|
|
inset 0 -1px 0 rgba(0, 0, 0, 0.32);
|
|
--ui-z-base: 0;
|
|
--ui-z-panel: 1;
|
|
--ui-z-overlay: 10;
|
|
--ui-density-card-min: 9.75rem;
|
|
--ui-focus-ring: 0 0 0 2px var(--ui-color-canvas), 0 0 0 4px var(--ui-color-accent);
|
|
}
|
|
|
|
[data-ui-theme="light"] {
|
|
color-scheme: light;
|
|
--ui-color-background: #eef2e7;
|
|
--ui-color-backdrop-edge: #d7decf;
|
|
--ui-color-canvas: #eef2e7;
|
|
--ui-color-surface: #f9fbf3;
|
|
--ui-color-surface-raised: #f1f5ea;
|
|
--ui-color-surface-elevated: #ffffff;
|
|
--ui-color-surface-panel: rgba(250, 252, 245, 0.94);
|
|
--ui-color-surface-module: rgba(252, 254, 247, 0.96);
|
|
--ui-color-surface-footer: rgba(239, 243, 233, 0.98);
|
|
--ui-color-surface-inset: #e1e8d9;
|
|
--ui-color-surface-icon: #edf3e6;
|
|
--ui-color-border-subtle: rgba(32, 43, 29, 0.12);
|
|
--ui-color-border: rgba(32, 43, 29, 0.22);
|
|
--ui-color-border-strong: rgba(32, 43, 29, 0.38);
|
|
--ui-color-line: var(--ui-color-border);
|
|
--ui-color-line-strong: var(--ui-color-border-strong);
|
|
--ui-color-grid-line: rgba(32, 43, 29, 0.055);
|
|
--ui-color-backdrop-vignette: rgba(31, 44, 29, 0.08);
|
|
--ui-color-frame-spine: rgba(32, 43, 29, 0.09);
|
|
--ui-color-frame-wash: rgba(255, 255, 255, 0.54);
|
|
--ui-color-card-gradient-start: rgba(255, 255, 255, 0.96);
|
|
--ui-color-card-gradient-end: rgba(229, 235, 221, 0.92);
|
|
--ui-color-hover: rgba(54, 81, 25, 0.065);
|
|
--ui-color-text-primary: #11180f;
|
|
--ui-color-text-secondary: #3f4b3b;
|
|
--ui-color-text-muted: #667260;
|
|
--ui-color-text: var(--ui-color-text-primary);
|
|
--ui-color-muted: var(--ui-color-text-muted);
|
|
--ui-color-dim: #7e8878;
|
|
--ui-color-accent: #4f7200;
|
|
--ui-color-accent-soft: rgba(79, 114, 0, 0.11);
|
|
--ui-color-accent-contrast: #ffffff;
|
|
--ui-color-success: #436f00;
|
|
--ui-color-ok: var(--ui-color-success);
|
|
--ui-color-warning: #915c00;
|
|
--ui-color-critical: #b7173c;
|
|
--ui-color-danger: var(--ui-color-critical);
|
|
--ui-color-info: #476a7c;
|
|
--ui-color-stale: #596b64;
|
|
--ui-color-unavailable: #68726c;
|
|
--ui-shadow-hard: 0 0 0 1px rgba(79, 114, 0, 0.14) inset;
|
|
--ui-shadow-inset-panel:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.72),
|
|
inset 0 -1px 0 rgba(31, 44, 29, 0.08);
|
|
}
|
|
|
|
html {
|
|
background: var(--ui-color-canvas);
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
background:
|
|
radial-gradient(circle at 50% 12%, transparent 0 42%, var(--ui-color-backdrop-vignette) 100%),
|
|
linear-gradient(var(--ui-color-grid-line) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--ui-color-grid-line) 1px, transparent 1px),
|
|
var(--ui-color-canvas);
|
|
background-size: auto, 40px 40px, 40px 40px, auto;
|
|
color: var(--ui-color-text);
|
|
font-family: var(--ui-font-mono);
|
|
text-rendering: geometricPrecision;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
[tabindex]:focus-visible {
|
|
outline: 0;
|
|
box-shadow: var(--ui-focus-ring);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|