Hi there,
I have a Overview dashboard where a popup for the light intensity is appearing over other dashboards.
How can I avoid this?
I use Home Assistant in a VM
- Installation methodHome Assistant OS
- Core2025.12.5
- Supervisor2025.12.3
- Operating System16.3
- Frontend20251203.3
This is code from the Overview Dashboard
button_card_templates:
stack3_center:
show_icon: false
show_name: false
styles:
card:
- position: relative
- width: 65px
- height: 85px
- background: none
- border: none
- overflow: visible
- padding: 0
- margin: 0
grid:
- place-self: center
custom_fields:
effects:
- position: absolute
- inset: 0
- margin: auto
- display: grid
- place-items: center
- z-index: 1
casing:
- position: absolute
- inset: 0
- margin: auto
- display: grid
- place-items: center
- z-index: 2
button:
- position: absolute
- inset: 0
- margin: auto
- display: grid
- place-items: center
- z-index: 3
custom_fields:
effects:
card:
type: custom:button-card
entity: light.living
styles:
card:
- width: 65px
- height: 65px
- '--effect-on': |
[[[
return entity.state === 'on' ? 1 : 0;
]]]
casing:
card:
type: custom:button-card
template: casing_properties
button:
card:
type: custom:button-card
template: button_properties
casing_properties:
show_icon: false
show_name: false
styles:
card:
- z-index: 2
- width: 40px
- height: 40px
- border-radius: 50%
- border: 1px solid rgba(0,0,0,.25)
- background: '#f9f7ef'
- box-shadow: >
2px 2px 4px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.85),
0 2px 3px rgba(0,0,0,.18)
button_properties:
show_name: false
show_icon: true
triggers_update:
- input_text.living_effect
- light.living
styles:
card:
- z-index: 3
- width: 30px
- height: 30px
- border-radius: 50%
- border: 2px solid rgba(0,0,0,.25)
- background: |
[[[
const eff = (states['light.living']?.attributes?.effect || '').toLowerCase();
const target = (variables.effect_target || '').toLowerCase();
const active = eff === target;
const base = active ? variables.card_color_on : "#f5f0eb";
const light = active ? "#fff" : "#fcfafa";
return `linear-gradient(to bottom, ${light} 0%, ${base} 100%)`;
]]]
- box-shadow: |
[[[
const eff = states['light.living']?.attributes?.effect || 'none';
const on = (eff === variables.effect_target);
return on
? ".4px .4px 1px rgba(0,0,0,.95), inset 1px 1px 1px rgba(0,0,0,.10)"
: "4px 6px 9px rgba(0,0,0,.38), -4px -4px 7px rgba(255,255,255,.72)";
]]]
icon:
- width: 22px
- height: 22px
- color: |
[[[
const eff = (states['light.living']?.attributes?.effect || '').toLowerCase();
const target = (variables.effect_target || '').toLowerCase();
return eff === target ? variables.icon_color_on : '#777';
]]]
views:
- title: Home
sections:
- type: grid
square: false
columns: 7
cards:
- type: custom:button-card
template: stack3_center
entity: light.living
custom_fields:
effects:
card:
type: custom:button-card
styles:
card:
- '--effect-on': |
[[[
return entity.state === 'on' ? 1 : 0; ;
]]]
- '--r1-wobble-amp': 0.3px
- '--r1-wobble-scale': 0.1
- '--r1-opacity': 1
- '--r1-start': 20px
- '--r1-width': 5px
- '--r1-fade': 3px
- '--r1-gap': 00deg
- '--r1-rotate': 0deg
- '--r1-anim': spin
- '--r1-speed': 12s
- '--r1-direction': normal
- '--r1-blur': 6px
- '--color1': '#FFB84D'
- '--color2': '#FFC55F'
- '--color3': '#FFD272'
- '--color4': '#FFC55F'
- '--color5': '#FFB84D'
- '--color6': '#FFE09B'
- '--r2-opacity': 0
casing:
card:
type: custom:button-card
template: casing_properties
button:
card:
type: custom:button-card
template: button_properties
entity: light.living
icon: mdi:lightbulb
tap_action:
action: toggle
styles:
icon:
- color: |
[[[
return entity.state === 'on' ? '#e8cb3c' : '#777';
]]]
card:
- '--effect-on': |
[[[
return entity.state === 'on' ? 1 : 0;
]]]
hold_action:
action: call-service
service: browser_mod.popup
data:
deviceID:
- this
title: Living – brightness
content:
type: tile
entity: light.living
features:
- type: light-brightness
service_data:
deviceID:
- this
title: Living – brightness
content:
type: tile
entity: light.living
features:
- type: light-brightness
- type: custom:button-card
template: stack3_center
entity: light.living
custom_fields:
effects:
card:
type: custom:button-card
styles:
card:
- '--effect-on': |
[[[
const eff = states['light.living']?.attributes?.effect || 'none';
return (eff === 'Daylight') ? 1 : 0;
]]]
- '--r1-opacity': 1
- '--r1-start': 20px
- '--r1-width': 5px
- '--r1-fade': 3px
- '--r1-gap': 00deg
- '--r1-rotate': 0deg
- '--r1-anim': spin
- '--r1-speed': 12s
- '--r1-direction': normal
- '--r1-blur': 6px
- '--color1': '#F8F5E9'
- '--color2': '#F7F3E2'
- '--color3': '#FAF6EC'
- '--color4': '#F6F1DE'
- '--color5': '#F9F4E6'
- '--color6': '#F3EDDA'
- '--r2-opacity': 0
casing:
card:
type: custom:button-card
template: casing_properties
button:
card:
type: custom:button-card
template: button_properties
entity: light.living
icon:
- display: none
variables:
effect_target: Daylight
card_color_on: '#F9F4E6'
tap_action:
action: call-service
service: light.turn_on
target:
entity_id: light.living
data:
effect: Daylight
- type: custom:button-card
template: stack3_center
entity: light.living
custom_fields:
effects:
card:
type: custom:button-card
entity: light.living
styles:
card:
- '--effect-on': |
[[[
const eff = states['light.living']?.attributes?.effect || 'none';
return (eff === 'Warm white') ? 1 : 0;
]]]
- '--r1-opacity': 1
- '--r1-wobble-amp': 0.5px
- '--r1-wobble-scale': 0.2
- '--r1-start': 20px
- '--r1-width': 5px
- '--r1-fade': 3px
- '--r1-gap': 00deg
- '--r1-rotate': 0deg
- '--r1-anim': spin
- '--r1-speed': 12s
- '--r1-direction': normal
- '--r1-blur': 6px
- '--color1': '#F9F3D9'
- '--color2': '#FAEFCB'
- '--color3': '#F7EAC0'
- '--color4': '#F6E6B4'
- '--color5': '#F9F0C8'
- '--color6': '#F4E3AE'
- '--r2-opacity': 0
casing:
card:
type: custom:button-card
template: casing_properties
button:
card:
type: custom:button-card
template: button_properties
entity: light.living
icon:
- display: none
variables:
effect_target: Warm white
card_color_on: '#F6E6B4'
tap_action:
action: call-service
service: light.turn_on
target:
entity_id: light.living
data:
effect: Warm white
- type: sections
max_columns: 4
title: test3
path: test3
sections: []
