diff --git a/sternwarte-homeassistant-card/dist/sternwarte-card.js b/sternwarte-homeassistant-card/dist/sternwarte-card.js
index 43b47e2..25dc62f 100644
--- a/sternwarte-homeassistant-card/dist/sternwarte-card.js
+++ b/sternwarte-homeassistant-card/dist/sternwarte-card.js
@@ -391,8 +391,9 @@ class SternwarteCard extends HTMLElement {
_boolBadge(label, entityId, onText = "Aktiv", offText = "Aus", extraClass = "") {
const state = this._state(entityId);
const on = state?.state === "on";
+ const animStyle = (on && extraClass) ? ` style="animation-delay: -${Date.now() % 1000}ms"` : "";
return `
-
+
${label}
${on ? onText : offText}
@@ -1093,12 +1094,16 @@ class SternwarteCard extends HTMLElement {
background: rgba(76, 175, 80, 0.12);
border-color: rgba(76, 175, 80, 0.3);
}
- .badge.moving.on,
- .badge.rain.on {
+ .badge.moving.on {
animation: moving-badge-blink 1s linear infinite;
background: rgba(255, 179, 0, 0.2);
border-color: rgba(255, 179, 0, 0.55);
}
+ .badge.rain.on {
+ animation: rain-badge-blink 1s linear infinite;
+ background: rgba(220, 50, 50, 0.2);
+ border-color: rgba(220, 50, 50, 0.55);
+ }
.badge-label {
display: block;
font-size: 12px;
@@ -1120,6 +1125,16 @@ class SternwarteCard extends HTMLElement {
box-shadow: 0 0 14px rgba(255, 179, 0, 0.35);
}
}
+ @keyframes rain-badge-blink {
+ 0%, 100% {
+ opacity: 1;
+ box-shadow: 0 0 0 rgba(220, 50, 50, 0);
+ }
+ 50% {
+ opacity: 0.45;
+ box-shadow: 0 0 14px rgba(220, 50, 50, 0.5);
+ }
+ }
.controls {
display: grid;
grid-template-columns: repeat(3, 1fr);