193 lines
3.4 KiB
CSS
193 lines
3.4 KiB
CSS
/* Theme Support - Light/Dark Mode */
|
|
|
|
:root {
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f8fafc;
|
|
--bg-tertiary: #f1f5f9;
|
|
--text-primary: #1e293b;
|
|
--text-secondary: #64748b;
|
|
--text-tertiary: #94a3b8;
|
|
--border-color: #e2e8f0;
|
|
--shadow-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
:root.dark {
|
|
--bg-primary: #0f172a;
|
|
--bg-secondary: #1e293b;
|
|
--bg-tertiary: #334155;
|
|
--text-primary: #f1f5f9;
|
|
--text-secondary: #cbd5e1;
|
|
--text-tertiary: #94a3b8;
|
|
--border-color: #475569;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Smooth transitions for theme switching */
|
|
|
|
html {
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dark body {
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Background gradients for different themes */
|
|
|
|
.bg-gradient-light {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.bg-gradient-dark {
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
|
|
}
|
|
|
|
/* Text colors that change with theme */
|
|
|
|
.text-muted {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.text-muted-dark {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Shadow adjustments */
|
|
|
|
.shadow-light {
|
|
box-shadow: 0 4px 6px -1px var(--shadow-color);
|
|
}
|
|
|
|
.shadow-dark {
|
|
box-shadow: 0 10px 15px -3px var(--shadow-color);
|
|
}
|
|
|
|
/* Input field styling for dark mode */
|
|
|
|
.input-field {
|
|
background-color: var(--bg-primary);
|
|
border-color: var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.input-field::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Card styling for dark mode */
|
|
|
|
.card {
|
|
background-color: var(--bg-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.dark .card {
|
|
background-color: var(--bg-secondary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
/* Header and navigation */
|
|
|
|
header {
|
|
background-color: var(--bg-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.sidebar {
|
|
background-color: var(--bg-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
/* Table styling */
|
|
|
|
thead {
|
|
background-color: var(--bg-secondary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
tbody {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.dark .glass-panel {
|
|
background: rgba(15, 23, 42, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-color: rgba(148, 163, 184, 0.1);
|
|
}
|
|
|
|
/* Hover states */
|
|
|
|
.hover-light:hover {
|
|
background-color: var(--bg-tertiary);
|
|
}
|
|
|
|
.dark .hover-light:hover {
|
|
background-color: var(--bg-tertiary);
|
|
}
|
|
|
|
/* Color overlays */
|
|
|
|
.color-overlay-blue {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
|
|
}
|
|
|
|
.dark .color-overlay-blue {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
|
|
}
|
|
|
|
/* Auth screen theme */
|
|
|
|
#authModule {
|
|
background: linear-gradient(to bottom right, #1e3a8a, #1e40af);
|
|
}
|
|
|
|
.dark #authModule {
|
|
background: linear-gradient(to bottom right, #0f172a, #1e293b);
|
|
}
|
|
|
|
/* Status colors */
|
|
|
|
.status-success {
|
|
color: #10b981;
|
|
}
|
|
|
|
.dark .status-success {
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
.status-warning {
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.dark .status-warning {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.status-error {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.dark .status-error {
|
|
color: #f87171;
|
|
}
|
|
|
|
.status-info {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.dark .status-info {
|
|
color: #60a5fa;
|
|
}
|