119 lines
3.4 KiB
CSS
119 lines
3.4 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 240 10% 4%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 240 10% 4%;
|
|
--card-foreground: 210 40% 98%;
|
|
--border: 240 6% 12%;
|
|
--input: 240 6% 12%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 240 10% 4%;
|
|
--secondary: 240 6% 10%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 240 6% 9%;
|
|
--muted-foreground: 215 16% 47%;
|
|
--accent: 240 6% 12%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 63% 31%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--ring: 240 6% 12%;
|
|
--radius: 0.75rem;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* { @apply border-border; }
|
|
body {
|
|
background-color: #080810;
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
color: #f1f5f9;
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 4px; height: 4px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 2px; }
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.5); }
|
|
|
|
/* Card base */
|
|
.card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.07);
|
|
border-radius: 20px;
|
|
transition: all 0.25s ease;
|
|
}
|
|
.card:hover {
|
|
background: rgba(255,255,255,0.05);
|
|
border-color: rgba(255,255,255,0.12);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
|
|
}
|
|
|
|
/* Legacy compat */
|
|
.glass-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.07);
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.25s ease;
|
|
}
|
|
.glass-card:hover {
|
|
background: rgba(255,255,255,0.05);
|
|
border-color: rgba(255,255,255,0.12);
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* Accent borders — short names */
|
|
.card-blue { border-top: 2px solid #3b82f6; }
|
|
.card-violet { border-top: 2px solid #8b5cf6; }
|
|
.card-emerald { border-top: 2px solid #10b981; }
|
|
.card-amber { border-top: 2px solid #f59e0b; }
|
|
.card-cyan { border-top: 2px solid #06b6d4; }
|
|
.card-rose { border-top: 2px solid #f43f5e; }
|
|
|
|
/* Legacy accent names */
|
|
.card-accent-blue { border-top: 2px solid #3b82f6; }
|
|
.card-accent-violet { border-top: 2px solid #8b5cf6; }
|
|
.card-accent-emerald { border-top: 2px solid #10b981; }
|
|
.card-accent-amber { border-top: 2px solid #f59e0b; }
|
|
.card-accent-cyan { border-top: 2px solid #06b6d4; }
|
|
.card-accent-rose { border-top: 2px solid #f43f5e; }
|
|
|
|
/* Gradient text */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #818cf8, #c084fc);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Status indicators */
|
|
.status-online { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.5); }
|
|
.status-offline { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }
|
|
.status-checking { background: #6b7280; }
|
|
|
|
/* Pulsing status */
|
|
@keyframes ping-slow {
|
|
0%, 100% { opacity: 0.8; transform: scale(1); }
|
|
50% { opacity: 0.3; transform: scale(1.5); }
|
|
}
|
|
.ping-slow { animation: ping-slow 2s ease-in-out infinite; }
|
|
|
|
/* Glow effects */
|
|
.glow-violet { box-shadow: 0 0 40px rgba(139,92,246,0.15); }
|
|
.glow-blue { box-shadow: 0 0 40px rgba(59,130,246,0.15); }
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
background: #0a0a14;
|
|
border-right: 1px solid rgba(255,255,255,0.05);
|
|
}
|