119 lines
3.2 KiB
CSS
119 lines
3.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-bg-primary: var(--theme-bg-primary);
|
|
--color-bg-secondary: var(--theme-bg-secondary);
|
|
--color-bg-card: var(--theme-bg-card);
|
|
--color-bg-card-hover: var(--theme-bg-card-hover);
|
|
|
|
--color-border-subtle: var(--theme-border-subtle);
|
|
--color-border-active: var(--theme-border-active);
|
|
|
|
--color-text-primary: var(--theme-text-primary);
|
|
--color-text-muted: var(--theme-text-muted);
|
|
--color-text-dim: var(--theme-text-dim);
|
|
|
|
--color-accent-primary: #3894FF;
|
|
--color-accent-secondary: #F59E0B;
|
|
--color-accent-success: #10B981;
|
|
--color-accent-error: #EF4444;
|
|
--color-accent-purple: #8B5CF6;
|
|
--color-accent-cyan: #06B6D4;
|
|
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--theme-bg-primary: #F8FAFC;
|
|
--theme-bg-secondary: #F1F5F9;
|
|
--theme-bg-card: #FFFFFF;
|
|
--theme-bg-card-hover: #F8FAFC;
|
|
--theme-border-subtle: #E2E8F0;
|
|
--theme-border-active: #CBD5E1;
|
|
--theme-text-primary: #0F172A;
|
|
--theme-text-muted: #475569;
|
|
--theme-text-dim: #64748B;
|
|
}
|
|
|
|
.dark {
|
|
--theme-bg-primary: #07090C;
|
|
--theme-bg-secondary: #0D1117;
|
|
--theme-bg-card: #121820;
|
|
--theme-bg-card-hover: #17202B;
|
|
--theme-border-subtle: #1F2833;
|
|
--theme-border-active: #324050;
|
|
--theme-text-primary: #F0F4F8;
|
|
--theme-text-muted: #8B98A5;
|
|
--theme-text-dim: #546270;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--theme-bg-primary);
|
|
color: var(--theme-text-primary);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Custom glow borders and glass effects */
|
|
.glass-panel {
|
|
background: color-mix(in srgb, var(--theme-bg-card) 75%, transparent);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid color-mix(in srgb, var(--theme-border-active) 60%, transparent);
|
|
}
|
|
|
|
.glass-panel-hover:hover {
|
|
border-color: rgba(56, 148, 255, 0.5);
|
|
box-shadow: 0 0 25px rgba(56, 148, 255, 0.08);
|
|
}
|
|
|
|
/* Scanline and grid overlays */
|
|
.grid-bg {
|
|
background-size: 28px 28px;
|
|
background-image:
|
|
linear-gradient(to right, color-mix(in srgb, var(--theme-border-subtle) 40%, transparent) 1px, transparent 1px),
|
|
linear-gradient(to bottom, color-mix(in srgb, var(--theme-border-subtle) 40%, transparent) 1px, transparent 1px);
|
|
}
|
|
|
|
.radar-glow {
|
|
box-shadow: 0 0 50px -10px rgba(56, 148, 255, 0.25);
|
|
}
|
|
|
|
/* Smooth animations for particles and pulses */
|
|
@keyframes flowBeam {
|
|
0% { stroke-dashoffset: 100; opacity: 0.2; }
|
|
50% { opacity: 1; }
|
|
100% { stroke-dashoffset: 0; opacity: 0.2; }
|
|
}
|
|
|
|
.animate-flow-beam {
|
|
stroke-dasharray: 10, 20;
|
|
animation: flowBeam 2s linear infinite;
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0%, 100% { opacity: 0.4; transform: scale(1); }
|
|
50% { opacity: 1.0; transform: scale(1.04); }
|
|
}
|
|
|
|
.animate-pulse-glow {
|
|
animation: pulseGlow 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* Scrollbars */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--theme-bg-primary);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--theme-border-subtle);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--theme-border-active);
|
|
}
|