136 lines
4.6 KiB
CSS
136 lines
4.6 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
|
|
--at-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--at-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
|
|
--at-c-cyan: #00f0ff;
|
|
--at-c-cyan-strong: #00d4e6;
|
|
--at-c-cyan-deep: #0891b2;
|
|
--at-c-magenta: #ff00ff;
|
|
--at-c-green: #39ff14;
|
|
--at-c-gold: #ffd700;
|
|
--at-c-red: #ff4757;
|
|
|
|
--at-c-dark-0: #05070b;
|
|
--at-c-dark-1: #0a0a0f;
|
|
--at-c-dark-2: #12121a;
|
|
--at-c-dark-3: #1e293b;
|
|
--at-c-light-0: #ffffff;
|
|
--at-c-light-1: #f8fafc;
|
|
--at-c-light-2: #f0f2f5;
|
|
|
|
--at-c-text-dark-1: #e0e6ff;
|
|
--at-c-text-dark-2: #c8d6e5;
|
|
--at-c-text-dark-3: #a0a8c0;
|
|
--at-c-text-dark-muted: #8892b0;
|
|
--at-c-text-light-1: #1e293b;
|
|
--at-c-text-light-2: #475569;
|
|
--at-c-text-light-3: #64748b;
|
|
|
|
--at-c-bg: var(--at-c-dark-1);
|
|
--at-c-bg-soft: rgba(10, 10, 15, 0.8);
|
|
--at-c-surface: var(--at-c-dark-2);
|
|
--at-c-surface-soft: rgba(10, 10, 15, 0.6);
|
|
--at-c-surface-raised: rgba(30, 41, 59, 0.78);
|
|
--at-c-text: var(--at-c-text-dark-1);
|
|
--at-c-text-soft: var(--at-c-text-dark-2);
|
|
--at-c-text-muted: var(--at-c-text-dark-muted);
|
|
--at-c-border: rgba(0, 240, 255, 0.12);
|
|
--at-c-border-strong: rgba(0, 240, 255, 0.28);
|
|
--at-c-focus: rgba(0, 240, 255, 0.55);
|
|
|
|
--at-gradient-brand: linear-gradient(135deg, var(--at-c-cyan), var(--at-c-magenta));
|
|
--at-gradient-brand-text: linear-gradient(135deg, #e0e6ff 0%, var(--at-c-cyan) 50%, var(--at-c-magenta) 100%);
|
|
--at-gradient-success: linear-gradient(135deg, var(--at-c-cyan), var(--at-c-green));
|
|
--at-gradient-cyan-text: linear-gradient(135deg, #e0e6ff 0%, var(--at-c-cyan) 100%);
|
|
--at-gradient-panel: linear-gradient(135deg, rgba(0, 240, 255, 0.06), rgba(255, 0, 255, 0.035));
|
|
|
|
--at-radius-xs: 6px;
|
|
--at-radius-sm: 8px;
|
|
--at-radius-md: 10px;
|
|
--at-radius-lg: 12px;
|
|
--at-radius-xl: 16px;
|
|
--at-radius-2xl: 20px;
|
|
--at-radius-preview: 22px;
|
|
--at-radius-pill: 999px;
|
|
|
|
--at-shadow-cyan-sm: 0 4px 20px rgba(0, 240, 255, 0.3);
|
|
--at-shadow-cyan-md: 0 8px 32px rgba(0, 240, 255, 0.08);
|
|
--at-shadow-cyan-lg: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 240, 255, 0.06);
|
|
--at-shadow-card: 0 16px 32px -10px rgba(0, 0, 0, 0.35);
|
|
|
|
--at-blur-sm: 8px;
|
|
--at-blur-md: 12px;
|
|
--at-blur-lg: 20px;
|
|
--at-glass-bg: rgba(10, 10, 15, 0.78);
|
|
--at-glass-bg-hover: rgba(10, 10, 15, 0.9);
|
|
--at-glass-border: 1px solid var(--at-c-border);
|
|
--at-glass-border-strong: 1px solid var(--at-c-border-strong);
|
|
|
|
--at-grid-line: rgba(0, 240, 255, 0.03);
|
|
--at-scanline: rgba(0, 240, 255, 0.008);
|
|
--at-transition-fast: 0.15s ease;
|
|
--at-transition-base: 0.25s ease;
|
|
--at-transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
--at-z-header: 1000;
|
|
}
|
|
|
|
.v-theme--light,
|
|
:root:not(.dark) {
|
|
--at-c-bg: var(--at-c-light-2);
|
|
--at-c-bg-soft: rgba(255, 255, 255, 0.82);
|
|
--at-c-surface: var(--at-c-light-0);
|
|
--at-c-surface-soft: rgba(255, 255, 255, 0.78);
|
|
--at-c-surface-raised: rgba(255, 255, 255, 0.92);
|
|
--at-c-text: var(--at-c-text-light-1);
|
|
--at-c-text-soft: var(--at-c-text-light-2);
|
|
--at-c-text-muted: var(--at-c-text-light-3);
|
|
--at-c-border: rgba(0, 0, 0, 0.08);
|
|
--at-c-border-strong: rgba(0, 139, 178, 0.3);
|
|
--at-c-focus: rgba(8, 145, 178, 0.5);
|
|
--at-glass-bg: rgba(255, 255, 255, 0.78);
|
|
--at-glass-bg-hover: rgba(255, 255, 255, 0.92);
|
|
--at-glass-border: 1px solid rgba(0, 0, 0, 0.08);
|
|
--at-glass-border-strong: 1px solid rgba(0, 139, 178, 0.25);
|
|
--at-shadow-card: 0 16px 32px -10px rgba(0, 0, 0, 0.12);
|
|
--at-shadow-cyan-lg: 0 20px 60px rgba(0, 180, 200, 0.12);
|
|
--at-grid-line: rgba(8, 145, 178, 0.045);
|
|
}
|
|
|
|
.v-theme--dark,
|
|
.dark {
|
|
--at-c-bg: var(--at-c-dark-1);
|
|
--at-c-bg-soft: rgba(10, 10, 15, 0.8);
|
|
--at-c-surface: var(--at-c-dark-2);
|
|
--at-c-surface-soft: rgba(10, 10, 15, 0.6);
|
|
--at-c-surface-raised: rgba(30, 41, 59, 0.78);
|
|
--at-c-text: var(--at-c-text-dark-1);
|
|
--at-c-text-soft: var(--at-c-text-dark-2);
|
|
--at-c-text-muted: var(--at-c-text-dark-muted);
|
|
--at-c-border: rgba(0, 240, 255, 0.12);
|
|
--at-c-border-strong: rgba(0, 240, 255, 0.28);
|
|
--at-glass-bg: rgba(10, 10, 15, 0.78);
|
|
--at-glass-bg-hover: rgba(10, 10, 15, 0.92);
|
|
}
|
|
|
|
.at-gradient-text {
|
|
background: var(--at-gradient-brand-text);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.at-glass {
|
|
background: var(--at-glass-bg);
|
|
border: var(--at-glass-border);
|
|
backdrop-filter: blur(var(--at-blur-md));
|
|
-webkit-backdrop-filter: blur(var(--at-blur-md));
|
|
box-shadow: var(--at-shadow-cyan-md);
|
|
}
|
|
|
|
.at-focus-ring:focus-visible {
|
|
outline: 2px solid var(--at-c-focus);
|
|
outline-offset: 3px;
|
|
}
|