never really used browser-mod pop-ups before, and decide to give it a try, working nicely indeed:
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: markdown
content: >
{{state_attr('sensor.marquee_alerts','marquee')}}
I have 2 questions on the subject though: how come my main theme settings ha-card-border-radius: 0px
are not applied? Need they be set specifically for browser-mod pop-ups?
should we card-mod that so it also applies here?
the same card in a dashboard does get the borders set correctly:
the other is a placement issue, so probably not a card-mod or theme question, will see where to take that ![:wink: :wink:](https://community.home-assistant.io/images/emoji/twitter/wink.png?v=10)
update
foind this:
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-border-radius: 0px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: markdown
content: >
### Actieve waarschuwingen voor:
{{state_attr('sensor.marquee_alerts','marquee')}}
but must check if that is still the most up to date css for the card mod, and also, if a card-mod-theme for the popups would not be an option?
considering we have:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
}
in place, I also figured the popup would benefit from that, but obviously not.
also trying to getto the top and bottom margins there, is not successful:
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-border-radius: 0px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: markdown
card_mod:
style: |
ha-card {
background: maroon;
color: ivory;
margin:-20px 0px;
}
or even do:
type: markdown
card_mod:
style: |
ha-card {
background: maroon;
color: ivory;
margin: 0px;
font-size: 20px;
font-weight: bold;
text-align: center;
animation: blink 2s ease infinite;
}
@keyframes blink {
100% {opacity: 0;}
}
but that top/bottom margin remainsā¦ now how to get rid of that?
feels a bit like a hack, but taking off 4px of the 24px of the content padding makes it happen:
--dialog-content-padding: 20px;