Voici un dashboard de test reproduisant le problème.
Cartes :
- card_mod
- schedule-state-card
Modules :
- browser_mod
- schedule-state
views:
- theme: Backend-selected
title: test
path: test
icon: ''
layout:
height: auto
margin: 0px 4px 0px 0px
type: custom:horizontal-layout
badges: []
cards:
- type: custom:button-card
icon: mdi:test-tube
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
browser_id: THIS
data:
content:
type: custom:button-card
styles:
card:
- padding: 0px
- border-radius: 15px !important
- padding: 8px 8px
- border: none;
- background: transparent
grid:
- grid-template-areas: >-
"actions actions" "temp_ext chauffage" "humidite_ext
energy"
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content min-content min-content
custom_fields:
actions:
card:
type: custom:button-card
styles:
grid:
- grid-template-areas: '"mode_absent ouvertures music vide3 vide4 vide5"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
card:
- border: 0px
- padding: 5px 0 !important
custom_fields:
mode_absent:
card:
type: custom:button-card
icon: mdi:home
name: Mode Absence
ouvertures:
card:
type: custom:button-card
icon: mdi:window-open-variant
name: 0 / 8
color: grey
styles:
card:
- background: rgba(42,45,54,1.0)
- width: 97%
music:
card:
type: custom:button-card
icon: mdi:speaker
name: Multimédia
styles:
card:
- background: rgba(42,45,54,1.0)
- width: 97%
vide3:
card:
type: custom:button-card
color_type: blank-card
vide4:
card:
type: custom:button-card
color_type: blank-card
vide5:
card:
type: custom:button-card
color_type: blank-card
temp_ext:
card:
type: energy-devices-detail-graph
card_mod:
style: |
ha-card {
margin-left: 5px;
background: rgba(42,45,54,1.0) !important
}
humidite_ext:
card:
type: energy-devices-detail-graph
card_mod:
style: |
ha-card {
margin-left: 5px;
background: rgba(42,45,54,1.0) !important
}
energy:
card:
type: energy-devices-detail-graph
card_mod:
style: |
ha-card {
margin-left: 5px;
background: rgba(42,45,54,1.0) !important
}
chauffage:
card:
type: custom:schedule-state-card
entities:
- entity: sensor.pac_present
name: Pompe à chaleur
icon: mdi:calendar-clock
title: Pompe à Chaleur
colors:
active_layer: 'var(--primary-color, #2196F3)'
inactive_layer: 'var(--secondary-text-color, #BDBDBD)'
combined_folded_layer: 'var(--warning-color, #FF9800)'
combined_unfolded_layer: 'var(--primary-color, #2196F3)'
cursor: 'var(--label-badge-yellow, #FDD835)'
show_state_in_title: true
card_mod:
style: |
ha-card {
background: red !important;
margin-left: 10px;
}
popup_styles:
- style: all
styles: |-
ha-dialog {
--ha-dialog-surface-background: transparent;
--ha-dialog-scrim-backdrop-filter: blur(15px);
--ha-card-background: transparent;
--primary-text-color: white;
--mdc-dialog-min-width: 70vw;
--mdc-dialog-min-height: 100vdh;
--mdc-dialog-max-height: 100vdh;
color: white;
}
ha-dialog $: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(100px);
background: red;
}
