danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

perf(dashboard): remove invisible card blur + redundant shadow layers

Browse source 
Profiling the actually-painted dashboard found two pure-waste GPU costs (no visual
payoff), reclaimable with zero degradation:

- backdrop-filter on cards whose backgrounds are already 90-99% opaque, so the blur
  is invisible: service-card (x3), stat-card-dashboard (x3), activity-feed-container.
  Dropped the filter, nudged opacity to ~0.97 so the unblurred sliver is imperceptible.
- redundant/near-invisible box-shadow layers on the two biggest elements: page-shell
  (near-fullscreen — collapsed two stacked outer shadows to one) and sidebar (dropped
  a duplicate layer + a 0 0 60px accent glow at 6% opacity that's barely visible but a
  costly 60px-blur pass).

Targets the DURING-USE cost, not idle. sidebar-header keeps its blur (genuinely
translucent), and the cursor blob is untouched (that one's a real visual tradeoff).
This commit is contained in:
BoulderBadgeDad 2026-06-22 17:10:40 -07:00
parent b73389adea
commit df6815c2cc
1 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
webui/static/style.css
View file

@ -82,11 +82,11 @@ body {
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom-right-radius: 24px;
/* Soft floating shadow with inner glow */
/* Soft floating shadow with inner glow — dropped the 0 4px 16px duplicate and the
0 0 60px accent glow (60px blur at 6% opacity: nearly invisible but a costly
shadow pass). One outer + the two insets read the same. */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 4px 16px rgba(0, 0, 0, 0.2),
0 0 60px rgba(var(--accent-rgb), 0.06),
0 8px 30px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
@ -8256,10 +8256,11 @@ body.helper-mode-active #dashboard-activity-feed:hover {
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin: 20px;
/* Soft floating shadow */
/* Soft floating shadow — one outer layer instead of two stacked (this is a
near-fullscreen element, so each shadow pass is expensive); the single
slightly-stronger blur reads the same. */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 4px 16px rgba(0, 0, 0, 0.2),
0 8px 28px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@ -8915,8 +8916,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.service-card {
background: rgba(18, 18, 22, 0.9);
backdrop-filter: blur(12px);
/* backdrop-filter dropped: the 90% opaque bg made blur(12px) invisible (x3 cards,
pure GPU waste). Bumped to 0.97 so the now-unblurred sliver is imperceptible. */
background: rgba(18, 18, 22, 0.97);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 20px 22px;
@ -9687,8 +9689,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.stat-card-dashboard {
background: rgba(18, 18, 22, 0.9);
backdrop-filter: blur(12px);
/* backdrop-filter dropped: 90% opaque bg made blur(12px) invisible (x3, GPU waste);
0.97 keeps it looking solid. */
background: rgba(18, 18, 22, 0.97);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 20px;
@ -10094,9 +10097,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.activity-feed-container {
/* Premium glassmorphic foundation */
background: linear-gradient(135deg,
rgba(26, 26, 26, 0.95) 0%,
rgba(18, 18, 18, 0.98) 100%);
backdrop-filter: blur(12px) saturate(1.1);
rgba(26, 26, 26, 0.97) 0%,
rgba(18, 18, 18, 0.99) 100%);
/* backdrop-filter dropped: 95-99% opaque bg already hid the blur (GPU waste). */
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);