type: custom:stack-in-card
mode: vertical
cards:
- square: false
columns: 1
type: grid
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: switch.nest
icon: >-
{{ 'mdi:speaker-wireless' if is_state(entity, 'on') else
'mdi:speaker-off' }}
icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''pink'' }}'
layout: vertical
primary: Nest
secondary: '{{ states("switch.nest") }}'
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.tv
icon: >-
{{ 'mdi:television-classic' if is_state(entity, 'on') else
'mdi:television-classic-off' }}
icon_color: '{{ ''cyan'' if is_state(entity, ''on'') else ''pink'' }}'
layout: vertical
primary: TV
secondary: '{{ states("switch.tv") }}'
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.fountain
icon: mdi:fountain
icon_color: green
layout: vertical
primary: Spring
secondary: '{{ states("switch.fountain") }}'
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: fountain 1.5s ease infinite;
{% endif %}
}
@keyframes fountain { 0%, 100 { clip-path: polygon(0 100%,
0 0, 100% 0, 100% 100%); }
50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100%
100%); }
60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79%
36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79%
36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79%
36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
.: |
ha-card {
padding: 5px 0px 0px 0px !important;
}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color: rgba(190,14,122, 0.1);
width: px;
height: px;
}
![Screenshot 2023-07-19 at 2.06.35 PM](https://community-assets.home-assistant.io/original/4X/8/a/c/8ac615d0397a5533245faa52f9f49fcd6d7197d5.png)
I changed the ha-icon to ha-state-icon and --icon-animation to animation. After this the last icon is not aligned with the first two. What am I doing wrong?
Kindly guide.