alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add subtle animated gradient background to running target cards

Browse Source 
Uses the existing --border-angle animation to sweep a faint accent
gradient across the card background in sync with the rotating border.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-12 12:31:09 +03:00
parent 9b0dcdb794
commit 31a0f4b2ff
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
server/src/wled_controller/static/css/cards.css
View File

@@ -107,6 +107,14 @@ section {
.card-running { .card-running {
border-color: transparent; border-color: transparent;
background: linear-gradient(
calc(var(--border-angle) + 45deg),
var(--card-bg) 0%,
color-mix(in srgb, var(--primary-color) 12%, var(--card-bg)) 40%,
var(--card-bg) 60%,
color-mix(in srgb, var(--primary-color) 8%, var(--card-bg)) 85%,
var(--card-bg) 100%
);
} }
/* When card has a custom color stripe, keep it and shift the animated border away from the left edge */ /* When card has a custom color stripe, keep it and shift the animated border away from the left edge */