The placement of card mod code is crucial
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bathroom
secondary: >-
{{ states('sensor.openweathermap_temperature') | round (1) }}°C - {{
states('sensor.openweathermap_humidity') }}%
icon: mdi:tree
entity: light.soffit_lights
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/outside
icon_color: '{{ "orange" if is_state("light.soffit_lights", "on") else "disabled" }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 325;
--card-primary-color: white;
--card-primary-font-size: 20px;
align-items: end;
margin-top: 175px;
inline-size: 180px;
height: 25px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--card-secondary-color: white;
--card-secondary-font-weight: 350;
margin-top: -2px;
}
.: |
:host {
{% if is_state('light.soffit_lights', 'off') %}
background: url('/local/images/areas/bathroom.jpg') center;
background-size: cover;
background-position-y: 70px;
background-blend-mode: overlay;
#filter: grayscale(70%);
background-color: rgba(var(--rgb-card-background-color), 0.0);
{% endif %}
--mush-icon-size: 0px;
height: 220px;
margin-left: -15px !important;
margin-top: -70px !important;
{% if is_state('light.soffit_lights', 'on') %}
background: url('/local/images/areas/bathroom.jpg') center;
background-size: cover;
background-blend-mode: overlay;
background-position-y: 70px;
background-color: rgba(var(--rgb-card-background-color), 0.0);
{% endif %}
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.soffit_lights', 'on') else 'disabled' }}), 0.4) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.dining_room_lamp
icon: mdi:fan
icon_color: '{{ ''grey'' if states(config.entity) == ''off'' else ''blue''}}'
content: ''
tap_action:
action: navigate
navigation_path: /lovelace/temperature
card_mod:
style: |
ha-card {
border: none;}
- type: template
entity: light.soffit_lights
icon: >-
{{ 'mdi:lightbulb' if expand(area_entities('outside')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count > 0 else 'mdi:lightbulb-outline' }}
icon_color: >
{% set lights_in_outside = expand(area_entities('outside')) |
selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
lights_in_outside | selectattr('state', 'eq', 'on') | list | count > 0
else 'grey' }}
content: >-
{{ expand(area_entities('outside')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count }}
tap_action:
action: call-service
service: light.toggle
target:
area_id: outside
hold_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;}
alignment: end
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: spin 1s linear infinite;' if is_state('light.pc_lights', 'on') else 'animation: none;' }}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -15px;
margin-top: -10px;
}
card_mod:
style: |
ha-card {
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
{% if is_state('light.soffit_lights', 'on') %}
#box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
#border-radius: 10px;
#background: rgba(245, 173, 66, 0.3); {% endif %}
}
