From ec2e96b2b5b9fdca89513e78a02e2e79ab5336e5 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Thu, 2 Jun 2022 14:21:56 +0530 Subject: [PATCH 1/3] fix: transparent bg in nav causes contrast issues --- src/client/theme-default/components/VPNav.vue | 5 +++++ src/client/theme-default/components/VPNavBar.vue | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue index 9897e1a65a87..538a7165f13b 100644 --- a/src/client/theme-default/components/VPNav.vue +++ b/src/client/theme-default/components/VPNav.vue @@ -35,6 +35,11 @@ provide('close-screen', closeScreen) .VPNav.no-sidebar { backdrop-filter: saturate(50%) blur(8px); -webkit-backdrop-filter: saturate(50%) blur(8px); + background: rgba(255, 255, 255, 0.9); + } + + .dark .VPNav.no-sidebar { + background: rgba(36, 36, 36, 0.9); } @supports not (backdrop-filter: saturate(50%) blur(8px)) { diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index 4e27b1f6935d..cf5921e3874b 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/src/client/theme-default/components/VPNavBar.vue @@ -67,6 +67,11 @@ const { hasSidebar } = useSidebar() .VPNavBar.has-sidebar .content { backdrop-filter: saturate(50%) blur(8px); -webkit-backdrop-filter: saturate(50%) blur(8px); + background: rgba(255, 255, 255, 0.9); + } + + .dark .VPNavBar.has-sidebar .content { + background: rgba(36, 36, 36, 0.9); } @supports not (backdrop-filter: saturate(50%) blur(8px)) { From d2b9e8b487bfdd50a3110f5679488f46cb0f49cd Mon Sep 17 00:00:00 2001 From: Kia Ishii Date: Mon, 6 Jun 2022 14:46:00 +0900 Subject: [PATCH 2/3] refactor: make opacity a bit more settle --- src/client/theme-default/components/VPNavBar.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index cf5921e3874b..9077419a08c7 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/src/client/theme-default/components/VPNavBar.vue @@ -65,13 +65,13 @@ const { hasSidebar } = useSidebar() } .VPNavBar.has-sidebar .content { - backdrop-filter: saturate(50%) blur(8px); -webkit-backdrop-filter: saturate(50%) blur(8px); - background: rgba(255, 255, 255, 0.9); + backdrop-filter: saturate(50%) blur(8px); + background: rgba(255, 255, 255, 0.7); } .dark .VPNavBar.has-sidebar .content { - background: rgba(36, 36, 36, 0.9); + background: rgba(36, 36, 36, 0.7); } @supports not (backdrop-filter: saturate(50%) blur(8px)) { From 3aa5a35127583ffd6688dc43e0ba769ceeef5e14 Mon Sep 17 00:00:00 2001 From: Kia Ishii Date: Mon, 6 Jun 2022 14:46:38 +0900 Subject: [PATCH 3/3] refactor: here too --- src/client/theme-default/components/VPNav.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue index 538a7165f13b..6e0c61a84053 100644 --- a/src/client/theme-default/components/VPNav.vue +++ b/src/client/theme-default/components/VPNav.vue @@ -33,13 +33,13 @@ provide('close-screen', closeScreen) } .VPNav.no-sidebar { - backdrop-filter: saturate(50%) blur(8px); -webkit-backdrop-filter: saturate(50%) blur(8px); - background: rgba(255, 255, 255, 0.9); + backdrop-filter: saturate(50%) blur(8px); + background: rgba(255, 255, 255, 0.7); } .dark .VPNav.no-sidebar { - background: rgba(36, 36, 36, 0.9); + background: rgba(36, 36, 36, 0.7); } @supports not (backdrop-filter: saturate(50%) blur(8px)) {