Add Frosted Glass Effect

[sebanti10]

Added the frosted glass effect in the resources/index.css after testing the same in /dist folder.

[shaansubbaiah]

How do I test this properly? I tried setting a background to the html and the card background is not blurry.

[sebanti10]

I applied the following under resources/index.css in "root" for color-mode="light" (line 7) to check if it works for background image:

:root[color-mode="light"] {
    background-image: url(https://i.stack.imgur.com/fhEwl.png);
    background-size: cover;
    background-attachment: fixed;
   /* rest of the code */
}

I was able to achieve the following result:

Please let me know if this was not the actual requirement or if you were looking for something different.. I am really new to open source and I would love to understand your requirements better :)

[shaansubbaiah]

Thanks. Looks great! Turns out that CSS property backdrop-filter is only supported on Chrome-based browsers at the moment. When tested on Firefox, it is translucent without a blur. Can you replicate the same effect using the regular CSS filter property?

[sebanti10]

Thank you :) I am going to try for regular CSS and send a PR.

[AFink]

Are you still working on this? @sebanti10

[shaansubbaiah]

Closing due to inactivity