Continuing the discussion from 
Card-mod - Add css styles to any lovelace card:
Hi Everyone,
Got a strange issue with my state badges, the styling has changed by itself, not sure if it’s a cardmod or HA update that broke something.
Same issue accross different devices and browsers, even with the companion app on iOS.
- Badge size is a uniform 65px, but only 2 are showing the correct size
- The garage door badge is supposed to blink red when open and constant green when closed, now stays the same and shows no animation
- The power outage badge should be conditional and only appear depending on a sensor state and should blink red, now appears contantly and shows no animation
Here’s my code below…
theme: “”
path: default_view
title: Home
icon: “”
layout:
width: 300
max_cols: 10
badges:
- entity: device_tracker.i3_94_2
name: Dad’s i3 Location
image: /local/images/bmw_i3_2018.jpg
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color: #000 !important;
}
.: |
:host {
{% if is_state(‘device_tracker.i3_94_2’, ‘home’) %} --label-badge-red: #03A9F4; {% endif %};
{% if not is_state(‘device_tracker.i3_94_2’, ‘home’) %} --label-badge-red: #fd79a8; {% endif %};
color: #fff;
–ha-label-badge-size: 65px;
–ha-label-badge-title-font-size: 13px;
–ha-label-badge-label-color: black; font-size: 15px !important;
} - entity: sensor.i3_94_charging_level_hv
name: Dad’s i3 Battery
style: |
:host {
–ha-label-badge-size: 65px;
–ha-label-badge-title-font-size: 13px;
–label-badge-red: #03A9F4;
–ha-label-badge-label-color: black; font-size: 15px !important;
#–label-badge-text-color: green;
} - entity: binary_sensor.i3_94_charging_status
icon: mdi:ev-station
name: Dad’s i3 Charger
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.value {
color: {{ “var(–state-icon-active-color)” if is_state(‘binary_sensor.i3_94_charging_status’, ‘on’) }} !important;
}
.: |
:host {
–ha-label-badge-size: 65px;
–ha-label-badge-title-font-size: 13px;
–ha-label-badge-label-color: black; font-size: 15px !important;
} - entity: device_tracker.i3_120_2
name: Mom’s i3 Location
image: /local/images/bmw_i3_2020.jpg
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color: #000 !important;
}
.: |
:host {
{% if is_state(‘device_tracker.i3_120_2’, ‘home’) %} --label-badge-red: #03A9F4; {% endif %};
{% if not is_state(‘device_tracker.i3_120_2’, ‘home’) %} --label-badge-red: #fd79a8; {% endif %};
color: #fff;
–ha-label-badge-size: 65px;
–ha-label-badge-title-font-size: 13px;
–ha-label-badge-label-color: black; font-size: 15px !important;
} - entity: sensor.i3_120_charging_level_hv
name: Mom’s i3 Battery
style: |
:host {
–ha-label-badge-size: 65px;
–ha-label-badge-title-font-size: 13px;
–label-badge-red: #03A9F4;
–ha-label-badge-label-color: black; font-size: 15px !important;
#–label-badge-text-color: green;
} - entity: binary_sensor.i3_120_charging_status
icon: mdi:ev-station
name: Mom’s i3 Charger
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.value {
color: {{ “var(–state-icon-active-color)” if is_state(‘binary_sensor.i3_120_charging_status’, ‘on’) }} !important;
}
.: |
:host {
–ha-label-badge-size: 65px;
–ha-label-badge-title-font-size: 13px;
–ha-label-badge-label-color: black; font-size: 15px !important;
} - entity: binary_sensor.garage_door
icon: mdi:garage-variant
tap_action:
action: call-service
service: shell_command.garage
hold_action:
action: more-info
style: |
@keyframes blinker { 50% { opacity: 0; } } :host {
color: {% if
is_state(‘binary_sensor.garage_door’, ‘on’) %} red {%else %} white {%
endif %}; --label-badge-red: {% if
is_state(‘binary_sensor.garage_door’, ‘on’) %} red {% else %} white
{%endif %}; --label-badge-text-color: {% if
is_state(‘binary_sensor.garage_door’, ‘on’) %} red {% else %} lime
{%endif %}; animation: {% if is_state(‘binary_sensor.garage_door’,
‘on’) %} blinker 2s linear infinite {%endif %};
–ha-label-badge-size: 65px;
–ha-label-badge-title-font-size: 13px;
–ha-label-badge-label-color: black; font-size: 15px !important;
} - entity: alarm_control_panel.home_alarm
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color: #000 !important;
}
.: |
:host {
–ha-label-badge-size: 65px;
–ha-label-badge-title-font-size: 13px;
–ha-label-badge-label-color: black; font-size: 15px !important;
{% if is_state(‘alarm_control_panel.home_alarm’, ‘disarmed’) %}
–label-badge-red: #03A9F4;
{% endif %};
color: #fff;
} - entity: sensor.victron_vebus_state
name: Power Outage
icon: mdi:transmission-tower
style: |
@keyframes blinker { 50% { opacity: 0; } }
:host {
–ha-label-badge-size: 65px;
–ha-label-badge-title-font-size: 13px;
–label-badge-background-color: red;
–ha-label-badge-label-color: black; font-size: 15px !important;
animation: blinker 2s linear infinite;
display:
{% if not is_state(‘sensor.victron_vebus_state’, ‘9’) %}
none;
{% endif %}
}
