From 47c4c2b57a265253917b04321fc6e2f350eeec85 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 10 Sep 2023 19:42:35 +0800
Subject: [PATCH] style: adjust top bar style

---
 src/components/SearchBar/SearchBar.vue |  1 +
 src/components/Topbar/Topbar.vue       | 20 ++++-----
 src/contentScripts/views/App.vue       | 57 +++++++++++++-------------
 3 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index f61895be..d6b88d6d 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -154,6 +154,7 @@ function handleKeyDown() {
         h-50px
         text="$bew-text-1"
         un-border="3 solid transparent focus:$bew-theme-color"
+        ring="1 $bew-border-color"
         transition="all duration-300"
         type="text"
         @focus="isFocus = true"
diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index b64b264e..91fc8aab 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -286,8 +286,8 @@ async function getNewMomentsCount() {
             class="avatar-img"
             rounded-full
             z-1
-            w-40px
-            h-40px
+            w-38px
+            h-38px
             bg="$bew-fill-3 cover center"
             :style="{
               backgroundImage: `url(${`${userInfo.face}`.replace(
@@ -302,11 +302,11 @@ async function getNewMomentsCount() {
             pos="absolute top-0"
             bg="cover center"
             blur-sm
-            opacity="80"
+            opacity="60"
             rounded-full
             z-0
-            w-40px
-            h-40px
+            w-38px
+            h-38px
             :style="{
               backgroundImage: `url(${`${userInfo.face}`.replace(
                 'http:',
@@ -556,9 +556,9 @@ async function getNewMomentsCount() {
 }
 
 .right-side {
-  --at-apply: flex h-55px items-center rounded-full p-2
-    bg-$bew-content-1 text-$bew-text-1;
-  backdrop-filter: var(--bew-filter-glass);
+  --at-apply: flex h-55px items-center rounded-full p-2 backdrop-glass
+    bg-$bew-content-1 text-$bew-text-1 border-1 border-$bew-border-color
+    box-border;
   box-shadow: var(--bew-shadow-2);
 
   .unread-message {
@@ -604,14 +604,14 @@ async function getNewMomentsCount() {
   }
 
   .avatar {
-    --at-apply: flex items-center ml-1 pr-2 relative z-1;
+    --at-apply: flex items-center ml-2px pr-2 relative z-1;
 
     .avatar-img,
     .avatar-shadow {
       --at-apply: duration-300;
 
       &.hover {
-        --at-apply: transform scale-230 important:translate-y-30px;
+        --at-apply: transform scale-230 important:translate-y-36px;
       }
     }
 
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 2c1a51ac..f3820121 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -13,7 +13,7 @@ import Favorites from './Favorites/Favorites.vue'
 import { accessKey, settings } from '~/logic'
 import '~/styles/index.ts'
 import { AppPage, LanguageType } from '~/enums/appEnums'
-import { getUserID, hexToRGBA, injectCSS, smoothScrollToTop } from '~/utils/main'
+import { getUserID, hexToRGBA, smoothScrollToTop } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 const activatedPage = ref<AppPage>(AppPage.Home)
@@ -42,9 +42,6 @@ const mainAppOpacity = ref<number>(0)
 const showTopbarMask = ref<boolean>(false)
 const dynamicComponentKey = ref<string>(`dynamicComponent${Number(new Date())}`)
 
-// const isVideoPage = ref<boolean>(false)
-// const isHomePage = ref<boolean>(false)
-
 const tooltipPlacement = computed(() => {
   if (settings.value.dockPosition === 'left')
     return 'right'
@@ -73,14 +70,34 @@ const isVideoPage = computed(() => {
   return false
 })
 
-const isSearchPage = computed(() => {
+const isTopbarFixed = computed(() => {
   if (
-    /https?:\/\/search.bilibili.com\/.*$/.test(location.href)
+    // home page
+    /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)
+
+    // // search page
+    // || /https?:\/\/search.bilibili.com\/.*$/.test(location.href)
+    // video page
+    || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href)
+    // moment page
+    || /https?:\/\/t.bilibili.com.*/.test(location.href)
   )
     return true
   return false
 })
 
+// const isSearchPage = computed(() => {
+//   if (
+//     /https?:\/\/search.bilibili.com\/.*$/.test(location.href)
+//   )
+//     return true
+//   return false
+// })
+
 watch(
   () => activatedPage.value,
   () => {
@@ -165,18 +182,6 @@ onMounted(() => {
     else showTopbarMask.value = false
   })
 
-  if (!isHomePage.value) {
-    injectCSS(`
-    .bili-header .bili-header__bar, #bili-header-container {
-      visibility: hidden
-    }
-    `)
-
-    // const originalTopBar: HTMLElement = document.querySelector('.bili-header .bili-header__bar, #bili-header-container') as HTMLElement
-    // if (originalTopBar)
-    //   originalTopBar.style.visibility = 'hidden'
-  }
-
   setAppAppearance()
   setAppLanguage()
   setAppThemeColor()
@@ -312,19 +317,13 @@ function handleBackToTop() {
   >
     <div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.4 : 1 }">
       <Transition name="topbar">
+        <!-- v-if="!isSearchPage" -->
         <Topbar
-          v-if="!isSearchPage"
-          v-show="settings.isShowTopbar"
+          v-if="settings.isShowTopbar"
           :show-search-bar="activatedPage !== AppPage.Search"
-          :show-topbar-mask="showTopbarMask"
-          :pos="`${!isHomePage ? 'fixed' : 'absolute'} top-0 left-0`" z-50
-        />
-        <Topbar
-          v-else
-          v-show="settings.isShowTopbar"
-          :show-search-bar="activatedPage !== AppPage.Search"
-          :show-topbar-mask="showTopbarMask"
-          pos="absolute top-0 left-0" z-50 w="[calc(100%-8px)]"
+          :show-topbar-mask="showTopbarMask && isTopbarFixed"
+          pos="top-0 left-0" z-50 w="[calc(100%-8px)]"
+          :style="{ position: isTopbarFixed ? 'fixed' : 'absolute' }"
         />
       </Transition>