3386 lines
97 KiB
CSS
3386 lines
97 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom Styles für Light und Dark Mode - Premium Upgrade mit verbessertem Light Mode */
|
|
@layer base {
|
|
:root {
|
|
/* Light Mode Farben - Mercedes-Benz Professional - VERBESSERT für optimale Lesbarkeit */
|
|
--color-bg-primary: #ffffff;
|
|
--color-bg-secondary: #fafbfc;
|
|
--color-bg-tertiary: #f3f5f7;
|
|
--color-bg-accent: #fbfcfd;
|
|
--color-text-primary: #111827; /* Verstärkter Kontrast für bessere Lesbarkeit */
|
|
--color-text-secondary: #374151; /* Erhöhter Kontrast */
|
|
--color-text-muted: #6b7280; /* Optimierter Muted-Text */
|
|
--color-text-accent: #0073ce;
|
|
--color-border-primary: #e5e7eb; /* Subtilere aber sichtbarere Borders */
|
|
--color-border-secondary: #d1d5db;
|
|
--color-accent: #0073ce; /* Mercedes-Benz Professional Blau */
|
|
--color-accent-hover: #005a9f;
|
|
--color-accent-light: #eff6ff;
|
|
--color-accent-text: #ffffff;
|
|
--color-shadow: rgba(0, 0, 0, 0.06); /* Sanftere Schatten */
|
|
--color-shadow-strong: rgba(0, 0, 0, 0.1);
|
|
--color-shadow-accent: rgba(0, 115, 206, 0.12);
|
|
--card-radius: 1rem; /* Abgerundete Ecken für Karten */
|
|
|
|
/* Light Mode Gradients - VERBESSERT für sanftere Optik */
|
|
--gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 30%, #f8fafc 70%, #f3f5f7 100%);
|
|
--gradient-card: linear-gradient(135deg, #ffffff 0%, #fcfcfd 50%, #fafbfc 100%);
|
|
--gradient-hero: linear-gradient(135deg, #fafbfc 0%, #f3f5f7 40%, #eef2f5 80%, #f8fafc 100%);
|
|
--gradient-accent: linear-gradient(135deg, #0073ce 0%, #005a9f 100%);
|
|
--gradient-surface: linear-gradient(135deg, #ffffff 0%, #fbfcfd 50%, #f8fafc 100%);
|
|
|
|
/* Neue optimierte Light Mode Glassmorphism-Variablen */
|
|
--glass-bg: rgba(255, 255, 255, 0.92);
|
|
--glass-border: rgba(255, 255, 255, 0.3);
|
|
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
|
|
--glass-blur: blur(20px);
|
|
}
|
|
|
|
.dark {
|
|
/* Dark Mode Farben - Noch dunkler und eleganter - UNVERÄNDERT */
|
|
--color-bg-primary: #000000; /* Tiefes Schwarz */
|
|
--color-bg-secondary: #0a0a0a; /* Sehr dunkles Grau */
|
|
--color-bg-tertiary: #1a1a1a;
|
|
--color-text-primary: #ffffff;
|
|
--color-text-secondary: #e2e8f0;
|
|
--color-text-muted: #94a3b8;
|
|
--color-border-primary: #1a1a1a; /* Dunkler Rahmen */
|
|
--color-border-secondary: #2a2a2a;
|
|
--color-accent: #ffffff; /* Reines Weiß */
|
|
--color-accent-hover: #f0f0f0;
|
|
--color-accent-light: #1e3a8a;
|
|
--color-accent-text: #000000;
|
|
--color-shadow: rgba(0, 0, 0, 0.8); /* Sehr dunkler Schatten */
|
|
--color-shadow-strong: rgba(0, 0, 0, 0.9);
|
|
--mb-black: #000000; /* Mercedes-Benz Schwarz */
|
|
}
|
|
|
|
body {
|
|
@apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300;
|
|
position: relative;
|
|
min-height: 100vh;
|
|
background: var(--gradient-primary);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
line-height: 1.65; /* Verbesserte Zeilenhöhe für bessere Lesbarkeit */
|
|
font-size: 15px; /* Optimierte Schriftgröße */
|
|
}
|
|
|
|
.dark body {
|
|
background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
|
|
}
|
|
|
|
/* Enhanced Body Background with Subtle Patterns - VERBESSERT */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(circle at 25% 25%, rgba(0, 115, 206, 0.015) 0%, transparent 50%),
|
|
radial-gradient(circle at 75% 75%, rgba(0, 115, 206, 0.01) 0%, transparent 50%),
|
|
radial-gradient(circle at 50% 10%, rgba(0, 115, 206, 0.008) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.dark body::before {
|
|
background:
|
|
radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
|
|
}
|
|
|
|
/* Navbar Styles - Premium Glassmorphism - VERBESSERT */
|
|
nav {
|
|
@apply backdrop-blur-xl border-b transition-all duration-300;
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 255, 255, 0.95) 0%,
|
|
rgba(250, 251, 252, 0.92) 30%,
|
|
rgba(248, 250, 252, 0.9) 70%,
|
|
rgba(255, 255, 255, 0.95) 100%);
|
|
border-bottom: 1px solid rgba(229, 231, 235, 0.7);
|
|
backdrop-filter: blur(28px) saturate(200%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(200%) brightness(110%);
|
|
box-shadow:
|
|
0 4px 20px rgba(0, 0, 0, 0.04),
|
|
0 2px 8px rgba(0, 115, 206, 0.02),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.dark nav {
|
|
background: rgba(0, 0, 0, 0.85);
|
|
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Premium Card Styles - VERBESSERT für Light Mode */
|
|
.card-enhanced {
|
|
background: var(--gradient-card);
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: var(--card-radius);
|
|
box-shadow:
|
|
0 2px 12px rgba(0, 0, 0, 0.03),
|
|
0 1px 4px rgba(0, 115, 206, 0.02),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-enhanced::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: var(--gradient-accent);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.card-enhanced:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 8px 25px rgba(0, 0, 0, 0.06),
|
|
0 4px 12px rgba(0, 115, 206, 0.04),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.card-enhanced:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dark .card-enhanced {
|
|
background: rgba(10, 10, 10, 0.8);
|
|
border-color: var(--color-border-primary);
|
|
box-shadow: 0 4px 20px var(--color-shadow);
|
|
}
|
|
|
|
/* Premium Button Styles - VERBESSERT */
|
|
.btn-enhanced {
|
|
background: var(--gradient-accent);
|
|
color: var(--color-accent-text);
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem 1.75rem;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 115, 206, 0.2),
|
|
0 1px 4px rgba(0, 115, 206, 0.1);
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-enhanced::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.btn-enhanced:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow:
|
|
0 4px 15px rgba(0, 115, 206, 0.3),
|
|
0 2px 8px rgba(0, 115, 206, 0.2);
|
|
}
|
|
|
|
.btn-enhanced:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-enhanced:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--gradient-surface);
|
|
color: var(--color-text-primary);
|
|
border: 1px solid var(--color-border-primary);
|
|
box-shadow:
|
|
0 1px 6px rgba(0, 0, 0, 0.03),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--color-bg-secondary);
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 115, 206, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
/* Enhanced Form Elements - VERBESSERT für bessere Lesbarkeit */
|
|
.input-enhanced {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem 1rem;
|
|
color: var(--color-text-primary);
|
|
font-size: 0.9rem;
|
|
box-shadow:
|
|
0 1px 6px rgba(0, 0, 0, 0.02),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
transition: all 0.2s ease;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.input-enhanced:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 115, 206, 0.1),
|
|
0 0 0 3px rgba(0, 115, 206, 0.05),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.95);
|
|
background: rgba(255, 255, 255, 0.98);
|
|
}
|
|
|
|
.input-enhanced::placeholder {
|
|
color: var(--color-text-muted);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.dark .input-enhanced {
|
|
background: rgba(10, 10, 10, 0.8);
|
|
border-color: var(--color-border-primary);
|
|
color: var(--color-text-primary);
|
|
box-shadow:
|
|
0 2px 8px var(--color-shadow),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.dark .input-enhanced:focus {
|
|
border-color: #60a5fa;
|
|
box-shadow:
|
|
0 4px 15px rgba(96, 165, 250, 0.2),
|
|
0 0 0 3px rgba(96, 165, 250, 0.1);
|
|
}
|
|
|
|
/* Premium Alert Styles */
|
|
.alert-enhanced {
|
|
border-radius: 1rem;
|
|
padding: 1.25rem;
|
|
border: 1px solid transparent;
|
|
position: relative;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.alert-enhanced::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
}
|
|
|
|
.alert-info-enhanced {
|
|
background: linear-gradient(135deg,
|
|
rgba(239, 246, 255, 0.95) 0%,
|
|
rgba(219, 234, 254, 0.9) 100%);
|
|
border-color: rgba(59, 130, 246, 0.2);
|
|
color: #1e40af;
|
|
}
|
|
|
|
.alert-info-enhanced::before {
|
|
background: var(--gradient-accent);
|
|
}
|
|
|
|
.alert-success-enhanced {
|
|
background: linear-gradient(135deg,
|
|
rgba(236, 253, 245, 0.95) 0%,
|
|
rgba(167, 243, 208, 0.9) 100%);
|
|
border-color: rgba(16, 185, 129, 0.2);
|
|
color: #065f46;
|
|
}
|
|
|
|
.alert-success-enhanced::before {
|
|
background: linear-gradient(180deg, #10b981 0%, #059669 100%);
|
|
}
|
|
|
|
.alert-warning-enhanced {
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 251, 235, 0.95) 0%,
|
|
rgba(254, 243, 199, 0.9) 100%);
|
|
border-color: rgba(251, 191, 36, 0.2);
|
|
color: #92400e;
|
|
}
|
|
|
|
.alert-warning-enhanced::before {
|
|
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
|
|
}
|
|
|
|
.alert-error-enhanced {
|
|
background: linear-gradient(135deg,
|
|
rgba(254, 242, 242, 0.95) 0%,
|
|
rgba(252, 165, 165, 0.9) 100%);
|
|
border-color: rgba(239, 68, 68, 0.2);
|
|
color: #991b1b;
|
|
}
|
|
|
|
.alert-error-enhanced::before {
|
|
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
|
|
}
|
|
|
|
/* Light Mode Flash Messages - Premium */
|
|
.flash-message-light {
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 255, 255, 0.95) 0%,
|
|
rgba(248, 250, 252, 0.9) 100%);
|
|
backdrop-filter: blur(32px) saturate(200%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(32px) saturate(200%) brightness(120%);
|
|
border: 1px solid rgba(226, 232, 240, 0.6);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.1),
|
|
0 12px 24px rgba(0, 115, 206, 0.05),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.flash-message-light.success {
|
|
border-left: 4px solid #10b981;
|
|
background: linear-gradient(135deg,
|
|
rgba(236, 253, 245, 0.95) 0%,
|
|
rgba(209, 250, 229, 0.9) 100%);
|
|
}
|
|
|
|
.flash-message-light.error {
|
|
border-left: 4px solid #ef4444;
|
|
background: linear-gradient(135deg,
|
|
rgba(254, 242, 242, 0.95) 0%,
|
|
rgba(252, 165, 165, 0.9) 100%);
|
|
}
|
|
|
|
.flash-message-light.warning {
|
|
border-left: 4px solid #fbbf24;
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 251, 235, 0.95) 0%,
|
|
rgba(254, 243, 199, 0.9) 100%);
|
|
}
|
|
|
|
.flash-message-light.info {
|
|
border-left: 4px solid #3b82f6;
|
|
background: linear-gradient(135deg,
|
|
rgba(239, 246, 255, 0.95) 0%,
|
|
rgba(219, 234, 254, 0.9) 100%);
|
|
}
|
|
|
|
/* Premium Table Styles */
|
|
.table-enhanced {
|
|
background: var(--gradient-card);
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: var(--card-radius);
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 4px 20px var(--color-shadow),
|
|
0 2px 8px rgba(0, 115, 206, 0.04),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.table-enhanced th {
|
|
background: linear-gradient(135deg,
|
|
var(--color-bg-secondary) 0%,
|
|
var(--color-bg-tertiary) 100%);
|
|
color: var(--color-text-primary);
|
|
font-weight: 600;
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--color-border-primary);
|
|
position: relative;
|
|
}
|
|
|
|
.table-enhanced th::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
var(--color-border-secondary) 50%,
|
|
transparent 100%);
|
|
}
|
|
|
|
.table-enhanced td {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--color-border-primary);
|
|
color: var(--color-text-secondary);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.table-enhanced tbody tr:hover {
|
|
background: var(--color-bg-secondary);
|
|
transform: scale(1.002);
|
|
}
|
|
|
|
.dark .table-enhanced {
|
|
background: rgba(10, 10, 10, 0.8);
|
|
border-color: var(--color-border-primary);
|
|
}
|
|
|
|
.dark .table-enhanced th {
|
|
background: rgba(26, 26, 26, 0.8);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.dark .table-enhanced tbody tr:hover {
|
|
background: rgba(26, 26, 26, 0.6);
|
|
}
|
|
|
|
/* Premium Modal Styles */
|
|
.modal-enhanced {
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 255, 255, 0.98) 0%,
|
|
rgba(248, 250, 252, 0.95) 50%,
|
|
rgba(255, 255, 255, 0.98) 100%);
|
|
backdrop-filter: blur(32px) saturate(220%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(32px) saturate(220%) brightness(120%);
|
|
border: 1px solid rgba(226, 232, 240, 0.7);
|
|
border-radius: 1.5rem;
|
|
box-shadow:
|
|
0 50px 100px rgba(0, 0, 0, 0.15),
|
|
0 20px 40px rgba(0, 115, 206, 0.08),
|
|
inset 0 2px 0 rgba(255, 255, 255, 0.9);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-enhanced::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(226, 232, 240, 0.8) 50%,
|
|
transparent 100%);
|
|
}
|
|
|
|
.dark .modal-enhanced {
|
|
background: rgba(0, 0, 0, 0.95);
|
|
border-color: rgba(42, 42, 42, 0.7);
|
|
box-shadow:
|
|
0 50px 100px rgba(0, 0, 0, 0.5),
|
|
inset 0 2px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Enhanced Status Badges */
|
|
.status-badge-enhanced {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
border-radius: 9999px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.status-badge-enhanced::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.status-badge-enhanced:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.status-online-enhanced {
|
|
background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
|
|
color: #065f46;
|
|
border-color: rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.status-offline-enhanced {
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%);
|
|
color: #991b1b;
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.status-printing-enhanced {
|
|
background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
|
|
color: #1e40af;
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* Dark Mode Toggle - Premium Design */
|
|
.dark-mode-toggle-new {
|
|
position: relative;
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9999px;
|
|
padding: 0.625rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
background: linear-gradient(135deg,
|
|
rgba(248, 250, 252, 0.9) 0%,
|
|
rgba(241, 245, 249, 0.8) 100%);
|
|
border: 1px solid rgba(226, 232, 240, 0.7);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.06),
|
|
0 2px 4px rgba(0, 115, 206, 0.04),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
color: var(--color-text-secondary);
|
|
z-index: 100;
|
|
}
|
|
|
|
.dark-mode-toggle-new:hover {
|
|
transform: translateY(-2px) scale(1.05);
|
|
background: linear-gradient(135deg,
|
|
rgba(248, 250, 252, 0.95) 0%,
|
|
rgba(241, 245, 249, 0.85) 100%);
|
|
box-shadow:
|
|
0 8px 20px rgba(0, 0, 0, 0.1),
|
|
0 4px 8px rgba(0, 115, 206, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.dark-mode-toggle-new:active {
|
|
transform: translateY(-1px) scale(0.98);
|
|
transition: transform 0.1s;
|
|
}
|
|
|
|
.dark .dark-mode-toggle-new {
|
|
background: rgba(10, 10, 10, 0.8);
|
|
border: 1px solid rgba(42, 42, 42, 0.6);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.dark .dark-mode-toggle-new:hover {
|
|
background: rgba(10, 10, 10, 0.9);
|
|
box-shadow:
|
|
0 8px 20px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* Icon-Animation für Dark Mode Toggle */
|
|
.dark-mode-toggle-new .sun-icon,
|
|
.dark-mode-toggle-new .moon-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.dark-mode-toggle-new .sun-icon:not(.hidden) {
|
|
animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
|
}
|
|
|
|
.dark-mode-toggle-new .moon-icon:not(.hidden) {
|
|
animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
|
}
|
|
|
|
@keyframes icon-appear {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
.dark .sun-icon { display: none; }
|
|
.dark .moon-icon { display: block; }
|
|
.sun-icon { display: block; }
|
|
.moon-icon { display: none; }
|
|
|
|
/* User Menu Button - Premium Design */
|
|
.user-menu-button-new {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border-radius: 0.75rem;
|
|
padding: 0.5rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
background: linear-gradient(135deg,
|
|
rgba(248, 250, 252, 0.8) 0%,
|
|
rgba(241, 245, 249, 0.7) 100%);
|
|
border: 1px solid rgba(226, 232, 240, 0.6);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.05),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.user-menu-button-new:hover {
|
|
transform: translateY(-1px);
|
|
background: linear-gradient(135deg,
|
|
rgba(248, 250, 252, 0.9) 0%,
|
|
rgba(241, 245, 249, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.08),
|
|
0 2px 4px rgba(0, 115, 206, 0.04),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.dark .user-menu-button-new {
|
|
background: rgba(10, 10, 10, 0.7);
|
|
border-color: rgba(42, 42, 42, 0.6);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.dark .user-menu-button-new:hover {
|
|
background: rgba(10, 10, 10, 0.8);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Enhanced Hover Effects */
|
|
.hover-lift-enhanced {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.hover-lift-enhanced:hover {
|
|
transform: translateY(-3px) scale(1.01);
|
|
box-shadow:
|
|
0 12px 30px var(--color-shadow-strong),
|
|
0 6px 15px var(--color-shadow-accent);
|
|
}
|
|
|
|
.dark .hover-lift-enhanced:hover {
|
|
box-shadow: 0 12px 30px var(--color-shadow);
|
|
}
|
|
|
|
/* Smooth Scrollbar for Light Mode */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-bg-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg,
|
|
var(--color-border-secondary) 0%,
|
|
var(--color-border-primary) 100%);
|
|
border-radius: 4px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(180deg,
|
|
var(--color-accent) 0%,
|
|
var(--color-accent-hover) 100%);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-track {
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: var(--color-border-primary);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background: #60a5fa;
|
|
}
|
|
|
|
/* Loading States */
|
|
.loading-enhanced {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loading-enhanced::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg,
|
|
transparent,
|
|
rgba(0, 115, 206, 0.1),
|
|
transparent);
|
|
animation: loading-shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes loading-shimmer {
|
|
0% { left: -100%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
/* Focus States for Accessibility */
|
|
.focus-enhanced:focus {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
box-shadow:
|
|
0 0 0 4px rgba(0, 115, 206, 0.15),
|
|
0 4px 12px var(--color-shadow-accent);
|
|
}
|
|
|
|
.dark .focus-enhanced:focus {
|
|
outline-color: #60a5fa;
|
|
box-shadow:
|
|
0 0 0 4px rgba(96, 165, 250, 0.15),
|
|
0 4px 12px rgba(96, 165, 250, 0.2);
|
|
}
|
|
|
|
/* Responsive Design Enhancements */
|
|
@media (max-width: 768px) {
|
|
.card-enhanced {
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.btn-enhanced {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.modal-enhanced {
|
|
border-radius: 1rem;
|
|
margin: 1rem;
|
|
}
|
|
|
|
.dark-mode-toggle-new {
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Reduced Motion Support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
/* High Contrast Mode Support */
|
|
@media (prefers-contrast: high) {
|
|
:root {
|
|
--color-shadow: rgba(0, 0, 0, 0.2);
|
|
--color-shadow-strong: rgba(0, 0, 0, 0.3);
|
|
--color-border-primary: #000000;
|
|
}
|
|
|
|
.dark {
|
|
--color-border-primary: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Admin Panel spezifische Styles */
|
|
@layer components {
|
|
/* Dark Mode Styles für Admin Panel */
|
|
.dark .bg-dark-card {
|
|
@apply bg-dark-surface transition-colors;
|
|
}
|
|
|
|
/* Alternative direkte Definition ohne Zirkularität */
|
|
.bg-dark-surface {
|
|
background-color: #1e293b;
|
|
}
|
|
|
|
/* Übergangseffekt für alle Komponenten */
|
|
.transition-all-colors {
|
|
@apply transition-colors duration-300;
|
|
}
|
|
|
|
/* Admin Panel Container */
|
|
.admin-container {
|
|
@apply max-w-7xl mx-auto p-4 md:p-8;
|
|
}
|
|
|
|
/* Admin Stats Cards */
|
|
.admin-stats {
|
|
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8;
|
|
}
|
|
|
|
.stat-card {
|
|
@apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-5 relative overflow-hidden shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl;
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.stat-icon {
|
|
@apply absolute top-4 right-4 opacity-15 text-4xl;
|
|
}
|
|
|
|
.stat-title {
|
|
@apply text-sm text-slate-500 dark:text-slate-400 mb-2 font-medium uppercase;
|
|
}
|
|
|
|
.stat-value {
|
|
@apply text-2xl font-bold text-slate-900 dark:text-white mb-1;
|
|
}
|
|
|
|
.stat-desc {
|
|
@apply text-sm text-slate-500 dark:text-slate-400;
|
|
}
|
|
|
|
/* Navigation Tabs */
|
|
.nav-tabs {
|
|
@apply flex border-b border-gray-200 dark:border-slate-700/30 mb-4 overflow-x-auto;
|
|
}
|
|
|
|
.nav-tab {
|
|
@apply py-4 px-6 text-slate-600 dark:text-slate-300 border-b-2 border-transparent cursor-pointer transition-all duration-200 whitespace-nowrap hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50;
|
|
}
|
|
|
|
.nav-tab.active {
|
|
@apply text-slate-900 dark:text-white border-b-2 border-black dark:border-white font-medium;
|
|
}
|
|
|
|
/* Tab Content */
|
|
.tab-content {
|
|
@apply mt-8;
|
|
}
|
|
|
|
.tab-pane {
|
|
@apply hidden;
|
|
}
|
|
|
|
.tab-pane.active {
|
|
@apply block;
|
|
}
|
|
|
|
/* Formulare für Admin Panel */
|
|
.form-group {
|
|
@apply mb-4;
|
|
}
|
|
|
|
.form-label {
|
|
@apply block mb-2 text-sm font-medium text-slate-700 dark:text-slate-300;
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
@apply w-full px-3 py-2 bg-white/60 dark:bg-slate-800/60 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all duration-200 backdrop-blur-lg;
|
|
backdrop-filter: blur(16px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(150%);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Tabellen im Admin Panel */
|
|
.admin-table {
|
|
@apply min-w-full divide-y divide-gray-200 dark:divide-slate-700;
|
|
}
|
|
|
|
.admin-table thead {
|
|
@apply bg-slate-50 dark:bg-slate-800;
|
|
}
|
|
|
|
.admin-table th {
|
|
@apply px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider;
|
|
}
|
|
|
|
.admin-table tbody {
|
|
@apply bg-white dark:bg-dark-surface divide-y divide-gray-200 dark:divide-slate-700;
|
|
}
|
|
|
|
.admin-table tr {
|
|
@apply hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors;
|
|
}
|
|
|
|
.admin-table td {
|
|
@apply px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white;
|
|
}
|
|
|
|
/* Status Badges */
|
|
.badge {
|
|
@apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
|
|
}
|
|
|
|
.badge-error {
|
|
@apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
|
|
}
|
|
|
|
.badge-info {
|
|
@apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
|
|
}
|
|
|
|
/* Drucker-Karten */
|
|
.printer-card {
|
|
@apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-6 shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl;
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.printer-header {
|
|
@apply flex justify-between items-center mb-4;
|
|
}
|
|
|
|
.printer-name {
|
|
@apply text-xl font-bold text-slate-900 dark:text-white;
|
|
}
|
|
|
|
.printer-actions {
|
|
@apply flex space-x-2;
|
|
}
|
|
|
|
.printer-info {
|
|
@apply grid grid-cols-2 gap-4 mb-4;
|
|
}
|
|
|
|
.printer-status {
|
|
@apply flex items-center mt-4;
|
|
}
|
|
|
|
/* Status Indikatoren */
|
|
.status-indicator {
|
|
@apply w-3 h-3 rounded-full mr-2;
|
|
}
|
|
|
|
.status-running {
|
|
@apply bg-green-500;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-stopped {
|
|
@apply bg-red-500;
|
|
}
|
|
|
|
/* Pulse Animation */
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Log-Einträge */
|
|
.log-entry {
|
|
@apply p-3 border-l-4 mb-2 rounded-r-lg bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors;
|
|
}
|
|
|
|
.log-debug {
|
|
@apply border-gray-400 dark:border-gray-500;
|
|
}
|
|
|
|
.log-info {
|
|
@apply border-blue-400 dark:border-blue-500;
|
|
}
|
|
|
|
.log-warning {
|
|
@apply border-yellow-400 dark:border-yellow-500;
|
|
}
|
|
|
|
.log-error {
|
|
@apply border-red-400 dark:border-red-500;
|
|
}
|
|
|
|
.log-critical {
|
|
@apply border-purple-400 dark:border-purple-500;
|
|
}
|
|
|
|
/* Scheduler Status */
|
|
.scheduler-status {
|
|
@apply flex items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 shadow-md;
|
|
}
|
|
|
|
/* Fortschrittsbalken */
|
|
.progress-bar {
|
|
@apply w-full h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
@apply h-full transition-all duration-300;
|
|
}
|
|
|
|
.progress-bar-fill-blue {
|
|
@apply bg-blue-500 dark:bg-blue-600;
|
|
}
|
|
|
|
.progress-bar-fill-green {
|
|
@apply bg-green-500 dark:bg-green-600;
|
|
}
|
|
|
|
.progress-bar-fill-purple {
|
|
@apply bg-purple-500 dark:bg-purple-600;
|
|
}
|
|
|
|
/* Benachrichtigungen */
|
|
.notification {
|
|
@apply fixed top-4 right-4 max-w-md p-4 rounded-2xl shadow-2xl transform translate-x-full opacity-0 transition-all duration-500 z-50;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
box-shadow:
|
|
0 32px 64px rgba(0, 0, 0, 0.25),
|
|
0 12px 24px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
animation: notification-slide-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.dark .notification {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 32px 64px rgba(0, 0, 0, 0.6),
|
|
0 12px 24px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.notification.show {
|
|
@apply translate-x-0 opacity-100;
|
|
}
|
|
|
|
.notification:hover {
|
|
transform: translateY(-2px) scale(1.02);
|
|
box-shadow:
|
|
0 40px 80px rgba(0, 0, 0, 0.3),
|
|
0 16px 32px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
|
0 0 0 1px rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.dark .notification:hover {
|
|
box-shadow:
|
|
0 40px 80px rgba(0, 0, 0, 0.7),
|
|
0 16px 32px rgba(0, 0, 0, 0.5),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.notification-success {
|
|
@apply text-green-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(34, 197, 94, 0.25) 0%,
|
|
rgba(134, 239, 172, 0.18) 50%,
|
|
rgba(34, 197, 94, 0.12) 100%);
|
|
border: 1px solid rgba(34, 197, 94, 0.4);
|
|
box-shadow:
|
|
0 32px 64px rgba(34, 197, 94, 0.2),
|
|
0 12px 24px rgba(34, 197, 94, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(34, 197, 94, 0.3);
|
|
}
|
|
|
|
.notification-error {
|
|
@apply text-red-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(239, 68, 68, 0.25) 0%,
|
|
rgba(252, 165, 165, 0.18) 50%,
|
|
rgba(239, 68, 68, 0.12) 100%);
|
|
border: 1px solid rgba(239, 68, 68, 0.4);
|
|
box-shadow:
|
|
0 32px 64px rgba(239, 68, 68, 0.2),
|
|
0 12px 24px rgba(239, 68, 68, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.notification-warning {
|
|
@apply text-yellow-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(245, 158, 11, 0.25) 0%,
|
|
rgba(252, 211, 77, 0.18) 50%,
|
|
rgba(245, 158, 11, 0.12) 100%);
|
|
border: 1px solid rgba(245, 158, 11, 0.4);
|
|
box-shadow:
|
|
0 32px 64px rgba(245, 158, 11, 0.2),
|
|
0 12px 24px rgba(245, 158, 11, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.notification-info {
|
|
@apply text-blue-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(59, 130, 246, 0.25) 0%,
|
|
rgba(147, 197, 253, 0.18) 50%,
|
|
rgba(59, 130, 246, 0.12) 100%);
|
|
border: 1px solid rgba(59, 130, 246, 0.4);
|
|
box-shadow:
|
|
0 32px 64px rgba(59, 130, 246, 0.2),
|
|
0 12px 24px rgba(59, 130, 246, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* Toast-Benachrichtigungen - Einheitlich */
|
|
.toast-notification {
|
|
@apply fixed z-50 p-4 rounded-2xl shadow-2xl transform transition-all duration-500 text-sm font-medium;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
box-shadow:
|
|
0 32px 64px rgba(0, 0, 0, 0.25),
|
|
0 12px 24px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.dark .toast-notification {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 32px 64px rgba(0, 0, 0, 0.6),
|
|
0 12px 24px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Alert-Benachrichtigungen - Verbessert */
|
|
.alert {
|
|
@apply p-6 rounded-2xl border mb-6 shadow-2xl;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
|
|
-webkit-backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.15),
|
|
0 8px 16px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
animation: alert-fade-in 0.5s ease-out;
|
|
}
|
|
|
|
.dark .alert {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
|
|
-webkit-backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.4),
|
|
0 8px 16px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.alert-success {
|
|
@apply text-green-900 dark:text-green-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(34, 197, 94, 0.15) 0%,
|
|
rgba(134, 239, 172, 0.1) 50%,
|
|
rgba(34, 197, 94, 0.08) 100%);
|
|
border: 1px solid rgba(34, 197, 94, 0.3);
|
|
}
|
|
|
|
.alert-error {
|
|
@apply text-red-900 dark:text-red-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(239, 68, 68, 0.15) 0%,
|
|
rgba(252, 165, 165, 0.1) 50%,
|
|
rgba(239, 68, 68, 0.08) 100%);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.alert-warning {
|
|
@apply text-yellow-900 dark:text-yellow-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(245, 158, 11, 0.15) 0%,
|
|
rgba(252, 211, 77, 0.1) 50%,
|
|
rgba(245, 158, 11, 0.08) 100%);
|
|
border: 1px solid rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.alert-info {
|
|
@apply text-blue-900 dark:text-blue-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(59, 130, 246, 0.15) 0%,
|
|
rgba(147, 197, 253, 0.1) 50%,
|
|
rgba(59, 130, 246, 0.08) 100%);
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* Browser-Notification-Container */
|
|
.browser-notification {
|
|
@apply fixed top-4 left-4 max-w-sm p-4 rounded-2xl shadow-2xl z-50;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
box-shadow:
|
|
0 32px 64px rgba(0, 0, 0, 0.25),
|
|
0 12px 24px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
animation: notification-slide-left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.dark .browser-notification {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 32px 64px rgba(0, 0, 0, 0.6),
|
|
0 12px 24px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Notification-Animationen */
|
|
@keyframes notification-slide-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(100%) translateY(-20px) scale(0.9);
|
|
backdrop-filter: blur(0px);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: translateX(20px) translateY(-10px) scale(1.05);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0) translateY(0) scale(1);
|
|
backdrop-filter: blur(40px);
|
|
}
|
|
}
|
|
|
|
@keyframes notification-slide-out {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0) translateY(0) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(100%) translateY(-20px) scale(0.9);
|
|
}
|
|
}
|
|
|
|
@keyframes notification-slide-left {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100%) translateY(-20px) scale(0.9);
|
|
backdrop-filter: blur(0px);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: translateX(-20px) translateY(-10px) scale(1.05);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0) translateY(0) scale(1);
|
|
backdrop-filter: blur(40px);
|
|
}
|
|
}
|
|
|
|
@keyframes alert-fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(0.95);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.notification.hiding {
|
|
animation: notification-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
}
|
|
|
|
/* Notification-Icons mit Glassmorphism */
|
|
.notification-icon {
|
|
@apply flex items-center justify-center w-8 h-8 rounded-full mr-3 flex-shrink-0;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 8px 16px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.notification-content {
|
|
@apply flex-1;
|
|
}
|
|
|
|
.notification-title {
|
|
@apply font-semibold text-sm mb-1;
|
|
}
|
|
|
|
.notification-message {
|
|
@apply text-sm opacity-90;
|
|
}
|
|
|
|
.notification-close {
|
|
@apply ml-3 p-1 rounded-lg opacity-70 hover:opacity-100 transition-opacity;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.notification-close:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Multiple Notifications Container */
|
|
.notifications-container {
|
|
@apply fixed top-4 right-4 z-50 space-y-3 max-w-md;
|
|
}
|
|
|
|
.notifications-container-left {
|
|
@apply fixed top-4 left-4 z-50 space-y-3 max-w-sm;
|
|
}
|
|
|
|
/* Flash-Message-Verbesserungen - Vereinheitlicht */
|
|
.flash-message-light {
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 255, 255, 0.95) 0%,
|
|
rgba(248, 250, 252, 0.9) 100%);
|
|
backdrop-filter: blur(32px) saturate(200%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(32px) saturate(200%) brightness(120%);
|
|
border: 1px solid rgba(226, 232, 240, 0.6);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.1),
|
|
0 12px 24px rgba(0, 115, 206, 0.05),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.flash-message-light.success {
|
|
border-left: 4px solid #10b981;
|
|
background: linear-gradient(135deg,
|
|
rgba(236, 253, 245, 0.95) 0%,
|
|
rgba(209, 250, 229, 0.9) 100%);
|
|
}
|
|
|
|
.flash-message-light.error {
|
|
border-left: 4px solid #ef4444;
|
|
background: linear-gradient(135deg,
|
|
rgba(254, 242, 242, 0.95) 0%,
|
|
rgba(252, 165, 165, 0.9) 100%);
|
|
}
|
|
|
|
.flash-message-light.warning {
|
|
border-left: 4px solid #fbbf24;
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 251, 235, 0.95) 0%,
|
|
rgba(254, 243, 199, 0.9) 100%);
|
|
}
|
|
|
|
.flash-message-light.info {
|
|
border-left: 4px solid #3b82f6;
|
|
background: linear-gradient(135deg,
|
|
rgba(239, 246, 255, 0.95) 0%,
|
|
rgba(219, 234, 254, 0.9) 100%);
|
|
}
|
|
|
|
/* Premium Table Styles */
|
|
.table-enhanced {
|
|
background: var(--gradient-card);
|
|
border: 1px solid var(--color-border-primary);
|
|
border-radius: var(--card-radius);
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 4px 20px var(--color-shadow),
|
|
0 2px 8px rgba(0, 115, 206, 0.04),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.table-enhanced th {
|
|
background: linear-gradient(135deg,
|
|
var(--color-bg-secondary) 0%,
|
|
var(--color-bg-tertiary) 100%);
|
|
color: var(--color-text-primary);
|
|
font-weight: 600;
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--color-border-primary);
|
|
position: relative;
|
|
}
|
|
|
|
.table-enhanced th::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
var(--color-border-secondary) 50%,
|
|
transparent 100%);
|
|
}
|
|
|
|
.table-enhanced td {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--color-border-primary);
|
|
color: var(--color-text-secondary);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.table-enhanced tbody tr:hover {
|
|
background: var(--color-bg-secondary);
|
|
transform: scale(1.002);
|
|
}
|
|
|
|
.dark .table-enhanced {
|
|
background: rgba(10, 10, 10, 0.8);
|
|
border-color: var(--color-border-primary);
|
|
}
|
|
|
|
.dark .table-enhanced th {
|
|
background: rgba(26, 26, 26, 0.8);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.dark .table-enhanced tbody tr:hover {
|
|
background: rgba(26, 26, 26, 0.6);
|
|
}
|
|
|
|
/* Premium Modal Styles */
|
|
.modal-enhanced {
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 255, 255, 0.98) 0%,
|
|
rgba(248, 250, 252, 0.95) 50%,
|
|
rgba(255, 255, 255, 0.98) 100%);
|
|
backdrop-filter: blur(32px) saturate(220%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(32px) saturate(220%) brightness(120%);
|
|
border: 1px solid rgba(226, 232, 240, 0.7);
|
|
border-radius: 1.5rem;
|
|
box-shadow:
|
|
0 50px 100px rgba(0, 0, 0, 0.15),
|
|
0 20px 40px rgba(0, 115, 206, 0.08),
|
|
inset 0 2px 0 rgba(255, 255, 255, 0.9);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-enhanced::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(226, 232, 240, 0.8) 50%,
|
|
transparent 100%);
|
|
}
|
|
|
|
.dark .modal-enhanced {
|
|
background: rgba(0, 0, 0, 0.95);
|
|
border-color: rgba(42, 42, 42, 0.7);
|
|
box-shadow:
|
|
0 50px 100px rgba(0, 0, 0, 0.5),
|
|
inset 0 2px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Enhanced Status Badges */
|
|
.status-badge-enhanced {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
border-radius: 9999px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.status-badge-enhanced::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.status-badge-enhanced:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.status-online-enhanced {
|
|
background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
|
|
color: #065f46;
|
|
border-color: rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.status-offline-enhanced {
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%);
|
|
color: #991b1b;
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.status-printing-enhanced {
|
|
background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
|
|
color: #1e40af;
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* Dark Mode Toggle - Premium Design */
|
|
.dark-mode-toggle-new {
|
|
position: relative;
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9999px;
|
|
padding: 0.625rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
background: linear-gradient(135deg,
|
|
rgba(248, 250, 252, 0.9) 0%,
|
|
rgba(241, 245, 249, 0.8) 100%);
|
|
border: 1px solid rgba(226, 232, 240, 0.7);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.06),
|
|
0 2px 4px rgba(0, 115, 206, 0.04),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
color: var(--color-text-secondary);
|
|
z-index: 100;
|
|
}
|
|
|
|
.dark-mode-toggle-new:hover {
|
|
transform: translateY(-2px) scale(1.05);
|
|
background: linear-gradient(135deg,
|
|
rgba(248, 250, 252, 0.95) 0%,
|
|
rgba(241, 245, 249, 0.85) 100%);
|
|
box-shadow:
|
|
0 8px 20px rgba(0, 0, 0, 0.1),
|
|
0 4px 8px rgba(0, 115, 206, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.dark-mode-toggle-new:active {
|
|
transform: translateY(-1px) scale(0.98);
|
|
transition: transform 0.1s;
|
|
}
|
|
|
|
.dark .dark-mode-toggle-new {
|
|
background: rgba(10, 10, 10, 0.8);
|
|
border: 1px solid rgba(42, 42, 42, 0.6);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.dark .dark-mode-toggle-new:hover {
|
|
background: rgba(10, 10, 10, 0.9);
|
|
box-shadow:
|
|
0 8px 20px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
/* Icon-Animation für Dark Mode Toggle */
|
|
.dark-mode-toggle-new .sun-icon,
|
|
.dark-mode-toggle-new .moon-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.dark-mode-toggle-new .sun-icon:not(.hidden) {
|
|
animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
|
}
|
|
|
|
.dark-mode-toggle-new .moon-icon:not(.hidden) {
|
|
animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
|
}
|
|
|
|
@keyframes icon-appear {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
.dark .sun-icon { display: none; }
|
|
.dark .moon-icon { display: block; }
|
|
.sun-icon { display: block; }
|
|
.moon-icon { display: none; }
|
|
|
|
/* User Menu Button - Premium Design */
|
|
.user-menu-button-new {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border-radius: 0.75rem;
|
|
padding: 0.5rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
background: linear-gradient(135deg,
|
|
rgba(248, 250, 252, 0.8) 0%,
|
|
rgba(241, 245, 249, 0.7) 100%);
|
|
border: 1px solid rgba(226, 232, 240, 0.6);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.05),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.user-menu-button-new:hover {
|
|
transform: translateY(-1px);
|
|
background: linear-gradient(135deg,
|
|
rgba(248, 250, 252, 0.9) 0%,
|
|
rgba(241, 245, 249, 0.8) 100%);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.08),
|
|
0 2px 4px rgba(0, 115, 206, 0.04),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.dark .user-menu-button-new {
|
|
background: rgba(10, 10, 10, 0.7);
|
|
border-color: rgba(42, 42, 42, 0.6);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.dark .user-menu-button-new:hover {
|
|
background: rgba(10, 10, 10, 0.8);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Enhanced Hover Effects */
|
|
.hover-lift-enhanced {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.hover-lift-enhanced:hover {
|
|
transform: translateY(-3px) scale(1.01);
|
|
box-shadow:
|
|
0 12px 30px var(--color-shadow-strong),
|
|
0 6px 15px var(--color-shadow-accent);
|
|
}
|
|
|
|
.dark .hover-lift-enhanced:hover {
|
|
box-shadow: 0 12px 30px var(--color-shadow);
|
|
}
|
|
|
|
/* Smooth Scrollbar for Light Mode */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-bg-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg,
|
|
var(--color-border-secondary) 0%,
|
|
var(--color-border-primary) 100%);
|
|
border-radius: 4px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(180deg,
|
|
var(--color-accent) 0%,
|
|
var(--color-accent-hover) 100%);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-track {
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: var(--color-border-primary);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background: #60a5fa;
|
|
}
|
|
|
|
/* Loading States */
|
|
.loading-enhanced {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loading-enhanced::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg,
|
|
transparent,
|
|
rgba(0, 115, 206, 0.1),
|
|
transparent);
|
|
animation: loading-shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes loading-shimmer {
|
|
0% { left: -100%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
/* Focus States for Accessibility */
|
|
.focus-enhanced:focus {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
box-shadow:
|
|
0 0 0 4px rgba(0, 115, 206, 0.15),
|
|
0 4px 12px var(--color-shadow-accent);
|
|
}
|
|
|
|
.dark .focus-enhanced:focus {
|
|
outline-color: #60a5fa;
|
|
box-shadow:
|
|
0 0 0 4px rgba(96, 165, 250, 0.15),
|
|
0 4px 12px rgba(96, 165, 250, 0.2);
|
|
}
|
|
|
|
/* Responsive Design Enhancements */
|
|
@media (max-width: 768px) {
|
|
.card-enhanced {
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.btn-enhanced {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.modal-enhanced {
|
|
border-radius: 1rem;
|
|
margin: 1rem;
|
|
}
|
|
|
|
.dark-mode-toggle-new {
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Reduced Motion Support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
/* High Contrast Mode Support */
|
|
@media (prefers-contrast: high) {
|
|
:root {
|
|
--color-shadow: rgba(0, 0, 0, 0.2);
|
|
--color-shadow-strong: rgba(0, 0, 0, 0.3);
|
|
--color-border-primary: #000000;
|
|
}
|
|
|
|
.dark {
|
|
--color-border-primary: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Glassmorphism Flash Messages */
|
|
.flash-message {
|
|
@apply fixed top-4 right-4 px-6 py-4 rounded-2xl text-sm font-medium shadow-2xl transform transition-all duration-500 z-50 border;
|
|
/* Verstärkter Glassmorphism-Effekt */
|
|
background: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
box-shadow:
|
|
0 32px 64px rgba(0, 0, 0, 0.25),
|
|
0 12px 24px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
animation: flash-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.dark .flash-message {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 32px 64px rgba(0, 0, 0, 0.6),
|
|
0 12px 24px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.flash-message:hover {
|
|
transform: translateY(-2px) scale(1.02);
|
|
box-shadow:
|
|
0 40px 80px rgba(0, 0, 0, 0.3),
|
|
0 16px 32px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
|
0 0 0 1px rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.dark .flash-message:hover {
|
|
box-shadow:
|
|
0 40px 80px rgba(0, 0, 0, 0.7),
|
|
0 16px 32px rgba(0, 0, 0, 0.5),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.flash-message.info {
|
|
@apply text-blue-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(59, 130, 246, 0.2) 0%,
|
|
rgba(147, 197, 253, 0.15) 50%,
|
|
rgba(59, 130, 246, 0.1) 100%);
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.flash-message.success {
|
|
@apply text-green-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(34, 197, 94, 0.2) 0%,
|
|
rgba(134, 239, 172, 0.15) 50%,
|
|
rgba(34, 197, 94, 0.1) 100%);
|
|
border: 1px solid rgba(34, 197, 94, 0.3);
|
|
}
|
|
|
|
.flash-message.warning {
|
|
@apply text-yellow-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(245, 158, 11, 0.2) 0%,
|
|
rgba(252, 211, 77, 0.15) 50%,
|
|
rgba(245, 158, 11, 0.1) 100%);
|
|
border: 1px solid rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.flash-message.error {
|
|
@apply text-red-100;
|
|
background: linear-gradient(135deg,
|
|
rgba(239, 68, 68, 0.2) 0%,
|
|
rgba(252, 165, 165, 0.15) 50%,
|
|
rgba(239, 68, 68, 0.1) 100%);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
/* Flash Message Animation */
|
|
@keyframes flash-slide-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(100%) translateY(-20px) scale(0.9);
|
|
backdrop-filter: blur(0px);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: translateX(20px) translateY(-10px) scale(1.05);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0) translateY(0) scale(1);
|
|
backdrop-filter: blur(40px);
|
|
}
|
|
}
|
|
|
|
@keyframes flash-slide-out {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0) translateY(0) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(100%) translateY(-20px) scale(0.9);
|
|
}
|
|
}
|
|
|
|
.flash-message.hiding {
|
|
animation: flash-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
}
|
|
|
|
/* Do Not Disturb System Styles */
|
|
.dnd-toggle {
|
|
@apply relative inline-flex items-center h-6 rounded-full w-11 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
|
background: rgba(156, 163, 175, 0.3);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(156, 163, 175, 0.2);
|
|
}
|
|
|
|
.dnd-toggle.active {
|
|
background: rgba(239, 68, 68, 0.3);
|
|
border: 1px solid rgba(239, 68, 68, 0.4);
|
|
}
|
|
|
|
.dnd-toggle-slider {
|
|
@apply inline-block h-4 w-4 rounded-full shadow-lg transform transition-transform duration-300;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 4px 8px rgba(0, 0, 0, 0.2),
|
|
0 2px 4px rgba(0, 0, 0, 0.1);
|
|
margin: 0.125rem;
|
|
}
|
|
|
|
.dnd-toggle.active .dnd-toggle-slider {
|
|
transform: translateX(1.25rem);
|
|
background: rgba(255, 255, 255, 1);
|
|
box-shadow:
|
|
0 6px 12px rgba(239, 68, 68, 0.3),
|
|
0 3px 6px rgba(239, 68, 68, 0.2);
|
|
}
|
|
|
|
.dnd-indicator {
|
|
@apply fixed top-4 left-4 z-50 flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300;
|
|
background: rgba(239, 68, 68, 0.1);
|
|
backdrop-filter: blur(20px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
color: rgb(239, 68, 68);
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.dnd-indicator.active {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.dnd-modal {
|
|
@apply fixed inset-0 z-50 flex items-center justify-center p-4;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.dnd-modal-content {
|
|
@apply w-full max-w-md rounded-2xl p-6 shadow-2xl transform transition-all;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(40px) saturate(200%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(120%);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.25),
|
|
0 8px 16px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.dark .dnd-modal-content {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(40px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.6),
|
|
0 8px 16px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* DND Flash Message Override */
|
|
.flash-message.dnd-suppressed {
|
|
animation: flash-fade-in 0.3s ease-out;
|
|
opacity: 0.3;
|
|
transform: scale(0.95);
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes flash-fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 0.3;
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
/* Notification Counter */
|
|
.dnd-counter {
|
|
@apply absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold;
|
|
background: rgba(239, 68, 68, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
animation: dnd-counter-bounce 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes dnd-counter-bounce {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Mercedes Background Pattern */
|
|
.mercedes-background::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.03' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
background-size: 120px 120px;
|
|
pointer-events: none;
|
|
opacity: 0.03;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.dark .mercedes-background::before {
|
|
opacity: 0.015; /* Sehr subtil für eleganten Dark Mode */
|
|
filter: invert(1) brightness(0.3);
|
|
background-size: 150px 150px; /* Größere Sterne für bessere Sichtbarkeit */
|
|
}
|
|
|
|
/* Monochrome Button Styles */
|
|
@layer components {
|
|
/* Buttons mit verstärktem Glassmorphism */
|
|
.btn-primary {
|
|
@apply text-white dark:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 shadow-2xl hover:-translate-y-0.5;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.3),
|
|
0 8px 16px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
backdrop-filter: blur(25px) saturate(180%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.4),
|
|
0 10px 20px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.dark .btn-primary {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.2),
|
|
0 8px 16px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8),
|
|
0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dark .btn-primary:hover {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.3),
|
|
0 10px 20px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply text-slate-900 dark:text-white px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 shadow-2xl hover:-translate-y-0.5;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.15),
|
|
0 8px 16px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
|
0 0 0 1px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
backdrop-filter: blur(25px) saturate(180%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.2),
|
|
0 10px 20px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.dark .btn-secondary {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.3),
|
|
0 8px 16px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.dark .btn-secondary:hover {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.4),
|
|
0 10px 20px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border-2 border-black/70 hover:bg-black/70 dark:border-white/70 dark:hover:bg-white/70 text-black hover:text-white dark:text-white dark:hover:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 backdrop-blur-lg;
|
|
backdrop-filter: blur(16px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(150%);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Glassmorphism Card mit abgerundeten Ecken - Verstärkt */
|
|
.glass-card {
|
|
@apply rounded-xl p-6 shadow-2xl transition-all duration-300;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
|
|
-webkit-backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.15),
|
|
0 8px 16px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--card-radius);
|
|
}
|
|
|
|
.dark .glass-card {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
|
|
-webkit-backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.4),
|
|
0 8px 16px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Dashboard Cards mit verstärktem Glassmorphism */
|
|
.dashboard-card {
|
|
@apply rounded-xl p-6 shadow-2xl transition-all duration-300 hover:-translate-y-1;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%);
|
|
-webkit-backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.15),
|
|
0 8px 16px rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.25),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--card-radius);
|
|
}
|
|
|
|
.dark .dashboard-card {
|
|
background: rgba(0, 0, 0, 0.35);
|
|
backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%);
|
|
-webkit-backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.5),
|
|
0 8px 16px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Navigation Styles */
|
|
.nav-link {
|
|
@apply flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50 hover:shadow-md;
|
|
}
|
|
|
|
.nav-link.active {
|
|
@apply text-slate-900 dark:text-white bg-slate-100 dark:bg-black shadow-sm;
|
|
}
|
|
|
|
/* Verbesserte Navbar Styles - Verstärktes Glassmorphism */
|
|
.navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.navbar-button {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.navbar-button:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.navbar {
|
|
flex-direction: column;
|
|
padding: 0.25rem;
|
|
}
|
|
.navbar-button {
|
|
margin: 0.25rem 0;
|
|
}
|
|
}
|
|
|
|
.dark .navbar {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.6),
|
|
0 2px 8px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.navbar-brand {
|
|
@apply flex items-center space-x-2 transition-transform duration-300 hover:scale-105;
|
|
}
|
|
|
|
.navbar-menu {
|
|
@apply flex items-center justify-center space-x-1 md:space-x-3 lg:space-x-6 p-3 mx-4 rounded-2xl border;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 4px 16px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.dark .navbar-menu {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 4px 16px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.navbar-button {
|
|
@apply p-2 rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
|
|
}
|
|
|
|
/* User Menu Styles */
|
|
.user-menu-button {
|
|
@apply flex items-center space-x-2 rounded-lg p-1 transition-all duration-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2;
|
|
}
|
|
|
|
.user-avatar {
|
|
@apply w-10 h-10 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-sm shadow-md transition-all duration-300 hover:shadow-lg;
|
|
}
|
|
|
|
/* Avatar im Dropdown */
|
|
.avatar-large {
|
|
@apply w-14 h-14 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-md;
|
|
}
|
|
|
|
.user-dropdown-item {
|
|
@apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300 focus:outline-none focus:bg-gray-100/80 dark:focus:bg-slate-700/60;
|
|
}
|
|
|
|
.user-dropdown-separator {
|
|
@apply border-t border-gray-200/80 dark:border-slate-700/30 my-1;
|
|
}
|
|
|
|
.menu-item {
|
|
@apply flex items-center space-x-2 px-4 py-2.5 text-slate-700 dark:text-slate-300 rounded-xl transition-all duration-300;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.menu-item:hover {
|
|
@apply text-slate-900 dark:text-white;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
backdrop-filter: blur(15px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(15px) saturate(150%);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.dark .menu-item {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.dark .menu-item:hover {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.menu-item.active {
|
|
@apply text-slate-900 dark:text-white font-medium;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
box-shadow:
|
|
0 4px 16px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.dark .menu-item.active {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 4px 16px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Dropdown Styles - Verstärktes Glassmorphism */
|
|
.user-dropdown {
|
|
@apply absolute right-0 mt-2 w-64 rounded-xl shadow-2xl z-50 overflow-hidden;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.25),
|
|
0 8px 16px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
animation: fadeIn 0.2s ease-out forwards;
|
|
}
|
|
|
|
.dark .user-dropdown {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.6),
|
|
0 8px 16px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.dropdown-header {
|
|
@apply flex items-center p-4 border-b border-gray-200/80 dark:border-slate-700/30;
|
|
}
|
|
|
|
.dropdown-item {
|
|
@apply flex items-center gap-3 px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300;
|
|
}
|
|
|
|
.dropdown-divider {
|
|
@apply border-t border-gray-200/80 dark:border-slate-700/30;
|
|
}
|
|
|
|
/* Mercedes-Benz Logo Animation */
|
|
@keyframes mercedes-rotate {
|
|
0% { transform: rotate(0deg); }
|
|
25% { transform: rotate(90deg); }
|
|
50% { transform: rotate(180deg); }
|
|
75% { transform: rotate(270deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.navbar-brand:hover svg {
|
|
animation: mercedes-rotate 5s infinite linear;
|
|
transform-origin: center;
|
|
}
|
|
}
|
|
|
|
/* Navbar Sticky Fix - Außerhalb von @layer für höhere Priorität */
|
|
.navbar {
|
|
position: -webkit-sticky !important;
|
|
position: sticky !important;
|
|
top: 0 !important;
|
|
z-index: 50 !important;
|
|
width: 100% !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
/* Verstärktes Glassmorphism Design */
|
|
--navbar-blur: 40px;
|
|
--navbar-opacity: 0.15;
|
|
background: rgba(255, 255, 255, var(--navbar-opacity, 0.15)) !important;
|
|
backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
|
|
-webkit-backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.12),
|
|
0 2px 8px rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
0 0 0 1px rgba(255, 255, 255, 0.15) !important;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
}
|
|
|
|
.dark .navbar {
|
|
--navbar-dark-opacity: 0.25;
|
|
background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.25)) !important;
|
|
backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
|
|
-webkit-backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.4),
|
|
0 2px 8px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.08) !important;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
/* Navbar Scroll-Effekt */
|
|
.navbar.scrolled {
|
|
--navbar-blur: 50px;
|
|
--navbar-opacity: 0.25;
|
|
background: rgba(255, 255, 255, var(--navbar-opacity, 0.25)) !important;
|
|
backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
|
|
-webkit-backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
|
|
box-shadow:
|
|
0 12px 40px rgba(0, 0, 0, 0.15),
|
|
0 4px 12px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
0 0 0 1px rgba(255, 255, 255, 0.2) !important;
|
|
}
|
|
|
|
.dark .navbar.scrolled {
|
|
--navbar-dark-opacity: 0.35;
|
|
background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.35)) !important;
|
|
backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
|
|
-webkit-backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
|
|
box-shadow:
|
|
0 12px 40px rgba(0, 0, 0, 0.5),
|
|
0 4px 12px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
/* Neue Navbar-Komponenten mit verbessertem Glassmorphism */
|
|
.navbar-menu-new {
|
|
@apply flex items-center justify-center space-x-0.5 md:space-x-1;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
/* Glassmorphism für das Menü */
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(25px) saturate(170%) brightness(108%);
|
|
-webkit-backdrop-filter: blur(25px) saturate(170%) brightness(108%);
|
|
border-radius: 16px;
|
|
padding: 8px;
|
|
margin: 0 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 6px 20px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.dark .navbar-menu-new {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(30px) saturate(150%) brightness(115%);
|
|
-webkit-backdrop-filter: blur(30px) saturate(150%) brightness(115%);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
0 6px 20px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
0 0 0 1px rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.navbar-menu-new::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Glassmorphism Hover-Animation für Navbar-Menu */
|
|
.navbar-menu-new:hover {
|
|
backdrop-filter: blur(35px) saturate(190%) brightness(112%);
|
|
-webkit-backdrop-filter: blur(35px) saturate(190%) brightness(112%);
|
|
box-shadow:
|
|
0 8px 25px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.dark .navbar-menu-new:hover {
|
|
backdrop-filter: blur(40px) saturate(170%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(170%) brightness(120%);
|
|
box-shadow:
|
|
0 8px 25px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.nav-item {
|
|
@apply flex items-center space-x-1.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-300;
|
|
color: rgba(15, 23, 42, 0.85);
|
|
/* Gläserner Nav-Item */
|
|
background: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(15px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(15px) saturate(140%);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.05),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
position: relative;
|
|
overflow: hidden;
|
|
animation: nav-item-entrance 0.6s ease-out;
|
|
}
|
|
|
|
/* Glassmorphism Hover-Effekt */
|
|
.nav-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.nav-item:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Zusätzlicher Glitter-Effekt */
|
|
.nav-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.1) 30deg, transparent 60deg);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
animation: rotate 3s linear infinite;
|
|
}
|
|
|
|
.nav-item:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dark .nav-item {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
background: rgba(0, 0, 0, 0.15);
|
|
backdrop-filter: blur(20px) saturate(130%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(130%);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
box-shadow:
|
|
0 4px 12px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.nav-item:hover {
|
|
color: rgba(15, 23, 42, 1);
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(25px) saturate(160%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(25px) saturate(160%) brightness(110%);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
box-shadow:
|
|
0 8px 20px rgba(0, 0, 0, 0.12),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
transform: translateY(-2px) scale(1.02);
|
|
}
|
|
|
|
.dark .nav-item:hover {
|
|
color: rgba(255, 255, 255, 1);
|
|
background: rgba(0, 0, 0, 0.25);
|
|
backdrop-filter: blur(30px) saturate(150%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(30px) saturate(150%) brightness(120%);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 8px 20px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: rgba(15, 23, 42, 1);
|
|
background: rgba(255, 255, 255, 0.35);
|
|
backdrop-filter: blur(35px) saturate(180%) brightness(115%);
|
|
-webkit-backdrop-filter: blur(35px) saturate(180%) brightness(115%);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
box-shadow:
|
|
0 12px 24px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
|
0 0 0 1px rgba(59, 130, 246, 0.3);
|
|
transform: translateY(-1px);
|
|
animation: nav-item-active-glow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.dark .nav-item.active {
|
|
color: rgba(255, 255, 255, 1);
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(40px) saturate(160%) brightness(125%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(160%) brightness(125%);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow:
|
|
0 12px 24px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/* Animationen für Glassmorphism-Effekte */
|
|
@keyframes nav-item-entrance {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(10px) scale(0.95);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
backdrop-filter: blur(15px) saturate(140%);
|
|
}
|
|
}
|
|
|
|
@keyframes nav-item-active-glow {
|
|
0% {
|
|
box-shadow:
|
|
0 12px 24px rgba(0, 0, 0, 0.15),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
|
0 0 0 1px rgba(59, 130, 246, 0.3);
|
|
}
|
|
100% {
|
|
box-shadow:
|
|
0 16px 32px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
|
0 0 0 2px rgba(59, 130, 246, 0.5);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Glassmorphism-Partikel-Effekt */
|
|
.navbar::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
|
radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
|
radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
|
radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
|
opacity: 0;
|
|
animation: glassmorphism-particles 8s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dark .navbar::before {
|
|
background:
|
|
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
|
radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
|
radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
}
|
|
|
|
@keyframes glassmorphism-particles {
|
|
0%, 100% {
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
/* Dark Mode Toggle - Kompakteres Design */
|
|
.dark-mode-toggle-new {
|
|
@apply relative p-2 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer;
|
|
background: rgba(241, 245, 249, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.05),
|
|
0 1px 2px rgba(0, 0, 0, 0.04);
|
|
color: #334155;
|
|
z-index: 100;
|
|
}
|
|
|
|
.dark-mode-toggle-new:hover {
|
|
@apply transform -translate-y-0.5;
|
|
background: rgba(241, 245, 249, 0.9);
|
|
box-shadow:
|
|
0 8px 16px rgba(0, 0, 0, 0.08),
|
|
0 2px 4px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.dark-mode-toggle-new:active {
|
|
@apply transform scale-95;
|
|
transition: transform 0.1s;
|
|
}
|
|
|
|
.dark .dark-mode-toggle-new {
|
|
background: rgba(30, 41, 59, 0.8);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.2),
|
|
0 1px 2px rgba(0, 0, 0, 0.1);
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.dark .dark-mode-toggle-new:hover {
|
|
background: rgba(30, 41, 59, 0.9);
|
|
box-shadow:
|
|
0 8px 16px rgba(0, 0, 0, 0.2),
|
|
0 2px 4px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Icon-Animation */
|
|
.dark-mode-toggle-new .sun-icon,
|
|
.dark-mode-toggle-new .moon-icon {
|
|
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300;
|
|
}
|
|
|
|
.dark-mode-toggle-new .sun-icon:not(.hidden) {
|
|
animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
|
}
|
|
|
|
.dark-mode-toggle-new .moon-icon:not(.hidden) {
|
|
animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
|
|
}
|
|
|
|
@keyframes spin-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(10px) scale(0.7) rotate(20deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
.dark .sun-icon {
|
|
display: none;
|
|
}
|
|
|
|
.dark .moon-icon {
|
|
display: block;
|
|
}
|
|
|
|
.sun-icon {
|
|
display: block;
|
|
}
|
|
|
|
.moon-icon {
|
|
display: none;
|
|
}
|
|
|
|
/* User Menu Button - Kompakteres Design */
|
|
.user-menu-button-new {
|
|
@apply flex items-center space-x-1.5 rounded-lg p-1 transition-all duration-300;
|
|
background: rgba(241, 245, 249, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.04),
|
|
0 1px 2px rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.user-menu-button-new:hover {
|
|
@apply transform -translate-y-0.5;
|
|
background: rgba(241, 245, 249, 0.8);
|
|
box-shadow:
|
|
0 8px 16px rgba(0, 0, 0, 0.06),
|
|
0 2px 4px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.dark .user-menu-button-new {
|
|
background: rgba(30, 41, 59, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.15),
|
|
0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark .user-menu-button-new:hover {
|
|
background: rgba(30, 41, 59, 0.8);
|
|
box-shadow:
|
|
0 8px 16px rgba(0, 0, 0, 0.15),
|
|
0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* User Avatar - Kompakteres Design */
|
|
.user-avatar-new {
|
|
@apply h-7 w-7 rounded-full flex items-center justify-center text-white font-semibold text-xs shadow-md transition-all duration-300;
|
|
background: linear-gradient(135deg, #000000, #333333);
|
|
box-shadow:
|
|
0 2px 4px rgba(0, 0, 0, 0.2),
|
|
0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark .user-avatar-new {
|
|
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
|
|
color: #0f172a;
|
|
box-shadow:
|
|
0 2px 4px rgba(0, 0, 0, 0.3),
|
|
0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Login Button - Kompakteres Design */
|
|
.login-button-new {
|
|
@apply flex items-center px-3 py-1.5 rounded-lg text-xs font-medium shadow-sm transition-all duration-300;
|
|
background: #000000;
|
|
color: #ffffff;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.1),
|
|
0 1px 2px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.login-button-new:hover {
|
|
@apply transform -translate-y-0.5;
|
|
background: #333333;
|
|
box-shadow:
|
|
0 8px 16px rgba(0, 0, 0, 0.15),
|
|
0 3px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark .login-button-new {
|
|
background: #ffffff;
|
|
color: #000000;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.2),
|
|
0 1px 2px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.dark .login-button-new:hover {
|
|
background: #f1f5f9;
|
|
box-shadow:
|
|
0 8px 16px rgba(0, 0, 0, 0.25),
|
|
0 3px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Mobile Menu - Kompakteres Design */
|
|
.mobile-menu-new {
|
|
@apply w-full overflow-hidden transition-all duration-300 z-40;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
|
border-bottom: 1px solid rgba(241, 245, 249, 0.8);
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.mobile-menu-new.open {
|
|
max-height: 400px;
|
|
opacity: 1;
|
|
border-bottom: 1px solid rgba(241, 245, 249, 0.8);
|
|
}
|
|
|
|
.dark .mobile-menu-new {
|
|
background: rgba(15, 23, 42, 0.8);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
border-bottom: 1px solid rgba(30, 41, 59, 0.8);
|
|
}
|
|
|
|
.mobile-nav-item {
|
|
@apply flex items-center space-x-2.5 px-3 py-2.5 rounded-lg text-sm text-slate-800 dark:text-slate-200 transition-all duration-300;
|
|
}
|
|
|
|
.mobile-nav-item:hover {
|
|
background: rgba(241, 245, 249, 0.8);
|
|
}
|
|
|
|
.dark .mobile-nav-item:hover {
|
|
background: rgba(30, 41, 59, 0.6);
|
|
}
|
|
|
|
.mobile-nav-item.active {
|
|
background: rgba(241, 245, 249, 0.9);
|
|
color: #000000;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dark .mobile-nav-item.active {
|
|
background: rgba(30, 41, 59, 0.8);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */
|
|
.mb-stat-card {
|
|
background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%);
|
|
color: #0f172a;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: none;
|
|
border-radius: var(--card-radius);
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
padding: 1.5rem;
|
|
margin: 1rem;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.dark .mb-stat-card {
|
|
background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%);
|
|
color: var(--text-primary, #f8fafc);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Stats und Jobs Page Card Styles */
|
|
.stats-card, .job-card {
|
|
@apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-300;
|
|
backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--card-radius);
|
|
}
|
|
|
|
/* Footer Styling - Verstärktes Glassmorphism */
|
|
footer {
|
|
@apply transition-all duration-300;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(30px) saturate(180%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow:
|
|
0 -8px 32px rgba(0, 0, 0, 0.1),
|
|
0 -2px 8px rgba(0, 0, 0, 0.05),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.dark footer {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(30px) saturate(160%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
0 -8px 32px rgba(0, 0, 0, 0.3),
|
|
0 -2px 8px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
0 0 0 1px rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
/* Dropdown Pfeil Animation */
|
|
.dropdown-arrow {
|
|
@apply transition-transform duration-300;
|
|
}
|
|
|
|
/* Mercedes-Benz Hintergrund mit Star-Pattern */
|
|
.mercedes-star-bg {
|
|
position: relative;
|
|
}
|
|
|
|
.mercedes-star-bg::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
background-size: 40px 40px;
|
|
z-index: -1;
|
|
opacity: 0.05;
|
|
}
|
|
|
|
.dark .mercedes-star-bg::after {
|
|
opacity: 0.02;
|
|
filter: invert(1) brightness(0.4);
|
|
}
|
|
|
|
/* Zusätzliche Glassmorphism-Verbesserungen */
|
|
.glass-effect {
|
|
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.dark .glass-effect {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* Verbesserte Hover-Effekte für alle interaktiven Elemente */
|
|
.glass-hover {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.glass-hover:hover {
|
|
transform: translateY(-2px);
|
|
backdrop-filter: blur(25px) saturate(200%) brightness(120%);
|
|
-webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%);
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.15),
|
|
0 8px 16px rgba(0, 0, 0, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.dark .glass-hover:hover {
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.4),
|
|
0 8px 16px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */
|
|
.printer-card-new {
|
|
@apply bg-gradient-to-br from-white/90 to-white/70 dark:from-slate-800/90 dark:to-slate-900/70 backdrop-blur-2xl rounded-xl border border-gray-200/70 dark:border-slate-700/30 p-5 shadow-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden;
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.08),
|
|
0 10px 20px rgba(0, 0, 0, 0.06),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--card-radius, 1rem);
|
|
}
|
|
|
|
.dark .printer-card-new {
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.4),
|
|
0 10px 20px rgba(0, 0, 0, 0.3),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Online Drucker-Karten mit stärkerem visuellen Unterschied */
|
|
.printer-card-new.online {
|
|
@apply bg-gradient-to-br from-green-50/90 to-emerald-50/80 dark:from-green-900/30 dark:to-emerald-900/20 border-green-200 dark:border-green-700/50;
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 122, 85, 0.08),
|
|
0 10px 20px rgba(0, 122, 85, 0.06),
|
|
0 0 0 1px rgba(209, 250, 229, 0.4);
|
|
}
|
|
|
|
.dark .printer-card-new.online {
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.3),
|
|
0 10px 20px rgba(0, 0, 0, 0.2),
|
|
0 0 0 1px rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
/* Status-Badge mit verbesserten Styles */
|
|
.status-badge-new {
|
|
@apply px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center space-x-1 shadow-sm;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dark .status-badge-new {
|
|
background: rgba(30, 41, 59, 0.7);
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.status-badge-new.online {
|
|
@apply bg-green-100/90 text-green-800 dark:bg-green-900/60 dark:text-green-300;
|
|
}
|
|
|
|
.status-badge-new.offline {
|
|
@apply bg-red-100/90 text-red-800 dark:bg-red-900/60 dark:text-red-300;
|
|
}
|
|
|
|
/* Verbesserte Filterleiste */
|
|
.filter-bar-new {
|
|
@apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-lg p-1.5 border border-gray-200/60 dark:border-slate-700/30 shadow-xl;
|
|
box-shadow:
|
|
0 10px 25px rgba(0, 0, 0, 0.05),
|
|
0 5px 10px rgba(0, 0, 0, 0.03),
|
|
0 0 0 1px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.dark .filter-bar-new {
|
|
box-shadow:
|
|
0 10px 25px rgba(0, 0, 0, 0.2),
|
|
0 5px 10px rgba(0, 0, 0, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.filter-btn-new {
|
|
@apply px-3.5 py-2 text-sm rounded-md transition-all duration-300 font-medium;
|
|
}
|
|
|
|
.filter-btn-new.active {
|
|
@apply bg-black text-white dark:bg-white dark:text-slate-900 shadow-md;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark .filter-btn-new.active {
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Verbesserte Aktionsschaltflächen */
|
|
.action-btn-new {
|
|
@apply flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 shadow-md hover:-translate-y-0.5;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.action-btn-new.primary {
|
|
@apply bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500;
|
|
box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2);
|
|
}
|
|
|
|
.dark .action-btn-new.primary {
|
|
box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
|
|
}
|
|
|
|
.action-btn-new.success {
|
|
@apply bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-500;
|
|
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
.dark .action-btn-new.success {
|
|
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.action-btn-new.danger {
|
|
@apply bg-red-600 hover:bg-red-700 text-white dark:bg-red-600 dark:hover:bg-red-500;
|
|
box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2);
|
|
}
|
|
|
|
.dark .action-btn-new.danger {
|
|
box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
/* Informationszeilen in Drucker-Karten */
|
|
.printer-info-row {
|
|
@apply flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-1.5;
|
|
}
|
|
|
|
.printer-info-icon {
|
|
@apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-400 flex-shrink-0;
|
|
}
|
|
|
|
/* Online-Indikator mit Pulseffekt */
|
|
.online-indicator {
|
|
@apply absolute top-2.5 right-2.5 w-3 h-3 bg-green-500 rounded-full shadow-lg;
|
|
box-shadow: 0 0 0 rgba(16, 185, 129, 0.6);
|
|
animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
|
|
}
|
|
|
|
@keyframes pulse-ring {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
|
}
|
|
}
|
|
|
|
/* Header mit verbesserten Status-Anzeigen */
|
|
.status-overview-new {
|
|
@apply flex flex-wrap gap-3 text-xs sm:text-sm p-3 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-lg border border-gray-200/60 dark:border-slate-700/30 shadow-lg;
|
|
box-shadow:
|
|
0 10px 25px rgba(0, 0, 0, 0.04),
|
|
0 5px 10px rgba(0, 0, 0, 0.02),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.dark .status-overview-new {
|
|
box-shadow:
|
|
0 10px 25px rgba(0, 0, 0, 0.15),
|
|
0 5px 10px rgba(0, 0, 0, 0.1),
|
|
0 0 0 1px rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.status-dot {
|
|
@apply w-2.5 h-2.5 rounded-full;
|
|
}
|
|
|
|
.status-dot.online {
|
|
@apply bg-green-500;
|
|
animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
|
|
}
|
|
|
|
.status-dot.offline {
|
|
@apply bg-red-500;
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0% {
|
|
transform: scale(0.95);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
transform: scale(0.95);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Verbesserte Modals mit Glassmorphism */
|
|
.modal-new {
|
|
@apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm;
|
|
}
|
|
|
|
.modal-content-new {
|
|
@apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300;
|
|
box-shadow:
|
|
0 25px 50px rgba(0, 0, 0, 0.15),
|
|
0 15px 30px rgba(0, 0, 0, 0.1),
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.5),
|
|
0 10px 10px -5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* User Dropdown Items */
|
|
.user-dropdown-item {
|
|
@apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200 cursor-pointer;
|
|
}
|
|
|
|
.user-dropdown-item:first-child {
|
|
@apply rounded-t-xl;
|
|
}
|
|
|
|
.user-dropdown-item:last-child {
|
|
@apply rounded-b-xl;
|
|
}
|
|
|
|
.user-dropdown-item:hover {
|
|
background: rgba(248, 250, 252, 0.8);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.dark .user-dropdown-item:hover {
|
|
background: rgba(30, 41, 59, 0.8);
|
|
}
|
|
|
|
/* User Dropdown Icons */
|
|
.user-dropdown-icon {
|
|
@apply w-4 h-4 mr-3 text-slate-500 dark:text-slate-400 transition-colors duration-200;
|
|
}
|
|
|
|
.user-dropdown-item:hover .user-dropdown-icon {
|
|
@apply text-slate-700 dark:text-slate-200;
|
|
}
|
|
|
|
/* Divider in User Dropdown */
|
|
.user-dropdown-divider {
|
|
@apply border-t border-slate-200 dark:border-slate-700 my-1;
|
|
}
|
|
|
|
/* User Info Section in Dropdown */
|
|
.user-info-section {
|
|
@apply px-4 py-3 border-b border-slate-200 dark:border-slate-700;
|
|
background: rgba(248, 250, 252, 0.5);
|
|
}
|
|
|
|
.dark .user-info-section {
|
|
background: rgba(30, 41, 59, 0.5);
|
|
}
|
|
|
|
.user-info-name {
|
|
@apply text-sm font-semibold text-slate-900 dark:text-white;
|
|
}
|
|
|
|
.user-info-role {
|
|
@apply text-xs text-slate-500 dark:text-slate-400 mt-1;
|
|
}
|