🔹 Browser_mod - turn your browser into a controllable device, and a media_player

[Fr3di]

Ok answering my own question as maybe will help someone.
I was trying to overcomplicate it when it was enough to carefully read the documentation to the end and add card_mod to style the popup.
So after small changes the transparent background works well.

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    autoclose: true
    size: normal                                    
    data:
       card_mod:
         style:
           ha-dialog$: |
             div.mdc-dialog div.mdc-dialog__surface {
                background-color: transparent;
             }
       content:
          type: custom:vertical-stack-in-card
          style:
            .: >
              ha-card {
                --ha-card-background: #00000073;
              }
           cards:
           ...

[Fr3di]

@thomasloven is it possible to use the dashboard view theme to style the popups? I have a theme specified for my dashboard view but when I try to put the colors variables there (i.e. ha-card-background, popup-background-color), it doesn’t work. It only works when I have those values in the global user HA theme which affects all the popup windows in HA. Styling every single browser_mod.popup call with card_mod is a bit of a pain

[ASNNetworks]

Just create a new yaml called popup_cardmod_style.yaml (or whatever you want) and then use it as an !include in your browser_mod card_mod

Create the .yaml file and paste there your card_mod style, in your case:

         style:
           ha-dialog$: |
             div.mdc-dialog div.mdc-dialog__surface {
                background-color: transparent;
             }

Save the file, then use in your browser_mod code for card_mod (make sure to use your actual path/filename):

So like on your code:

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    autoclose: true
    size: normal                                    
    data:
       card_mod: !include /config/popup_cardmod_style.yaml
       content:
          type: custom:vertical-stack-in-card
          style:
            .: >
              ha-card {
                --ha-card-background: #00000073;
              }
           cards:
           ...

I do this for the longest time for many UI elements and also allows me to change the style from one file, which updates then all popups that use that code. If you want different styles, just create separate yamls and include the one you want with the style

[Fr3di]

That’s a great idea @ASNNetworks. Thx, will give it a go

Oh just realised it works only when the dashboard is a yaml file but mine unfortunately is not at the moment Fortunatelly migration seems not to be difficult

[Fr3di]

Thx again @ASNNetworks it works fine but now have an issue with the standard more-info card just for one dashboard. How can I apply the same style to those popups? Do I need to set popup-background-color or mdc-theme-surface somewhere?

[ASNNetworks]

The standard more-info dialogs have nothing to do with brower_mod popups, so you can’t style those those this way.

For those you need to use card_mod inside your theme.yaml. When the dashboard uses that specific theme, it will apply the more-info dialog theme to the standard more info dialogs.

This thread is specifically made for that: 🔹 Card-mod - Super-charge your themes! - #1410 by boheme61

There are lots of examples there to get the correct code to achieve what you want for the normal more-info dialog mods.

As far as I know, this is the only proper way to style the default more-info dialogs.

[Fr3di]

Ok great, will play with that and hopefully get that to work. Thx for help

[Ryan_Grandy (Ryan)]

I am creating a pop_up screen for my dashboard and I use the “size: wide” option. This all works great on the desktop however on my mobile it makes me scroll left and right to see my whole content. When the “size: normal” is used, on the mobile it resizes so it doesn’t scroll left and right but then its small on the desktop.

Is there something I’m doing wrong, does anyone else see this?

I use the following code:

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: "HVAC Additional Data"
      size: wide
      content:
        type: vertical-stack
        cards:

Image of issue:

[Nick4 (Nick)]

Maybe because the contents contain more pixels then the width of your display?

[Ryan_Grandy (Ryan)]

Possibly but when I set the “size: normal” in the code it resizes everything on the mobile such that I can’t scroll left and right. However on the desktop the popup is much smaller.

[rockhstrongo (Rock)]

I’ve noticed that “type: button” cards aren’t working right when I put them inside popups.

I would guess that changing the type from “button” to “entities” is why your second example works, but the first one doesn’t.

[scstraus]

