Iāll tackle it this evening.
Have you reloaded or reinstalled Mushroom to see if that resolves the issue?
It scares me to reinstall it. I have so many years invested with coding. I would hate for something to go wrong. But I do update it when thereās one available so thatās kind of like reloading it isnāt it?
Just make a backup and download it to your PC prior to the redownloading. Youāll be surprised how little redownloading or even uninstalling an reinstalling HACS programs affects your setup.
With the assistance I give folks, I am constantly adding and removing HACS modules.
If it makes you that uncomfortable, then donāt do it. I donāt have another resolution beyond that.
It works!!! My friend, you just canāt imagine how much you helped me!!! I couldnāt find the answer anywhere! I am very grateful to you!!!
Happy to assist! I made an adjustment in the code. I had the fan going in reverse. -360 vs `360ā
2 Likes
Please look at my problem, I donāt have the skill to solve this problem myselfā¦
thank you so much for your help
Your template logic is looking for an ON or OFF state when it needs to point at the hvac_action atrribute of the entity.
For example:
icon_color: |
{{ 'red' if state_attr('climate.otoplenie_zal', 'hvac_action') ==
'heating' else ' disabled' }}
Full card
type: custom:mushroom-template-card
icon: mdi:fire
entity: climate.otoplenie_zal
icon_color: |
{{ 'red' if state_attr(config.entity, 'hvac_action') ==
'heating' else ' disabled' }}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
{% if state_attr(config.entity, 'hvac_action') ==
'heating' %}
ha-state-icon {
animation: fire 3.5s infinite;
transform-origin: 50% 85%;
}
ha-card {
background: none;
box-shadow: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
#width: 75%;
}
@keyframes fire {
0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
}
{% endif %}
Thanks friend, but the problem is still thereā¦ The on and off states have the same icon appearance, it only turns on when there is direct heating. You can somehow make the state look like this:
- off - gray icon
- The thermostat is turned on - the icon lights up red but without animation
- The thermostat starts heating - the icon lights up red and the animation begins.
Point 2 doesnāt work nowā¦
Thank you in advance!!!
Your thermostat has two states from what I see, heat and off. Let start with icon color first.
Does this fix that issue?
icon_color: |
{{ 'red' if is_state(config.entity, 'heat') else 'disabled' }}
The rest of the code should work correctly. The animation will start when hvac_action is heating
Oh yes, the animation started working exactly when it was needed!!!
Just a problem with the background appearedā¦ The icon should be without a background, but the background appears in the off state and in the idle state. It is necessary that there is no background in all modes.
Post the card code with your updates please. The background it my tests worked correctly.
type: custom:mushroom-template-card
icon: mdi:fire
entity: climate.otoplenie_zal
icon_color: |
{{ 'red' if is_state(config.entity, 'heat') else 'disabled' }}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
{% if state_attr(config.entity, 'hvac_action') ==
'heating' %}
ha-state-icon {
animation: fire 3.5s infinite;
transform-origin: 50% 85%;
}
ha-card {
background: none;
box-shadow: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
#width: 75%;
}
@keyframes fire {
0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
}
{% endif %}
I am not seeing a background no matter what state the thermostat with the posted code.
If you put the code in separate card, do you see a background?
@president75 This is all animations working as requested. With so many animations, I am starting to see some lag.
With the code you had been working with the refresh animation wasnāt very visible. I added blue to show it was working.
Is there a specific color youād like to have inside the TV?
2 Likes
my code
type: custom:mushroom-template-card
primary: QuaĢ£t 2
entity: switch.sonoff_1000cf9431
icon: mdi:fan
icon_color: red
fill_container: false
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: ''
layout: vertical
card_mod:
style: |
ha-card {
border: none !important;
padding: 2px 0px 0px 0px !important;
}
Can you help me, thank you
This should do it 
type: custom:mushroom-template-card
primary: QuaĢ£t 2
entity: switch.sonoff_1000cf9431
icon: mdi:fan
icon_color: red
fill_container: false
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
secondary: ''
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.container {
margin-top: -12px !important;
}
.: |
ha-card {
border: none !important;
padding: 2px 0px 0px 0px !important;
}
1 Like
Thank you so much Cooled.
Thatās fine.
Iāll take care of the colors.
Here is the code with my devices. Button card throws errors when entities arenāt present.
type: custom:button-card
name: SOGGIORNO
icon: mdi:sofa
entity: light.pc_lights
show_state: false
show_label: true
label: |
[[[
return Math.round(states['sensor.basement_sensor'].state) + "Ā°C" + "  " + Math.round(states['sensor.basement_sensor'].state) + " %";
]]]
tap_action:
action: navigate
navigation_path: '#soggiorno'
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: none
entity: light.pc_lights
icon: |
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-outline
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
black
{% else %}
white
{% endif %}
- type: template
tap_action:
action: none
entity: switch.kitchen_lights
icon: |
{% if is_state(entity, 'on') %}
mdi:power-socket-eu
{% else %}
mdi:power-socket-eu
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
red
{% else %}
white
{% endif %}
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card:after {
content: "{{ states('sensor.basement_sensor') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
}
ha-card {
--chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.pc_lights', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('light.pc_lights', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 34px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state('light.pc_spot', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card:after {
content: "{{ states('sensor.basement_sensor') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
}
ha-card {
--chip-background: {{'rgba(140, 199, 161, 1)' if is_state('switch.kitchen_lights', 'on') else 'rgba(140, 199, 161, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('switch.kitchen_lights', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
{% if is_state('switch.kitchen_lights', 'on') %}
animation: tilt 4s steps(1) infinite, blink 4s infinite;
transform-origin: 50% 92%;
{% else %}
{% endif %}
}
@keyframes tilt {
0%, 100% { transform: rotate(0deg); }
33% { transform: rotate(8deg); }
66% { transform: rotate(-8deg); }
}
@keyframes blink {
0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
}
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: none
entity: climate.living_room
icon: |
{% if (states["climate.living_room"].attributes["hvac_action"] ==
"heating") %}
mdi:fire
{% else %}
mdi:thermostat
{% endif %}
icon_color: |
{% if (states["climate.living_room"].attributes["hvac_action"] ==
"heating") %}
black
{% else %}
white
{% endif %}
- type: template
tap_action:
action: none
entity: media_player.tv
icon: |
{% if is_state(entity, 'on') %}
mdi:television
{% else %}
mdi:television
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
blue
{% else %}
white
{% endif %}
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
--chip-background: {{'rgba(186, 233, 234, 1)' if (states["climate.living_room"].attributes["hvac_action"] == "heating") else 'rgba(186, 233, 234, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if (states["climate.living_room"].attributes["hvac_action"] == "heating") }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 34px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
{% if (states["climate.living_room"].attributes["hvac_action"] == "heating") %}
animation: fire 1.5s infinite;
transform-origin: 50% 85%;
{% else %}
{% endif %}
}
@keyframes fire {
0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card {
--chip-background: {{ 'rgba(199, 239, 207, 0.8)' if is_state('media_player.tv', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.tv', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(199, 239, 207, 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(199, 239, 207, 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
{% if is_state('light.pc_lights', 'on') %}
animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;
{% else %}
animation: tube-off 2s linear forwards;
{% endif %}
}
@keyframes tube-off {
1%, 15% { transform: scale(1, 0.2); }
40% { transform: scale(0.2); opacity: 1; }
100% { transform: scale(0.2); opacity: 0; }
}
@keyframes tube-on {
0% { transform: scale(0.2); opacity: 0; }
5% { transform: scale(1, 0.2); opacity: 0.3; }
15% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%,
95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% {
opacity: 1; }
}
ha-state-icon:before {
{% if is_state('light.pc_lights', 'on') %}
content: "";
position: absolute;
width: 50%;
height: 30%;
margin: 6%;
top: 25%;
animation: refresh 300ms linear infinite;
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(0,0 ,255, 1) 0%,
transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%,
rgba(0,0 ,255, 1) 25%, transparent
100%); }
50% { background: linear-gradient(180deg, transparent 0%,
rgba(0,0 ,255, 1) 50%, transparent
100%); }
75% { background: linear-gradient(180deg, transparent 0%,
rgba(0,0 ,255, 1) 75%, transparent
100%); }
100% { background: linear-gradient(180deg, transparent 0%,
transparent 50%, rgba(0,0 ,255, 1)
100%); }
}
styles:
grid:
- grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content 1fr
img_cell:
- justify-content: center
- position: absolute
- width: 80px
- height: 80px
- left: 0
- bottom: 0
- margin: 0 0 -25px -25px
- background: '#72F3CD'
- border-radius: 200px
icon:
- width: 35px
- color: black
- opacity: '0.6'
- margin: 0 0 18px 15px
card:
- padding: 10px 20px 10px 10px
- border: solid 2px rgba(114, 243, 205, 1)
custom_fields:
btn:
- justify-content: end
- align-self: start
btn1:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: '#72F3CD'
- margin-bottom: 5px
label:
- justify-self: start
- align-self: start
- font-size: 16px
- font-weight: 500
- margin-bottom: 50px
- color: '#fff'
1 Like