90 lines
2.1 KiB
CSS
90 lines
2.1 KiB
CSS
/**
|
|
* Minimal-invasive Performance-Optimierungen für MYP Platform
|
|
* Behält den ursprünglichen Style bei, reduziert nur CPU-intensive Operationen
|
|
*/
|
|
|
|
/* Reduzierte Animationen ohne Style-Verlust */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
/* Nur längere Animationen verkürzen */
|
|
.animate-pulse {
|
|
animation-duration: 1s !important;
|
|
}
|
|
|
|
/* Komplexe cubic-bezier durch einfache ease ersetzen */
|
|
.glass, .mobile-menu {
|
|
transition-timing-function: ease !important;
|
|
transition-duration: 0.2s !important;
|
|
}
|
|
}
|
|
|
|
/* Glassmorphismus-Optimierung - nur bei schwachen Geräten */
|
|
@media (max-width: 768px) {
|
|
.glass {
|
|
backdrop-filter: blur(8px) !important;
|
|
-webkit-backdrop-filter: blur(8px) !important;
|
|
}
|
|
}
|
|
|
|
/* Performance-freundliche Hover-Effekte */
|
|
.hover-performance {
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.hover-performance:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Optimierte Loading-States */
|
|
.loading-optimized {
|
|
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* Mobile-optimierte Glassmorphismus-Reduktion */
|
|
@media (max-device-width: 768px), (hover: none) {
|
|
.glass {
|
|
backdrop-filter: blur(4px) !important;
|
|
-webkit-backdrop-filter: blur(4px) !important;
|
|
}
|
|
}
|
|
|
|
/* FontAwesome-Animationen reduzieren */
|
|
.fa-spin {
|
|
animation-duration: 1s !important;
|
|
}
|
|
|
|
.fa-pulse {
|
|
animation-duration: 1.5s !important;
|
|
}
|
|
|
|
/* Reduzierte Transform-Animationen */
|
|
.scale-hover {
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.scale-hover:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* Performance-bewusste Box-Shadows */
|
|
.shadow-performance {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.shadow-performance-hover:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Conditional Animation Disabling for Performance */
|
|
@media (max-width: 768px) and (max-height: 1024px) {
|
|
* {
|
|
animation-duration: 0.3s !important;
|
|
transition-duration: 0.15s !important;
|
|
}
|
|
} |