Actually I had v2.0 working fine for some time before this issue appeared. As far as I can tell, my syntax is perfect. It seems to be related to an issue that about 20 other people have been experiencing in the last month which makes it so that browser_mod is not able to render buttons on popups.

[Nick4 (Nick)]

The issue of empty popups is only happening with button cards on it.
So instead of a button card using a custom button card, makes those popup cards work again.

[Protoncek (Pavel)]

So instead of a button card using a custom button card,

ufff…does button card still exists in HA ? (just kidding…)
i didn’t use it from the moment when i found custom button card. Markdown card is also on my “not used anymore” list from that moment. In fact, i just went through my dashboards recently and found out that appr.70% of my cards are “custom:button-card”. It’s waaay most versatile and usefull card in HA. Light years ahead. There’s really not much you can’t do without it, it just takes some browsing sometimes to find a solution.
That’s why it’s very sad that it’s not developed anymore. I really hope that author will reappear, or someone else will continue his (hers?) work if he doesn’t.

[andrew.vint]

I dont know if i am doing something wrong but i have conditional card that shows what is playing on my fire tv stick.

I also have a firemote card that i am want to popup if i click on the image of the firet tv.

However it doesnt do anything when i click … below is my code can anyone take a look and advise if i am doing something wrong, because i am lost now and cant see the wood for the trees.

type: conditional
conditions:
  - entity: media_player.whole_house_fire_tv
    state_not: unavailable
  - entity: media_player.whole_house_fire_tv
    state_not: paused
