dcapslock
March 5, 2026, 2:47am
846
Moving away from mdc components to webaewsome is inevitable given mdc is now unsupported. All credit to devs on this one for answering all my questions on the dialog migration so Browser Mod could follow 2026.3.0 with its 2.8.0 release. Any impact to syling general Browser Mod popups is documented - first link below. A summary of dialogs changes and styling with Uix check second link below.
opened 11:43PM - 17 Feb 26 UTC
closed 11:43PM - 17 Feb 26 UTC
Browser Mod 2.8.0 now uses the new ha-dialog updated in Home Assistant 2026.3.0.… Dialogs now use webawesome rather than material design. This change means custom popup styling which worked before 2.8.0 may no longer work. Below are known styling updates required after updating to Browser Mod 2.8.0.
## Fullscreen on mobile, classic versus other
`ha-dialog` sets mobile size styles when the dialog has a property type of `standard`. This interferes with `classic` style. Browser Mod works around this by setting `ha-dialog` type to empty `""` when style is `classic`.
## Dialog surface background
Set using `--ha-dialog-surface-background`. If you then want actual card background color to be different than dialog surface, also set `--ha-card-background` or `--card-background-color`. These can be set via general styling included with Browser Mod.
```yaml
type: custom:popup-card
title: Red popup
card:
type: markdown
content: I have a red background and white text.
popup_card_id: red-popup
popup_styles:
- style: all
styles: |-
ha-dialog {
--ha-dialog-surface-background: red;
--ha-card-background: red;
--primary-text-color: white;
color: white;
}
```
## Backdrop color and filter
Backdrop filter set using ` --ha-dialog-scrim-backdrop-filter`. Color set using `--mdc-dialog-scrim-color`, a legacy naming.
```yaml
type: custom:popup-card
title: Custom popup - Backdrop Color & Filter
dismissable: true
card:
type: markdown
content: I am a popup has a backdrop color of red and filter of blur (5px)
popup_card_id: popup-backdrop-filter
popup_styles:
- style: all
styles: |-
ha-dialog {
--ha-dialog-scrim-backdrop-filter: brightness(68%) blur(5px);
--mdc-dialog-scrim-color: rgba(255,0,0,0.3);
}
```
## Vertical alignment
Popup vertical centering no longer is based on flex, since the popup is ulyimately the Browser's inbuilt `dialog` show in Browser's [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer).
### Vertical centering
Vertical centering is now set by altering `--dialog-surface-margin-top`. The default is 40px. Setting this to auto, `--dialog-surface-margin-top: auto`, in standard Browser Mod [styles](https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md) will center the popup vertically.
```yaml
...
popup_styles:
- style: centered
include_styles:
- classic
styles: |
ha-dialog {
--dialog-surface-margin-top: auto !important;
}
```
See the [Example - centered](https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md#vertically-centered-style-centered) example in styles document for more details.
### Move to bottom
To move to bottom you need to set top: unset, bottom: 0 of the actual `dialog` element so this needs uix.
e.g.
```yaml
uix:
style:
ha-dialog $ wa-dialog $: |
dialog {
margin-top: 0 !important;
top: unset !important;
bottom: 0 !important;
margin-bottom: 20px !important;
}
```
## Slide-in or other animations
As with mdc dialogs, ha-dialog animations need uix to target the `dialog` element of `wa-dialog`. Animations can be slightly problematic for wa-dialog as it has its own animation for show/hide (and pulse if dimiss is blocked). Setting animation times to 0 mostly solves this but you may see the popup briefly before animation, which was similar with mdc dialogs.
The following is generally working well.
```yaml
uix:
style:
.: |
ha-dialog {
--dialog-surface-margin-top: auto !important; /* vertically centered */
--ha-dialog-show-duration: 0;
--ha-dialog-hide-duration: 0;
}
ha-dialog $ wa-dialog $: |
@keyframes slide-in { from { transform:translateX(100%) } to {
transform: translateX(0); } }
dialog {
animation: slide-in 0.3s forwards;
}
```
2 Likes