jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ha-card.ts
View File

@ -14,6 +14,8 @@ export class HaCard extends LitElement {
--ha-card-background,
var(--card-background-color, white)
);
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
backdrop-filter: var(--ha-card-backdrop-filter, none);
box-shadow: var(--ha-card-box-shadow, none);
box-sizing: border-box;
border-radius: var(--ha-card-border-radius, 12px);

12
src/components/ha-dialog.ts
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;