type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: #44444480;
border: solid 2px black;
border-radius: 10px;
height: 140px;
}
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 22px !important;
position: relative;
top: 0px;
left: 30px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
font-size: 15px !important;
position: relative;
overflow: visible !important;
top: 3px;
left: 30px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: 0px;
top: 0px;
}
.: |
:host {
--secondary-text-color:
{% set value = states('sensor.motion_sensor_air_temperature_2')|float %}
{% if value < 20 %}
#4682B4;
{% elif value > 22 %}
#FF6347;
{% else %}
#228B22;
{% endif %}
}
style: |
mushroom-badge-icon {
position: relative;
left: 60px;
top: 3px;
}
entity: sun.sun
icon: mdi:stairs
icon_color: |
{% set value = states('sensor.motion_sensor_air_temperature_2')|float %}
{% if value < 18 %}
#C1BDB6
{% elif value > 20 %}
#FF6347
{% else %}
#228B22
{% endif %}
primary: Couloir lumières
secondary: '{{states(''sensor.temperature_ref'')| round(1) }}°C '
layout: horizontal
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: none
badge_icon: mdi:thermometer
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style:
.: |
ha-card {
background-color: #44444480;
left: 0px;
top: 0px;
}
chips:
- type: template
entity: switch.couloir_entree
content: Entrée
icon: >-
{{ is_state(entity, 'off') | iif('mdi:light-recessed',
'mdi:light-recessed') }}
icon_color: '{{ is_state(entity, ''off'') | iif(''white'',''red'') }}'
card_mod:
style: |
ha-card {
--chip-background:
{% if states('switch.couloir_entree') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
ha-card {
margin: 10px 1px 0px 0px;
--chip-box-shadow: 20px;
--chip-border-radius: 25px;
--chip-height: 30px;
--chip-padding: 10px;
--chip-left: 1px;
}
- type: template
entity: switch.couloir_garage
content: Garage
icon: >-
{{ is_state(entity, 'off') |
iif('mdi:light-recessed','mdi:light-recessed') }}
icon_color: '{{ is_state(entity, ''off'') | iif(''white'',''red'') }}'
card_mod:
style: |
ha-card {
--chip-background:
{% if states('switch.couloir_garage') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
ha-card {
margin: 10px 1px 0px 0px;
--chip-box-shadow: 20px;
--chip-border-radius: 25px;
--chip-height: 30px;
--chip-padding: 10px;
--chip-left: 1px;
}
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style:
.: |
ha-card {
background-color: #44444480;
left: 0px;
top: 0px;
}
chips:
- type: template
entity: switch.applique_entree
content: Entrée
icon: '{{ is_state(entity, ''off'') | iif(''mdi:coach-lamp'',''mdi:coach-lamp'') }}'
icon_color: '{{ is_state(entity, ''off'') | iif(''white'',''red'') }}'
card_mod:
style: |
ha-card {
--chip-background:
{% if states('switch.applique_entree') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
ha-card {
margin: 10px 10px 0px 0px;
--chip-box-shadow: 20px;
--chip-border-radius: 25px;
--chip-height: 30px;
--chip-padding: 10px;
--chip-left: 1px;
}
- type: template
entity: switch.applique_montee
content: Escalier
icon: '{{ is_state(entity, ''off'') | iif(''mdi:coach-lamp'',''mdi:coach-lamp'') }}'
icon_color: '{{ is_state(entity, ''off'') | iif(''white'',''red'') }}'
card_mod:
style: |
ha-card {
--chip-background:
{% if states('switch.applique_montee') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
ha-card {
margin: 10px 10px 0px 0px;
--chip-box-shadow: 20px;
--chip-border-radius: 25px;
--chip-height: 30px;
--chip-padding: 10px;
--chip-left: 1px;
}
Tu peux essayer ça mais je ne suis pas sur (je n’utilise pas les cartes mushroom).
Sinon, tu peux faire la même chose avec une button-card 