refactor(glass): R10 S3a — glass-card notification rows + perf-aware .overlay-backdrop
- NotificationsPanel per-row .glass -> glass-card (the rows are cards, not panel surface). - New .overlay-backdrop recipe (4px blur = backdrop-blur-xs) with a data-perf override that DROPS the blur. The viewport-sized modal scrim blur (Modal/PlayerModal/Welcome) was a raw backdrop-blur-xs utility that survived perf mode while every .glass had its blur dropped — the most expensive blur in the app. Overlays keep their bg-black/NN. - gotcha: write ONLY the standard backdrop-filter; a manual -webkit- line makes lightningcss drop the standard prop (webkit-only output -> no blur in Firefox).
This commit is contained in:
@@ -479,6 +479,17 @@ html[data-perf="1"] body {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* Full-viewport modal scrim blur, as a named recipe so perf mode can DROP it. This is the most
|
||||
expensive blur in the app (viewport-sized); as a raw `backdrop-blur-xs` utility on each overlay
|
||||
it survived data-perf while every .glass surface had its blur dropped. Overlays keep their own
|
||||
bg-black/NN; this adds only the (perf-aware) 4px blur, matching backdrop-blur-xs. */
|
||||
.overlay-backdrop {
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
html[data-perf="1"] .overlay-backdrop {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* Skip layout/paint for off-screen feed cards so long lists stay smooth while
|
||||
scrolling. contain-intrinsic-size reserves an approximate box so the scrollbar
|
||||
stays stable; `auto` lets the browser remember each card's real size after it
|
||||
|
||||
Reference in New Issue
Block a user