From 08916269743a51542d39f56cccc8b8ba3ecd5f89 Mon Sep 17 00:00:00 2001 From: Giedo Donkers Date: Thu, 15 Sep 2022 21:11:00 +0200 Subject: [PATCH 1/5] fix(theme): move background colors to theme-default css and added -webkit check --- .../theme-default/components/VPBackdrop.vue | 2 +- src/client/theme-default/components/VPNav.vue | 26 ++++++++----------- .../theme-default/components/VPNavBar.vue | 24 +++++++---------- src/client/theme-default/styles/vars.css | 8 ++++++ 4 files changed, 29 insertions(+), 31 deletions(-) diff --git a/src/client/theme-default/components/VPBackdrop.vue b/src/client/theme-default/components/VPBackdrop.vue index 1aa5d0b14b17..1f72a8583cdd 100644 --- a/src/client/theme-default/components/VPBackdrop.vue +++ b/src/client/theme-default/components/VPBackdrop.vue @@ -18,7 +18,7 @@ defineProps<{ bottom: 0; left: 0; z-index: var(--vp-z-index-backdrop); - background: rgba(0, 0, 0, .6); + background: var(--vp-c-bg-backdrop); transition: opacity 0.5s; } diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue index 96b6e5e69643..ed0698f2cff5 100644 --- a/src/client/theme-default/components/VPNav.vue +++ b/src/client/theme-default/components/VPNav.vue @@ -42,23 +42,19 @@ provide('close-screen', closeScreen) } .VPNav.no-sidebar { - -webkit-backdrop-filter: saturate(50%) blur(8px); - backdrop-filter: saturate(50%) blur(8px); - background: rgba(255, 255, 255, 0.7); + margin-right: -32px; + padding-right: 32px; + background: var(--vp-c-bg-alpha-without-backdrop); } - .dark .VPNav.no-sidebar { - background: rgba(36, 36, 36, 0.7); - } - - @supports not (backdrop-filter: saturate(50%) blur(8px)) { - .VPNav.no-sidebar { - background: rgba(255, 255, 255, 0.95); - } - - .dark .VPNav.no-sidebar { - background: rgba(36, 36, 36, 0.95); - } + @supports ( + (backdrop-filter: saturate(50%) blur(8px)) or + (-webkit-backdrop-filter: saturate(50%) blur(8px))) { + .VPNav.no-sidebar { + -webkit-backdrop-filter: saturate(50%) blur(8px); + backdrop-filter: saturate(50%) blur(8px); + background: var(--vp-c-bg-alpha-with-backdrop); + } } } diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index abfbba495757..d1bc2d854360 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/src/client/theme-default/components/VPNavBar.vue @@ -72,23 +72,17 @@ const { hasSidebar } = useSidebar() .VPNavBar.has-sidebar .content { margin-right: -32px; padding-right: 32px; - -webkit-backdrop-filter: saturate(50%) blur(8px); - backdrop-filter: saturate(50%) blur(8px); - background: rgba(255, 255, 255, 0.7); + background: var(--vp-c-bg-alpha-without-backdrop); } - .dark .VPNavBar.has-sidebar .content { - background: rgba(36, 36, 36, 0.7); - } - - @supports not (backdrop-filter: saturate(50%) blur(8px)) { - .VPNavBar.has-sidebar .content { - background: rgba(255, 255, 255, 0.95); - } - - .dark .VPNavBar.has-sidebar .content { - background: rgba(36, 36, 36, 0.95); - } + @supports ( + (backdrop-filter: saturate(50%) blur(8px)) or + (-webkit-backdrop-filter: saturate(50%) blur(8px))) { + .VPNavBar.has-sidebar .content { + -webkit-backdrop-filter: saturate(50%) blur(8px); + backdrop-filter: saturate(50%) blur(8px); + background: var(--vp-c-bg-alpha-with-backdrop); + } } } diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css index dff17f204251..96243173673a 100644 --- a/src/client/theme-default/styles/vars.css +++ b/src/client/theme-default/styles/vars.css @@ -88,6 +88,11 @@ --vp-c-bg-mute: var(--vp-c-white-mute); --vp-c-bg-alt: var(--vp-c-white-soft); + --vp-c-bg-alpha-with-backdrop: rgba(255, 255, 255, 0.7); + --vp-c-bg-alpha-without-backdrop: rgba(255, 255, 255, 0.95); + + --vp-c-bg-backdrop: rgba(0, 0, 0, 0.6); + --vp-c-divider: var(--vp-c-divider-light-1); --vp-c-divider-light: var(--vp-c-divider-light-2); @@ -121,6 +126,9 @@ --vp-c-bg-mute: var(--vp-c-gray-dark-3); --vp-c-bg-alt: var(--vp-c-black); + --vp-c-bg-alpha-with-backdrop: rgba(36, 36, 36, 0.7); + --vp-c-bg-alpha-without-backdrop: rgba(36, 36, 36, 0.95); + --vp-c-divider: var(--vp-c-divider-dark-1); --vp-c-divider-light: var(--vp-c-divider-dark-2); From 1b5605163e429adb92fbcc1b477e660314f22a45 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Wed, 30 Nov 2022 19:19:14 +0530 Subject: [PATCH 2/5] format --- src/client/theme-default/components/VPNav.vue | 15 ++++++++------- src/client/theme-default/components/VPNavBar.vue | 15 ++++++++------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue index 1344bb128f80..470b97ea0dae 100644 --- a/src/client/theme-default/components/VPNav.vue +++ b/src/client/theme-default/components/VPNav.vue @@ -48,13 +48,14 @@ provide('close-screen', closeScreen) } @supports ( - (backdrop-filter: saturate(50%) blur(8px)) or - (-webkit-backdrop-filter: saturate(50%) blur(8px))) { - .VPNav.no-sidebar { - -webkit-backdrop-filter: saturate(50%) blur(8px); - backdrop-filter: saturate(50%) blur(8px); - background: var(--vp-c-bg-alpha-with-backdrop); - } + (backdrop-filter: saturate(50%) blur(8px)) or + (-webkit-backdrop-filter: saturate(50%) blur(8px)) + ) { + .VPNav.no-sidebar { + -webkit-backdrop-filter: saturate(50%) blur(8px); + backdrop-filter: saturate(50%) blur(8px); + background: var(--vp-c-bg-alpha-with-backdrop); + } } } diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index d1bc2d854360..c4fc7dbf4460 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/src/client/theme-default/components/VPNavBar.vue @@ -76,13 +76,14 @@ const { hasSidebar } = useSidebar() } @supports ( - (backdrop-filter: saturate(50%) blur(8px)) or - (-webkit-backdrop-filter: saturate(50%) blur(8px))) { - .VPNavBar.has-sidebar .content { - -webkit-backdrop-filter: saturate(50%) blur(8px); - backdrop-filter: saturate(50%) blur(8px); - background: var(--vp-c-bg-alpha-with-backdrop); - } + (backdrop-filter: saturate(50%) blur(8px)) or + (-webkit-backdrop-filter: saturate(50%) blur(8px)) + ) { + .VPNavBar.has-sidebar .content { + -webkit-backdrop-filter: saturate(50%) blur(8px); + backdrop-filter: saturate(50%) blur(8px); + background: var(--vp-c-bg-alpha-with-backdrop); + } } } From dece67c04102e02f766524cf15eb0339cd913b97 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Wed, 30 Nov 2022 19:27:21 +0530 Subject: [PATCH 3/5] Update VPNav.vue --- src/client/theme-default/components/VPNav.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue index 470b97ea0dae..a1a5c70d31ca 100644 --- a/src/client/theme-default/components/VPNav.vue +++ b/src/client/theme-default/components/VPNav.vue @@ -42,8 +42,6 @@ provide('close-screen', closeScreen) } .VPNav.no-sidebar { - margin-right: -32px; - padding-right: 32px; background: var(--vp-c-bg-alpha-without-backdrop); } From bf1c164cde6325544a77e9ae365203e540455bf1 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Wed, 30 Nov 2022 19:50:13 +0530 Subject: [PATCH 4/5] fix right margin issue --- src/client/theme-default/components/VPNavBar.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index c4fc7dbf4460..176d4490bc02 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/src/client/theme-default/components/VPNavBar.vue @@ -70,8 +70,8 @@ const { hasSidebar } = useSidebar() } .VPNavBar.has-sidebar .content { - margin-right: -32px; - padding-right: 32px; + margin-right: -100vw; + padding-right: 100vw; background: var(--vp-c-bg-alpha-without-backdrop); } From 754208133918af8bebcd9da4dbcd09e93eda1572 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Wed, 30 Nov 2022 19:55:25 +0530 Subject: [PATCH 5/5] .