416 lines
8.1 KiB
CSS
416 lines
8.1 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500;600;700&display=swap');
|
|
@import 'tailwindcss';
|
|
|
|
/* TailwindCSS 4 Theme Configuration */
|
|
@theme {
|
|
/* Design System Colors */
|
|
--color-primary: #2563eb;
|
|
--color-primary-50: #eff6ff;
|
|
--color-primary-100: #dbeafe;
|
|
--color-primary-200: #bfdbfe;
|
|
--color-primary-300: #93c5fd;
|
|
--color-primary-400: #60a5fa;
|
|
--color-primary-500: #3b82f6;
|
|
--color-primary-600: #2563eb;
|
|
--color-primary-700: #1d4ed8;
|
|
--color-primary-800: #1e40af;
|
|
--color-primary-900: #1e3a8a;
|
|
--color-primary-950: #172554;
|
|
|
|
/* Success Color: Green-500 (#22C55E) */
|
|
--color-success: #22c55e;
|
|
--color-success-50: #f0fdf4;
|
|
--color-success-100: #dcfce7;
|
|
--color-success-200: #bbf7d0;
|
|
--color-success-300: #86efac;
|
|
--color-success-400: #4ade80;
|
|
--color-success-500: #22c55e;
|
|
--color-success-600: #16a34a;
|
|
--color-success-700: #15803d;
|
|
--color-success-800: #166534;
|
|
--color-success-900: #14532d;
|
|
--color-success-950: #052e16;
|
|
|
|
/* Warning Color: Yellow-500 (#EAB308) */
|
|
--color-warning: #eab308;
|
|
--color-warning-50: #fefce8;
|
|
--color-warning-100: #fef9c3;
|
|
--color-warning-200: #fef08a;
|
|
--color-warning-300: #fde047;
|
|
--color-warning-400: #facc15;
|
|
--color-warning-500: #eab308;
|
|
--color-warning-600: #ca8a04;
|
|
--color-warning-700: #a16207;
|
|
--color-warning-800: #854d0e;
|
|
--color-warning-900: #713f12;
|
|
--color-warning-950: #422006;
|
|
|
|
/* Error Color: Red-500 (#EF4444) */
|
|
--color-error: #ef4444;
|
|
--color-error-50: #fef2f2;
|
|
--color-error-100: #fee2e2;
|
|
--color-error-200: #fecaca;
|
|
--color-error-300: #fca5a5;
|
|
--color-error-400: #f87171;
|
|
--color-error-500: #ef4444;
|
|
--color-error-600: #dc2626;
|
|
--color-error-700: #b91c1c;
|
|
--color-error-800: #991b1b;
|
|
--color-error-900: #7f1d1d;
|
|
--color-error-950: #450a0a;
|
|
|
|
/* Background Colors: Slate */
|
|
--color-background-light: #f8fafc;
|
|
--color-background-dark: #0f172a;
|
|
--color-surface-light: #ffffff;
|
|
--color-surface-dark: #1e293b;
|
|
}
|
|
|
|
/* CSS Variables for runtime theming */
|
|
:root {
|
|
--color-bg: var(--color-background-light);
|
|
--color-surface: var(--color-surface-light);
|
|
--color-text: #1e293b;
|
|
--color-text-secondary: #64748b;
|
|
--color-border: #e2e8f0;
|
|
|
|
/* Glassmorphism */
|
|
--glass-bg: rgba(255, 255, 255, 0.8);
|
|
--glass-border: rgba(255, 255, 255, 0.5);
|
|
--glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
|
|
|
|
/* Gradients */
|
|
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
--gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
|
--gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
--gradient-blue: linear-gradient(135deg, #667eea 0%, #5e94ff 100%);
|
|
}
|
|
|
|
/* Dark mode variables */
|
|
.dark {
|
|
--color-bg: var(--color-background-dark);
|
|
--color-surface: var(--color-surface-dark);
|
|
--color-text: #f1f5f9;
|
|
--color-text-secondary: #94a3b8;
|
|
--color-border: #334155;
|
|
|
|
/* Dark Glassmorphism */
|
|
--glass-bg: rgba(30, 41, 59, 0.8);
|
|
--glass-border: rgba(51, 65, 85, 0.5);
|
|
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Base styles */
|
|
body {
|
|
font-family:
|
|
'Inter',
|
|
system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
transition:
|
|
background-color 0.3s ease,
|
|
color 0.3s ease;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #475569;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background: #64748b;
|
|
}
|
|
|
|
/* Utility classes for design system colors */
|
|
.bg-app {
|
|
background-color: var(--color-bg);
|
|
}
|
|
|
|
.bg-surface {
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
.text-primary-color {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.text-secondary-color {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.border-app {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
/* Glassmorphism Effect */
|
|
.glass {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--glass-border);
|
|
box-shadow: var(--glass-shadow);
|
|
}
|
|
|
|
.glass-card {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid var(--glass-border);
|
|
box-shadow: var(--glass-shadow);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* Gradient backgrounds */
|
|
.gradient-primary {
|
|
background: var(--gradient-primary);
|
|
}
|
|
|
|
.gradient-success {
|
|
background: var(--gradient-success);
|
|
}
|
|
|
|
.gradient-blue {
|
|
background: var(--gradient-blue);
|
|
}
|
|
|
|
/* Animated gradient */
|
|
@keyframes gradient-shift {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
.animated-gradient {
|
|
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #5e94ff);
|
|
background-size: 300% 300%;
|
|
animation: gradient-shift 8s ease infinite;
|
|
}
|
|
|
|
/* Pulse animation */
|
|
@keyframes pulse-glow {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
|
|
}
|
|
}
|
|
|
|
.pulse-glow {
|
|
animation: pulse-glow 2s infinite;
|
|
}
|
|
|
|
/* Fade in animation */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
/* Scale animation */
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.animate-scaleIn {
|
|
animation: scaleIn 0.2s ease-out forwards;
|
|
}
|
|
|
|
/* Number counter animation */
|
|
@keyframes countUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-countUp {
|
|
animation: countUp 0.5s ease-out forwards;
|
|
}
|
|
|
|
/* Loading skeleton */
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
.skeleton {
|
|
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.dark .skeleton {
|
|
background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
/* Status indicator */
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.status-dot.online {
|
|
background-color: #22c55e;
|
|
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
|
|
}
|
|
|
|
.status-dot.offline {
|
|
background-color: #ef4444;
|
|
}
|
|
|
|
.status-dot.warning {
|
|
background-color: #eab308;
|
|
}
|
|
|
|
/* Progress bar gradient */
|
|
.progress-gradient {
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
|
|
background-size: 200% 100%;
|
|
animation: gradient-shift 3s ease infinite;
|
|
}
|
|
|
|
/* Card hover effect */
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.dark .card-hover:hover {
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Button hover effects */
|
|
.btn-glow:hover {
|
|
box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
|
|
}
|
|
|
|
/* Responsive utilities */
|
|
@media (max-width: 768px) {
|
|
.hide-mobile {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.hide-desktop {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Toast notifications */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
z-index: 9999;
|
|
animation: slideInRight 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Focus ring */
|
|
.focus-ring:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary-500);
|
|
}
|
|
|
|
/* Stat card special effects */
|
|
.stat-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--gradient-primary);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover::before {
|
|
opacity: 1;
|
|
} |