gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-28 03:06:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): lower-overhead Reduced effects for constrained GPUs (#1616)

Browse Source 
* fix(ui): lower-overhead Reduced effects path for constrained GPUs

Disable backdrop-filter glass and solidify chrome fills when data-effects is reduced (Calm default), with Appearance warning and docs for constrained rendering devices. Related to #1614.

* test(ui): harden Reduced effects glass e2e and docs wording

Parse Color Level 4 slash alpha so opacity asserts are not vacuously true, cover dialog/toast/overlay both ways with stable data-sn hooks, and soften troubleshooting copy that overstated the unmeasured diagnosis.

* docs(ui): lead constrained-GPU guidance with Reduced Motion

Rename the troubleshooting section to neutral GPU framing, point Appearance and docs at Reduced Motion first, and show the callout whenever Motion is off so Calm or Reduced effects alone do not hide the validated workaround.
This commit is contained in:
Anso
2026-07-12 22:45:50 -04:00
committed by GitHub
parent fb178871ad
commit c01f2479b9
21 changed files with 447 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+40 -4
View File
@@ -436,12 +436,48 @@
--sev-vuln: oklch(0.660 0.100 45);
}
/* Reduced effects: flatten the material (Calm only). Charts read the reduced
flag from the store; here we flatten the real card top-bevel token. */
[data-effects="reduced"] {
/* Reduced effects: lower-overhead rendering path (Calm / Reduced effects /
Readability). Flatten material, drop glass blur, and solidify translucent
chrome so constrained GPUs are not forced to sample backdrop-filter.
data-theme and data-effects both live on <html>, so token overrides use
combined selectors. Exceptions to the blur kill need a more-specific
!important rule, not a normal opt-out class.
Charts also read the reduced flag from the store. */
html[data-effects="reduced"] {
--card-bevel: none;
--pop-a: 1;
/* Dim (default theme when data-theme is dim or unset on first paint) */
--sidebar: oklch(var(--bg) 0 0);
}
[data-effects="reduced"] .animate-pulse {
html[data-theme="oled"][data-effects="reduced"] {
--sidebar: oklch(var(--bg) 0 0);
}
html[data-theme="light"][data-effects="reduced"] {
--sidebar: oklch(0.98 0 0);
}
/* Both properties: Chromium uses backdrop-filter; the WebKit-prefixed form
still appears in some engines. */
html[data-effects="reduced"] *,
html[data-effects="reduced"] *::before,
html[data-effects="reduced"] *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Direct-alpha glass surfaces (bg-popover/95, color-mix tab bar, etc.) stay
translucent after --pop-a: 1. Mark them with data-sn-glass and solidify here. */
html[data-effects="reduced"] [data-sn-glass="panel"] {
background-color: var(--popover);
}
html[data-effects="reduced"] [data-sn-glass="overlay"] {
background-color: var(--background);
}
html[data-effects="reduced"] [data-sn-glass="mobile-tabbar"] {
background-color: var(--card);
}
html[data-effects="reduced"] .animate-pulse {
animation: none;
}