type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pool
icon_color: ""
primary: Pool
secondary: "{{ states('sensor.water_sensor_1') }}°F"
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace-user2/pool-1
badge_color: |
{% if is_state('light.pool_lights_all', 'on') %}
green
{% endif %}
badge_icon: |-
{% if is_state('light.pool_lights_all', 'on') %}
hue:aura-group
{% endif %}
{% if is_state('light.pool_lights_all', 'off') %}
{% endif %}
entity: switch.pool
hold_action:
action: call-service
service: light.toggle
target:
entity_id: light.pool_lights_all
data: {}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: -55px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -55px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -40px;
top: 35px;
{% set state = states('switch.pool') %}
{% if state == ('on') %}
--shape-color: rgba(149,59,227, .2) !important;
{% else %}
--shape-color: rgba(149,59,227, 0) !important;
{% endif %}
}
.: ":host {\n --mush-icon-size: 140px;\nha-state-icon {\n {% set state = states('switch.pool') %}\n {% if state == ('on') %}\n color: rgba(149,59,227, 1) ;\n {% else %}\n color: var(--grey-color) ;\n {% endif %} \n}\t\t\t \n}\n"
style: |
mushroom-badge-icon {
left: 80px;
top: 4px;
}
- type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:slide
entity: switch.waterslide
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set state = states('switch.waterslide') %}
{% if state == ('on') %}
--shape-color: rgba(149,59,227, .2) !important;
{% else %}
--shape-color: rgba(90,90,90, .3) !important;
{% endif %}
}
.: |
ha-state-icon {
{% set state = states('switch.waterslide') %}
{% if state == ('on') %}
color: rgba(149,59,227, 1) ;
{% else %}
color: var(--grey-color) ;
{% endif %}
}
ha-card {
width: 66px;
margin-left: 68%;
top: -160px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:waterfall
entity: switch.waterfall
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set state = states('switch.waterfall') %}
{% if state == ('on') %}
--shape-color: rgba(149,59,227, .2) !important;
{% else %}
--shape-color: rgba(90,90,90, .3) !important;
{% endif %}
}
.: |
ha-state-icon {
{% set state = states('switch.waterfall') %}
{% if state == ('on') %}
color: rgba(149,59,227, 1) ;
{% else %}
color: var(--grey-color) ;
{% endif %}
}
ha-card {
width: 66px;
margin-left: 68%;
top: -175px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-light-card
icon: hue:aura-group
use_light_color: false
collapsible_controls: true
grid_options:
columns: 4
rows: 2
entity: light.pool_lights_all
layout: vertical
name: ""
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal !important;
}
mushroom-shape-icon$: |
.shape {
{% set state = states('light.pool_lights_all') %}
{% if state == ('on') %}
--shape-color: rgba(149,59,227, .2) !important;
{% else %}
--shape-color: rgba(149,59,227, 0) !important;
{% endif %}
}
.: |
ha-state-icon {
{% set state = states('light.pool_lights_all') %}
{% if state == ('on') %}
color: rgba(149,59,227, 1) ;
{% else %}
color: var(--grey-color) ;
{% endif %}
}
ha-card {
width: 66px;
margin-left: 68%;
top: -190px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
card_mod:
style: |
ha-card {
height: 155px !important;

}
grid_options:
columns: 6
rows: auto