perf(dashboard): remove invisible card blur + redundant shadow layers
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:
parent
b73389adea
commit
df6815c2cc
1 changed files with 17 additions and 14 deletions
|
|
@ -82,11 +82,11 @@ body {
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
border-bottom-right-radius: 24px;
|
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:
|
box-shadow:
|
||||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
0 8px 30px rgba(0, 0, 0, 0.34),
|
||||||
0 4px 16px rgba(0, 0, 0, 0.2),
|
|
||||||
0 0 60px rgba(var(--accent-rgb), 0.06),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||||
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
|
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: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
margin: 20px;
|
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:
|
box-shadow:
|
||||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
0 8px 28px rgba(0, 0, 0, 0.34),
|
||||||
0 4px 16px rgba(0, 0, 0, 0.2),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -8915,8 +8916,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card {
|
.service-card {
|
||||||
background: rgba(18, 18, 22, 0.9);
|
/* backdrop-filter dropped: the 90% opaque bg made blur(12px) invisible (x3 cards,
|
||||||
backdrop-filter: blur(12px);
|
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-radius: 16px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
padding: 20px 22px;
|
padding: 20px 22px;
|
||||||
|
|
@ -9687,8 +9689,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card-dashboard {
|
.stat-card-dashboard {
|
||||||
background: rgba(18, 18, 22, 0.9);
|
/* backdrop-filter dropped: 90% opaque bg made blur(12px) invisible (x3, GPU waste);
|
||||||
backdrop-filter: blur(12px);
|
0.97 keeps it looking solid. */
|
||||||
|
background: rgba(18, 18, 22, 0.97);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
@ -10094,9 +10097,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
|
||||||
.activity-feed-container {
|
.activity-feed-container {
|
||||||
/* Premium glassmorphic foundation */
|
/* Premium glassmorphic foundation */
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(135deg,
|
||||||
rgba(26, 26, 26, 0.95) 0%,
|
rgba(26, 26, 26, 0.97) 0%,
|
||||||
rgba(18, 18, 18, 0.98) 100%);
|
rgba(18, 18, 18, 0.99) 100%);
|
||||||
backdrop-filter: blur(12px) saturate(1.1);
|
/* backdrop-filter dropped: 95-99% opaque bg already hid the blur (GPU waste). */
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue