- type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 50% 15% 20% 15%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
secondary: Oefenzaal
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.climate_increase_decrease_temp_geluid
target: {}
data:
entity_id: input_number.volume_oefenzaal
step: -1
icon: mdi:minus-circle-outline
- type: custom:mushroom-template-card
secondary: '{{ states(''input_number.volume_oefenzaal'')}}'
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.climate_increase_decrease_temp_geluid
target: {}
data:
entity_id: input_number.volume_oefenzaal
step: +1
icon: mdi:plus-circle-outline
You will still need to adjust each cards spacing for the effect you are trying to achieve.
type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 50% 15% 20% 15%
cards:
- type: custom:mushroom-template-card
secondary: Oefenzaal
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.climate_increase_decrease_temp_geluid
target: {}
data:
entity_id: input_number.volume_oefenzaal
step: -1
icon: mdi:minus-circle-outline
card_mod:
style: |
ha-card{
right: 1px;
}
- type: custom:mushroom-template-card
secondary: "{{ states('input_number.volume_oefenzaal')}}"
card_mod:
style:
mushroom-state-info$: |
.container {
margin-left: 30px;
}
.: |
ha-card{
right: 28px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: perform-action
perform_action: script.climate_increase_decrease_temp_geluid
target: {}
data:
entity_id: input_number.volume_oefenzaal
step: 1
icon: mdi:plus-circle-outline
card_mod:
style: |
ha-card{
right: 31px;
}
1 Like
How to do animation in a correct way?
I’m trying to do an icon-animation, shape-animation and text-animation, all 3 should change their color from red to yellow, but icon-animation is the only one working. What am I doing wrong with shape-animation and text-color-animation?
type: custom:mushroom-template-card
entity: sun.sun
primary: Red Alert
icon: mdi:lightbulb-on
icon_color: "#fd0101"
card_mod:
style: |-
ha-card {
--card-primary-color: hsl(0,99%,50%);
animation: alert-text 2s infinite;
}
@keyframes alert-text {
0%, 100% { color: rgb(var(--rgb-yellow)); }
50% { color: rgb(var(--rgb-red)); }
}
ha-state-icon {
animation: alert-icon 2s infinite;
}
@keyframes alert-icon {
0%, 100% { color: rgb(var(--rgb-yellow)); }
50% { clip-path: polygon(0% 55%, 25% 55%, 25% 35%, 35% 25%, 50% 18%, 65% 20%, 75% 35%, 75% 55%, 100% 55%, 100% 100%, 0 100%); color: rgb(var(--rgb-red)); }
}
.shape {
animation: alert-shape 2s infinite;
}
@keyframes alert-shape {
0%, 100% { background-color: rgba(var(--rgb-yellow), 0.2); }
50% { background-color: rgba(var(--rgb-red), 0.2); }
}
Not tested, but try:
colors changed for confirmation
type: custom:mushroom-template-card
entity: sun.sun
primary: Red Alert
icon: mdi:lightbulb-on
icon_color: "#fd0101"
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: alert-shape 2s infinite;
}
@keyframes alert-shape {
0%, 100% { background-color: rgba(var(--rgb-yellow), 0.2); }
50% { background-color: rgba(var(--rgb-red), 0.2); }
.: |
ha-card {
--card-primary-color: hsl(0,99%,50%);
animation: alert-text 2s infinite;
}
@keyframes alert-text {
0%, 100% { background-color: rgb(var(--rgb-green)); }
50% { background-color: rgb(var(--rgb-red)); }
}
ha-state-icon {
animation: alert-icon 2s infinite;
}
@keyframes alert-icon {
0%, 100% { color: rgb(var(--rgb-blue)); }
50% { clip-path: polygon(0% 55%, 25% 55%, 25% 35%, 35% 25%, 50% 18%, 65% 20%, 75% 35%, 75% 55%, 100% 55%, 100% 100%, 0 100%); color: rgb(var(--rgb-red)); }
}
thanks, that was the solution for the alert-shape and also a good hint for the text.
I only had to change background-color to --card-primary-color to also make the alert-text animation work as expected.
Thanks a lot for your fast and helpful answer.
Here now the full code of this colorfull animation:
type: custom:mushroom-template-card
entity: sun.sun
primary: Red Alert
icon: mdi:lightbulb-on
icon_color: "#fd0101"
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: alert-shape 2s infinite;
}
@keyframes alert-shape {
0%, 100% { background-color: rgba(var(--rgb-red), 0.3); }
50% { background-color: rgba(var(--rgb-yellow), 0.4);
}
.: |
ha-card {
--card-primary-color: hsl(0,99%,50%);
animation: alert-text 10s infinite;
}
@keyframes alert-text {
0%, 100% { --card-primary-color: hsl(0,95%,50%); }
10% { --card-primary-color: hsl(55,95%,50%); }
20% { --card-primary-color: hsl(0,95%,50%); }
30% { --card-primary-color: hsl(36,95%,50%); }
40% { --card-primary-color: hsl(0,95%,50%); }
50% { --card-primary-color: hsl(300,95%,50%); }
60% { --card-primary-color: hsl(0,95%,50%); }
70% { --card-primary-color: hsl(240,95%,70%); }
80% { --card-primary-color: hsl(0,95%,50%); }
90% { --card-primary-color: hsl(190,95%,50%); }
}
ha-state-icon {
animation: alert-icon 2s infinite;
}
@keyframes alert-icon {
0%, 100% { color: rgb(var(--rgb-yellow)); }
50% { clip-path: polygon(0% 55%, 25% 55%, 25% 35%, 35% 25%, 50% 18%, 65% 20%, 75% 35%, 75% 55%, 100% 55%, 100% 100%, 0 100%); color: rgb(var(--rgb-red)); }
}
i took a subtle approach to alerting on a status with custom:button_card that looks like this with just a pulsating border (when it’s going to rain):
That’s on my mobile view. On my tablet view I have a conditional chip card that only shows up when it’s going to rain, and no matter what I try I can’t seem to replicate the pulsing border. This is in a header_card but that hasn’t stopped any of the other chip card styling. This is one of many iterations that don’t work… thanks in advance for any ideas!
header_cards:
justify_content: right
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.formatted_time
- type: conditional
conditions:
- entity: sensor.rain_alert
state: 'rain alert'
chip:
type: entity
entity: sensor.rain_alert
content_info: state
icon_color: '#008ae6'
icon: mdi:weather-pouring
tap_action: !include popup_hvac_weather.yaml
card_mod:
style:
mushroom-conditional-chip:nth-child(2):
mushroom-entity-chip$: |
ha-state-icon {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { box-shadow: 0px 0px 5px 3px rgba(0, 138, 230, 0.5); }
50% { box-shadow: 0px 0px 5px 3px rgba(0, 138, 230, 1); }
100% { box-shadow: 0px 0px 5px 3px rgba(0, 138, 230, 0.5); }
}
Answering myself… “pulse” I think references something built it, so renaming the @keyframes fixed it
card_mod:
style: |
ha-card {
--chip-border-color: #008ae6;
animation: border 1.5s infinite;
}
@keyframes border {
0% { box-shadow: 0px 0px 5px 3px rgba(0, 138, 230, 0.3); }
50% { box-shadow: 0px 0px 5px 3px rgba(0, 138, 230, 1); }
100% { box-shadow: 0px 0px 5px 3px rgba(0, 138, 230, 0.3); }
}
Yes, Mushroom has a few animations built in now.
Spin
Pulse
Cleaning
Returning
Can you please post your card code?
Of course!
type: custom:mushroom-template-card
primary: Gordijnen boven openen
secondary: ""
icon: mdi:curtains
tap_action:
action: perform-action
perform_action: scene.apply
target: {}
data:
entities: scene.alle_gordijnen_in_huis_open
hold_action:
action: none
double_tap_action:
action: none
I found the tap-action a bit weird, but I’m also not sure how to change it. When I tried, the visual editor won’t turn back on 