You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
5.0 KiB
CSS
154 lines
5.0 KiB
CSS
:root,
|
|
[data-theme="dark"] {
|
|
--bg-primary: #0b0b13;
|
|
--bg-secondary: rgba(14, 14, 24, 0.9);
|
|
--bg-tertiary: rgba(255, 255, 255, 0.04);
|
|
--bg-elevated: rgba(20, 20, 36, 0.95);
|
|
--bg-glass: rgba(14, 14, 24, 0.75);
|
|
--terminal-bg: #080810;
|
|
--text-primary: #e2e2ec;
|
|
--text-secondary: #7878a0;
|
|
--text-dimmed: #3e3e58;
|
|
--border-color: rgba(255, 255, 255, 0.055);
|
|
--border-subtle: rgba(255, 255, 255, 0.025);
|
|
--border-strong: rgba(255, 255, 255, 0.1);
|
|
--accent: #6366f1;
|
|
--accent-hover: #818cf8;
|
|
--accent-dim: #4f52cc;
|
|
--accent-glow: rgba(99, 102, 241, 0.18);
|
|
--accent-soft: rgba(99, 102, 241, 0.08);
|
|
--accent-gradient: linear-gradient(135deg, #6366f1, #a78bfa);
|
|
--green: #34d399;
|
|
--green-glow: rgba(52, 211, 153, 0.2);
|
|
--red: #f87171;
|
|
--red-glow: rgba(248, 113, 113, 0.15);
|
|
--blue: #60a5fa;
|
|
--purple: #a78bfa;
|
|
--cyan: #22d3ee;
|
|
--yellow: #fbbf24;
|
|
--orange: #fb923c;
|
|
--gray: #6b7280;
|
|
--key-bg: rgba(26, 26, 46, 0.9);
|
|
--key-bg-highlight: rgba(255, 255, 255, 0.035);
|
|
--key-border: rgba(255, 255, 255, 0.07);
|
|
--key-depth: rgba(0, 0, 0, 0.5);
|
|
--key-active-bg: rgba(99, 102, 241, 0.15);
|
|
--sidebar-bg: #09090f;
|
|
--sidebar-border: rgba(255, 255, 255, 0.04);
|
|
--scrollbar-thumb: rgba(255, 255, 255, 0.07);
|
|
--scrollbar-track: transparent;
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
|
|
--blur-amount: 20px;
|
|
--transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
--radius-xs: 5px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 18px;
|
|
--radius-pill: 100px;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg-primary: #f4f4f8;
|
|
--bg-secondary: rgba(255, 255, 255, 0.9);
|
|
--bg-tertiary: rgba(0, 0, 0, 0.035);
|
|
--bg-elevated: rgba(255, 255, 255, 0.95);
|
|
--bg-glass: rgba(255, 255, 255, 0.75);
|
|
--terminal-bg: #fafafa;
|
|
--text-primary: #0f0f1a;
|
|
--text-secondary: #60607a;
|
|
--text-dimmed: #aaaabb;
|
|
--border-color: rgba(0, 0, 0, 0.07);
|
|
--border-subtle: rgba(0, 0, 0, 0.04);
|
|
--border-strong: rgba(0, 0, 0, 0.12);
|
|
--accent: #5558eb;
|
|
--accent-hover: #4347d4;
|
|
--accent-dim: #7b7ef5;
|
|
--accent-glow: rgba(85, 88, 235, 0.12);
|
|
--accent-soft: rgba(85, 88, 235, 0.07);
|
|
--accent-gradient: linear-gradient(135deg, #5558eb, #9b59f5);
|
|
--green: #059669;
|
|
--green-glow: rgba(5, 150, 105, 0.12);
|
|
--red: #dc2626;
|
|
--red-glow: rgba(220, 38, 38, 0.1);
|
|
--blue: #2563eb;
|
|
--purple: #7c3aed;
|
|
--cyan: #0891b2;
|
|
--yellow: #d97706;
|
|
--orange: #ea580c;
|
|
--gray: #9ca3af;
|
|
--key-bg: rgba(255, 255, 255, 0.95);
|
|
--key-bg-highlight: rgba(255, 255, 255, 0.6);
|
|
--key-border: rgba(0, 0, 0, 0.09);
|
|
--key-depth: rgba(0, 0, 0, 0.12);
|
|
--key-active-bg: rgba(85, 88, 235, 0.08);
|
|
--sidebar-bg: #eeeef4;
|
|
--sidebar-border: rgba(0, 0, 0, 0.05);
|
|
--scrollbar-thumb: rgba(0, 0, 0, 0.1);
|
|
--scrollbar-track: transparent;
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.07);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
|
|
--blur-amount: 20px;
|
|
--transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
--radius-xs: 5px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 18px;
|
|
--radius-pill: 100px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root:not([data-theme="dark"]) {
|
|
--bg-primary: #f4f4f8;
|
|
--bg-secondary: rgba(255, 255, 255, 0.9);
|
|
--bg-tertiary: rgba(0, 0, 0, 0.035);
|
|
--bg-elevated: rgba(255, 255, 255, 0.95);
|
|
--bg-glass: rgba(255, 255, 255, 0.75);
|
|
--terminal-bg: #fafafa;
|
|
--text-primary: #0f0f1a;
|
|
--text-secondary: #60607a;
|
|
--text-dimmed: #aaaabb;
|
|
--border-color: rgba(0, 0, 0, 0.07);
|
|
--border-subtle: rgba(0, 0, 0, 0.04);
|
|
--border-strong: rgba(0, 0, 0, 0.12);
|
|
--accent: #5558eb;
|
|
--accent-hover: #4347d4;
|
|
--accent-dim: #7b7ef5;
|
|
--accent-glow: rgba(85, 88, 235, 0.12);
|
|
--accent-soft: rgba(85, 88, 235, 0.07);
|
|
--accent-gradient: linear-gradient(135deg, #5558eb, #9b59f5);
|
|
--green: #059669;
|
|
--green-glow: rgba(5, 150, 105, 0.12);
|
|
--red: #dc2626;
|
|
--red-glow: rgba(220, 38, 38, 0.1);
|
|
--blue: #2563eb;
|
|
--purple: #7c3aed;
|
|
--cyan: #0891b2;
|
|
--yellow: #d97706;
|
|
--orange: #ea580c;
|
|
--gray: #9ca3af;
|
|
--key-bg: rgba(255, 255, 255, 0.95);
|
|
--key-bg-highlight: rgba(255, 255, 255, 0.6);
|
|
--key-border: rgba(0, 0, 0, 0.09);
|
|
--key-depth: rgba(0, 0, 0, 0.12);
|
|
--key-active-bg: rgba(85, 88, 235, 0.08);
|
|
--sidebar-bg: #eeeef4;
|
|
--sidebar-border: rgba(0, 0, 0, 0.05);
|
|
--scrollbar-thumb: rgba(0, 0, 0, 0.1);
|
|
--scrollbar-track: transparent;
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.07);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
|
|
--blur-amount: 20px;
|
|
}
|
|
}
|