perf(css): fix rendering slowdown on low-power hardware (Pi5)

- Remove backdrop-filter: blur(5px) from .card and .panel — on ARM/Linux
  Chromium this is software-rendered, causing severe CPU overhead at 42+
  instances. The opaque surface gradient makes blur imperceptible anyway.
- Remove inset vignette box-shadow from .panel added in 51c1014
- Rewrite panel-pulse keyframes to animate opacity only (was box-shadow,
  which triggers CPU repaint every frame; opacity is compositor-only)
- Gate body::before and .visuals-container::after scanline pseudo-elements
  under [data-animations="off"] — the toggle was blind to both
- Gate panel-indicator pulse under [data-animations="off"] for consistency

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
2026-04-19 14:54:34 +01:00
parent c70c93c814
commit 1dc45a285d
2 changed files with 12 additions and 11 deletions

View File

@@ -140,7 +140,6 @@
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(5px);
}
.card-header {
@@ -177,8 +176,7 @@
border: 1px solid rgba(74, 163, 255, 0.24);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm), inset 0 0 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(5px);
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@supports (clip-path: polygon(0 0)) {
@@ -234,14 +232,8 @@
}
@keyframes panel-pulse {
0%, 100% {
box-shadow: 0 0 4px var(--status-online), 0 0 8px rgba(56, 193, 128, 0.4);
opacity: 1;
}
50% {
box-shadow: 0 0 8px var(--status-online), 0 0 16px rgba(56, 193, 128, 0.6);
opacity: 0.85;
}
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.panel-indicator.active {
@@ -256,6 +248,10 @@
}
}
[data-animations="off"] .panel-indicator.active {
animation: none;
}
.panel-content {
padding: var(--space-3);
}