Browser_mod styling

Hi all,

I’ve been trying, for days now, to style my browser_mod pop-up. The notification/alert below is a pop-up where I want to have a bigger font-size, a thick broder and get rid of the ‘orange’ mini-border around my markdown. Would love to have an animated border like a real warning pop-up like below:

But I would already be very very gratefull if I would already achieve to larger my font in the body, get my thick border and have it colorized.

This is my automation with the pop-up:

alias: "[notification] - NUKI Battery Warning"
description: ""
triggers:
  - trigger: numeric_state
    entity_id:
      - sensor.nuki_voordeur_battery
    below: 34.8
conditions: []
actions:
  - action: media_player.play_media
    metadata: {}
    data:
      media_content_id: media-source://media_source/local/notification-7-270142.mp3
      media_content_type: audio/mpeg
    target:
      device_id: 3e6b674e5878ec37be65857701448520
  - delay:
      hours: 0
      minutes: 0
      seconds: 3
      milliseconds: 0
  - action: tts.speak
    metadata: {}
    data:
      cache: true
      media_player_entity_id: media_player.lenovo_tab_m11
      message: De batterij van voordeur NUKI is bijna leeg
      language: nl_BE
    target:
      entity_id: tts.piper
  - action: browser_mod.popup
    metadata: {}
    data:
      dismissable: true
      browser_id:
        - 186985c47d5865c097004f6ea5179a01
      title: ⚠️ WAARSCHUWING! ⚠️
      content:
        type: markdown
        content: >
          <div style="text-align: center; font-size: 80px; font-weight: bold;
          color: red;">

          DE BATTERIJ VAN VOORDEUR NUKI IS BIJNA LEEG!

          </div>
      size: full
      style:
        "--popup-border-width": var(--ha-card-border-width, 8px);
        "--popup-border-color": red;
        "--popup-border-radius": 8px;
        "--popup-background-color": var(--ha-card-background, var(--card-background-color, white));
        "--popup-header-background-color": var(--popup-background-color, var(--sidebar-background-color));
      right_button: GELEZEN
      right_button_action:
        service: browser_mod.close_popup
        data:
          browser_id: fully
mode: single

Thanks in advance !

Kr,

Bart

1 post - 1 participant

Read full topic