diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss index b6747bf738..c7f4373544 100644 --- a/src/client/components/form/form.scss +++ b/src/client/components/form/form.scss @@ -4,7 +4,7 @@ &._formClickable { &:hover { - background: var(--panelHighlight); + //background: var(--panelHighlight); } } } diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5 index cdeeb12e76..889436f03b 100644 --- a/src/client/themes/_dark.json5 +++ b/src/client/themes/_dark.json5 @@ -14,6 +14,7 @@ accentLighten: ':lighten<10<@accent', focus: ':alpha<0.3<@accent', bg: '#000', + acrylicBg: ':alpha<0.5<@bg', fg: '#c7d1d8', fgHighlighted: ':lighten<3<@fg', divider: 'rgba(255, 255, 255, 0.1)', diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5 index e4d18d6cec..2f059f0094 100644 --- a/src/client/themes/_light.json5 +++ b/src/client/themes/_light.json5 @@ -14,6 +14,7 @@ accentLighten: ':lighten<10<@accent', focus: ':alpha<0.3<@accent', bg: '#fff', + acrylicBg: ':alpha<0.5<@bg', fg: '#5c6a73', fgHighlighted: ':darken<3<@fg', divider: 'rgba(0, 0, 0, 0.1)', diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue index d6432cf314..b1b38199b6 100644 --- a/src/client/ui/deck/column.vue +++ b/src/client/ui/deck/column.vue @@ -318,8 +318,9 @@ export default defineComponent({ } &.naked { - //background: var(--deckAcrylicColumnBg); - background: transparent !important; + background: var(--acrylicBg) !important; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); > header { background: transparent;