94 lines
2.3 KiB
CSS
94 lines
2.3 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
:root {
|
|
--font-size: 18px;
|
|
|
|
/* ---------- Color ---------- */
|
|
--bg-void: #0d0f12;
|
|
--bg-panel: #16191d;
|
|
--bg-raised: #1e2227;
|
|
--border-hairline: #2a2f36;
|
|
--text-primary: #e8eaed;
|
|
--text-muted: #8b92a0;
|
|
--accent-brand: #5b8def;
|
|
--accent-live: #3ecf8e;
|
|
--accent-down: #ff5c5c;
|
|
--accent-connecting: #f5a623;
|
|
|
|
/* ---------- Type ---------- */
|
|
--font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
|
|
|
/* ---------- Font ---------- */
|
|
--font-xxs: 0.66rem;
|
|
--font-xs: 0.75rem;
|
|
--font-sm: 0.875rem;
|
|
--font-md: 1rem;
|
|
--font-lg: 1.125rem;
|
|
--font-xl: 1.25rem;
|
|
--font-2xl: 1.5rem;
|
|
|
|
/* ---------- Typography ---------- */
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
|
|
/* ---------- Spacing Scale ---------- */
|
|
--space-0: 0;
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
|
|
/* ---------- Border ---------- */
|
|
--border-width: 1px;
|
|
--border-width-active: 2px;
|
|
|
|
/* ---------- Radius ---------- */
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 10px;
|
|
--radius-pill: 999px;
|
|
|
|
/* ---------- Motion ---------- */
|
|
--dur-fast: 100ms;
|
|
--dur-base: 180ms;
|
|
--dur-slow: 300ms;
|
|
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
|
|
/* ---------- Shadow ---------- */
|
|
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
|
|
|
|
/* ---------- Animation ---------- */
|
|
--transition-fast: 120ms;
|
|
--transition-base: 180ms;
|
|
|
|
/* ---------- Header ---------- */
|
|
--header-height: 50px;
|
|
--font-size-header: 1rem;
|
|
|
|
--tab-height: calc(var(--header-height) * 0.75);
|
|
|
|
/* ---------- Card ---------- */
|
|
--card-width: 500px;
|
|
--card-control-height: 36px;
|
|
|
|
/* ---------- Button ---------- */
|
|
--disabled-opacity: 0.45;
|
|
|
|
/* ---------- SideBar ---------- */
|
|
--sidebar-width-collapsed: calc(var(--header-height) * 0.85 + 2 * var(--space-3));
|
|
--sidebar-width-expanded: 200px;
|
|
|
|
/* ---------- DSP ---------- */
|
|
--dsp-control-heigth: 40vh;
|
|
}
|