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

works perfectly, thanks!

Is there any way to style such dialogs as well? E.g. the more-info-parts like

image

Or to ingest css which has priority over every other stuff?

e.g. the new show more links. I would like to have them in secondery color instead of primary. Currently it is style this way

.header > a, a:visited {
    color: var(--primary-color);
}

But I’m not able to find a point, where and how to change styles in such pop-ups.

Hello, rotating and resizing stop working since last update.
Any idea ?

Thanks a lot !

There is a big mess/change in .11

Everywhere either ha-icon has been renamed in ha-state-icon or sometimes (buttons, …) there is still the ha-icon but an additional ha-state-icon. You have to adopt it accordingly in your style.

What are you talking about exactly, be more specific.
If you are talking about icons inside picture-elements - try to apply the style to the state-badge.
Do some experiments by yourself.

Please see my answer above. ha-icon is not the anchor anymore.

I already told - use state-badge then… HA changes, styling have to be changed too…

?

I don’t have problems. I only said, that I have already answered, where you asked further things.

Now I see it. Yes. Very sad. All icon styling became not working.

It was animated before with this code, but now not

type: entities
entities:
  - entity: switch.tuya_smart_plug
    name: Ventilateur SALON
    icon: mdi:fan
    state_color: true
    style:
      hui-generic-entity-row:
        $:
          state-badge:
            $:
              ha-icon:
                $: |
                  ha-svg-icon {
                    animation: 
                      {% if is_state('switch.tuya_smart_plug', 'on') %} rotation 1s linear infinite {% endif %};
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }

Now I see it. Yes. Very sad. All icon styling became not working.

Just rotating and resizing not working, all others still ok.

I will try to find a way, thanks a lot for your help

As I wrote before - replace it with state-badge only.

Ok ok, thanks, i will try.
Best regards

This worked for me on 2021.11.1:

style:
  hui-generic-entity-row:
    $:
      state-badge:
        $:
          ha-state-icon:
            $:
              ha-icon:
                $: |
                  ha-svg-icon {
                  {% if is_state('switch.esp_a3f81c', 'on') %}
                    animation: rotation 1.0s linear infinite;
                   }
                  @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                  transform: rotate(360deg);
                    }
                  {% endif %}
                  }

Entities within auto-entities also needed a slight tweak:

style:
  hui-generic-entity-row:
    $:
      state-badge:
        $:
          ha-state-icon:
            $: |
              ha-svg-icon {
                 animation: wobbling 2s linear infinite alternate;
              }
              @keyframes wobbling {
              0% {
                transform: rotate(-10deg);
              }
              100% {
                transform: rotate(+10deg);
              }
              }

I´m using slider button card and I want to change the color of the big slider. If I change the primary-color in the theme I´m using the color change but I only want to change color in some of the slider button cards and not affect every other primary color.
When i try --primary-color: red; nothing happens. Is it not possible to change the primary-color in a card or am I missing something? If I for example instead use card-background-color that affect the spicific card I´m trying to change so card mod is working.

Perfect, rotation is baaack :sunglasses:
Thanks all :+1:

Check this, much simplier (add if…endif by yourself):

entities:
  - entity: fan.xiaomi_mijia_300_1
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
            {% if %}
              animation: rotation 1.0s linear infinite;
            {% endif %}
            }
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
1 Like

I just tried, perfect. Thanks a lot for your reactivity

I’ve started revising styles listed in this post due to the latest changes.

2 Likes

Thanks a lot for all the time you spend updating this post

Agreed!