From 80dd62ae0f201759164bce77c230c61bd5d7df39 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 30 Jul 2024 12:05:03 +0800
Subject: [PATCH] chore: adjust top bar height

---
 src/components/SearchBar/SearchBar.vue |  13 ++-
 src/components/TopBar/OldTopBar.vue    |  12 +--
 src/components/TopBar/TopBar.vue       | 129 +++++++++++++------------
 src/contentScripts/views/App.vue       |   2 +-
 src/contentScripts/views/Home/Home.vue |   2 +-
 src/styles/variables.scss              |   2 +-
 6 files changed, 84 insertions(+), 76 deletions(-)

diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 03f38571..fdc82811 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -169,7 +169,7 @@ async function handleClearSearchHistory() {
 </script>
 
 <template>
-  <div id="search-wrap" w="full" max-w="550px" pos="relative">
+  <div id="search-wrap" w="full" max-w="550px" h-46px pos="relative">
     <div
       v-if="!darkenOnFocus && isFocus"
       pos="fixed top-0 left-0"
@@ -192,7 +192,12 @@ async function handleClearSearchHistory() {
       :style="{ backdropFilter: isFocus ? 'blur(15px)' : 'blur(0)' }"
     />
 
-    <div class="search-bar group" :class="isFocus ? 'focus' : ''" flex="~" items-center pos="relative">
+    <div
+      class="search-bar group"
+      :class="isFocus ? 'focus' : ''"
+      flex="~ items-center" pos="relative"
+      h-inherit
+    >
       <Transition name="focus-character">
         <img
           v-show="focusedCharacter && isFocus" :src="focusedCharacter"
@@ -205,7 +210,7 @@ async function handleClearSearchHistory() {
         v-model="keyword"
         rounded="60px focus:$bew-radius"
         p="l-6 r-18 y-3"
-        h-50px
+        h-inherit
         text="$bew-text-1"
         un-border="1 solid $bew-border-color focus:$bew-theme-color"
         transition="all duration-300"
@@ -234,7 +239,7 @@ async function handleClearSearchHistory() {
         transition="all duration-300"
         border-none
         outline-none
-        pos="absolute right-2"
+        pos="absolute right-6px"
         bg="hover:$bew-fill-2"
         filter="group-focus-within:~"
         style="--un-drop-shadow: drop-shadow(0 0 6px var(--bew-theme-color))"
diff --git a/src/components/TopBar/OldTopBar.vue b/src/components/TopBar/OldTopBar.vue
index 21eb0852..1acd8216 100644
--- a/src/components/TopBar/OldTopBar.vue
+++ b/src/components/TopBar/OldTopBar.vue
@@ -488,10 +488,10 @@ defineExpose({
               :class="{ activated: popupVisible.channels }"
               style="backdrop-filter: var(--bew-filter-glass-1);"
               grid="~ place-items-center" border="1 $bew-border-color"
-              rounded="50px" duration-300
+              rounded="46px" duration-300
               bg="$bew-elevated hover:$bew-theme-color dark-hover:white"
               shadow="$bew-shadow-2"
-              w-50px h-50px transform-gpu
+              w-46px h-46px transform-gpu
             >
 
               <svg
@@ -595,10 +595,10 @@ defineExpose({
             class="others"
             :class="{ inactive: rightSideInactive }"
             style="
-            backdrop-filter: var(--bew-filter-glass-1);
-            box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
-          "
-            flex h-50px px-6px bg="$bew-elevated"
+              backdrop-filter: var(--bew-filter-glass-1);
+              box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
+            "
+            flex h-46px px-5px bg="$bew-elevated"
             transition="transition-property-colors duration-150"
             text="$bew-text-1" border="1 $bew-border-color" rounded-full
             transform-gpu
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 800aeedc..a797718c 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -488,10 +488,10 @@ defineExpose({
               :class="{ activated: popupVisible.channels }"
               style="backdrop-filter: var(--bew-filter-glass-1);"
               grid="~ place-items-center" border="1 $bew-border-color"
-              rounded="50px" duration-300
+              rounded="46px" duration-300
               bg="$bew-elevated hover:$bew-theme-color dark-hover:white"
               shadow="$bew-shadow-2"
-              w-50px h-50px transform-gpu
+              w-46px h-46px transform-gpu
             >
 
               <svg
@@ -521,9 +521,9 @@ defineExpose({
             <SearchBar
               v-if="showSearchBar"
               style="
-              --b-search-bar-color: var(--bew-elevated);
-              --b-search-bar-hover: var(--bew-elevated-hover);
-            "
+                --b-search-bar-color: var(--bew-elevated);
+                --b-search-bar-hover: var(--bew-elevated-hover);
+              "
             />
           </Transition>
         </div>
@@ -540,7 +540,7 @@ defineExpose({
               backdrop-filter: var(--bew-filter-glass-1);
               box-shadow: var(--bew-shadow-edge-glow-1), var(--bew-shadow-2);
             "
-            flex="~ items-center gap-1" h-50px px-6px bg="$bew-elevated"
+            flex="~ items-center gap-1" h-46px px-5px bg="$bew-elevated"
             transition="transition-property-colors duration-150"
             text="$bew-text-1" border="1 $bew-border-color" rounded-full
             transform-gpu
@@ -694,65 +694,68 @@ defineExpose({
                 </Transition>
               </div>
 
-              <div
-                w-4px h="40%" bg="$bew-fill-1" mx-1
-                rounded-4px
-              />
+              <div class="hidden lg:flex" gap-1 items-center>
+                <!-- Divider -->
+                <div
+                  w-4px h-22px bg="$bew-fill-1" mx-1
+                  rounded-4px
+                />
 
-              <!-- Upload -->
-              <div
-                ref="upload"
-                class="right-side-item"
-                :class="{ active: popupVisible.upload }"
-              >
-                <a
-                  href="https://member.bilibili.com/platform/upload/video/frame"
-                  target="_blank"
-                  :title="$t('topbar.upload')"
+                <!-- Upload -->
+                <div
+                  ref="upload"
+                  class="right-side-item"
+                  :class="{ active: popupVisible.upload }"
                 >
-                  <div i-mingcute:upload-2-line flex-shrink-0 />
-                </a>
-
-                <Transition name="slide-in">
-                  <UploadPop
-                    v-if="popupVisible.upload"
-                    class="bew-popover"
-                  />
-                </Transition>
-              </div>
-
-              <!-- Notifications -->
-              <div
-                ref="notifications"
-                class="right-side-item"
-                :class="{ active: popupVisible.notifications }"
-              >
-                <template v-if="unReadMessageCount > 0">
-                  <div
-                    v-if="settings.topBarIconBadges === 'number'"
-                    class="unread-num-dot"
+                  <a
+                    href="https://member.bilibili.com/platform/upload/video/frame"
+                    target="_blank"
+                    :title="$t('topbar.upload')"
                   >
-                    {{ unReadMessageCount > 99 ? '99+' : unReadMessageCount }}
-                  </div>
-                  <div
-                    v-else-if="settings.topBarIconBadges === 'dot'"
-                    class="unread-dot"
-                  />
-                </template>
-                <a
-                  href="https://message.bilibili.com"
-                  :target="isHomePage() ? '_blank' : '_self'"
-                  :title="$t('topbar.notifications')"
-                >
-                  <div i-tabler:bell />
-                </a>
+                    <div i-mingcute:upload-2-line flex-shrink-0 />
+                  </a>
 
-                <Transition name="slide-in">
-                  <NotificationsPop
-                    v-if="popupVisible.notifications"
-                    class="bew-popover"
-                  />
-                </Transition>
+                  <Transition name="slide-in">
+                    <UploadPop
+                      v-if="popupVisible.upload"
+                      class="bew-popover"
+                    />
+                  </Transition>
+                </div>
+
+                <!-- Notifications -->
+                <div
+                  ref="notifications"
+                  class="right-side-item"
+                  :class="{ active: popupVisible.notifications }"
+                >
+                  <template v-if="unReadMessageCount > 0">
+                    <div
+                      v-if="settings.topBarIconBadges === 'number'"
+                      class="unread-num-dot"
+                    >
+                      {{ unReadMessageCount > 99 ? '99+' : unReadMessageCount }}
+                    </div>
+                    <div
+                      v-else-if="settings.topBarIconBadges === 'dot'"
+                      class="unread-dot"
+                    />
+                  </template>
+                  <a
+                    href="https://message.bilibili.com"
+                    :target="isHomePage() ? '_blank' : '_self'"
+                    :title="$t('topbar.notifications')"
+                  >
+                    <div i-tabler:bell />
+                  </a>
+
+                  <Transition name="slide-in">
+                    <NotificationsPop
+                      v-if="popupVisible.notifications"
+                      class="bew-popover"
+                    />
+                  </Transition>
+                </div>
               </div>
             </template>
           </div>
@@ -935,8 +938,8 @@ defineExpose({
     --uno: "relative text-$bew-text-1 flex items-center";
 
     &:not(.avatar) a {
-      --uno: "text-xl flex items-center p-2 rounded-40px duration-300 relative z-5";
-      --uno: "h-35px h-35px";
+      --uno: "text-xl grid place-items-center rounded-40px duration-300 relative z-5";
+      --uno: "h-34px w-34px";
     }
 
     &.active a,
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 87498f90..3ea704e8 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -314,7 +314,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
         <OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer @os-scroll="handleOsScroll">
           <main m-auto max-w="$bew-page-max-width">
             <div
-              p="t-80px" m-auto
+              p="t-[calc(var(--bew-top-bar-height)+10px)]" m-auto
               w="lg:85% md:[calc(90%-60px)] [calc(100%-140px)]"
             >
               <!-- control button group -->
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 4b028996..f5207fc4 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -190,7 +190,7 @@ function toggleTabContentLoading(loading: boolean) {
       </Transition>
 
       <header
-        pos="sticky top-80px" w-full z-9 mb-9 duration-300
+        pos="sticky top-[calc(var(--bew-top-bar-height)+10px)]" w-full z-9 mb-8 duration-300
         ease-in-out flex="~ justify-between items-start gap-4"
         :class="{ hide: shouldMoveTabsUp }"
       >
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index fa0ad712..1a4fd781 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -7,7 +7,7 @@
   --bew-radius: 12px;
   --bew-radius-half: calc(var(--bew-radius) / 2);
 
-  --bew-top-bar-height: 70px;
+  --bew-top-bar-height: 68px;
 
   // #region Filters
   // Use this in all components (except dialogs) if you want to add a frosted glass effect