feat: add card glare effect to dashboard and perf chart cards
Lint & Test / test (push) Has been cancelled
Lint & Test / test (push) Has been cancelled
Extend cursor-tracking spotlight to .dashboard-target and .perf-chart-card elements with a smaller 100px radius suited for compact cards.
This commit is contained in:
@@ -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>';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user