diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index c1d47ffd0..44dac2626 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -339,9 +339,11 @@ hr { } ._window { - background: var(--panel); + background: var(--windowHeader); border-radius: var(--radius); contain: content; + -webkit-backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--blur, blur(15px)); } ._popup { diff --git a/packages/client/src/themes/_dark.json5 b/packages/client/src/themes/_dark.json5 index 1d8778879..e159f73b8 100644 --- a/packages/client/src/themes/_dark.json5 +++ b/packages/client/src/themes/_dark.json5 @@ -30,6 +30,7 @@ panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelBorder: '" solid 1px var(--divider)', acrylicPanel: ':alpha<0.5<@panel', + windowHeader: ':alpha<0.85<@panel', popup: ':lighten<3<@panel', shadow: 'rgba(0, 0, 0, 0.3)', header: ':alpha<0.7<@panel', diff --git a/packages/client/src/themes/_light.json5 b/packages/client/src/themes/_light.json5 index 359b56068..87fdbd86b 100644 --- a/packages/client/src/themes/_light.json5 +++ b/packages/client/src/themes/_light.json5 @@ -30,6 +30,7 @@ panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelBorder: '" solid 1px var(--divider)', acrylicPanel: ':alpha<0.5<@panel', + windowHeader: ':alpha<0.85<@panel', popup: ':lighten<3<@panel', shadow: 'rgba(0, 0, 0, 0.1)', header: ':alpha<0.7<@panel',