60 lines
1.6 KiB
CSS
60 lines
1.6 KiB
CSS
/* Framework design tokens — retheme by replacing this file */
|
|
:root {
|
|
/* spacing scale (4px base) */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
|
|
/* color — dark theme (observability UIs are always dark) */
|
|
--surface-0: #0d0d0f;
|
|
--surface-1: #16161a;
|
|
--surface-2: #1e1e24;
|
|
--surface-3: #26262f;
|
|
--border: #2e2e38;
|
|
|
|
--text-primary: #e8e8f0;
|
|
--text-secondary: #8888a0;
|
|
--text-dim: #555568;
|
|
|
|
/* status colors */
|
|
--status-idle: #555568;
|
|
--status-live: #3ecf8e;
|
|
--status-processing: #4f9cf9;
|
|
--status-escalating: #f5a623;
|
|
--status-error: #f06565;
|
|
|
|
/* confidence color scale (low → high) */
|
|
--conf-low: #f06565;
|
|
--conf-mid: #f5a623;
|
|
--conf-high: #3ecf8e;
|
|
|
|
/* typography */
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
--font-ui: 'Inter', system-ui, sans-serif;
|
|
--font-size-sm: 11px;
|
|
--font-size-base: 13px;
|
|
--font-size-lg: 15px;
|
|
|
|
/* panel chrome */
|
|
--panel-radius: 6px;
|
|
--panel-border: 1px solid var(--border);
|
|
--panel-header-height: 36px;
|
|
}
|
|
|
|
/* Animated gradient outline for buttons in a waiting state.
|
|
Usage: add class="waiting" to any button/element. */
|
|
@keyframes waiting-glow {
|
|
0% { box-shadow: 0 0 3px 1px var(--status-processing); }
|
|
33% { box-shadow: 0 0 3px 1px var(--status-live); }
|
|
66% { box-shadow: 0 0 3px 1px var(--status-escalating); }
|
|
100% { box-shadow: 0 0 3px 1px var(--status-processing); }
|
|
}
|
|
|
|
.waiting {
|
|
animation: waiting-glow 2s linear infinite;
|
|
outline: 1px solid transparent;
|
|
}
|