From ce53ca687252b4b3b6efef18548e89694b1d76c0 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sun, 5 Apr 2026 12:23:39 +0300
Subject: [PATCH] feat: add card glare effect to dashboard and perf chart cards

Extend cursor-tracking spotlight to .dashboard-target and
.perf-chart-card elements with a smaller 100px radius suited
for compact cards.
---
 .../src/wled_controller/static/css/cards.css  | 30 +++++++++++++++++--
 .../wled_controller/static/css/dashboard.css  |  3 ++
 .../static/js/core/card-glare.ts              |  2 +-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/server/src/wled_controller/static/css/cards.css b/server/src/wled_controller/static/css/cards.css
index b737b92..e2c70b8 100644
--- a/server/src/wled_controller/static/css/cards.css
+++ b/server/src/wled_controller/static/css/cards.css
@@ -121,7 +121,9 @@ section {
 
 /* ── Card glare effect ── */
 .card-glare::after,
-.template-card.card-glare::after {
+.template-card.card-glare::after,
+.dashboard-target.card-glare::after,
+.perf-chart-card.card-glare::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -138,12 +140,16 @@ section {
 }
 
 .card-glare::after,
-.template-card.card-glare::after {
+.template-card.card-glare::after,
+.dashboard-target.card-glare::after,
+.perf-chart-card.card-glare::after {
     opacity: 1;
 }
 
 [data-theme="light"] .card-glare::after,
-[data-theme="light"] .template-card.card-glare::after {
+[data-theme="light"] .template-card.card-glare::after,
+[data-theme="light"] .dashboard-target.card-glare::after,
+[data-theme="light"] .perf-chart-card.card-glare::after {
     background: radial-gradient(
         circle 200px at var(--glare-x, 50%) var(--glare-y, 50%),
         rgba(255, 255, 255, 0.12) 0%,
@@ -151,6 +157,24 @@ section {
     );
 }
 
+/* Smaller spotlight for compact dashboard/perf cards */
+.dashboard-target.card-glare::after,
+.perf-chart-card.card-glare::after {
+    background: radial-gradient(
+        circle 100px at var(--glare-x, 50%) var(--glare-y, 50%),
+        rgba(255, 255, 255, 0.04) 0%,
+        transparent 70%
+    );
+}
+[data-theme="light"] .dashboard-target.card-glare::after,
+[data-theme="light"] .perf-chart-card.card-glare::after {
+    background: radial-gradient(
+        circle 100px at var(--glare-x, 50%) var(--glare-y, 50%),
+        rgba(255, 255, 255, 0.15) 0%,
+        transparent 70%
+    );
+}
+
 /* ── Running target: rotating gradient border ── */
 @property --border-angle {
     syntax: '<angle>';
diff --git a/server/src/wled_controller/static/css/dashboard.css b/server/src/wled_controller/static/css/dashboard.css
index 4308937..df774e9 100644
--- a/server/src/wled_controller/static/css/dashboard.css
+++ b/server/src/wled_controller/static/css/dashboard.css
@@ -91,6 +91,8 @@
 }
 
 .dashboard-target {
+    position: relative;
+    overflow: hidden;
     display: grid;
     grid-template-columns: 1fr auto auto;
     align-items: center;
@@ -393,6 +395,7 @@
     padding: 10px 0 0;
     min-width: 0;
     position: relative;
+    overflow: hidden;
     transition: box-shadow var(--duration-normal) ease;
 }
 
diff --git a/server/src/wled_controller/static/js/core/card-glare.ts b/server/src/wled_controller/static/js/core/card-glare.ts
index 8feb007..7613161 100644
--- a/server/src/wled_controller/static/js/core/card-glare.ts
+++ b/server/src/wled_controller/static/js/core/card-glare.ts
@@ -6,7 +6,7 @@
  * overlay via the ::after pseudo-element defined in cards.css.
  */
 
-const CARD_SEL = '.card, .template-card';
+const CARD_SEL = '.card, .template-card, .dashboard-target, .perf-chart-card';
 
 let _active: Element | null = null;   // currently illuminated card element
 let _cachedRect: DOMRect | null = null; // cached bounding rect for current card