/* ========================================================================= Lite UI effects - ------------------------------------------------------------------------- Set per DEVICE by own.ui.effects.js - automatically (no hardware-accelerated graphics, a software renderer, measured jank) or by the user (top bar user menu -> "Efecte vizuale": Automat / Complete / Reduse) - and emitted by _Layout.cshtml (UIEffectsPreferences) before first paint. Without GPU acceleration the browser composites on the CPU, where a few effects cost a lot on EVERY frame (scrolling, typing, any animation): - backdrop-filter (frosted glass) re-blurs everything behind the element; - large blurred layers (filter: blur on big blobs / orbs); - infinite decorative loops over big areas (animated backgrounds). This file removes exactly those and nothing else: no spinner / busy indicator, no entrance or hover transition is touched, so the UI works and reads the same - just flatter and calmer. Every selector is scoped under html.ui-effects-lite, so without the class nothing here matches. Loaded after every other stylesheet (see _Layout.cshtml). Where an effect's own file already carries a prefers-reduced-motion rule, the same selectors are frozen here the same way. ========================================================================= */ /* 1. No backdrop blur anywhere. The translucent surfaces that relied on it get a more opaque fill below, where the content behind could make them hard to read. */ html.ui-effects-lite *, html.ui-effects-lite *::before, html.ui-effects-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 2. Login / select company (own.auth.shell): the glass card floating over the animated background. */ html.ui-effects-lite .auth-card { background: rgba(255, 255, 255, 0.95); } /* The brand panel's drifting orbs: a radial gradient draws the same soft glow as the 64px blur without any filter (scaled up to the blur's reach); the orbs and the sheen stop moving. */ html.ui-effects-lite .auth-brand__orb { filter: none; transform: scale(1.7); animation: none !important; } html.ui-effects-lite .auth-brand__orb--1 { background: radial-gradient(closest-side, var(--auth-accent) 30%, transparent); } html.ui-effects-lite .auth-brand__orb--2 { background: radial-gradient(closest-side, var(--auth-accent-2) 30%, transparent); } html.ui-effects-lite .auth-brand__orb--3 { background: radial-gradient(closest-side, var(--app-secondary-color, #db8236) 30%, transparent); } html.ui-effects-lite .auth-brand__shine { display: none; } /* 3. Vector backgrounds (own.vector.backgrounds): frozen, exactly like their prefers-reduced-motion rule - the hue cycle and every drifting layer. */ html.ui-effects-lite .vbg, html.ui-effects-lite .vbg * { animation: none !important; } /* 4. Public landing page (own.public.landing.page): the hero's big blurred blobs become plain radial gradients; the floating cards, the pulsing dot and the scroll cue stop moving (their resting positions are the base ones). */ html.ui-effects-lite .tm-hero__blob { filter: none; transform: scale(1.5); animation: none !important; } html.ui-effects-lite .tm-hero__blob--1 { background: radial-gradient(closest-side, var(--tm-blob-1) 30%, transparent); } html.ui-effects-lite .tm-hero__blob--2 { background: radial-gradient(closest-side, var(--tm-blob-2) 30%, transparent); } html.ui-effects-lite .tm-hero__blob--3 { background: radial-gradient(closest-side, var(--tm-blob-3) 30%, transparent); } html.ui-effects-lite .tm-hero__float, html.ui-effects-lite .tm-hero__float-dot, html.ui-effects-lite .tm-hero__scroll { animation: none !important; } /* 5. Issue timeline rail (own.issue.entry.view.modes): its flowing gradient repaints every entry on every frame - frozen, as under prefers-reduced-motion. */ html.ui-effects-lite .issue-entries-view--timeline .js-issue-entry-item::before { animation: none; } /* ========================================================================= The "Efecte vizuale" choice in the top bar user menu (_TopbarContents). Not scoped to the lite class - it is always visible. ========================================================================= */ .ui-effects-preference { display: flex; flex-direction: column; gap: 6px; /* same gutter as the menu's links (own.logged.user) */ padding: var(--pq, 5px) calc(2 * var(--pq, 5px)); } .ui-effects-preference__label { display: flex; align-items: center; gap: 4px; white-space: nowrap; } .ui-effects-preference__options { display: flex; gap: 4px; } .ui-effects-preference__option { flex: 1 1 0; padding: 3px 8px; border: 1px solid var(--default-border-color, #dee2e6); border-radius: var(--small-border-radius, 4px); background: transparent; color: inherit; font-size: var(--smaller-font-size, 12px); line-height: 1.5; white-space: nowrap; cursor: pointer; } .ui-effects-preference__option:hover { border-color: var(--app-main-color, #2578b6); } .ui-effects-preference__option:focus-visible { outline: 2px solid var(--app-main-color, #2578b6); outline-offset: 1px; } .ui-effects-preference__option[aria-pressed=true] { border-color: var(--app-main-color, #2578b6); background: var(--app-main-color, #2578b6); color: #fff; } .ui-effects-preference__status { min-height: 1em; color: var(--faded-text-color, #6c757d); font-size: var(--smaller-font-size, 12px); white-space: normal; }