The reason is simple, really.
Sooner or later someone will make a card that requires a class parameter, and then card-mod <3.0 will cause trouble.
Kind of like how styling picture-elements has been impossible because they already had a style parameter.
It really should have been card_mod from the start.
See, I knew you didn’t do it to spite me 
*…not only to …
Sure, this is what happens
The header stays at the top, while there’s a black bar down below. The configuration is probably doing something (hence the black bar) but the header remains on top (and covers part of the interface).
I can confirm this is not browser-dependent (I know Safari is a bit problematic in some ways, but the same behavior can be seen on Chromium)
Thank you for the great work in Card-mod.
I am using Glance card with a lock and would like to change the icon color to Red. The icon is still showing as Yeloow.
entities:
- entity: lock.front_door
show_entity_picture: true
state:
- icon: 'mdi:door'
style: |
:host {
--paper-item-icon-color: red ;
}
tap_action:
action: toggle
service: lock.lock
service_date:
entity_id: lock.front_door
type: glance
Wrong thread, go to the non-theme one.
Thank you. Have moved it.
I have the following in my themes.yaml and this is working great. Is it possible to specify more entities?
card-mod-card: |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
ha-icon[data-entity="fan.kinderzimmer"][data-state="on"] {
animation: spin 4s infinite linear;
}
card-mod-row-yaml: |
"*:first-child$": |
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
state-badge {
{% if config.entity == 'fan.kinderzimmer' and is_state(config.entity, 'on') %}
animation: spin 4s infinite linear;
{% endif %}
}
Just use {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}.
Thank you for you answer.
But i want it for fan.kinderzimmer and switch.abzug.
Why would you want your switch’s icon to spin? Just make a template fan.
Hi Kendell… with card_-mod 3 just wondering if I should update my theme at all? On the wiki it looks nothing like the custom header mods I previously used. It is still working of course but is this following still the best theme mod?
# CUSTOM-HEADER MODS
card-mod-theme: ios-dark-mode-blue-red-mod
card-mod-root-yaml: |
.: |
.edit-mode, app-header, app-toolbar {
background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
}
header-height: 48px
It is an hood.
I don’t know what that word means in this context. Maybe your translator isn’t working, because when I think of that word, I think of the upper part of a jacket that goes over your head.
Not that much, but something you could do even before 3.0.0 would be changing that to:
# CUSTOM-HEADER MODS
card-mod-theme: ios-dark-mode-blue-red-mod
card-mod-root: |
.edit-mode, app-header, app-toolbar {
background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
}
header-height: 48px
And you want it to spin when it is on, correct?
Yes, that is right. And also the fan.kinderzimmer
What icon do you have?