From 69c980c60c75835812a9e30f72b9d3fc29caa0f4 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 1 Dec 2024 21:52:35 +0800
Subject: [PATCH] feat: improve top bar linear-gradient transparent effect

---
 src/components/TopBar/TopBar.vue | 11 +++--------
 src/contentScripts/views/App.vue |  5 ++++-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 52b5f4e7..432c9c6b 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -417,19 +417,14 @@ defineExpose({
           pos="absolute top-0 left-0" w-full h-80px
           pointer-events-none transform-gpu
         />
+
         <Transition name="fade">
           <div
-            v-if="!reachTop"
+            v-if="!reachTop && (!isHomePage() || settings.useOriginalBilibiliHomepage)"
             pos="absolute top-0 left-0" w-full h-80px
             pointer-events-none opacity-80
             :style="{
-              background: `linear-gradient(to bottom, ${(
-                settings.wallpaper
-                || settings.useSearchPageModeOnHomePage
-                && settings.searchPageWallpaper
-                && settings.individuallySetSearchPageWallpaper)
-                && isHomePage()
-                ? 'rgba(0,0,0,.6)' : `${isHomePage() ? 'var(--bew-homepage-bg)' : 'var(--bew-bg)'}`}, transparent)`,
+              background: `linear-gradient(to bottom, var(--bew-bg), transparent)`,
             }"
           />
         </Transition>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index bce7e276..90a3492b 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -259,7 +259,10 @@ provide<BewlyAppProvider>('BEWLY_APP', {
 
     <div
       pos="absolute top-0 left-0" w-full h-full
-      :style="{ height: showBewlyPage ? '100dvh' : '0' }"
+      :style="{
+        height: showBewlyPage ? '100dvh' : '0',
+        maskImage: isHomePage() ? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) calc(var(--bew-top-bar-height) / 4), black var(--bew-top-bar-height), black)' : 'none',
+      }"
     >
       <template v-if="showBewlyPage">
         <OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer @os-scroll="handleOsScroll">