Make it possible for themes to blur backgrounds (#20447)

* Make it possible for themes to blur card backgrounds

* Make it possible for themes to blur dialog backgrounds

* Add ha prefix

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Rename dialog-backdrop-filter to ha-dialog-scrim-backdrop-filter

With backwards compatibility

* Run prettier

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Adam Kapos
2024-04-10 12:37:35 +03:00
committed by GitHub
parent 9903e22eaa
commit bf176ac314
2 changed files with 12 additions and 2 deletions

View File

@@ -75,8 +75,14 @@ export class HaDialog extends DialogBase {
var(--divider-color)
);
z-index: var(--dialog-z-index, 8);
-webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
backdrop-filter: var(--dialog-backdrop-filter, none);
-webkit-backdrop-filter: var(
--ha-dialog-scrim-backdrop-filter,
var(--dialog-backdrop-filter, none)
);
backdrop-filter: var(
--ha-dialog-scrim-backdrop-filter,
var(--dialog-backdrop-filter, none)
);
--mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
--mdc-typography-headline6-font-weight: 400;
--mdc-typography-headline6-font-size: 1.574rem;
@@ -119,6 +125,8 @@ export class HaDialog extends DialogBase {
margin-top: var(--dialog-surface-margin-top);
min-height: var(--mdc-dialog-min-height, auto);
border-radius: var(--ha-dialog-border-radius, 28px);
-webkit--filter: var(--ha-dialog-surface--filter, none);
-filter: var(--ha-dialog-surface--filter, none);
}
:host([flexContent]) .mdc-dialog .mdc-dialog__content {
display: flex;