Lovelace dialog corner radius and drop shadow?

[eroji]

I can’t seem to figure out how to change the corner radius and drop shadow for popup dialogs when you click on UI elements in Lovelace. The theme configuration value of ha-card-border-radius does not seem to affect these dialogs. Is there a way to change this?

[MSt]

Hi, try to use ha-dialog-border-radius: "6px", it is working for me.

[xbmcnut]

@MSt

ha-dialog-border-radius:

Thanks, but not working for me.

Mushroom Square:
    # Home Assistant override
    ha-card-border-radius: 3px
    ha-dialog-border-radius: 1px
    # Layout
    mush-spacing: 8px

ha-card-border-radius works but ha-dialog-border-radius has no effect.

[xbmcnut]

Found out it needs to be under a Dialog section thus:

Mushroom Square:
    # Home Assistant override
    ha-card-border-radius: 5px
    # Dialog
    ha-dialog-border-radius: "5px" # or var(--ha-card-border-radius) # This one controls the radius of the pop-up boxes    
    # Layout
    mush-spacing: 8px

Also does not work if the theme is set at the dashboard level. Only works when the theme is set at the user level so if anyone knows how to get around that, feedback appreciated.

[trisweb (Tristan H)]

In case anyone comes looking for how to do box shadow, and backdrop effects, here’s what I found. In your theme yaml:

  dialog-backdrop-filter: 'blur(2px)'
  dialog-box-shadow: '0 10px 36px #00000099'

Example: