refactor: use --bew-top-bar-height to set the bewly top bar height

src/components/TopBar/TopBar.vue

@@ -386,8 +386,10 @@ defineExpose({
     :class="{ hide: hideTopBar }"
   >
     <main
-      max-w="$bew-page-max-width" m-auto flex="~ justify-between items-center gap-4"
-      p="lg:x-20 md:x-16 x-14" h="70px"
+      max-w="$bew-page-max-width"
+      flex="~ justify-between items-center gap-4"
+      p="lg:x-20 md:x-16 x-14" m-auto
+      h="$bew-top-bar-height"
     >
       <!-- Top bar mask -->
       <div

src/contentScripts/index.ts

@@ -107,13 +107,15 @@ if (settings.value.adaptToOtherPageStyles && isHomePage()) {
 }
 
 if (isSupportedPages()) {
-  // remove the original top bar
+  // remove the original top bar and adjust the height of the top bar to match the bewly top bar
   injectCSS(`
     .bili-header .bili-header__bar,
     #internationalHeader,
     .link-navbar,
-    #home_nav {
+    #home_nav,
+    #biliMainHeader {
       visibility: hidden;
+      height: var(--bew-top-bar-height) !important;
     }
   `)
 }

src/styles/variables.scss

@@ -4,6 +4,8 @@
   --bew-radius: 12px;
   --bew-radius-half: calc(var(--bew-radius) / 2);
 
+  --bew-top-bar-height: 70px;
+
   --bew-filter-glass-1: blur(20px) saturate(180%);
   --bew-filter-glass-2: blur(40px) saturate(180%);
   --bew-filter-icon-glow: saturate(0) brightness(2) drop-shadow(0 0 0.2px white)