Browser_mod Popup Card Formatting (Redux)

[DE5013 (Darrell Earnshaw)]

Trying to discover whether formatting really can be applied to a browser_mod popup card, and if so, how?

I have an entity called All Interior Lights. When I click on that, it pops up a window giving me the list of interior lights (whose colors change depending on state) and allows me to toggle them off/on manually.

All’s good so far. But, when I try to format the popup dialog box, I seem to hit issues - I always end up with a grey box and white lettering (and that annoying orange timer count-down line). I can turn the whole box blue, or green, but other than primary colors, no combination of #hex or RGB() values seem to work.

Ideally, I’d like to be able to change to background color to a darker grey (#A9A9A9), and maybe the text to black, plus a black border to the popup to make it stand out.

Update: Fixed the background color. It actually needs to be “background-color: #hex”. Still need to fix the orange line and border

The code snippet for the formatting is shown below:

    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          timeout: 10000
          card_mod:
            style:
              ha-dialog$: |
                div.mdc-dialog div.mdc-dialog__scrim {
                  background: transparent;
                }
                div.mdc-dialog {
                  backdrop-filter: blur(5px);
                  }
                div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                  background: #A9A9A9;  # set the background color of the popup card here
                  color: black;      # optional: adjust text color for contrast
                }

Full disclosure, I snagged the formatting code from another post, and don’t understand why the “background:” and “color:” values don’t take effect (other than the obvious “background: blue”). Sadly, I don’t even understand what the div.mdc-dialog refers to!

Is there better documentation on how to control formatting of the poopup card available, especially where all these div.mdc keywords are defined?

[almighty59]

data:
  card_mod:
    style: 
      ha-dialog$: |
        div.mdc-dialog div.mdc-dialog__scrim {
          backdrop-filter: blur(5px); 
        }
        div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          background: rgba(28, 28, 28,.5) !important;
          border: none !important;
          border-style: solid !important;
          border-color: blue !important;
        }
  timeout: 10000
  browser_id: THIS
  title: []
  content:
    type: # Add whatever card you're using in the popup.

The section below is used to blur the background which makes the popup stand out.

        div.mdc-dialog div.mdc-dialog__scrim {
          backdrop-filter: blur(5px); 
        }

The below section controls the background and border or anything else with the popup (to control the cards within the popup you’ll need to style them separately.) The background is a dark grey at .5 transparency. Change it to 1.0 to make it solid. For some reason I had to use border: none because without doing so it puts a partial border around the popup. Remove it and you’ll see what I mean. Then by adding border-style: solid it puts a complete border around the entire popup. And then border-color changes its color.

        div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          background: rgba(28, 28, 28,.5) !important;
          border: none !important;
          border-style: solid !important;
          border-color: white !important;
        }

In the below section I use browser_id: THIS so the popup only opens on the device you’re using. I use this to avoid a popup opening in one of the other wall tablets I have. I use title: [] so there’s no title in the header section.

  browser_id: THIS
  title: []

I add !important to the end of everything to make sure it overrides any theme settings.

I also noticed that sometimes the change in style isn’t seen the first time the popup opens after making the changes. However, when opening the popup a second time the changes are visible. It also wouldn’t hurt to refresh the browser window if you have multiple windows open with HA.

Let me know if it works or if you have any questions.

[DE5013 (Darrell Earnshaw)]

Thanks, very much. What you suggested worked (at least the border line and color). Sadly, when I applied it, it actually looked worse, so I abandoned the idea, but regardless it was good information. Thanks

If you use timeout=nnn, there’s an annoying orange (in my case, anyway) line that shrinks across the top of the box as the countdown happens. If you know a way of getting rid of that (or perhaps making it the same color as the background, so it effectively disappears), that would be fantastic…although I suspect it’s a Javascript-thing.

Oh, BTW. If I insert browser_id: THIS (or ‘this’), it seems to stop the popup window appearing, whereas leaving that line out works perfectly. Go figure.

[almighty59]

@DE5013

there’s an annoying orange (in my case, anyway) line that shrinks across the top of the box as the countdown happens. If you know a way of getting rid of that (or perhaps making it the same color as the background, so it effectively disappears), that would be fantastic

I used the browser inspector to find out what controls the color of the bar and I was successful in changing it. However, I don’t know the correct way to write it as style for card_mod. It uses ha-dialog > div.progress::before and if I figure it out, I’ll let you know.

correctly as a style in card_mod. I can change the color of the bar when using the inspector when using the inspector but I’m in the style of that info corrently the correct way to write in can’t figure out how to enter it correctly write I don’t know the

@DE5013

Oh, BTW. If I insert browser_id: THIS (or ‘this’), it seems to stop the popup window appearing, whereas leaving that line out works perfectly.

I trigger all of my popup cards with scripts and pass “THIS” as a variable so maybe that has something to do with it.

[DE5013 (Darrell Earnshaw)]

So, the color of the moving bar is definitely related to the theme. I just cleared my browser cache and history, and the HA home reset to the default theme, and the moving line then became blue… so it IS theme-related. Just a matter of find out what element it is called.

[almighty59]

I know the element but I don’t know the correct way to enter it as a style in card-mod. As you can see in the screenshots below, if you look under progress::below you will see that background: is set to var(--primary-color) and uses whatever the “primary color” is set to in the theme. This is why the color changed when you reset everything. If I change var(--primary-color) to a specific color it changes the color of the progress bar. So I know I have the correct element. I just can’t figure out the correct way to enter it in card-mod.

[DE5013 (Darrell Earnshaw)]

Any progress?

I tried

          ha-dialog$: |
            div.mdc-dialog div.mdc-dialog__scrim {
              background: transparent;
            }
            div.mdc-dialog__container {
              --vertical-align-dialog: center !important
            }
            div.mdc-dialog {
              backdrop-filter: blur(5px);
            }
            div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
              background-color: #5a5a5a;  # set the background color of the popup card here
              color: white;      # optional: adjust text color for contrast
              text-align: center;
            }
            .progress::before {
            background: #000000
            }

Actually, I thought I was making progress with:

           div.mdc-dialog div.mdc-dialog__scrim {
              background: transparent;
            }
            div.mdc-dialog__container {
              --vertical-align-dialog: center !important
            }
            div.mdc-dialog {
              backdrop-filter: blur(5px);
            }
            div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
              background-color: #5a5a5a;  # set the background color of the popup card here
              color: white;      # optional: adjust text color for contrast
              text-align: center;
              --progress: none;
            }

which seemed to hide the progress bar, but if I jumped to another card and came back, the progress bar returned.

[almighty59]

Yes sir… I just got it. Try this and see if it changes it to red. If it works, then you can change it to background: none !important; or make other changes to the progress bar as needed.

card_mod:
  style:
    ha-dialog$: |
      div.mdc-dialog div.mdc-dialog__scrim {
        backdrop-filter: blur(5px);
      }
      div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: rgba(28, 28, 28,.9) !important;
        border: none !important;
        border-style: solid !important;
        border-color: white !important;
      }
    .progress: |
      .progress::before {
        background: red !important;
      } 

[DE5013 (Darrell Earnshaw)]

Yeah!

Sir, I tip my hat to you. This solved the issue. Many thanks.

[13672899602 (BobbyLeung)]

Hello, Sir!! Thank you for the style code. It works very well. However, there is a problem. The left and right buttons in the browser popup window still have the original style. Do you have any way to modify the background style of the buttons as well?

[almighty59]

@13672899602 show me your code.