thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.14k stars 168 forks source link

Tiles from Sections are resized after core update to 2024.8 #396

Open sheaur opened 1 month ago

sheaur commented 1 month ago

Before: Screenshot_20240814_160248_Home Assistant

After: Screenshot_20240814_161028_Home Assistant

sheaur commented 1 month ago
type: tile
name: Alarma Metereológica
entity: binary_sensor.meteo_alarma
show_entity_picture: true
vertical: false
hide_state: false
icon_tap_action:
  action: none
tap_action:
  action: more-info
card_mod:
  style:
    .: |
      ha-card {
        {% if is_state_attr("binary_sensor.meteo_alarma","awareness_level", "2; yellow; Moderate") %}
        --tile-color: yellow !important;
        {%- else -%}
        {% if is_state_attr("binary_sensor.meteo_alarma","awareness_level", "3; orange; Severe") %}
        --tile-color: orange !important;
        {%- else -%}
        {% if is_state_attr("binary_sensor.meteo_alarma","awareness_level", "4; red; High") %}
        --tile-color: red !important;
        {% endif %}
        {% endif %}
        {% endif %}
        ;
        }
    ha-tile-info$: |
      .secondary {
       visibility: hidden;
      }
      .secondary:before {
       visibility: visible;
       white-space: pre-wrap !important;
       content: '                                                                                                             '     
                "Empieza: {{ as_timestamp(state_attr("binary_sensor.meteo_alarma","onset")) | timestamp_custom ("%d-%m-%Y   %H:%M") }} " '                                                                '
                "Expira: {{ as_timestamp(state_attr("binary_sensor.meteo_alarma","expires")) | timestamp_custom ("    %d-%m-%Y   %H:%M") }} " '                                                           '
                '     ‎                                                                                                                                                                                    '
                " {{ state_attr("binary_sensor.meteo_alarma","headline") }}. " '                                                                                                                           '
                " {{ state_attr("binary_sensor.meteo_alarma","description") }} "   
      }
visibility:
  - condition: state
    entity: binary_sensor.meteo_alarma
    state: 'on'
kafisc1 commented 1 month ago

Can confirm this issue.

sheaur commented 1 month ago

The fault is in card-mod with the latest update from homeassistant

Alessjo99 commented 1 month ago

Hi, do you know if an update to Card Mod is planned?

mvanhelmont commented 1 month ago

I also have the same issue, any workaround known?

sheaur commented 1 month ago

I solved it without updating card mod

type: tile
name: Alarma Metereológica
entity: binary_sensor.meteo_alarma
show_entity_picture: true
vertical: false
hide_state: false
icon_tap_action:
  action: none
tap_action:
  action: more-info
visibility:
  - condition: state
    entity: binary_sensor.meteo_alarma
    state: 'on'
card_mod:
  style:
    .: |
      ha-card {
        {%if is_state('binary_sensor.meteo_alarma', 'off')%}
        --card-mod-icon-color: grey;
        {%- else -%}
        {% if is_state_attr('binary_sensor.meteo_alarma','awareness_level', '2; yellow; Moderate') %}
        --card-mod-icon-color: yellow;
        {%- else -%}
        {% if is_state_attr('binary_sensor.meteo_alarma','awareness_level', '3; orange; Severe') %}
        --card-mod-icon-color: orange;
        {%- else -%}
        {% if is_state_attr('binary_sensor.meteo_alarma','awareness_level', '4; red; High') %}
        --card-mod-icon-color: red;
        {% endif %}
        {% endif %}
        {% endif %}
        {% endif %}
        ;
        }
        ha-card {
        --tile-color: transparent !important;
        }
        ha-tile-info {
        height: 115px;
        }
    ha-tile-info$: |
      .primary {
       visibility: visible; 
      }
      .secondary {
       visibility: visible;
      }
      .secondary:after {
       visibility: visible;
       position: absolute;
       left: 0px;
       right: -180px;
       top: 38px;
       white-space: pre-wrap !important;
       content:                                                                                                                                                                        
                "Empieza: {{ as_timestamp(state_attr("binary_sensor.meteo_alarma","onset")) | timestamp_custom ("%d-%m-%Y    %H:%M") }}                                                             "                                                              
                "Expira: {{ as_timestamp(state_attr("binary_sensor.meteo_alarma","expires")) | timestamp_custom ("    %d-%m-%Y    %H:%M") }}                                                        "     
                '-                                                                                             '
                " {{ state_attr("binary_sensor.meteo_alarma","headline") }}. "                                                                                                                           
                " {{ state_attr("binary_sensor.meteo_alarma","description") }} "   
      }