Hi all,
Clicking on my room ‘outside’ I get following pop-up using the firedom event:
Is it possible to ‘widen’ my pop-up page ? Can’t find it :-/
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Outside
secondary: >-
{{ states('sensor.hue_outdoor_motion_sensor_1_temperature') | round(0) }}
°C
icon: phu:rooms-outdoor
entity: group.voortuin_lights
tap_action:
action: toggle
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Outside Control
content:
type: horizontal-stack
cards:
- type: vertical-stack
title: Voortuin
cards:
- type: custom:mushroom-light-card
entity: group.voortuin_lights
show_brightness_control: true
layout: vertical
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.hue_white_lamp_2
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- type: custom:mushroom-light-card
entity: light.hue_white_lamp_1
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- type: custom:mushroom-light-card
entity: light.hue_white_lamp_4
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- type: vertical-stack
title: Achtertuin
cards:
- type: custom:mushroom-light-card
entity: group.overkapping_lights
show_brightness_control: true
layout: vertical
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.hue_color_lamp_1_overkapping
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- type: custom:mushroom-light-card
entity: light.hue_color_spot_1_overkapping
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- type: custom:mushroom-light-card
entity: light.hue_color_spot_2_overkapping
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- type: custom:mushroom-light-card
entity: light.hue_color_spot_3_overkapping
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- type: custom:mushroom-light-card
entity: light.hue_color_spot_4_overkapping
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- type: custom:mushroom-light-card
entity: light.hue_color_spot_5_overkapping
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- type: custom:mushroom-light-card
entity: light.hue_color_spot_6_overkapping
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
size: full
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''cyan'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0);
--mush-icon-size: 70px;
height: 66px;
margin-left: -22px !important;
}
ha-card {
border: unset;
height: 30px !important;
margin-top: 30px;
margin-bottom: 5px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.hue_outdoor_motion_sensor_1_motion
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: template
entity: climate.spa_thermostat
icon: mdi:hot-tub
icon_color: '{{ ''red'' if is_state(entity,''heat'') else ''cyan'' }}'
tap_action:
action: toggle
style: |
ha-card {
border: none;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.voortuin_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
border: unset;
}
