core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Aktualisierte CSS-Stile für den Light und Dark Mode, optimiert für Raspberry Pi. Vereinfachte Farb- und Gradient-Definitionen zur Verbesserung der Performance und Lesbarkeit. Anpassungen an Hover- und Button-Effekten zur Reduzierung der CPU-Belastung. 📉

Browse Source
This commit is contained in:
Till Tomczak 2025-06-02 16:08:23 +02:00
parent 82332d2def
commit 4e539dbf67
1 changed files with 109 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

352
backend/static/css/input-raspberry-balanced.css
View File

@ -2,7 +2,7 @@
@tailwind components;
@tailwind utilities;
/* Custom Styles für Light und Dark Mode - Premium Upgrade mit verbessertem Light Mode */
/* Custom Styles für Light und Dark Mode - Raspberry Pi Optimiert */
@layer base {
:root {
/* Light Mode Farben - Mercedes-Benz Professional - VERBESSERT für optimale Lesbarkeit */
@ -10,52 +10,52 @@
--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-primary: #111827;
--color-text-secondary: #374151;
--color-text-muted: #6b7280;
--color-text-accent: #0073ce;
--color-border-primary: #e5e7eb; /* Subtilere aber sichtbarere Borders */
--color-border-primary: #e5e7eb;
--color-border-secondary: #d1d5db;
--color-accent: #0073ce; /* Mercedes-Benz Professional Blau */
--color-accent: #0073ce;
--color-accent-hover: #005a9f;
--color-accent-light: #eff6ff;
--color-accent-text: #ffffff;
--color-shadow: rgba(0, 0, 0, 0.06); /* Sanftere Schatten */
--color-shadow: rgba(0, 0, 0, 0.06);
--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 */
--card-radius: 1rem;
/* 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%);
/* Light Mode Gradients - VEREINFACHT für Performance */
--gradient-primary: #fafbfc;
--gradient-card: #ffffff;
--gradient-hero: #f3f5f7;
--gradient-accent: linear-gradient(135deg, #0073ce 0%, #005a9f 100%);
--gradient-surface: linear-gradient(135deg, #ffffff 0%, #fbfcfd 50%, #f8fafc 100%);
--gradient-surface: #fbfcfd;
/* Neue optimierte Light Mode Glassmorphism-Variablen */
/* 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);
--glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
--glass-blur: blur(10px);
}
.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-primary: #000000;
--color-bg-secondary: #0a0a0a;
--color-bg-tertiary: #1a1a1a;
--color-text-primary: #ffffff;
--color-text-secondary: #e2e8f0;
--color-text-muted: #94a3b8;
--color-border-primary: #1a1a1a; /* Dunkler Rahmen */
--color-border-primary: #1a1a1a;
--color-border-secondary: #2a2a2a;
--color-accent: #ffffff; /* Reines Weiß */
--color-accent: #ffffff;
--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: rgba(0, 0, 0, 0.8);
--color-shadow-strong: rgba(0, 0, 0, 0.9);
--mb-black: #000000; /* Mercedes-Benz Schwarz */
--mb-black: #000000;
}
body {
@ -65,15 +65,15 @@
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 */
line-height: 1.65;
font-size: 15px;
}
.dark body {
background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
background: #000000;
}
/* Enhanced Body Background with Subtle Patterns - VERBESSERT */
/* Vereinfachte Body Background - PERFORMANCE OPTIMIERT */
body::before {
content: '';
position: fixed;
@ -81,21 +81,16 @@
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%);
background: radial-gradient(circle at 50% 50%, rgba(0, 115, 206, 0.01) 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%);
background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
}
/* Navbar Styles - Premium Glassmorphism - UNANGETASTET WIE GEWÜNSCHT */
/* Navbar Styles - Premium Glassmorphism - UNVERÄNDERT WIE GEWÜNSCHT */
nav {
@apply backdrop-blur-xl border-b transition-all duration-300;
background: linear-gradient(135deg,
@ -120,25 +115,20 @@
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Premium Card Styles - CPU OPTIMIERT für Raspberry Pi */
/* Vereinfachte Card Styles - PERFORMANCE OPTIMIERT */
.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);
transition: background-color 0.2s ease, border-color 0.2s ease;
/* ENTFERNT: cubic-bezier, position, overflow für CPU-Optimierung */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: hidden;
}
/* ENTFERNT: card-enhanced::before pseudo-element für CPU-Optimierung */
.card-enhanced:hover {
/* ENTFERNT: transform für CPU-Optimierung */
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.05),
0 2px 8px rgba(0, 115, 206, 0.03);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.dark .card-enhanced {
@ -147,7 +137,7 @@
box-shadow: 0 4px 20px var(--color-shadow);
}
/* Premium Button Styles - CPU OPTIMIERT */
/* Vereinfachte Button Styles - PERFORMANCE OPTIMIERT */
.btn-enhanced {
background: var(--gradient-accent);
color: var(--color-accent-text);
@ -158,45 +148,36 @@
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: background-color 0.2s ease, box-shadow 0.2s ease;
/* ENTFERNT: cubic-bezier, position, overflow für CPU-Optimierung */
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: hidden;
}
/* ENTFERNT: btn-enhanced::before pseudo-element animation für CPU-Optimierung */
.btn-enhanced:hover {
/* ENTFERNT: transform für CPU-Optimierung */
box-shadow:
0 4px 12px rgba(0, 115, 206, 0.25),
0 2px 6px rgba(0, 115, 206, 0.15);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 115, 206, 0.3);
}
.btn-enhanced:active {
/* ENTFERNT: transform für CPU-Optimierung */
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);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.btn-secondary:hover {
background: var(--color-bg-secondary);
border-color: var(--color-accent);
color: var(--color-accent);
box-shadow:
0 2px 8px rgba(0, 115, 206, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.08);
}
/* Enhanced Form Elements - REDUZIERTER backdrop-filter */
/* Vereinfachte Form Elements - PERFORMANCE OPTIMIERT */
.input-enhanced {
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--color-border-primary);
@ -204,21 +185,14 @@
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: border-color 0.2s ease, background-color 0.2s ease;
/* REDUZIERT: backdrop-filter von 8px auf 4px */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-enhanced:focus {
outline: none;
border-color: var(--color-accent);
box-shadow:
0 2px 8px rgba(0, 115, 206, 0.08),
0 0 0 3px rgba(0, 115, 206, 0.05);
box-shadow: 0 0 0 3px rgba(0, 115, 206, 0.05);
background: rgba(255, 255, 255, 0.98);
}
@ -231,28 +205,21 @@
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);
box-shadow: 0 2px 8px var(--color-shadow);
}
.dark .input-enhanced:focus {
border-color: #60a5fa;
box-shadow:
0 2px 10px rgba(96, 165, 250, 0.15),
0 0 0 3px rgba(96, 165, 250, 0.1);
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}
/* Premium Alert Styles - REDUZIERTER backdrop-filter */
/* Vereinfachte Alert Styles */
.alert-enhanced {
border-radius: 1rem;
padding: 1.25rem;
border: 1px solid transparent;
position: relative;
overflow: hidden;
/* REDUZIERT: backdrop-filter von 16px auf 8px */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.alert-enhanced::before {
@ -265,9 +232,7 @@
}
.alert-info-enhanced {
background: linear-gradient(135deg,
rgba(239, 246, 255, 0.95) 0%,
rgba(219, 234, 254, 0.9) 100%);
background: rgba(239, 246, 255, 0.95);
border-color: rgba(59, 130, 246, 0.2);
color: #1e40af;
}
@ -277,9 +242,7 @@
}
.alert-success-enhanced {
background: linear-gradient(135deg,
rgba(236, 253, 245, 0.95) 0%,
rgba(167, 243, 208, 0.9) 100%);
background: rgba(236, 253, 245, 0.95);
border-color: rgba(16, 185, 129, 0.2);
color: #065f46;
}
@ -289,9 +252,7 @@
}
.alert-warning-enhanced {
background: linear-gradient(135deg,
rgba(255, 251, 235, 0.95) 0%,
rgba(254, 243, 199, 0.9) 100%);
background: rgba(255, 251, 235, 0.95);
border-color: rgba(251, 191, 36, 0.2);
color: #92400e;
}
@ -301,9 +262,7 @@
}
.alert-error-enhanced {
background: linear-gradient(135deg,
rgba(254, 242, 242, 0.95) 0%,
rgba(252, 165, 165, 0.9) 100%);
background: rgba(254, 242, 242, 0.95);
border-color: rgba(239, 68, 68, 0.2);
color: #991b1b;
}
@ -312,82 +271,51 @@
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}
/* Light Mode Flash Messages - REDUZIERTE backdrop-filter */
/* Vereinfachte Flash Messages */
.flash-message-light {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.9) 100%);
/* REDUZIERT: backdrop-filter von 32px auf 16px */
backdrop-filter: blur(16px) saturate(180%) brightness(110%);
-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(110%);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.6);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(0, 115, 206, 0.04);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
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%);
background: rgba(236, 253, 245, 0.95);
}
.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%);
background: rgba(254, 242, 242, 0.95);
}
.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%);
background: rgba(255, 251, 235, 0.95);
}
.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%);
background: rgba(239, 246, 255, 0.95);
}
/* Premium Table Styles - CPU OPTIMIERT */
/* Vereinfachte 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 2px 12px var(--color-shadow),
0 1px 4px rgba(0, 115, 206, 0.03);
box-shadow: 0 2px 8px var(--color-shadow);
}
.table-enhanced th {
background: linear-gradient(135deg,
var(--color-bg-secondary) 0%,
var(--color-bg-tertiary) 100%);
background: var(--color-bg-secondary);
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 {
@ -399,7 +327,6 @@
.table-enhanced tbody tr:hover {
background: var(--color-bg-secondary);
/* ENTFERNT: transform für CPU-Optimierung */
}
.dark .table-enhanced {
@ -416,46 +343,25 @@
background: rgba(26, 26, 26, 0.6);
}
/* Premium Modal Styles - REDUZIERTE backdrop-filter */
/* Vereinfachte 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%);
/* REDUZIERT: backdrop-filter von 32px auf 16px */
backdrop-filter: blur(16px) saturate(180%) brightness(110%);
-webkit-backdrop-filter: blur(16px) saturate(180%) brightness(110%);
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.7);
border-radius: 1.5rem;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.12),
0 8px 20px rgba(0, 115, 206, 0.06);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
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 20px 50px rgba(0, 0, 0, 0.4),
inset 0 2px 0 rgba(255, 255, 255, 0.05);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
/* Enhanced Status Badges - CPU OPTIMIERT */
/* Vereinfachte Status Badges */
.status-badge-enhanced {
display: inline-flex;
align-items: center;
@ -466,12 +372,9 @@
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
transition: background-color 0.2s ease;
/* ENTFERNT: position, overflow für CPU-Optimierung */
transition: transform 0.2s ease;
}
/* ENTFERNT: status-badge-enhanced::before animation für CPU-Optimierung */
.status-online-enhanced {
background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
color: #065f46;
@ -490,7 +393,7 @@
border-color: rgba(59, 130, 246, 0.3);
}
/* Dark Mode Toggle - REDUZIERTE Animationen */
/* Dark Mode Toggle - Vereinfacht aber funktional */
.dark-mode-toggle-new {
position: relative;
display: flex;
@ -499,125 +402,96 @@
justify-content: center;
border-radius: 9999px;
padding: 0.625rem;
transition: background-color 0.2s ease, border-color 0.2s ease;
background: linear-gradient(135deg,
rgba(248, 250, 252, 0.9) 0%,
rgba(241, 245, 249, 0.8) 100%);
transition: transform 0.2s ease;
background: rgba(248, 250, 252, 0.9);
border: 1px solid rgba(226, 232, 240, 0.7);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.05),
0 1px 4px rgba(0, 115, 206, 0.03);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
color: var(--color-text-secondary);
z-index: 100;
}
.dark-mode-toggle-new:hover {
/* ENTFERNT: transform und scale für CPU-Optimierung */
background: linear-gradient(135deg,
rgba(248, 250, 252, 0.95) 0%,
rgba(241, 245, 249, 0.85) 100%);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
0 2px 6px rgba(0, 115, 206, 0.05);
transform: translateY(-2px) scale(1.05);
background: rgba(248, 250, 252, 0.95);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dark-mode-toggle-new:active {
/* ENTFERNT: transform für CPU-Optimierung */
transition: none;
transform: translateY(-1px) scale(0.98);
}
.dark .dark-mode-toggle-new {
background: rgba(10, 10, 10, 0.8);
border: 1px solid 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.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
color: var(--color-text-secondary);
}
.dark .dark-mode-toggle-new:hover {
background: rgba(10, 10, 10, 0.9);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Icon-Animation für Dark Mode Toggle - VEREINFACHT */
/* 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: opacity 0.2s ease;
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* ENTFERNT: komplexe icon-appear animation für CPU-Optimierung */
.dark .sun-icon { display: none; }
.dark .moon-icon { display: block; }
.sun-icon { display: block; }
.moon-icon { display: none; }
/* User Menu Button - CPU OPTIMIERT */
/* User Menu Button - Vereinfacht */
.user-menu-button-new {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.75rem;
padding: 0.5rem;
transition: background-color 0.2s ease, border-color 0.2s ease;
background: linear-gradient(135deg,
rgba(248, 250, 252, 0.8) 0%,
rgba(241, 245, 249, 0.7) 100%);
transition: transform 0.2s ease;
background: rgba(248, 250, 252, 0.8);
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);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.user-menu-button-new:hover {
/* ENTFERNT: transform für CPU-Optimierung */
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);
transform: translateY(-1px);
background: rgba(248, 250, 252, 0.9);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.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);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.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);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Enhanced Hover Effects - CPU OPTIMIERT */
/* Vereinfachte Hover Effects */
.hover-lift-enhanced {
transition: box-shadow 0.2s ease;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift-enhanced:hover {
/* ENTFERNT: transform für CPU-Optimierung */
box-shadow:
0 8px 20px var(--color-shadow-strong),
0 4px 10px var(--color-shadow-accent);
transform: translateY(-3px);
box-shadow: 0 8px 20px var(--color-shadow-strong);
}
.dark .hover-lift-enhanced:hover {
box-shadow: 0 8px 20px var(--color-shadow);
}
/* Smooth Scrollbar for Light Mode */
/* Smooth Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
@ -629,17 +503,13 @@
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,
var(--color-border-secondary) 0%,
var(--color-border-primary) 100%);
background: var(--color-border-secondary);
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%);
background: var(--color-accent);
}
.dark ::-webkit-scrollbar-track {
@ -654,7 +524,7 @@
background: #60a5fa;
}
/* Loading States - VEREINFACHT */
/* Vereinfachte Loading States */
.loading-enhanced {
position: relative;
overflow: hidden;
@ -683,14 +553,12 @@
.focus-enhanced:focus {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
box-shadow:
0 0 0 4px rgba(0, 115, 206, 0.15);
box-shadow: 0 0 0 4px rgba(0, 115, 206, 0.15);
}
.dark .focus-enhanced:focus {
outline-color: #60a5fa;
box-shadow:
0 0 0 4px rgba(96, 165, 250, 0.15);
box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}
/* Responsive Design Enhancements */
@ -735,6 +603,4 @@
--color-border-primary: #ffffff;
}
}
}
/* WEITERE ABSCHNITTE FOLGEN - Ich optimiere den Rest systematisch... */
}