From 31a0f4b2ff9ddc15bb34cbc51e34ec2aa943f08d Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Thu, 12 Mar 2026 12:31:09 +0300 Subject: [PATCH] Add subtle animated gradient background to running target cards 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 --- server/src/wled_controller/static/css/cards.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/server/src/wled_controller/static/css/cards.css b/server/src/wled_controller/static/css/cards.css index 74f5059..913b43e 100644 --- a/server/src/wled_controller/static/css/cards.css +++ b/server/src/wled_controller/static/css/cards.css @@ -107,6 +107,14 @@ section { .card-running { 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 */