fix: transparent bg in nav causes contrast issues

3 years ago · ec2e96b2b5
parent 0927a7393b
commit ec2e96b2b5
2 changed files with 10 additions and 0 deletions
--- 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)) {
--- 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)) {