feat: dark theme support to video page & search page

* style: adjust style of certain components
* refactor: refine implementation for wallpaper mask and background effect
* feat: add functionality to the top bar logo for returning to the homepage on click

src/components/Button.vue

@@ -14,6 +14,7 @@ interface Props {
   color?: string
   textColor?: string
   strong?: boolean
+  round?: boolean
 }
 
 // const props = withDefaults(defineProps<Props>(), {})
@@ -37,7 +38,7 @@ function handleClick(evt: MouseEvent) {
       ${strong ? 'b-button--strong' : ''}
       ${color || textColor ? 'b-button--custom-color' : ''}
     `"
-    :style="{ backgroundColor: color, color: textColor }"
+    :style="{ 'backgroundColor': color, 'color': textColor, '--b-radius': round ? '50px' : '' }"
     @click="handleClick"
   >
     <slot name="left" />
@@ -59,7 +60,7 @@ function handleClick(evt: MouseEvent) {
   --at-apply: bg-$b-color hover:bg-$b-color-hover
     rounded-$b-radius p-$b-padding transform-gpu active:scale-95
     duration-300 flex items-center gap-2 text-size-$b-font-size
-    text-$b-text-color;
+    text-$b-text-color lh-1.5em;
 
     & svg {
       --at-apply: text-size-$b-icon-size

src/components/SearchBar/SearchBar.vue

@@ -160,6 +160,7 @@ function handleKeyDown() {
         @keyup.enter="navigateToSearchResultPage(keyword)"
         @keyup.up="handleKeyUp"
         @keyup.down="handleKeyDown"
+        @keydown.stop="() => {}"
       >
       <button
         p-2
@@ -174,7 +175,7 @@ function handleKeyDown() {
         style="--un-drop-shadow: drop-shadow(0 0 6px var(--bew-theme-color)) "
         @click="navigateToSearchResultPage(keyword)"
       >
-        <tabler:search />
+        <tabler:search block align-middle />
       </button>
     </div>
 
@@ -205,7 +206,7 @@ function handleKeyDown() {
             pointer-events-auto
             cursor-pointer
             text="base $bew-text-2"
-            leading-0
+            leading-0 p-0
             @click.stop="handleDelete(item.value)"
           >
             <ic-baseline-clear />

src/components/Slider.vue

@@ -59,20 +59,20 @@ label {
 input[type="range"] {
   &::-webkit-slider-thumb {
     --at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
-      border-2 border-$bew-border-color cursor-pointer;
+      ring-$bew-border-color ring-2 cursor-pointer duration-300;
   }
 
   &::-webkit-slider-thumb:hover {
-    --at-apply: border-$bew-theme-color;
+    --at-apply: ring-$bew-theme-color;
   }
 
   &::-moz-range-thumb {
     --at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
-      border-2 border-$bew-border-color cursor-pointer;
+      ring-$bew-border-color ring-2 cursor-pointer duration-300;
   }
 
   &::-moz-range-thumb:hover {
-    --at-apply: border-$bew-theme-color;
+    --at-apply: ring-$bew-theme-color;
   }
 }
 </style>

src/components/Topbar/Topbar.vue

@@ -200,7 +200,7 @@ function getNewMomentsCount() {
         opacity="100"
         pointer-events-none
         z--1
-        :style="{ background: settings.wallpaper ? 'linear-gradient(rgba(0,0,0,.8), transparent)' : `linear-gradient(var(--bew-bg), transparent)` }"
+        :style="{ background: settings.wallpaper ? 'linear-gradient(rgba(0,0,0,4), transparent)' : `linear-gradient(var(--bew-bg), transparent)` }"
       />
     </Transition>
 
@@ -209,7 +209,9 @@ function getNewMomentsCount() {
       @mouseenter.self="showLogoMenuDropdown()"
       @mouseleave.self="closeLogoMenuDropdown()"
     >
-      <div ref="logo" class="logo">
+      <a
+        ref="logo" class="logo" href="//www.bilibili.com"
+      >
         <svg
           t="1645466458357"
           class="icon"
@@ -226,14 +228,14 @@ function getNewMomentsCount() {
           />
         </svg>
 
-        <tabler:chevron-down
+        <!-- <tabler:chevron-down
           w="!4"
           h="!4"
           m="l-4"
           icon="stroke-4"
           :style="{ color: settings.wallpaper && showTopbarMask ? 'white' : 'var(--bew-text-1)' }"
-        />
-      </div>
+        /> -->
+      </a>
       <Transition name="slide-in">
         <TopbarChannelsPop
           v-if="showChannelsPop"