/* ============================================================================= * low-power.css — applied when has class "low-power" * * The perf detector (_PerfHead.cshtml) adds that class before first paint on * weak / low-memory devices (≤2 GB RAM, ≤2 CPU cores) or when the OS asks for * reduced motion / data, or when the user saved a "low" power preference. * * Goal: keep the app fully functional but flatten the effects that cost the most * on weak GPUs/CPUs — GPU-composited blur, continuously-repainting animations, * and large blurred shadows. Nothing here changes behaviour, only presentation. * ========================================================================== */ /* 1) backdrop-filter / blur is the single biggest GPU cost on low-end hardware. * Kill it everywhere. Where a translucent "glass" panel relied on it, drop in * a solid dark panel so text keeps its contrast instead of showing through. */ .low-power *, .low-power *::before, .low-power *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: auto !important; } .low-power [class*="backdrop-blur"], .low-power [class*="backdrop-filter"] { background-color: rgba(11, 10, 21, 0.94) !important; } /* 2) Continuously looping decorative animations repaint every frame and drain * battery. Stop the expensive ones (opacity/scale/layout). Transform-only * spinners are left running — they're cheap and signal "working". */ .low-power .animate-pulse, .low-power .animate-ping, .low-power .animate-bounce { animation: none !important; } /* 3) Big blurred shadows are a full offscreen paint each. Flatten to a hairline. */ .low-power [class*="shadow-2xl"], .low-power [class*="shadow-xl"], .low-power [class*="shadow-lg"] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } /* 4) Smooth-scroll and long transitions add jank on weak CPUs. */ .low-power { scroll-behavior: auto !important; } /* 5) Our own network overlay: drop its blur and slow the spinner (fewer frames). */ .low-power .qk-nm-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(6, 5, 14, 0.9) !important; } .low-power .qk-nm-spin { animation-duration: 1.6s !important; }