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?