card:
  type: custom:vertical-stack-in-card
  cards:
    - type: picture-entity
      entity: media_player.whole_house_fire_tv
      camera_image: camera.whole_house_fire_tv_image
      show_state: false
      show_name: false
      camera_view: auto
      theme: Mushroom
      hold_action:
        action: none
      tap_action:
        action: fire-dom-event
        browser_mod:
          title: Fire Remote
          icon: mdi:remote
          service: browser_mod.popup
          data:
            size: normal
            title: Where is John?
            style: |-
              --popup-min-width: 500px; --popup-max-width: 670px;
              --popup-border-radius: 0 !important;
              --popup-background-color: #B33B00;
              --popup-border-width: 0 !important;          
            content:
              type: custom:firemote-card
              entity: media_player.whole_house_fire_tv
              device_type: fire_tv_stick_4k_max
              compatibility_mode: strong
              app_launch_1: prime-video
              app_launch_2: netflix
              app_launch_3: disney-plus
              app_launch_4: spotify
              app_launch_5: ''
              scale: '66'
              button_overrides:
                tv-button:
                  script: start_tivimate
                mute-button:
                  script: cinema_mode_mute
                volume-down-button:
                  script: cinema_mode_volume_down
                volume-up-button:
                  script: cinema_mode_volume_up_2
                power-button:
                  script: remote_power
      style: >
        ha-card { margin-top: auto; margin-left: 0px; margin-right: 0px;
        margin-bottom: 21px;    box-shadow: 0px 0px 58px 6px rgba(255, 255,
        255,2.96) !important;

Thanks in advance

[Sylwester (Sylwester Olik)]

Hi. Recently I have updated HA to newest version. I actually did few updates. I am not sure after which one I started have problem with popups. When popup has buttons on bottom it looks like some space is cut between buttons and bottom edge and scroll bar is visible.
How to remove this scroll bar?

        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              style: |
                --popup-max-width: 600px;
                --popup-min-width: 400px;
                --popup-border-width: 1px;
                --popup-border-radius: 12px;
                --popup-padding-x: 0px;
                --popup-padding-y: 0px;
                --dialog-backdrop-filter: blur(0.8em) brightness(1.2);
              content:
                type: custom:layout-card
                layout_type: custom:grid-layout
                cards:
                  - type: custom:mushroom-template-card
                    entity: switch.horizon_socket
                    primary: >-
                      {{ 'Are you wish to switch off Horizon Socket?' if
                      is_state(entity, 'on') else 'Are you wish to switch on
                      Horizon Socket?' }}
                    secondary: >-
                      {{ 'THIS CAN DAMAGE DATA.' if is_state(entity, 'on') else
                      ' ' }}
                    icon: >-
                      {{ 'mdi:alert' if is_state(entity, 'on') else
                      'mdi:comment-question' }}
                    icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''yellow'' }}'
                    hold_action:
                      action: none
                    tap_action:
                      action: none
                    double_tap_action:
                      action: none
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          ha-icon {
                            {% if is_state('switch.horizon_socket', 'on') %}
                            --icon-animation: pulse 1s linear infinite;
                            {% endif %}
                          }
                        .: |
                          ha-card {
                            --ha-card-border-width: 0px;
                            --card-primary-font-size: 12px;
                            --card-secondary-font-size: 10px;
                          }
              card_mod:
                style: |
                  .content {
                    --ha-card-border-width: 0px;
                  }
                  ha-dialog {
                    --vertical-align-dialog: center !important;
                  }
              right_button: 'Yes'
              left_button: Cancel
              right_button_action:
                service: browser_mod.popup
                data:
                  style: |
                    --popup-max-width: 600px;
                    --popup-min-width: 400px;
                    --popup-border-width: 1px;
                    --popup-border-radius: 12px;
                    --popup-padding-x: 0px;
                    --popup-padding-y: 0px;
                    --dialog-backdrop-filter: blur(0.8em) brightness(1.2);
                  content:
                    type: custom:layout-card
                    layout_type: custom:grid-layout
                    cards:
                      - type: custom:mushroom-template-card
                        entity: switch.horizon_socket
                        primary: >-
                          {{ 'Fine, Horizon Socket will shitch off in 4s.' if
                          is_state(entity, 'on') else 'Fine, Horizon Socket will
                          switch on in 4s.' }}
                        secondary: >-
                          {{ 'THIS CAN DAMAGE DATA.' if is_state(entity, 'on')
                          else ' ' }}
                        icon: >-
                          {{ 'mdi:alert' if is_state(entity, 'on') else
                          'mdi:information-outline' }}
                        icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''yellow'' }}'
                        hold_action:
                          action: none
                        tap_action:
                          action: none
                        double_tap_action:
                          action: none
                        card_mod:
                          style:
                            mushroom-shape-icon$: |
                              ha-icon {
                                {% if is_state('switch.horizon_socket', 'on') %}
                                --icon-animation: pulse 1s linear infinite;
                                {% endif %}
                              }
                            .: |
                              ha-card {
                                --ha-card-border-width: 0px;
                                --card-primary-font-size: 12px;
                                --card-secondary-font-size: 10px;
                              }
                  card_mod:
                    style: |
                      .content {
                        --ha-card-border-width: 0px;
                      }
                      ha-dialog {
                        --vertical-align-dialog: center !important;
                      }
                  dismissable: false
                  title: ''
                  timeout: 4000
                  timeout_action:
                    service: switch.toggle
                    data:
                      entity_id: switch.horizon_socket
                  right_button: Cancel

[pcwii]

Has anyone had an issue where all the browser mod entities become “unavailable”?

I am still troubleshooting but thought I would see if anyone else had this.

I am running a Firefox browser on Ubuntu 22.04 lTS (wayland).

I have a suspicion this is occurring when the screen timeout expires but I am not certain yet.

[Protoncek (Pavel)]

Yep, pretty regularly - it goes offline, comes back, goes offline again, comes back… I wrote a couple of times about it (and others, too), and gave up, since there’s no back information from author why this is happening. Now only thing i use from browser mod is popup - this part (for now) always works.

From 2023.4 HA update some other things doesn’t work, also, like “sidebar order”, but there’s also nothing said about it, nor update released… (maybe author gave up on browser_mod addon … ?)

[pcwii]

I hope @thomasloven is still around and everything is OK. Love their work. Looks like github has wound down recently.

[Kayden919]

Try mine

show_name: true
show_icon: true
type: button
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      content:
        type: entities
        entities:
          - entity: light.id1
          - entity: light.id2
entity: light.id3