Add rotating gradient border on running LED target cards

Animated conic gradient spins around the card edge using CSS Houdini
@property for smooth angle interpolation. Skips the left edge when
a custom card color stripe is assigned (data-has-color attribute).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 11:18:19 +03:00
parent ff7b595032
commit 012e9f5ddb
3 changed files with 64 additions and 1 deletions

View File

@@ -102,7 +102,7 @@ export function wrapCard({
const actionsClass = type === 'template-card' ? 'template-card-actions' : 'card-actions';
const colorStyle = cardColorStyle(id);
return `
<div class="${type}${classes ? ' ' + classes : ''}" ${dataAttr}="${id}"${colorStyle ? ` style="${colorStyle}"` : ''}>
<div class="${type}${classes ? ' ' + classes : ''}" ${dataAttr}="${id}"${colorStyle ? ` style="${colorStyle}" data-has-color="1"` : ''}>
<div class="card-top-actions">
${topButtons}
<button class="card-remove-btn" onclick="${removeOnclick}" title="${removeTitle}">&#x2715;</button>

View File

@@ -978,6 +978,7 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap, valueSo
return wrapCard({
dataAttr: 'data-target-id',
id: target.id,
classes: isProcessing ? 'card-running' : '',
removeOnclick: `deleteTarget('${target.id}')`,
removeTitle: t('common.delete'),
content: `