Blurring background behind popup

Configuration Frontend
21

Nice! I played around with this last year and there were some issues with it rendering properly with the climate card but I just did a quick test and it looks fine now. Keeping my fingers crossed as well!

1 Like
22

I hate to be greedy but any chance of also adding border-radius and box-shadow?

Currently I do this,

    style:
      $: |
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
            border-radius: 1em;
            box-shadow: 0em 0em 0.5em;
          }
23

I know themes support border-radius for cards, are you referring to the more info dialogs specifically?

24

Yes I am.
I don’t have round corners on my cards but for popups I do :slight_smile:

image
image553×664 54.5 KB

25

@nicohirsch trying to find the file to patch manually…
Can’t find it locally on my machine.
I explored the virtualenv lib site-package directory but could not find the file

Where is ot?

26

@dvbit: This file gets compiled into one of the many Javascript chunk files. You would have to find the position of this code block in these files (as an example with Chrome dev tools under sources) and then search for this file on your server.
image
But of course this needs to be redone after every update.

@klogg: You can already use these variables to change the more-info dialog:

image
image734×784 56.1 KB

mdc-dialog-box-shadow: 0 0 25px 25px red
mdc-shape-medium: 50px

Disclaimer: I’m not certainly sure if they are used anywhere else, but at a first glance they aren’t.

1 Like
27

Thanks for that.

The only place I’ve found so far is the ‘three dots menu’.

image

28

Thanks . :frowning: hope your change is accepted.
Why so long to accept it thoug. Looking at code and conflicts seems not troublesome

29

All the maintainers / main devs where pretty much in stress because of this year’s last release plus the conference, so they might have missed it (or gave it a low priority).
At the moment my PR is on the bottom of page 2, so I don’t know if the frontend guys (mainly Bram as far as I know) will have enough time between holidays and the next release to get that far down the list of open PRs.

30

Hi,
Blur effect is working perfectly on Chrome browser on MacOS.
But it’s not working on Safari on MacOS and all the browsers on iOS devices(iPhone, iPad).
Is there any solution for this?

31

It needs the -webkit- prefix like -webkit-backdrop-filter to work on Safari.

1 Like
32

Just sad seeing that this was closed.

There is absolutely no reason not to be accepted, since it’s only adding support to a single line of additional CSS.

I vote to reopen it: https://github.com/home-assistant/frontend/discussions/10014

2 Likes
33

I agree. The reason given in the PR for not approving is that they don’t know what problems this could cause in the future. Technically any change to home assistant could cause a problem in the future. Unless they can point to a specific issue I don’t see this being a valid reason to deny the change.

34

Can you blur background under cards, not only behind popups?

35

I have this effect working on both Iphone and Android fire tablet 10 but its not working on a fire tablet 8.
Would this be a hardware thing that’s not supported on fire 8 and under tablets?

36

Still not allowed to HA? So sad,

ha-card-backdrop-filter: blur(5px)

would be a huge improvement.