Hi all,
I learned a lot about icon styling and thanks a lot for the support. But I am searching for a method to animate the icon when I hover my mouse over the icon. E.g. to change colour, or change size as long as the mouse touches the icon.
Mabe some has an idea!
Hi!
Iāve learned a lot about card styling today but Iāve come across a minor issue I canāt figure out, and Iāll be really thankful if anyone can help.
I have a stack-in-card which looks something like this:
The three right side cards are mushroom template cards, and Iām trying to change secondary text color based on remaining units in my stock, currently displayed using a helper sensor entity (Detergente = detergent; Suavizante = softener; Tabletas = dishsoap).
With the dishwasher one, I have no problems as the secondary is just one line and one sensor, so I styled it like this:
card_mod:
style:
mushroom-state-info$: |
.container {
{% if(states("sensor.lavavajillas_restante")|int(0)<4) %}
--card-secondary-color: #9e4a4a;
}
{% else %}
{% endif%}But the washing machine one is driving me nuts because as the secondary is multiline, I canāt figure out how to style each of the two lines depending on the remaining stock of the two different sensors (detergent and softener)
If someone has an idea of how to solve this or maybe a turnaround to see at a glanze when Iām short on detergent etc, Iāll thank you a lot!
After looking at the code and testing mods the style for .secondary and .multiline_secondary { are tied together.
Hopefully I am wrong and there is another solution.
You are correct, to point in a direction for a fix that works for them is instead of using multiline_secondary, maybe just use an :after pseudo element on the .secondary element.
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
style:
mushroom-state-info$: |
.secondary {
color: blue !important;
}
.secondary:after {
content: 'test';
display: flex;
color: red;
}
Under climate card you wrote āno sliderā. But there is a slider. How can I change the color and the thickness of this slider?
Right now its like this:
And i want it to look like this:
You mean like this?
card_mod:
style: |
ha-state-icon:hover {
color: green !important;
}
or like this:
card_mod:
style: |
ha-state-icon:hover {
animation: charge 3s linear infinite;
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
or both:
card_mod:
style: |
ha-state-icon:hover {
animation: charge 3s linear infinite;
color: green;
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
This is the mushroom climate card:
no slider. what you are showing is either the more-info dialog for a climate entity, or the built in thermostat card for homeassistant. either case not mushroom related.
EDIT: actually its the better thermostat card:
still not mushroom related.
Oh you are right. Do you maybe know where I can find the css entities for that?
play around with this:
card_mod:
style:
bt-ha-control-circular-slider$: |
.arc {
stroke-width: 10px !important;
}
.background {
stroke-width: 10px !important;
}
FYI effectively identical pathing for the built in thermostat card:
card_mod:
style:
ha-state-control-climate-temperature$:
ha-control-circular-slider$: |
.arc {
stroke-width: 10px !important;
}
.background {
stroke-width: 10px !important;
}
exactly! Manny manny thanks for this
Awesome, thank you so much!
One last question. I am struggling to combine your code with mine.
card_mod:
style: |
bt-ha-control-circular-slider {
--clear-background-color: #e3ac55;
--control-circular-slider-color: #e3ac55;
--control-circular-slider-background: #f3f5fa;
--control-circular-slider-background-opacity: 1.0;
}
bt-ha-control-circular-slider$:
.arc {
stroke-width: 10px !important;
}
.background {
stroke-width: 10px !important;
}
If I put in only your code it works. If I put in only my code it works. But both together wont work. Do you have an idea?
HI, and thank you so much for trying!
I was thinking last night that maybe stacking 2 different template cards with single secondary one with everything but the second line and the other just with that second line and card mod them to align it may workā¦
Iāll try and post the code if I manage to achive it!
Meanwhile, if someone figures out an easier or different approach, here is the code for the full washing machine template card if it helps:
type: custom:mushroom-template-card
primary: Lavadora
multiline_secondary: true
secondary: |-
Detergente: {{states('sensor.detergente_restante')}}
Suavizante: {{states('sensor.suavizante_restante')}}
icon: mdi:washing-machine
badge_icon: >
{% if (states('binary_sensor.puerta_lavadora') == 'off') %}
mdi:door-closed
{% else %}
mdi:door-open
{% endif %}
badge_color: grey
entity: switch.lavadora
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
icon_color: >-
{% if is_state('input_select.estado_lavadora','Lavando') %}
#9e4a4a
{% elif is_state('input_select.estado_lavadora','Finalizada') %}
#4b874e
{% else %}
black
{% endif %}
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.container {
{% if(states("sensor.detergente_restante")|int(0)<4) %}
--card-secondary-color: #9e4a4a;
}
{% else %}
{% endif %}
.: |
ha-card {
border: 0px;
margin-top: -25px;
margin-left: 165px;
}
ha-state-icon {
{% if is_state('input_select.estado_lavadora','Lavando') %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
{% else %}
{% endif %}
}Dimitri posted a solution that may work for you.
Edit:
Actually, after the initial happiness, I checked out changing values of the condicional first line color, and all I manage to achieve is either the secondary color overrides both lines or nothing happensā¦
Iāll give it a thought to see if with your help I can work it around
Thanks!!
sorry for posting again,
i am struggling with my code. Does anybody know how to ichange the icon, only during the mouse is over the ic0n?
The code:
type: custom:mushroom-template-card
primary: |-
IR-Sender:
{{ 'ALARM' if (states("input_boolean.alert_ir_blocked") == 'on') else
'aus' if (states(entity) == 'off') else
'ein' if (states(entity) == 'on')
}}
multiline_secondary: true
secondary: '{{''bitte zurĆ¼cksetzen'' if states("input_boolean.alert_ir_blocked")== ''on''}}'
icon: mdi:leak
tap_action:
action: toggle
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''#636363'' }}'
badge_icon: '{{''mdi:exclamation'' if states("input_boolean.alert_ir_blocked")== ''on''}}'
badge_color: '#DC143C'
fill_container: false
entity: switch.k05_ir_sender
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape
{
--icon-symbol-size: 20px;
--icon-size: 40px;
--shape-color: transparent !important;
{% set state = states(config.entity) %}
{% if state == 'on' %}
--shape-animation: ping 2s infinite;
{% else %}
{% endif %}
{% if states("input_boolean.alert_ir_blocked")== 'on' %}
box-shadow: 0 0 0 1px #DC143C !important
{% else %}
{% endif %}
}
@keyframes ping
{
0% {box-shadow: 0 0 0 0 #DC143C }
90% {box-shadow: 0 0 0 3px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 14px;
}
.: |
ha-card{ margin-top: -0px;
border: none !important;
--card-primary-color: #E0E0E0;
--card-secondary-color:#DC143C;
}
ha-state-icon:hover
{
--icon-symbol-size: 25px;
}
Done!
Thank you so much both @dimitri.landerloos and @LiQuid_cOOled for helping!
I just left the secondary standard line empty (only with a space so it doesnāt go null) and then used both secondary:before and secondary:after and now each line changes its color depending on their respective sensors!!
This is the template card full code in case someone needs it:
type: custom:mushroom-template-card
primary: Lavadora
multiline_secondary: false
secondary: ' '
icon: mdi:washing-machine
badge_icon: |
{% if (states('binary_sensor.puerta_lavdora') == 'off') %}
mdi:door-closed
{% else %}
mdi:door-open
{% endif %}
badge_color: grey
entity: switch.lavadora
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
icon_color: |-
{% if is_state('input_select.estado_lavadora','Lavando') %}
#9e4a4a
{% elif is_state('input_select.estado_lavadora','Finalizada') %}
#4b874e
{%else%}
black
{% endif %}
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.secondary:before {
content: 'Detergente: {{states('sensor.detergente_restante')}}';
display: flex;
color: {% if(states("sensor.detergente_restante")|int(0)<4) %}
#9e4a4a;
{% else %}
{% endif%}
}
.secondary:after {
content: 'Suavizante: {{states('sensor.suavizante_restante')}}';
display: flex;
color: {% if(states("sensor.suavizante_restante")|int(0)<4) %}
#9e4a4a;
{% else %}
{% endif%}
}
.: |
ha-card {
border: 0px;
margin-top: -25px;
margin-left: 165px;
}
ha-state-icon {
{% if is_state('input_select.estado_lavadora','Lavando') %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
{% else %}
{% endif %}
}
Take a look in the initial post in this thread at this section:
Are there any ways to show MDI icons in the Mushroom Title card?
I am not sure but I use template cards for most of my titles to include an icon
type: custom:mushroom-template-card
primary: 'r a s p i s e r v e r '
icon: mdi:raspberry-pi
secondary: 's t a t s '
icon_color: blue
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.5rem;
--primary-text-color: white;
--secondary-text-color: green;
border: 1px;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 1.5rem;
}
Not directly without combining cards - or with using a pseudo element and then having a version of that MDI saved on your HA instance.
here is an example. i will say that adjusting the color of the mdi with this way of doing it, is quite difficult.
type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: Test
card_mod:
style: |
.title:before {
content: url('/local/mdi/mdi--car.svg');
display: flex;
width: 40px;
}
.title {
display: flex;
}
.subtitle:before {
content: url('/local/mdi/mdi--car.svg');
display: flex;
width: 40px;
}
.subtitle {
display: flex;
}