Hi,
is there a chance to get this also running for tile card? I did not find an example or a solution for it. wobbling is running, but nocht the ping:
tile-card: wobbling works, ping not!
- type: tile
entity: input_boolean.alert_open_cupra_window
name: Febster
vertical: false
features_position: bottom
card_mod:
style:
ha-tile-icon$: |
.container:before {
background: none !important;
}
:host {
position: relative;
overflow: visible;
transform: translate(8px, -2px);
will-change: transform;
}
.: |
ha-card {
--ha-card-border-radius: 0px;
--ha-card-border-color: #3c3c3c;
--ha-card-border-width: 1px;
}
ha-tile-icon {
--tile-icon-size: 15px;
--mdc-icon-size: 15px;
{% if is_state(config.entity, 'on') %}
--card-mod-icon: mdi:alarm-light-outline;
--card-mod-icon-color: red;
--mdc-icon-size: 15px;
{% elif is_state(config.entity, 'off') %}
--card-mod-icon: phu:lift-in-window-closed;
--card-mod-icon-color: green;
{% endif %}
}
/* Animation direkt auf das Icon anwenden */
ha-state-icon {
{% if is_state(config.entity,'on') %}
animation: ping 2s infinite, wobbling 0.5s linear infinite alternate;
{% endif %}
}
@keyframes ping {
0% { box-shadow: 0 0 7px 1px #f44336; }
100% { box-shadow: 0 0 2px 1px transparent; }
}
@keyframes wobbling {
0% { transform: rotate(-10deg); }
100% { transform: rotate(10deg); }
}
#info {
margin-left: 20px;
--tile-info-primary-font-size: 14px;
--tile-info-primary-color: orange;
--tile-info-primary-font-weight: bold;
--tile-info-secondary-font-size: 10px;
--tile-info-secondary-color: lime;
}
ha-tile-info$: |
.secondary {
visibility: hidden;
}
.secondary:before {
visibility: visible;
font-size: 10px;
font-style: normal;
{% if is_state(config.entity, 'on') %}
content: "Ein: {{ as_timestamp(states[config.entity].last_changed) | timestamp_custom('%H:%M Uhr') }}";
color: lime;
{% elif is_state(config.entity, 'off') %}
content: "Aus";
color: #7E7E7E;
font-style: italic;
{% endif %}
from markdown:
card_mod:
style:
ha-markdown $: >
/* Tabelle rechts ausrichten und ohne Box */ table, tr, td {
background: transparent !important;
border: none !important;
box-shadow: none !important;
} td[align="right"] { text-align: right !important; }
/* Logo zuverlässig anzeigen und skalieren */ img {
vertical-align: middle !important;
width: 100px !important;
height: auto !important;
display: inline-block !important;
}
/* Nur den Titel verschieben (nach oben und links), Box neutralisieren
*/ font[size="5"] {
position: relative;
top: -18px; /* vertikal anpassen */
left: -30px; /* horizontal nach links */
display: inline-block;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Ping-Container rund, zentriert, ohne eigene Box */
ha-markdown-element i {
display: inline-grid;
place-items: center;
position: relative;
width: 24px;
height: 24px;
border-radius: 50%;
background: transparent;
border: none;
box-shadow: none;
margin: 0;
padding: 0;
}
/* Der blinkende Ring als pseudo-Element */ ha-markdown-element
i::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
{% if states("binary_sensor.cupra_born_car_is_online")=="on" %}
animation: online 2s infinite;
{% else %}
animation: offline 1s infinite;
{% endif %}
}
/* WiFi-Icon im Kreis */ ha-icon {
--mdc-icon-size: 16px;
color: {% if states("binary_sensor.cupra_born_car_is_online")=="on" %}
#00CC00
{% else %}
#f44336
{% endif %} !important;
background: transparent;
border: none;
box-shadow: none;
margin: 0;
}
/* Keyframes: kreisförmiger, weicher Ping */ @keyframes online {
0% { box-shadow: 0 0 4px 2px #00CC00; }
100% { box-shadow: 0 0 10px 12px transparent; }
} @keyframes offline {
0% { box-shadow: 0 0 4px 2px #ff0000; }
100% { box-shadow: 0 0 4px 2px transparent; }
}