On desktop it looks so good:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
layout: vertical
entity: light.kitchen_cooker_hood_group
icon: phu:bulb-group-centura-round
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group', 'on') %}
orange
{% else %}
{% endif %}
primary: Вытяжка
secondary: |-
{% if is_state('light.kitchen_cooker_hood_group_cold', 'on') %}
Холодный
{% elif is_state('light.kitchen_cooker_hood_group_neutral', 'on') %}
Нейтральный
{% elif is_state('light.kitchen_cooker_hood_group_warm', 'on') %}
Тёплый
{% elif is_state('light.kitchen_cooker_hood_group_midnight', 'on') %}
Ночник
{% elif is_state('light.kitchen_cooker_hood_group', 'on')
and is_state('light.kitchen_cooker_hood_group_cold', 'off')
and is_state('light.kitchen_cooker_hood_group_neutral', 'off')
and is_state('light.kitchen_cooker_hood_group_warm', 'off')
and is_state('light.kitchen_cooker_hood_group_midnight', 'off') %}
Произвольный
{% else %}
{% endif %}
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon {
{% if is_state('light.kitchen_cooker_hood_group','on') %}
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 80%;
{%- else -%}
{%- endif %}
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
:host {
--icon-size: 64px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
ha-card:after {
{% if is_state('light.kitchen_cooker_hood_group', 'on') %}
content: "{{ expand('light.kitchen_cooker_hood_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +25px;
width: 16px;
height: 16px;
font-size: 11px;
{% endif %}
}
@media screen and (max-width: 400px) {
ha-card:after {
{% if is_state('light.kitchen_cooker_hood_group', 'on') %}
content: "{{ expand('light.kitchen_cooker_hood_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +10px;
width: 16px;
height: 16px;
font-size: 11px;
}
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_cold
content_info: none
icon: mdi:sun-snowflake-variant
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_cold', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -10px;
--chip-icon-size: 12px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_neutral
content_info: none
icon: mdi:theme-light-dark
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_neutral', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -18px;
--chip-icon-size: 12px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_warm
content_info: none
icon: mdi:fire
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_warm', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -18px;
--chip-icon-size: 12px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_midnight
content_info: none
icon: mdi:weather-night-partly-cloudy
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_midnight', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -20px;
--chip-icon-size: 12px;
}
}
alignment: center
card_mod:
style: |
ha-card {
border: none !important;
--chip-spacing: 1px;
left: 0px;
}
card_mod:
style: |
ha-card {
border: none !important;
}
But in mobile space between chips is so short, even if set up icon size 12px is not resolving this:
