I can not add more than 6 chips, what am I doing wrong?
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: |-
{{ states('sensor.tv_ac_room_temperature') }}°c | {{ states
('sensor.tv_ac_humidity') | int }} %
icon: |-
{% if is_state('light.master_bedroom_dimmer', 'on') %}
mdi:bed-king
{% elif is_state('light.master_bedroom_dimmer', 'off') %}
mdi:bed-king
{% elif is_state('light.master_bedroom_dimmer', 'unavailable') %}
mdi:lightbulb-question
{% else %}
mdi:lightbulb-question
{% endif %}
entity: light.master_bedroom_dimmer
icon_color: |-
{% if is_state('light.master_bedroom_dimmer', 'on') %}
amber
{% elif is_state('light.master_bedroom_dimmer', 'off') %}
disabled
{% elif is_state('light.master_bedroom_dimmer', 'unavailable') %}
disabled
{% else %}
{% endif %}
fill_container: true
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /lovelace/master
hold_action:
action: toggle
double_tap_action:
action: none
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.ds_master_bedroom
icon: |-
{% if is_state('binary_sensor.ds_master_bedroom', 'off') %}
mdi:door
{% else %}
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.ds_master_bedroom', 'off') %}
#d8a159
{% else %}
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: binary_sensor.pir_master_bedroom
icon: |-
{% if is_state('binary_sensor.pir_master_bedroom', 'on') %}
mdi:motion-sensor
{% else %}
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.pir_master_bedroom', 'on') %}
blue
{% else %}
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: light.master_bedroom_dimmer
icon: |-
{% if is_state('light.master_bedroom_dimmer', 'off') %}
mdi:lightbulb-on
{% else %}
{% endif %}
icon_color: |-
{% if is_state('light.master_bedroom_dimmer', 'off') %}
amber
{% else %}
{% endif %}
tap_action:
action: more-info
- type: template
entity: light.master_bedroom_wall_1
icon: |-
{% if is_state('light.master_bedroom_wall_1', 'off') %}
mdi:wall-sconce
{% else %}
{% endif %}
icon_color: |-
{% if is_state('light.master_bedroom_wall_1', 'off') %}
amber
{% else %}
{% endif %}
tap_action:
action: more-info
- type: template
entity: light.master_bedroom_wall_2
icon: |-
{% if is_state('light.master_bedroom_wall_2', 'off') %}
mdi:wall-sconce
{% else %}
{% endif %}
icon_color: |-
{% if is_state('light.master_bedroom_wall_2', 'off') %}
amber
{% else %}
{% endif %}
tap_action:
action: more-info
- type: template
entity: light.master_bedroom_wall_3
icon: |-
{% if is_state('light.master_bedroom_wall_3', 'off') %}
mdi:wall-sconce
{% else %}
{% endif %}
icon_color: |-
{% if is_state('light.master_bedroom_wall_3', 'off') %}
amber
{% else %}
{% endif %}
tap_action:
action: more-info
- type: template
entity: binary_sensor.master_window
icon: |-
{% if is_state('binary_sensor.master_window', 'on') %}
mdi:window-open
{% else %}
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.master_window', 'on') %}
green
{% else %}
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
alignment: center
card_mod:
style:
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
animation: boing 4s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: open 6s ease-in-out infinite;
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
.shape {
perspective: 45px;
}
mushroom-template-chip:nth-child(3)$: |
ha-state-icon {
animation: illumination 2s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
mushroom-template-chip:nth-child(4)$: |
ha-state-icon {
animation: boing 2s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
mushroom-template-chip:nth-child(5)$: |
ha-state-icon {
animation: boing 6s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
animation: motion 2s linear infinite;
animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
mushroom-template-chip:nth-child(7)$: |
ha-state-icon {
animation: boing 2s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
