From 038d2a03484ad1e541ff117e085e15a2725d6197 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 3 Sep 2023 12:34:29 +0800
Subject: [PATCH] fix: correct topbar mask color inconsistency with homepage
 background

---
 src/components/Topbar/Topbar.vue | 14 +++++++++++++-
 src/contentScripts/views/App.vue | 10 +++++-----
 src/styles/variables.scss        |  6 +++---
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index e856888d..4d9bc3fb 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -42,6 +42,18 @@ const logo = ref<HTMLElement>() as Ref<HTMLElement>
 const avatarImg = ref<HTMLImageElement>() as Ref<HTMLImageElement>
 const avatarShadow = ref<HTMLImageElement>() as Ref<HTMLImageElement>
 
+const isHomePage = computed(() => {
+  if (
+    /https?:\/\/bilibili.com\/?$/.test(location.href)
+  || /https?:\/\/www.bilibili.com\/?$/.test(location.href)
+  || /https?:\/\/www.bilibili.com\/index.html$/.test(location.href)
+  || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(location.href)
+  || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(location.href)
+  )
+    return true
+  return false
+})
+
 watch(
   showNotificationsPop,
   (newVal, oldVal) => {
@@ -198,7 +210,7 @@ async function getNewMomentsCount() {
         opacity="100"
         pointer-events-none
         z--1
-        :style="{ background: settings.wallpaper ? 'linear-gradient(rgba(0,0,0,0.5), transparent)' : `linear-gradient(var(--bew-bg), transparent)` }"
+        :style="{ background: settings.wallpaper && isHomePage ? 'linear-gradient(rgba(0,0,0,0.5), transparent)' : `linear-gradient(var(--bew-homepage-bg), transparent)` }"
       />
     </Transition>
 
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 90a09c1b..b854cb2a 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -244,9 +244,9 @@ function setAppThemeColor() {
 function setAppWallpaperMaskingOpacity() {
   const bewlyElement = document.querySelector('#bewly') as HTMLElement
   if (settings.value.individuallySetSearchPageWallpaper && activatedPage.value === AppPage.Search)
-    bewlyElement.style.setProperty('--bew-bg-mask-opacity', `${settings.value.searchPageWallpaperMaskOpacity}%`)
+    bewlyElement.style.setProperty('--bew-homepage-bg-mask-opacity', `${settings.value.searchPageWallpaperMaskOpacity}%`)
   else
-    bewlyElement.style.setProperty('--bew-bg-mask-opacity', `${settings.value.wallpaperMaskOpacity}%`)
+    bewlyElement.style.setProperty('--bew-homepage-bg-mask-opacity', `${settings.value.wallpaperMaskOpacity}%`)
 }
 
 function handleRefresh() {
@@ -273,7 +273,7 @@ function handleBackToTop() {
         <transition name="fade">
           <div
             v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
-            pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask" duration-300 z--1
+            pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask" duration-300 z--1
             :style="{
               backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
             }"
@@ -283,14 +283,14 @@ function handleBackToTop() {
       <div v-else>
         <!-- background -->
         <div
-          pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-bg" z--1
+          pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg" z--1
           :style="{ backgroundImage: `url(${settings.wallpaper})` }"
         />
         <!-- background mask -->
         <transition name="fade">
           <div
             v-if="settings.enableWallpaperMasking"
-            pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask" duration-300 z--1
+            pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask" duration-300 z--1
             :style="{
               backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
             }"
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 54d6cf6f..83fa8556 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -83,8 +83,8 @@
 
   --bew-bg: hsl(0 0% 100%);
   --bew-homepage-bg: hsl(220 14% 96%);
-  --bew-bg-mask-opacity: 0;
-  --bew-bg-mask: hsl(220 14% 96% / var(--bew-bg-mask-opacity));
+  --bew-homepage-bg-mask-opacity: 0;
+  --bew-homepage-bg-mask: hsl(220 14% 96% / var(--bew-homepage-bg-mask-opacity));
 
   --bew-content-opacity: 0.6;
 
@@ -124,7 +124,7 @@
 
   --bew-bg: hsl(230 12% 6%);
   --bew-homepage-bg: hsl(230 12% 6%);
-  --bew-bg-mask: hsl(230 12% 6% / var(--bew-bg-mask-opacity));
+  --bew-homepage-bg-mask: hsl(230 12% 6% / var(--bew-homepage-bg-mask-opacity));
 
   --bew-content-1: hsl(230 12% 13% / var(--bew-content-opacity));
   --bew-content-1-hover: hsl(230 12% 25% / var(--bew-content-opacity));