I have created this card:
The ALARM test pulses as it should. but the pulse is not on the text it is on the cell. And if I remove the overflow-x: hidden !important; the x-slider pulses also. This is not correct and I need a solution for that. Does anyone has an idea how to make the pulse only for the text? I tried to put it in a container, but then nothings happens.
Thanks
this is for the pulse in line 2 of table A
:host table:nth-of-type(1) tr:nth-of-type(2) td {
color: #FF3B30;
font-weight: 700;
text-align: center;
animation: pulseText 1.2s ease-in-out infinite;
}
@keyframes pulseText {
0% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.3); opacity: 1; }
100% { transform: scale(1); opacity: 0.6; }
}
complete Code
type: markdown
content: >
{% set fl = '🔴' if
is_state('binary_sensor.golf_window_closed_left_front','on') else '🟢' %}
{% set fr = '🔴' if
is_state('binary_sensor.golf_window_closed_right_front','on') else '🟢' %}
{% set rr = '🔴' if
is_state('binary_sensor.golf_window_closed_right_back','on') else '🟢' %}
{% set rl = '🔴' if
is_state('binary_sensor.golf_window_closed_left_back','on') else '🟢' %}
{% set fl_txt = 'geöffnet' if
is_state('binary_sensor.golf_window_closed_left_front','on') else
'geschlossen' %}
{% set fr_txt = 'geöffnet' if
is_state('binary_sensor.golf_window_closed_right_front','on') else
'geschlossen' %}
{% set rr_txt = 'geöffnet' if
is_state('binary_sensor.golf_window_closed_right_back','on') else
'geschlossen' %}
{% set rl_txt = 'geöffnet' if
is_state('binary_sensor.golf_window_closed_left_back','on') else 'geschlossen'
%}
<table>
<!-- Zeile 1: Überschrift -->
<tr>
<td colspan="3">Status der Fenster</td>
</tr>
<!-- Zeile 2: Alarm -->
<tr>
<td colspan="3">
<span class="alarm-text">ALARM aktiv!</span>
</td>
</tr>
<!-- Zeile 3: Zeit/Info -->
<tr>
<td colspan="3">um: </td>
</tr>
</table>
<!-- Tabelle B–E: Sensoren Zeile 4–7 -->
<table>
<tr><td>{{ fl }}</td><td>Vorne links</td><td>{{ fl_txt }}</td></tr>
</table>
<table>
<tr><td>{{ fr }}</td><td>Vorne rechts</td><td>{{ fr_txt }}</td></tr>
</table>
<table>
<tr><td>{{ rr }}</td><td>Hinten rechts</td><td>{{ rr_txt }}</td></tr>
</table>
<table>
<tr><td>{{ rl }}</td><td>Hinten links</td><td>{{ rl_txt }}</td></tr>
</table>
card_mod:
style:
.: |
ha-card {
#height: 170px !important;
margin-top: 0px;
margin-bottom: 0px;
overflow-x: hidden !important;
overflow-y: hidden !important;
--mdc-icon-size: 16px;
/* feiner Rahmen mit Radius */
border: 1px solid #3c3c3c;
border-radius: 0px; /* dein gewünschter Radius */
/* untere Linie überschreiben */
border-bottom: 1px solid #7E7E7E; /* VW-Blau, kräftiger */
--card-primary-font-weight: normal;
--card-primary-line-height: 2.0;
--card-secondary-line-height: 1.3;
}:
ha-markdown $: >
:host table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 0;
}
:host table + table {
margin-top: 4px;
}
:host td {
padding: 4px 8px;
vertical-align: middle;
word-break: break-word;
}
/* Tabelle A: Überschrift/Alarme */ :host table:nth-of-type(1) tr td {
text-align: center;
} :host table:nth-of-type(1) tr:nth-of-type(1) td {
font-family: Audiowide, sans-serif;
color: #ffa500;
font-size: 18px;
font-weight: 600;
}
/* Zeile 2: Alarm (Overflow sichtbar für Ping) */ :host
table:nth-of-type(1) tr:nth-of-type(2) td {
color: #FF3B30;
font-weight: 700;
text-align: center;
position: relative;
overflow: visible; /* wichtig für ::after Ping-Kreis */
}
:host table:nth-of-type(1) tr:nth-of-type(3) td {
color: #FF3B30;
font-weight: 600;
}
/* Tabelle B–E: Sensorzeilen */ :host table:nth-of-type(n+2)
td:nth-child(1) {
width: 8%; min-width: 8%; max-width: 8%;
text-align: center;
font-size: 10px;
} :host table:nth-of-type(n+2) td:nth-child(2) {
width: 35%; min-width: 35%; max-width: 35%;
text-align: left;
font-weight: 600;
} :host table:nth-of-type(n+2) td:nth-child(3) {
width: 50%; min-width: 50%; max-width: 50%;
text-align: right;
color: #666;
}
:host table:nth-of-type(1) tr:nth-of-type(2) td {
color: #FF3B30;
font-weight: 700;
text-align: center;
animation: pulseText 1.2s ease-in-out infinite;
}
@keyframes pulseText {
0% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.3); opacity: 1; }
100% { transform: scale(1); opacity: 0.6; }
}