From 74fc7749ffe8b3b6b11802f040e021e2e8a6fb68 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 8 Nov 2023 23:29:35 +0800
Subject: [PATCH] feat: redesign top bar mask

---
 src/components/Topbar/Topbar.vue | 22 ++++++++++++++++++++++
 src/contentScripts/views/App.vue |  4 +++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index 73b0e55b..118a2a49 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -4,10 +4,12 @@ import { onMounted, watch } from 'vue'
 import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 import { updateInterval } from './notify'
 import { getUserID } from '~/utils/main'
+import { settings } from '~/logic'
 
 interface Props {
   showSearchBar?: boolean
   showLogo?: boolean
+  mask?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -200,6 +202,26 @@ async function getTopbarNewMomentsCount() {
       p="lg:x-20 md:x-16 x-14"
       h="70px"
     >
+      <!-- Top bar mask -->
+      <div
+        v-if="mask"
+        pos="absolute top-0 left-0" w-full h-70px backdrop="blur-10px" filter-blur-8px
+        pointer-events-none
+        style="mask-image: linear-gradient(to bottom,  black 70%, transparent);"
+      />
+      <Transition name="fade">
+        <div
+          v-if="mask"
+          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
+              ? 'rgba(0,0,0,.6)' : 'var(--bew-bg)'}, transparent)`
+          }"
+        />
+      </Transition>
+
       <div w="2xl:380px xl:280px" shrink-0>
         <div
           z-1 relative w-fit
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 81bbd128..82ca9c4e 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -284,12 +284,14 @@ provide('activatedPage', activatedPage)
           pos="top-0 left-0" z="99 hover:999" w-full
           :style="{ position: isTopbarFixed ? 'fixed' : 'absolute' }"
           :show-search-bar="!isSearchPage"
+          :mask="showTopbarMask"
         />
         <Topbar
           v-else-if="settings.isShowTopbar && isHomePage"
           :show-search-bar="showTopbarMask && settings.useSearchPageModeOnHomePage || (!settings.useSearchPageModeOnHomePage && activatedPage !== AppPage.Search || activatedPage !== AppPage.Home && activatedPage !== AppPage.Search)"
           :show-logo="showTopbarMask && settings.useSearchPageModeOnHomePage || (!settings.useSearchPageModeOnHomePage || activatedPage !== AppPage.Home)"
-          pos="fixed top-0 left-0" z-99 w-full
+          :mask="showTopbarMask"
+          pos="fixed top-0 left-0" z="99 hover:999" w-full
         />
       </Transition>
     </div>