works perfectly, thanks!
Is there any way to style such dialogs as well? E.g. the more-info-parts like
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 
Thanks all 
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);
}
}
2 Likes
I just tried, perfect. Thanks a lot for your reactivity
Thanks a lot for all the time you spend updating this post
Agreed!