mirror of
https://github.com/smittix/intercept.git
synced 2026-04-26 23:59:59 -07:00
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:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user