🎉📚 Optimized logs and CSS for Raspberry Pi performance:
This commit is contained in:
@ -1,182 +1,208 @@
|
||||
/* Raspberry Pi optimierte Glassmorphism-Ersatz Effekte für MYP Application */
|
||||
/* Vereinfachte Glassmorphism-Effekte für MYP Application */
|
||||
|
||||
/* ===== VEREINFACHTE BASIS EFFEKTE (ohne backdrop-filter) ===== */
|
||||
/* ===== BASIS GLASS EFFEKTE ===== */
|
||||
.glass-base {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(229, 231, 235, 0.6);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.glass-strong {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(229, 231, 235, 0.8);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.glass-subtle {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(229, 231, 235, 0.4);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
/* ===== DARK MODE VEREINFACHT ===== */
|
||||
.dark .glass-base {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border: 1px solid rgba(51, 65, 85, 0.6);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .glass-strong {
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
border: 1px solid rgba(71, 85, 105, 0.8);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dark .glass-subtle {
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border: 1px solid rgba(51, 65, 85, 0.4);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* ===== EINFACHE KARTEN (ohne Hover-Transforms) ===== */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(229, 231, 235, 0.6);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* ===== DARK MODE GLASS ===== */
|
||||
.dark .glass-base {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dark .glass-strong {
|
||||
background: rgba(30, 41, 59, 0.85);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.dark .glass-subtle {
|
||||
background: rgba(15, 23, 42, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* ===== GLASS KARTEN ===== */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(229, 231, 235, 0.5);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
|
||||
padding: 1.5rem;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.dark .glass-card {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
border: 1px solid rgba(71, 85, 105, 0.6);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(30, 41, 59, 0.85);
|
||||
border: 1px solid rgba(100, 116, 139, 0.3);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.dark .glass-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
/* ===== VEREINFACHTE NAVIGATION ===== */
|
||||
/* ===== GLASS NAVIGATION ===== */
|
||||
.glass-nav {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||||
border-bottom: 1px solid rgba(203, 213, 225, 0.8);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(226, 232, 240, 0.4);
|
||||
border-bottom: 1px solid rgba(203, 213, 225, 0.5);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.dark .glass-nav {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border: 1px solid rgba(51, 65, 85, 0.6);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
border: 1px solid rgba(51, 65, 85, 0.5);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* ===== EINFACHE BUTTONS (ohne Transform) ===== */
|
||||
/* ===== GLASS BUTTONS ===== */
|
||||
.glass-btn {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(226, 232, 240, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1.5rem;
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: transform 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.glass-btn:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.glass-btn-primary {
|
||||
background: rgba(0, 115, 206, 0.95);
|
||||
background: rgba(0, 115, 206, 0.9);
|
||||
color: white;
|
||||
box-shadow: 0 1px 4px rgba(0, 115, 206, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.2);
|
||||
}
|
||||
|
||||
.glass-btn-primary:hover {
|
||||
background: rgba(0, 115, 206, 1);
|
||||
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.3);
|
||||
background: rgba(0, 115, 206, 0.95);
|
||||
box-shadow: 0 4px 12px rgba(0, 115, 206, 0.3);
|
||||
}
|
||||
|
||||
.dark .glass-btn {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
color: #e2e8f0;
|
||||
border: 1px solid rgba(100, 116, 139, 0.6);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(100, 116, 139, 0.5);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.dark .glass-btn:hover {
|
||||
background: rgba(30, 41, 59, 1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* ===== EINFACHE MODALS ===== */
|
||||
/* ===== GLASS MODALS ===== */
|
||||
.glass-modal {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||||
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);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.dark .glass-modal {
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
border: 1px solid rgba(51, 65, 85, 0.8);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border: 1px solid rgba(51, 65, 85, 0.6);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* ===== VEREINFACHTE FORM ELEMENTE ===== */
|
||||
/* ===== GLASS FORM ELEMENTE ===== */
|
||||
.glass-input {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(226, 232, 240, 0.5);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
color: #0f172a;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.glass-input:focus {
|
||||
outline: none;
|
||||
border-color: rgba(0, 115, 206, 0.6);
|
||||
box-shadow: 0 0 0 2px rgba(0, 115, 206, 0.1);
|
||||
border-color: rgba(0, 115, 206, 0.5);
|
||||
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.1);
|
||||
}
|
||||
|
||||
.dark .glass-input {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
border: 1px solid rgba(100, 116, 139, 0.6);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border: 1px solid rgba(100, 116, 139, 0.5);
|
||||
color: #e2e8f0;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.dark .glass-input:focus {
|
||||
border-color: rgba(59, 130, 246, 0.6);
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
/* ===== EINFACHE DROPDOWN ===== */
|
||||
/* ===== GLASS DROPDOWN ===== */
|
||||
.glass-dropdown {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.dark .glass-dropdown {
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
border: 1px solid rgba(51, 65, 85, 0.6);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.glass-overlay {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.dark .glass-overlay {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ANPASSUNGEN ===== */
|
||||
@ -189,11 +215,41 @@
|
||||
.glass-modal {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-subtle {
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== REDUZIERTE BEWEGUNG ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
.glass-card,
|
||||
.glass-btn,
|
||||
.glass-input {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== HOHER KONTRAST MODUS ===== */
|
||||
@media (prefers-contrast: high) {
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-card {
|
||||
border-width: 2px;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== PERFORMANCE OPTIMIERUNGEN ===== */
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-subtle,
|
||||
.glass-card,
|
||||
.glass-btn,
|
||||
.glass-modal {
|
||||
will-change: transform;
|
||||
}
|
||||
@ -65,55 +65,50 @@
|
||||
box-shadow: 0 8px 20px var(--dark-shadow);
|
||||
}
|
||||
|
||||
/* Vereinfachte Container */
|
||||
/* Raspberry Pi optimierte Container */
|
||||
.professional-container {
|
||||
background: var(--light-surface);
|
||||
border: 1px solid var(--light-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 2px 8px var(--light-shadow);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
}
|
||||
|
||||
.dark .professional-container {
|
||||
background: var(--dark-surface);
|
||||
border: 1px solid var(--dark-border);
|
||||
box-shadow: 0 4px 12px var(--dark-shadow);
|
||||
box-shadow: 0 2px 8px var(--dark-shadow);
|
||||
}
|
||||
|
||||
.professional-container:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px var(--light-shadow-strong);
|
||||
box-shadow: 0 2px 8px var(--light-shadow-strong);
|
||||
}
|
||||
|
||||
.dark .professional-container:hover {
|
||||
box-shadow: 0 8px 20px var(--dark-shadow-strong);
|
||||
}
|
||||
|
||||
/* Vereinfachte Glassmorphism-Effekte */
|
||||
/* Raspberry Pi optimierte Glassmorphism-Ersatz */
|
||||
.mb-glass {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(229, 231, 235, 0.4);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
transition: transform 0.2s ease, background 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(229, 231, 235, 0.6);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.dark .mb-glass {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border: 1px solid rgba(51, 65, 85, 0.6);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.mb-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.dark .mb-glass:hover {
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
background: rgba(15, 23, 42, 1);
|
||||
}
|
||||
|
||||
/* Vereinfachte Buttons */
|
||||
/* Raspberry Pi optimierte Buttons */
|
||||
.btn-professional {
|
||||
background: linear-gradient(135deg, var(--mb-primary) 0%, var(--mb-primary-dark) 100%);
|
||||
color: white;
|
||||
@ -124,17 +119,15 @@
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.2);
|
||||
box-shadow: 0 1px 4px rgba(0, 115, 206, 0.2);
|
||||
}
|
||||
|
||||
.btn-professional:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 115, 206, 0.3);
|
||||
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.3);
|
||||
}
|
||||
|
||||
.btn-professional:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 1px 2px rgba(0, 115, 206, 0.3);
|
||||
}
|
||||
|
||||
/* Secondary Button */
|
||||
@ -160,7 +153,6 @@
|
||||
.btn-secondary-professional:hover {
|
||||
background: var(--light-surface-hover);
|
||||
border-color: var(--mb-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.dark .btn-secondary-professional:hover {
|
||||
@ -188,8 +180,7 @@
|
||||
|
||||
.input-professional:focus {
|
||||
border-color: var(--mb-primary);
|
||||
box-shadow: 0 0 0 3px rgba(0, 115, 206, 0.1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 0 2px rgba(0, 115, 206, 0.1);
|
||||
}
|
||||
|
||||
.input-professional::placeholder {
|
||||
@ -200,19 +191,17 @@
|
||||
color: var(--dark-text-muted);
|
||||
}
|
||||
|
||||
/* Vereinfachte Cards */
|
||||
/* Raspberry Pi optimierte Cards */
|
||||
.card-professional {
|
||||
background: var(--light-surface);
|
||||
border: 1px solid var(--light-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 8px var(--light-shadow);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
}
|
||||
|
||||
.card-professional:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px var(--light-shadow-strong);
|
||||
box-shadow: 0 2px 8px var(--light-shadow-strong);
|
||||
}
|
||||
|
||||
.dark .card-professional {
|
||||
@ -221,30 +210,28 @@
|
||||
box-shadow: 0 4px 12px var(--dark-shadow);
|
||||
}
|
||||
|
||||
/* Vereinfachte Statistics Cards */
|
||||
/* Raspberry Pi optimierte Statistics Cards */
|
||||
.stat-card {
|
||||
background: var(--light-surface);
|
||||
border: 1px solid var(--light-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 2px 8px var(--light-shadow);
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
}
|
||||
|
||||
.dark .stat-card {
|
||||
background: var(--dark-surface);
|
||||
border-color: var(--dark-border);
|
||||
box-shadow: 0 4px 12px var(--dark-shadow);
|
||||
box-shadow: 0 2px 8px var(--dark-shadow);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px var(--light-shadow-strong);
|
||||
box-shadow: 0 2px 8px var(--light-shadow-strong);
|
||||
}
|
||||
|
||||
.dark .stat-card:hover {
|
||||
box-shadow: 0 8px 20px var(--dark-shadow-strong);
|
||||
box-shadow: 0 4px 12px var(--dark-shadow-strong);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
@ -271,7 +258,7 @@
|
||||
color: var(--dark-text-muted);
|
||||
}
|
||||
|
||||
/* Vereinfachte Status Badges */
|
||||
/* Raspberry Pi optimierte Status Badges */
|
||||
.status-professional {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -282,13 +269,10 @@
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
transition: transform 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.status-professional:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
/* Status hover-effect entfernt für bessere Performance */
|
||||
|
||||
/* Status Indicators */
|
||||
.status-online {
|
||||
@ -387,8 +371,7 @@
|
||||
.nav-item-professional:hover {
|
||||
background: var(--light-surface-hover);
|
||||
color: var(--light-text-primary);
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 2px 8px var(--light-shadow);
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
}
|
||||
|
||||
.dark .nav-item-professional:hover {
|
||||
@ -464,8 +447,6 @@
|
||||
|
||||
.table-professional tbody tr:hover {
|
||||
background: var(--light-surface-hover);
|
||||
transform: scale(1.005);
|
||||
box-shadow: 0 2px 8px var(--light-shadow);
|
||||
}
|
||||
|
||||
.dark .table-professional tbody tr:hover {
|
||||
|
||||
260
backend/static/css/raspberry-pi-optimizations.css
Normal file
260
backend/static/css/raspberry-pi-optimizations.css
Normal file
@ -0,0 +1,260 @@
|
||||
/**
|
||||
* Mercedes-Benz MYP Platform - Ausgewogene Raspberry Pi Performance Optimierungen
|
||||
* Optimierte Performance bei Erhaltung des visuellen Designs
|
||||
*/
|
||||
|
||||
/* ===== SCHONENDE BROWSER OPTIMIERUNGEN ===== */
|
||||
|
||||
/* Reduzierte GPU-Layer Optimierung */
|
||||
.professional-hero,
|
||||
.professional-container,
|
||||
.card-professional,
|
||||
.stat-card,
|
||||
.glass-card,
|
||||
.glass-modal {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Entferne will-change nur bei problematischen Elementen */
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-subtle {
|
||||
will-change: auto !important;
|
||||
}
|
||||
|
||||
/* Sanfte Scroll-Performance */
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* ===== MODERATE ANIMATIONEN REDUZIERUNG ===== */
|
||||
|
||||
/* Verkürze Transitionen statt sie zu entfernen */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.2s !important;
|
||||
transition-duration: 0.15s !important;
|
||||
}
|
||||
|
||||
/* Spezielle verkürzte Hover-Effekte */
|
||||
.optimized-hover {
|
||||
transition: opacity 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease !important;
|
||||
}
|
||||
|
||||
.optimized-hover:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* ===== REDUZIERTE GLASSMORPHISM (nicht komplett entfernt) ===== */
|
||||
|
||||
/* Leichtere Glassmorphism-Effekte für bessere Performance */
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-subtle,
|
||||
.glass-card,
|
||||
.glass-nav,
|
||||
.glass-btn,
|
||||
.glass-modal,
|
||||
.glass-input,
|
||||
.glass-dropdown,
|
||||
.mb-glass {
|
||||
backdrop-filter: blur(4px) !important;
|
||||
-webkit-backdrop-filter: blur(4px) !important;
|
||||
}
|
||||
|
||||
/* Dark Mode: Noch reduzierter */
|
||||
.dark .glass-base,
|
||||
.dark .glass-strong,
|
||||
.dark .glass-subtle,
|
||||
.dark .glass-card,
|
||||
.dark .glass-nav,
|
||||
.dark .glass-btn,
|
||||
.dark .glass-modal,
|
||||
.dark .glass-input,
|
||||
.dark .glass-dropdown,
|
||||
.dark .mb-glass {
|
||||
backdrop-filter: blur(2px) !important;
|
||||
-webkit-backdrop-filter: blur(2px) !important;
|
||||
}
|
||||
|
||||
/* ===== MODERATE TRANSFORM OPTIMIERUNGEN ===== */
|
||||
|
||||
/* Reduziere nur problematische Transform-Hover-Effekte */
|
||||
.professional-hero:hover,
|
||||
.professional-container:hover {
|
||||
transform: translateY(-1px) !important; /* Minimal statt -2px */
|
||||
}
|
||||
|
||||
.card-professional:hover,
|
||||
.stat-card:hover {
|
||||
transform: none !important; /* Diese waren am problematischsten */
|
||||
}
|
||||
|
||||
/* Behalte wichtige Navigation-Effekte */
|
||||
.nav-item-professional:hover {
|
||||
transform: translateX(2px) !important; /* Reduziert von 4px */
|
||||
}
|
||||
|
||||
/* ===== LEICHTE SHADOW OPTIMIERUNGEN ===== */
|
||||
|
||||
/* Reduziere nur die schwersten Shadows */
|
||||
.professional-hero,
|
||||
.professional-container,
|
||||
.card-professional,
|
||||
.stat-card {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
|
||||
.dark .professional-hero,
|
||||
.dark .professional-container,
|
||||
.dark .card-professional,
|
||||
.dark .stat-card {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
/* ===== FONT RENDERING OPTIMIERUNG ===== */
|
||||
|
||||
body, * {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeSpeed;
|
||||
}
|
||||
|
||||
/* ===== MEMORY OPTIMIERUNGEN ===== */
|
||||
|
||||
/* Image Optimierung */
|
||||
img {
|
||||
image-rendering: auto;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* SVG Optimierung */
|
||||
svg {
|
||||
shape-rendering: optimizeSpeed;
|
||||
}
|
||||
|
||||
/* ===== MOBILE/TABLET OPTIMIERUNGEN ===== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
/* Weitere Reduzierung für kleinere Geräte */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.1s !important;
|
||||
transition-duration: 0.1s !important;
|
||||
}
|
||||
|
||||
/* Entferne backdrop-filter nur auf schwächeren Geräten */
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-subtle,
|
||||
.glass-card,
|
||||
.glass-nav,
|
||||
.glass-btn,
|
||||
.glass-modal,
|
||||
.glass-input,
|
||||
.glass-dropdown,
|
||||
.mb-glass {
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== REDUCED MOTION SUPPORT ===== */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
/* Entferne Glaseffekte für Nutzer mit reduced motion */
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-subtle,
|
||||
.glass-card,
|
||||
.glass-nav,
|
||||
.glass-btn,
|
||||
.glass-modal,
|
||||
.glass-input,
|
||||
.glass-dropdown,
|
||||
.mb-glass {
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== SELEKTIVE CPU INTENSIVE PROPERTIES OVERRIDE ===== */
|
||||
|
||||
/* Entferne nur die schwersten Filter */
|
||||
.glass-professional {
|
||||
backdrop-filter: blur(6px) !important;
|
||||
-webkit-backdrop-filter: blur(6px) !important;
|
||||
}
|
||||
|
||||
/* Vereinfache Border-Radius nur bei den größten Elementen */
|
||||
.professional-hero {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* ===== PRINT OPTIMIERUNGEN ===== */
|
||||
|
||||
@media print {
|
||||
* {
|
||||
background: white !important;
|
||||
color: black !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== ANTI-FLICKER MASSNAHMEN ===== */
|
||||
|
||||
/* Verhindere Flackern bei Hover-Übergängen */
|
||||
.card-professional,
|
||||
.stat-card,
|
||||
.professional-container,
|
||||
.nav-item-professional {
|
||||
transition: all 0.15s ease-out !important;
|
||||
}
|
||||
|
||||
/* Sanftere Button-Transitionen */
|
||||
.btn-professional,
|
||||
.btn-secondary-professional {
|
||||
transition: background-color 0.1s ease, box-shadow 0.1s ease !important;
|
||||
}
|
||||
|
||||
/* ===== FINALER PERFORMANCE-BALANCE ===== */
|
||||
|
||||
/* Stelle sicher, dass die schwersten Performance-Killer reduziert sind */
|
||||
.glass-overlay {
|
||||
backdrop-filter: blur(2px) !important;
|
||||
-webkit-backdrop-filter: blur(2px) !important;
|
||||
}
|
||||
|
||||
.animate-slide-up,
|
||||
.animate-hover-lift,
|
||||
.animate-scale-in {
|
||||
animation-duration: 0.2s !important;
|
||||
transition: opacity 0.1s ease !important;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-1px) !important; /* Reduziert von -2px */
|
||||
}
|
||||
Reference in New Issue
Block a user