#Card-modding Mushroom Select Card
gusty mango
You'll definitely have to use card-mod. I put some extra stuff in the code if you want to play around with it a bit more. ```yaml
type: custom:mushroom-select-card
entity: input_select.night_time_light_color_selector
card_mod:
style: |
:host {
--mush-icon-size: 60px;
--card-primary-font-size: 20px !important;
--card-secondary-font-size: 10px !important;
}
ha-state-icon {
{% if is_state('light.living_room_lights', 'on') %}
--icon-color: orange !important;
animation: spin 3s linear infinite;
{% else %}
--icon-color: gray !important;
{% endif %}
}
mushroom-shape-icon {
--shape-color: transparent !important;
{% if is_state('light.living_room_lights', 'on') %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
hot wasp
Awesome! Thank you so much for the help!
gusty mango
You're welcome.
Since I noticed you were using a fan's state, I added an animation to the code above to spin the icon when on.
hot wasp
Since I noticed you were using a fan's state, I added an animation to the code a...
Wow cool, thanks for that!
hot wasp
@gusty mango If I could trouble you again...
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
hot wasp
You'll definitely have to use card-mod. I put some extra stuff in the code if yo...
How do I integrate this with this?
It will do the ping animation when state = on
gusty mango
Updated the code above with your request.
I've used that bit of code too. It accessible the variables in a different way. I don't understand it was well but have seen it used before.
type: custom:mushroom-template-card
primary: Icon and shape animations
icon: mdi:robot-outline
icon_color: deep-purple
entity: input_boolean.tester
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
99% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
ha-state-icon {
animation: spin 2s linear infinite reverse;
}
Can't seem to get this to work, just the ping alone is ok but with the state it doesn't
card_mod: style: mushroom-shape-icon$: | ha-state-icon { {% if is_state('input_boolean.living_room_aircon_group', 'on') %} .shape { --shape-animation: ping 2s infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); } 99% { box-shadow: 0 0 5px 15px transparent; } }
hot wasp
Figured it out!
card_mod: style: mushroom-shape-icon$: | {% if is_state('input_boolean.living_room_aircon_group', 'on') %} .shape { --shape-animation: ping 4s infinite; } @keyframes ping { 0% {box-shadow: 0 0 0 0 #6495ED99;} 70% {box-shadow: 0 0 0 10px transparent;} 100% {box-shadow: 0 0 0 0 transparent;} } {% endif %}
gusty mango
Hey. Sorry I missed your ping. This should also work. They're different methods of syntax (or accessing the elements which I don't completely understand.)jinja card_mod: style: | mushroom-shape-icon { --shape-color: transparent !important; {% if is_state('light.living_room_lights', 'on') %} --shape-animation: ping 2s infinite; {% endif %} } @keyframes ping { 0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);} 70% {box-shadow: 0 0 0 10px transparent;} 100% {box-shadow: 0 0 0 0 transparent;} } In your method, the IF statement can even be moved to wrap just the --shape-animation (like in my example) to allow handling of different options. The keyframes don't necessarily need to be inside the IF.