🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
2372

Short: Found the error. Update changed behaviour, what worked before was broken now. Fixed it.

Long story:

Before:

      - type: conditional
        conditions:
          - entity: sensor.dwd_wetterwarnung_current_warning_level
            state_not: '0'
        card:
          type: entities
          entities:
            - type: custom:multiple-entity-row
              entity: sensor.dwd_wetterwarnung_current_warning_level
              name: WARNUNG
              toggle: false
              state_color: true
              show_state: true
              secondary_info: ''
              icon: mdi:exclamation-thick
              entities:
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_name
                  name: Warnung vor
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_start
                  format: time
                  name: Von
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_end
                  format: time
                  name: Bis
              state_header: Anzahl Warnungen
              column: true
          card_mod:
            style:
              .: |
                ha-card {
                  margin-left: -15px;
                  margin-right: -15px;
                  margin-top: -15px;
                  margin-bottom: -15px;
                  box-shadow: none;
                }
                :host {
                  --paper-item-icon-color: red;
                  --mdc-icon-size: 40px;
                }

After/Now - working again (icon is RED):

      - type: conditional
        conditions:
          - entity: sensor.dwd_wetterwarnung_current_warning_level
            state_not: '0'
        card:
          type: entities
          entities:
            - type: custom:multiple-entity-row
              entity: sensor.dwd_wetterwarnung_current_warning_level
              name: WARNUNG
              toggle: false
              state_color: true
              show_state: true
              secondary_info: ''
              icon: mdi:exclamation-thick
              entities:
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_name
                  name: Warnung vor
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_start
                  format: time
                  name: Von
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_end
                  format: time
                  name: Bis
              state_header: Anzahl Warnungen
              column: true
              card_mod:
                style:
                  .: |
                    :host {
                      --paper-item-icon-color: red;
                      --mdc-icon-size: 40px;
                    }
          card_mod:
            style:
              .: |
                ha-card {
                  margin-left: -15px;
                  margin-right: -15px;
                  margin-top: -15px;
                  margin-bottom: -15px;
                  box-shadow: none;
                }

So while --mdc-icon-size was still applied to the icon when targeting on the entities card, --paper-item-icon-color now only is working when being applied directly to the custom:multiple-entity-row card.

grafik

I´m good now.

1 Like