/* * Rendering budget shared by every page of the site. * * html.perf-lite is set by the small inline script at the top of each page's on weak * hardware (4 CPU threads or fewer, 4 GB of memory or less), with Save-Data on, when the system * asks for reduced motion or transparency, and in Tor Browser (which reports 2 threads). * localStorage "velyx-perf" = "lite" / "full" overrides the detection. The design stays the * same; what goes is the work the GPU would otherwise redo on every frame. */ /* 1. Frosted glass. Re-blurring whatever sits behind a card on every scroll or animation frame is the most expensive effect on the site; lite mode keeps the translucent fill only. */ html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 2. Moving page backgrounds: the big drifting glows behind the landing page, the server list and the dashboards. They stay where they are, just still. */ html.perf-lite .glow, html.perf-lite .bg-glows *, html.perf-lite body::before, html.perf-lite body::after { animation: none !important; } /* 3. Looping animations that repaint every frame (they animate fill, stroke, filters, width or position rather than transform/opacity, which the GPU composites for free). Spinners and other cheap loops are left running so nothing looks frozen. */ html.perf-lite .ant, html.perf-lite .pipe-glow, html.perf-lite .pipe-glow-reverse, html.perf-lite .srv-node, html.perf-lite .discord-node, html.perf-lite .vp2Gem, html.perf-lite .success-gem, html.perf-lite .node-anim1, html.perf-lite .node-anim2, html.perf-lite .node-anim3, html.perf-lite .crown-pulse, html.perf-lite .svg-pb, html.perf-lite .ant-flicker, html.perf-lite .pb-failing, html.perf-lite .d1, html.perf-lite .d2, html.perf-lite .d3, html.perf-lite .admin-progress-fill::after, html.perf-lite .velyx-banner-line-pulse, html.perf-lite .velyx-db-cylinder-1, html.perf-lite .velyx-db-cylinder-2, html.perf-lite .velyx-db-cylinder-3, html.perf-lite .gem { animation: none !important; } /* 3a. The drawing in the panel's analytics banner. Stopping an animation is only safe when the element is already in its finished state, and here it is not: the trend line is a dashed stroke that starts fully offset and the dots start transparent, so simply switching the animation off made them disappear for good and left the picture half-drawn. Lite mode now stops the whole drawing and pins it to its final frame. */ html.perf-lite .an-svg-bar1, html.perf-lite .an-svg-bar2, html.perf-lite .an-svg-bar3, html.perf-lite .an-svg-bar4, html.perf-lite .an-svg-bar5, html.perf-lite .an-svg-trendline, html.perf-lite .an-svg-dot, html.perf-lite .an-svg-val, html.perf-lite .an-svg-pct, html.perf-lite .an-svg-arrow, html.perf-lite .an-svg-grid { animation: none !important; } html.perf-lite .an-svg-dot, html.perf-lite .an-svg-val, html.perf-lite .an-svg-pct, html.perf-lite .an-svg-grid { opacity: 1 !important; } html.perf-lite .an-svg-dot { r: 5 !important; } html.perf-lite .an-svg-trendline { stroke-dashoffset: 0 !important; } /* 3b. One-shot entrance animations (the header, the hero halves, the login card, the footer, the server cards). They start while the page is still being parsed, so on a slow machine the first painted frame already lands in the middle of them and the fade looks chopped. In lite mode the content simply appears. */ html.perf-lite header, html.perf-lite footer, html.perf-lite h1, html.perf-lite .brand-promo, html.perf-lite .login-card, html.perf-lite .server-card, html.perf-lite .content-section.active, html.perf-lite .logs-tab-content, html.perf-lite .an-svg, html.perf-lite .card, html.perf-lite .stat-card { animation: none !important; } /* 4. The system "reduce motion" setting, on every page: animations jump to their end state and transitions become instant (0.01ms rather than 0 so animationend/transitionend still fire). */ @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; } } /* 5. Firefox (and Tor Browser) ignore ::-webkit-scrollbar, so the styled thin scrollbars fell back to the wide grey defaults there. Only applied where that selector is unsupported: Chrome and Safari would otherwise let these standard properties override their own styling. */ @supports not selector(::-webkit-scrollbar) { html { scrollbar-color: rgba(255, 255, 255, 0.16) transparent; } :root[data-theme="light"] { scrollbar-color: rgba(15, 17, 25, 0.22) transparent; } * { scrollbar-width: thin; } }