Hello Community,
I am in the process of optimizing my dashboard for my smartphone. I am working with Mushroom and Popup Cards. Now, to my question: Does anyone have an idea how I can resize the pop-up cards and possibly make them transparent? I would like the pop-ups to be only as big as the buttons they contain.
Here’s my YAML for the corresponding card:
type: custom:popup-card
dismissable: true
entity: input_boolean.ventilator
size: normal
title: VENTILATOR
card:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: |- AN/ AUS
icon: mdi:fan-auto
entity: script.venti_an
icon_color: purple
tap_action:
action: toggle
layout: vertical
fill_container: true
multiline_secondary: true
badge_icon: fas:fan
badge_color: |-
{% set power = states('sensor.ventilatorsteckdose_power') | float %}
{% if power > 20 %}
green
{% elif power < 1 %}
red
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: Speed
icon: mdi:fan-plus
entity: script.venti_geschwindigkeit
icon_color: deep-purple
tap_action:
action: toggle
layout: vertical
badge_color: |-
{% set power = states('sensor.ventilatorsteckdose_power') | float %}
{% if power > 20 %}
green
{% elif power < 1 %}
red
{% endif %}
badge_icon: |-
{% set power = states('sensor.ventilatorsteckdose_power') | float %}
{% if power < 29 %}
mdi:numeric-1-box-outline
{% elif power < 30.7 %}
mdi:numeric-2-box-outline
{% elif power < 32 %}
mdi:numeric-1-box-outline
{% elif power < 36 %}
mdi:numeric-2-box-outline
{% elif power > 36 %}
mdi:numeric-3-box-outline
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: Licht
icon: mdi:ceiling-fan-light
entity: script.venti_licht
icon_color: indigo
tap_action:
action: toggle
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: Swing
icon: fas:sync
entity: script.venti_swing
icon_color: deep-purple
tap_action:
action: toggle
layout: vertical
badge_color: |-
{% set power = states('sensor.ventilatorsteckdose_power') | float %}
{% if power < 31 %}
red
{% elif power < 35 %}
green
{% elif power < 40 %}
red
{% elif power < 45 %}
green
{% endif %}
badge_icon: mdi:sync
- type: custom:mushroom-template-card
primary: ''
secondary: Timer
icon: fas:clock
entity: script.venti_timer
icon_color: purple
tap_action:
action: toggle
layout: vertical
card-mod:
style: |
ha-card { background: transparent !important; }
I would appreciate any improvement suggestions.