State badges styling/animation stopped working

Continuing the discussion from :small_blue_diamond: 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.

  1. Badge size is a uniform 65px, but only 2 are showing the correct size
  2. The garage door badge is supposed to blink red when open and constant green when closed, now stays the same and shows no animation
  3. 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 %}
    }

Firstly, please format your code properly:

Secondly, read the release notes:

image

Thanks a mil @Troon it worked, I clearly missed the breaking changes (Holiday mood!) and didn’t see the new format had already applied to the 2 badges.

Newbie error indeed :face_with_peeking_eye:

1 Like