redesign: modern dark dashboard WOW effect - gradients, animations, new layout
This commit is contained in:
Cosmo
@@ -1,4 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@@ -24,20 +24,15 @@
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--ring: 240 6% 12%;
|
||||
--radius: 0.75rem;
|
||||
--bg-base: #0a0a0f;
|
||||
--bg-surface: #111118;
|
||||
--bg-elevated: #1a1a24;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
* { @apply border-border; }
|
||||
body {
|
||||
background-color: var(--bg-base);
|
||||
background-color: #080810;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
color: #f8fafc;
|
||||
color: #f1f5f9;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
@@ -45,77 +40,79 @@
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 4px; height: 4px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
|
||||
::-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 style */
|
||||
/* Card base */
|
||||
.card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.2s ease;
|
||||
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.1);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
||||
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.06);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
.glass-card:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
||||
border-color: rgba(255,255,255,0.12);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.card-accent-blue { border-top: 2px solid #3b82f6; }
|
||||
.card-accent-violet { border-top: 2px solid #8b5cf6; }
|
||||
/* 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; }
|
||||
.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, #6366f1, #a855f7);
|
||||
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 30px rgba(139,92,246,0.2); }
|
||||
.glow-blue { box-shadow: 0 0 30px rgba(59,130,246,0.2); }
|
||||
.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: #0d0d14;
|
||||
background: #0a0a14;
|
||||
border-right: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@keyframes status-ring {
|
||||
0%, 100% { opacity: 0.7; transform: scale(1); }
|
||||
50% { opacity: 0; transform: scale(2.5); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user