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:
@@ -255,7 +255,7 @@ function NotificationRow({
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={`glass rounded-xl p-3.5 flex items-start gap-3 transition ${
|
||||
className={`glass-card rounded-xl p-3.5 flex items-start gap-3 transition ${
|
||||
n.read ? "opacity-70" : ""
|
||||
}`}
|
||||
>
|
||||
@@ -340,7 +340,7 @@ function ClientActivityRow({
|
||||
const access = n.meta?.kind === "access-requests" ? n.meta : null;
|
||||
return (
|
||||
<div
|
||||
className={`glass rounded-xl p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
|
||||
className={`glass-card rounded-xl p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
|
||||
>
|
||||
<Icon className={`w-4 h-4 shrink-0 mt-0.5 ${color}`} />
|
||||
<div className="min-w-0 flex-1">
|
||||
|
||||
Reference in New Issue
Block a user