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:
@@ -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}">✕</button>
|
||||
|
||||
@@ -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: `
|
||||
|
||||
Reference in New Issue
Block a user