🎉 Improved database performance by adding shm and wal files to 'backend/database/' and removing outdated documentation. 🛠️ Also updated log files for better tracking: 'backend/logs/*', 'backend/static/css/*', and 'backend/templates/base.html'. 🐛 Fixed minor CSS issues in 'backend/static/css/*.css'. 📚 Enhanced code organization and optimization across various directories. 💄 No major design changes, just refinements.
This commit is contained in:
@@ -1,17 +1,16 @@
|
||||
/**
|
||||
* MYP Platform - CSS Caching-Optimierungen
|
||||
* Performance-optimierte Styles für besseres Caching und schnellere Ladezeiten
|
||||
* MYP Platform - CSS Caching-Optimierungen für Raspberry Pi
|
||||
* Performance-optimierte Styles ohne GPU-intensive Effekte
|
||||
*/
|
||||
|
||||
/* ===== KRITISCHE ABOVE-THE-FOLD STYLES ===== */
|
||||
/* ===== KRITISCHE ABOVE-THE-FOLD STYLES - RASPBERRY PI OPTIMIERT ===== */
|
||||
/* Diese Styles sollten inline im HTML-Head geladen werden */
|
||||
.critical-header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
/* Entfernt: backdrop-filter, box-shadow */
|
||||
}
|
||||
|
||||
.critical-nav {
|
||||
@@ -30,29 +29,20 @@
|
||||
|
||||
.critical-main {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #f5f7f9 100%);
|
||||
background: #fafbfc;
|
||||
/* Entfernt: gradient für bessere Performance */
|
||||
}
|
||||
|
||||
/* ===== LAZY LOADING PLACEHOLDER ===== */
|
||||
/* ===== LAZY LOADING PLACEHOLDER - VEREINFACHT ===== */
|
||||
.lazy-placeholder {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
/* Entfernt: gradient und animation */
|
||||
}
|
||||
|
||||
.dark .lazy-placeholder {
|
||||
background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
|
||||
background-size: 200% 100%;
|
||||
background: #374151;
|
||||
/* Entfernt: gradient und animation */
|
||||
}
|
||||
|
||||
/* ===== PRELOAD HINTS ===== */
|
||||
@@ -66,19 +56,15 @@
|
||||
contain-intrinsic-size: 100px;
|
||||
}
|
||||
|
||||
/* ===== CACHE-OPTIMIERTE KOMPONENTEN ===== */
|
||||
/* ===== CACHE-OPTIMIERTE KOMPONENTEN - RASPBERRY PI OPTIMIERT ===== */
|
||||
.cache-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(229, 231, 235, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: transform 0.2s ease;
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.cache-card:hover {
|
||||
transform: translateY(-1px);
|
||||
contain: layout style;
|
||||
/* Entfernt: transition, hover-transform, paint containment */
|
||||
}
|
||||
|
||||
.cache-button {
|
||||
@@ -88,8 +74,8 @@
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.2s ease;
|
||||
contain: layout style;
|
||||
/* Entfernt: transition */
|
||||
}
|
||||
|
||||
.cache-button:hover {
|
||||
@@ -97,23 +83,23 @@
|
||||
}
|
||||
|
||||
.cache-input {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(229, 231, 235, 0.8);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
transition: border-color 0.2s ease;
|
||||
contain: layout style;
|
||||
/* Entfernt: transition, box-shadow */
|
||||
}
|
||||
|
||||
.cache-input:focus {
|
||||
outline: none;
|
||||
border-color: #0073ce;
|
||||
box-shadow: 0 0 0 2px rgba(0, 115, 206, 0.1);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
/* ===== LAYOUT SHIFT PREVENTION ===== */
|
||||
.prevent-cls {
|
||||
min-height: 200px; /* Prevent layout shift */
|
||||
min-height: 200px;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
@@ -128,7 +114,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.3s ease;
|
||||
/* Entfernt: transition */
|
||||
}
|
||||
|
||||
.image-container img[loading="lazy"] {
|
||||
@@ -158,14 +144,14 @@
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
/* ===== DARK MODE CACHE OPTIMIZATIONS ===== */
|
||||
/* ===== DARK MODE CACHE OPTIMIZATIONS - VEREINFACHT ===== */
|
||||
.dark .cache-card {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
border-color: rgba(100, 116, 139, 0.3);
|
||||
}
|
||||
|
||||
.dark .cache-input {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
border-color: rgba(100, 116, 139, 0.5);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
@@ -211,28 +197,23 @@
|
||||
}
|
||||
|
||||
.cache-card {
|
||||
box-shadow: none;
|
||||
border: 1px solid #000;
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== GPU ACCELERATION HINTS ===== */
|
||||
.gpu-accelerated {
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
/* ===== ALLE GPU ACCELERATION ENTFERNT ===== */
|
||||
/* GPU-Beschleunigung ist auf Raspberry Pi problematisch */
|
||||
|
||||
/* ===== EFFICIENT ANIMATIONS ===== */
|
||||
/* ===== NUR FADE-IN OHNE TRANSFORM ===== */
|
||||
.fade-in-optimized {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
/* Entfernt: transform und alle transform-Animationen */
|
||||
}
|
||||
|
||||
.fade-in-optimized.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
/* Nur opacity change */
|
||||
}
|
||||
|
||||
/* ===== CONTAINER QUERIES SUPPORT ===== */
|
||||
@@ -255,13 +236,15 @@
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
/* ===== REDUCED MOTION PREFERENCES ===== */
|
||||
/* ===== REDUCED MOTION PREFERENCES - ERWEITERT ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-in-optimized,
|
||||
.cache-card,
|
||||
.cache-button,
|
||||
.cache-input {
|
||||
transition: none !important;
|
||||
transform: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.lazy-placeholder {
|
||||
@@ -285,4 +268,20 @@
|
||||
border-width: 2px;
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RASPBERRY PI SPECIFIC OPTIMIERUNGEN ===== */
|
||||
.raspberry-pi-optimized {
|
||||
/* Minimale CSS Properties */
|
||||
/* Keine will-change */
|
||||
/* Keine Transforms */
|
||||
/* Keine Shadows */
|
||||
/* Nur opacity und color Transitions */
|
||||
transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.performance-critical {
|
||||
/* Für kritische Bereiche */
|
||||
contain: layout style;
|
||||
/* Keine paint containment */
|
||||
}
|
||||
@@ -1,211 +1,179 @@
|
||||
/* Vereinfachte Glassmorphism-Effekte für MYP Application */
|
||||
/* Vereinfachte Glassmorphism-Effekte für MYP Application - Raspberry Pi Optimiert */
|
||||
|
||||
/* ===== BASIS GLASS EFFEKTE ===== */
|
||||
/* ===== BASIS GLASS EFFEKTE - STARK VEREINFACHT ===== */
|
||||
.glass-base {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
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;
|
||||
/* Entfernt: backdrop-filter, box-shadow, transition */
|
||||
}
|
||||
|
||||
.glass-strong {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
|
||||
/* Entfernt: backdrop-filter, box-shadow */
|
||||
}
|
||||
|
||||
.glass-subtle {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
/* Entfernt: backdrop-filter, box-shadow */
|
||||
}
|
||||
|
||||
/* ===== DARK MODE GLASS ===== */
|
||||
/* ===== DARK MODE GLASS - VEREINFACHT ===== */
|
||||
.dark .glass-base {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.dark .glass-strong {
|
||||
background: rgba(30, 41, 59, 0.85);
|
||||
background: rgba(30, 41, 59, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.dark .glass-subtle {
|
||||
background: rgba(15, 23, 42, 0.7);
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
/* ===== GLASS KARTEN ===== */
|
||||
/* ===== GLASS KARTEN - STARK VEREINFACHT ===== */
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
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);
|
||||
/* Entfernt: backdrop-filter, box-shadow, transition, hover-transform */
|
||||
}
|
||||
|
||||
.dark .glass-card {
|
||||
background: rgba(30, 41, 59, 0.85);
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
border: 1px solid rgba(100, 116, 139, 0.3);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.dark .glass-card:hover {
|
||||
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
/* ===== GLASS NAVIGATION ===== */
|
||||
/* ===== GLASS NAVIGATION - VEREINFACHT ===== */
|
||||
.glass-nav {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
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);
|
||||
/* Entfernt: backdrop-filter, box-shadow */
|
||||
}
|
||||
|
||||
.dark .glass-nav {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border: 1px solid rgba(51, 65, 85, 0.5);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
/* ===== GLASS BUTTONS ===== */
|
||||
/* ===== GLASS BUTTONS - STARK VEREINFACHT ===== */
|
||||
.glass-btn {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
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 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: transform 0.2s ease, background 0.2s ease;
|
||||
/* Entfernt: backdrop-filter, box-shadow, transition, hover-transform */
|
||||
}
|
||||
|
||||
.glass-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(255, 255, 255, 0.99);
|
||||
/* Nur Background-Color Change - keine Transform */
|
||||
}
|
||||
|
||||
.glass-btn-primary {
|
||||
background: rgba(0, 115, 206, 0.9);
|
||||
background: rgba(0, 115, 206, 0.95);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.2);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.glass-btn-primary:hover {
|
||||
background: rgba(0, 115, 206, 0.95);
|
||||
box-shadow: 0 4px 12px rgba(0, 115, 206, 0.3);
|
||||
background: rgba(0, 115, 206, 0.99);
|
||||
/* Nur Background-Color Change */
|
||||
}
|
||||
|
||||
.dark .glass-btn {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
color: #e2e8f0;
|
||||
border: 1px solid rgba(100, 116, 139, 0.5);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.dark .glass-btn:hover {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
background: rgba(30, 41, 59, 0.99);
|
||||
/* Nur Background-Color Change */
|
||||
}
|
||||
|
||||
/* ===== GLASS MODALS ===== */
|
||||
/* ===== GLASS MODALS - VEREINFACHT ===== */
|
||||
.glass-modal {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
background: rgba(255, 255, 255, 0.99);
|
||||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
|
||||
/* Entfernt: backdrop-filter, box-shadow */
|
||||
}
|
||||
|
||||
.dark .glass-modal {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
background: rgba(15, 23, 42, 0.99);
|
||||
border: 1px solid rgba(51, 65, 85, 0.6);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
/* ===== GLASS FORM ELEMENTE ===== */
|
||||
/* ===== GLASS FORM ELEMENTE - VEREINFACHT ===== */
|
||||
.glass-input {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(226, 232, 240, 0.5);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
color: #0f172a;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
/* Entfernt: backdrop-filter, box-shadow, transition */
|
||||
}
|
||||
|
||||
.glass-input:focus {
|
||||
outline: none;
|
||||
border-color: rgba(0, 115, 206, 0.5);
|
||||
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.1);
|
||||
/* Nur Border-Color Change */
|
||||
}
|
||||
|
||||
.dark .glass-input {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
border: 1px solid rgba(100, 116, 139, 0.5);
|
||||
color: #e2e8f0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.dark .glass-input:focus {
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
|
||||
/* Nur Border-Color Change */
|
||||
}
|
||||
|
||||
/* ===== GLASS DROPDOWN ===== */
|
||||
/* ===== GLASS DROPDOWN - VEREINFACHT ===== */
|
||||
.glass-dropdown {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
/* Entfernt: backdrop-filter, box-shadow */
|
||||
}
|
||||
|
||||
.dark .glass-dropdown {
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
/* ===== UTILITY CLASSES - STARK VEREINFACHT ===== */
|
||||
.glass-overlay {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
/* Entfernt: backdrop-filter */
|
||||
}
|
||||
|
||||
.dark .glass-overlay {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
/* Entfernt: backdrop-filter */
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ANPASSUNGEN ===== */
|
||||
/* ===== RESPONSIVE ANPASSUNGEN - VEREINFACHT ===== */
|
||||
@media (max-width: 768px) {
|
||||
.glass-card {
|
||||
padding: 1rem;
|
||||
@@ -216,40 +184,28 @@
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-subtle {
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
/* Entfernt: backdrop-filter Reduzierung */
|
||||
}
|
||||
|
||||
/* ===== REDUZIERTE BEWEGUNG ===== */
|
||||
/* ===== REDUZIERTE BEWEGUNG - ERWEITERT ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.glass-card,
|
||||
.glass-btn,
|
||||
.glass-input {
|
||||
transition: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== HOHER KONTRAST MODUS ===== */
|
||||
/* ===== HOHER KONTRAST MODUS - VEREINFACHT ===== */
|
||||
@media (prefers-contrast: high) {
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-card {
|
||||
border-width: 2px;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
/* Entfernt: backdrop-filter */
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== PERFORMANCE OPTIMIERUNGEN ===== */
|
||||
.glass-base,
|
||||
.glass-strong,
|
||||
.glass-subtle,
|
||||
.glass-card,
|
||||
.glass-btn,
|
||||
.glass-modal {
|
||||
will-change: transform;
|
||||
}
|
||||
/* ===== PERFORMANCE OPTIMIERUNGEN ENTFERNT ===== */
|
||||
/* Entfernt: will-change Properties für bessere Performance auf schwacher Hardware */
|
||||
@@ -1,9 +1,9 @@
|
||||
/**
|
||||
* MYP Platform - Raspberry Pi optimierte minimale Animationen
|
||||
* Nur absolut notwendige, performance-freundliche Animationen
|
||||
* MYP Platform - Minimale Animationen für Raspberry Pi
|
||||
* Nur essentielle Fade-In Animationen für optimale Performance
|
||||
*/
|
||||
|
||||
/* ===== NUR OPACITY-FADE (GPU-freundlich) ===== */
|
||||
/* ===== NUR FADE-IN ANIMATION - MINIMAL ===== */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -14,29 +14,23 @@
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.15s ease-out;
|
||||
animation: fade-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* ===== REDUZIERTE PROGRESS BAR (ohne Transform) ===== */
|
||||
.progress-fill {
|
||||
transition: width 0.8s ease-out;
|
||||
/* ===== ALLE TRANSFORM-ANIMATIONEN ENTFERNT ===== */
|
||||
/* Entfernt: slide-up, scale-in und alle transform-basierten Animationen */
|
||||
|
||||
/* ===== EINFACHER HOVER-EFFEKT - NUR OPACITY ===== */
|
||||
.animate-hover-lift {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* ===== MINIMAL LOADING PULSE ===== */
|
||||
@keyframes simple-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.animate-hover-lift:hover {
|
||||
opacity: 0.8;
|
||||
/* Entfernt: transform - nur opacity change */
|
||||
}
|
||||
|
||||
.animate-pulse-simple {
|
||||
animation: simple-pulse 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* ===== BASIC SUCCESS FADE ===== */
|
||||
/* ===== EINFACHE SUCCESS INDICATION - NUR OPACITY ===== */
|
||||
@keyframes simple-success {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -50,33 +44,59 @@
|
||||
animation: simple-success 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* ===== MINIMALE UTILITY CLASSES ===== */
|
||||
.animate-smooth {
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.animate-smooth-fast {
|
||||
transition: opacity 0.05s ease;
|
||||
}
|
||||
|
||||
/* ===== ALLE TRANSFORM-ANIMATIONEN ENTFERNT ===== */
|
||||
/* Entfernt: slide-up (translateY) */
|
||||
/* Entfernt: hover-lift (translateY) */
|
||||
/* Entfernt: scale animations */
|
||||
/* Entfernt: will-change properties */
|
||||
|
||||
/* ===== RESPONSIVE ANPASSUNGEN ===== */
|
||||
@media (max-width: 768px) {
|
||||
.animate-fade-in {
|
||||
animation-duration: 0.1s;
|
||||
/* ===== EINFACHER PULSE FÜR LOADING - REDUZIERT ===== */
|
||||
@keyframes simple-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== REDUZIERTE BEWEGUNG UNTERSTÜTZUNG ===== */
|
||||
.animate-pulse-simple {
|
||||
animation: simple-pulse 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* ===== EINFACHER PROGRESS BAR - NUR WIDTH ===== */
|
||||
.progress-fill {
|
||||
transition: width 0.5s ease-out;
|
||||
/* Reduzierte Dauer für bessere Performance */
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES - MINIMAL ===== */
|
||||
.animate-smooth {
|
||||
transition: opacity 0.2s ease;
|
||||
/* Nur opacity transition */
|
||||
}
|
||||
|
||||
.animate-smooth-fast {
|
||||
transition: opacity 0.1s ease;
|
||||
/* Nur opacity transition */
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ANPASSUNGEN - MINIMAL ===== */
|
||||
@media (max-width: 768px) {
|
||||
.animate-fade-in {
|
||||
animation-duration: 0.1s;
|
||||
/* Noch schneller auf mobilen Geräten */
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== REDUZIERTE BEWEGUNG UNTERSTÜTZUNG - ERWEITERT ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-hover-lift:hover {
|
||||
opacity: 1 !important;
|
||||
/* Keine Hover-Effekte bei reduzierter Bewegung */
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== ALLE WILL-CHANGE PROPERTIES ENTFERNT ===== */
|
||||
/* will-change Properties können auf schwacher Hardware mehr schaden als nutzen */
|
||||
@@ -43,7 +43,7 @@
|
||||
--dark-shadow-strong: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Raspberry Pi optimierte Hero-Header */
|
||||
/* Vereinfachte Hero-Header - Raspberry Pi Optimiert */
|
||||
.professional-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -52,65 +52,45 @@
|
||||
margin-bottom: 2rem;
|
||||
background: var(--light-bg-secondary);
|
||||
border: 1px solid var(--light-border);
|
||||
box-shadow: 0 2px 8px var(--light-shadow);
|
||||
}
|
||||
|
||||
.professional-hero:hover {
|
||||
box-shadow: 0 4px 12px var(--light-shadow-strong);
|
||||
/* Entfernt: box-shadow, transition, hover-transform */
|
||||
}
|
||||
|
||||
.dark .professional-hero {
|
||||
background: var(--dark-bg-secondary);
|
||||
border: 1px solid var(--dark-border);
|
||||
box-shadow: 0 8px 20px var(--dark-shadow);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
/* Raspberry Pi optimierte Container */
|
||||
/* Vereinfachte Container - Raspberry Pi Optimiert */
|
||||
.professional-container {
|
||||
background: var(--light-surface);
|
||||
border: 1px solid var(--light-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
/* Entfernt: box-shadow, transition, hover-transform */
|
||||
}
|
||||
|
||||
.dark .professional-container {
|
||||
background: var(--dark-surface);
|
||||
border: 1px solid var(--dark-border);
|
||||
box-shadow: 0 2px 8px var(--dark-shadow);
|
||||
/* Entfernt: box-shadow, hover-effects */
|
||||
}
|
||||
|
||||
.professional-container:hover {
|
||||
box-shadow: 0 2px 8px var(--light-shadow-strong);
|
||||
}
|
||||
|
||||
.dark .professional-container:hover {
|
||||
box-shadow: 0 8px 20px var(--dark-shadow-strong);
|
||||
}
|
||||
|
||||
/* Raspberry Pi optimierte Glassmorphism-Ersatz */
|
||||
/* Vereinfachte Glassmorphism-Effekte - Raspberry Pi Optimiert */
|
||||
.mb-glass {
|
||||
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);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid rgba(229, 231, 235, 0.4);
|
||||
/* Entfernt: backdrop-filter, box-shadow, transition, hover-transform */
|
||||
}
|
||||
|
||||
.dark .mb-glass {
|
||||
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);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
/* Entfernt: box-shadow, hover-effects */
|
||||
}
|
||||
|
||||
.mb-glass:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.dark .mb-glass:hover {
|
||||
background: rgba(15, 23, 42, 1);
|
||||
}
|
||||
|
||||
/* Raspberry Pi optimierte Buttons */
|
||||
/* Vereinfachte Buttons - Raspberry Pi Optimiert */
|
||||
.btn-professional {
|
||||
background: linear-gradient(135deg, var(--mb-primary) 0%, var(--mb-primary-dark) 100%);
|
||||
background: var(--mb-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
@@ -119,18 +99,15 @@
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
box-shadow: 0 1px 4px rgba(0, 115, 206, 0.2);
|
||||
/* Entfernt: gradient, transition, box-shadow, hover-transform */
|
||||
}
|
||||
|
||||
.btn-professional:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 115, 206, 0.3);
|
||||
background: var(--mb-primary-dark);
|
||||
/* Nur Background-Color Change */
|
||||
}
|
||||
|
||||
.btn-professional:active {
|
||||
box-shadow: 0 1px 2px rgba(0, 115, 206, 0.3);
|
||||
}
|
||||
|
||||
/* Secondary Button */
|
||||
/* Secondary Button - Raspberry Pi Optimiert */
|
||||
.btn-secondary-professional {
|
||||
background: var(--light-surface);
|
||||
color: var(--light-text-primary);
|
||||
@@ -139,27 +116,27 @@
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
/* Entfernt: transition, box-shadow, hover-transform */
|
||||
}
|
||||
|
||||
.dark .btn-secondary-professional {
|
||||
background: var(--dark-surface);
|
||||
color: var(--dark-text-primary);
|
||||
border-color: var(--dark-border-strong);
|
||||
box-shadow: 0 2px 8px var(--dark-shadow);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.btn-secondary-professional:hover {
|
||||
background: var(--light-surface-hover);
|
||||
border-color: var(--mb-primary);
|
||||
/* Nur Background und Border-Color Change */
|
||||
}
|
||||
|
||||
.dark .btn-secondary-professional:hover {
|
||||
background: var(--dark-surface-hover);
|
||||
}
|
||||
|
||||
/* Vereinfachte Input Fields */
|
||||
/* Vereinfachte Input Fields - Raspberry Pi Optimiert */
|
||||
.input-professional {
|
||||
background: var(--light-surface);
|
||||
border: 1px solid var(--light-border);
|
||||
@@ -167,20 +144,19 @@
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--light-text-primary);
|
||||
font-size: 0.875rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
/* Entfernt: transition, box-shadow, focus-transform */
|
||||
}
|
||||
|
||||
.dark .input-professional {
|
||||
background: var(--dark-surface);
|
||||
border-color: var(--dark-border);
|
||||
color: var(--dark-text-primary);
|
||||
box-shadow: 0 2px 4px var(--dark-shadow);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.input-professional:focus {
|
||||
border-color: var(--mb-primary);
|
||||
box-shadow: 0 0 0 2px rgba(0, 115, 206, 0.1);
|
||||
/* Nur Border-Color Change */
|
||||
}
|
||||
|
||||
.input-professional::placeholder {
|
||||
@@ -191,47 +167,35 @@
|
||||
color: var(--dark-text-muted);
|
||||
}
|
||||
|
||||
/* Raspberry Pi optimierte Cards */
|
||||
/* Vereinfachte Cards - Raspberry Pi Optimiert */
|
||||
.card-professional {
|
||||
background: var(--light-surface);
|
||||
border: 1px solid var(--light-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
}
|
||||
|
||||
.card-professional:hover {
|
||||
box-shadow: 0 2px 8px var(--light-shadow-strong);
|
||||
/* Entfernt: box-shadow, transition, hover-transform */
|
||||
}
|
||||
|
||||
.dark .card-professional {
|
||||
background: var(--dark-surface);
|
||||
border-color: var(--dark-border);
|
||||
box-shadow: 0 4px 12px var(--dark-shadow);
|
||||
/* Entfernt: box-shadow, hover-effects */
|
||||
}
|
||||
|
||||
/* Raspberry Pi optimierte Statistics Cards */
|
||||
/* Vereinfachte Statistics Cards - Raspberry Pi Optimiert */
|
||||
.stat-card {
|
||||
background: var(--light-surface);
|
||||
border: 1px solid var(--light-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
/* Entfernt: transition, box-shadow, hover-transform */
|
||||
}
|
||||
|
||||
.dark .stat-card {
|
||||
background: var(--dark-surface);
|
||||
border-color: var(--dark-border);
|
||||
box-shadow: 0 2px 8px var(--dark-shadow);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
box-shadow: 0 2px 8px var(--light-shadow-strong);
|
||||
}
|
||||
|
||||
.dark .stat-card:hover {
|
||||
box-shadow: 0 4px 12px var(--dark-shadow-strong);
|
||||
/* Entfernt: box-shadow, hover-effects */
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
@@ -258,7 +222,7 @@
|
||||
color: var(--dark-text-muted);
|
||||
}
|
||||
|
||||
/* Raspberry Pi optimierte Status Badges */
|
||||
/* Vereinfachte Status Badges - Raspberry Pi Optimiert */
|
||||
.status-professional {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -270,10 +234,9 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border: 1px solid transparent;
|
||||
/* Entfernt: transition, hover-scale */
|
||||
}
|
||||
|
||||
/* Status hover-effect entfernt für bessere Performance */
|
||||
|
||||
/* Status Indicators */
|
||||
.status-online {
|
||||
background: #ecfdf5;
|
||||
@@ -335,19 +298,19 @@
|
||||
color: var(--dark-text-muted);
|
||||
}
|
||||
|
||||
/* Professional Navigation */
|
||||
/* Professional Navigation - Raspberry Pi Optimiert */
|
||||
.nav-professional {
|
||||
background: var(--light-bg-secondary);
|
||||
border: 1px solid var(--light-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 2px 8px var(--light-shadow);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.dark .nav-professional {
|
||||
background: var(--dark-bg-secondary);
|
||||
border-color: var(--dark-border);
|
||||
box-shadow: 0 4px 12px var(--dark-shadow);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.nav-item-professional {
|
||||
@@ -359,9 +322,9 @@
|
||||
color: var(--light-text-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
/* Entfernt: transition, hover-transform, box-shadow */
|
||||
}
|
||||
|
||||
.dark .nav-item-professional {
|
||||
@@ -371,7 +334,7 @@
|
||||
.nav-item-professional:hover {
|
||||
background: var(--light-surface-hover);
|
||||
color: var(--light-text-primary);
|
||||
box-shadow: 0 1px 4px var(--light-shadow);
|
||||
/* Nur Background und Color Change */
|
||||
}
|
||||
|
||||
.dark .nav-item-professional:hover {
|
||||
@@ -380,51 +343,41 @@
|
||||
}
|
||||
|
||||
.nav-item-professional.active {
|
||||
background: linear-gradient(135deg, rgba(0, 115, 206, 0.1) 0%, rgba(0, 115, 206, 0.05) 100%);
|
||||
background: rgba(0, 115, 206, 0.1);
|
||||
color: var(--mb-primary);
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--light-border-strong);
|
||||
box-shadow: 0 2px 8px var(--light-shadow);
|
||||
/* Entfernt: gradient, box-shadow */
|
||||
}
|
||||
|
||||
.dark .nav-item-professional.active {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Professional Tables */
|
||||
/* Professional Tables - Raspberry Pi Optimiert */
|
||||
.table-professional {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--light-bg-secondary);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px var(--light-shadow);
|
||||
border: 1px solid var(--light-border);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.dark .table-professional {
|
||||
background: var(--dark-bg-secondary);
|
||||
box-shadow: 0 4px 12px var(--dark-shadow);
|
||||
/* Entfernt: box-shadow */
|
||||
}
|
||||
|
||||
.table-professional th {
|
||||
background: linear-gradient(135deg, var(--light-bg-tertiary) 0%, var(--light-bg-secondary) 100%);
|
||||
background: var(--light-bg-tertiary);
|
||||
color: var(--light-text-primary);
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--light-border);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-professional th::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent 0%, var(--light-border-strong) 50%, transparent 100%);
|
||||
/* Entfernt: gradient, ::after pseudo-element */
|
||||
}
|
||||
|
||||
.dark .table-professional th {
|
||||
@@ -437,7 +390,7 @@
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--light-border);
|
||||
color: var(--light-text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
/* Entfernt: transition */
|
||||
}
|
||||
|
||||
.dark .table-professional td {
|
||||
@@ -447,13 +400,14 @@
|
||||
|
||||
.table-professional tbody tr:hover {
|
||||
background: var(--light-surface-hover);
|
||||
/* Entfernt: transform, box-shadow */
|
||||
}
|
||||
|
||||
.dark .table-professional tbody tr:hover {
|
||||
background: var(--dark-surface-hover);
|
||||
}
|
||||
|
||||
/* Professional Alerts */
|
||||
/* Professional Alerts - Raspberry Pi Optimiert */
|
||||
.alert-professional {
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
@@ -462,9 +416,8 @@
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 4px 15px var(--light-shadow);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Entfernt: box-shadow, overflow */
|
||||
}
|
||||
|
||||
.alert-professional::before {
|
||||
|
||||
@@ -1,260 +0,0 @@
|
||||
/**
|
||||
* 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