From 0bfcb8e8db97a1a68b194dcbccfdb4751b695965 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 17 Jul 2023 01:23:26 +0800
Subject: [PATCH] style: adjusted styling

---
 src/components/Input.vue                       |  7 +++++--
 src/components/SearchBar/SearchBar.vue         |  1 +
 src/components/Select.vue                      |  2 +-
 src/components/Settings/Settings.vue           |  6 +++---
 src/components/Topbar/TopbarChannelsPop.vue    |  2 +-
 src/components/Topbar/TopbarFavoritesPop.vue   |  2 +-
 src/components/Topbar/TopbarHistoryPop.vue     |  4 ++--
 src/components/Topbar/TopbarMomentsPop.vue     |  4 ++--
 src/components/Topbar/TopbarMorePop.vue        |  2 +-
 .../Topbar/TopbarNotificationsPop.vue          |  4 ++--
 src/components/Topbar/TopbarUploadPop.vue      |  4 ++--
 src/components/Topbar/TopbarUserPanelPop.vue   |  3 +--
 src/contentScripts/views/App.vue               |  8 ++++----
 src/styles/main.scss                           |  3 ++-
 src/styles/variables.scss                      | 18 ++++++++++--------
 15 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/components/Input.vue b/src/components/Input.vue
index cd39cc6c..9cdcf5af 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -18,8 +18,11 @@ onMounted(() => {
 <template>
   <input
     v-model="modelValue" type="text" class="b-input"
-    p="x-4 y-2" border="2px $bew-fill-2 focus:$bew-theme-color" rounded="$bew-radius" outline-none
-    duration bg="$bew-content-solid-1"
+    p="x-4 y-2" border="1px transparent focus:$bew-theme-color"
+    rounded="$bew-radius" outline-none transition-all duration-300
+    bg="$bew-fill-1"
+    focus:shadow focus:ring="2px $bew-theme-color-60"
+
     @input="$emit('update:value', $event!.target!.value)"
   >
 </template>
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 8d1aac04..9b723091 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -263,6 +263,7 @@ export default defineComponent({
   #search-history,
   #search-suggestion {
     @include search-content;
+    --at-apply: bg-$bew-elevated-1;
 
     .history-item,
     .suggestion-item {
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 4208ad02..12241337 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -73,7 +73,7 @@ function onMouseEnter() {
 
       <!-- arrow -->
       <div
-        border="~ solid $bew-text-1 t-0 l-0 r-2 b-2"
+        border="~ solid $bew-fill-4 t-0 l-0 r-2 b-2"
         p="3px"
         m="l-2"
         display="inline-block"
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 1d9815ba..27778888 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -49,7 +49,7 @@ function changeMenuItem(menuItem: MenuType) {
     <aside class="group" shrink-0 px-4 pos="absolute left--42px" z-1>
       <ul
         flex="~ gap-4 col" rounded="30px hover:25px" bg="$bew-elevated-2" p-2 shadow="$bew-shadow-3"
-        group-hover:scale-105 duration-300 border="1px $bew-fill-1"
+        group-hover:scale-105 duration-300
         backdrop-glass
       >
         <li v-for="item in settingsMenuItems" :key="item.value">
@@ -72,8 +72,8 @@ function changeMenuItem(menuItem: MenuType) {
     </aside>
 
     <div
-      relative overflow-hidden w-full h-full bg="$bew-elevated-1" backdrop-glass
-      shadow="$bew-shadow-3" rounded="$bew-radius" border="1px $bew-fill-1"
+      relative overflow-hidden w-full h-full bg="$bew-elevated-solid-1"
+      shadow="$bew-shadow-3" rounded="$bew-radius"
     >
       <header
         flex justify-between items-center w-full h-80px
diff --git a/src/components/Topbar/TopbarChannelsPop.vue b/src/components/Topbar/TopbarChannelsPop.vue
index 6c7b2383..809be706 100644
--- a/src/components/Topbar/TopbarChannelsPop.vue
+++ b/src/components/Topbar/TopbarChannelsPop.vue
@@ -45,7 +45,7 @@ const genres = [
     backdrop-glass shadow="$bew-shadow-3"
     flex="~"
     p="4"
-    bg="$bew-content-1"
+    bg="$bew-elevated-1"
     rounded="$bew-radius"
   >
     <ul
diff --git a/src/components/Topbar/TopbarFavoritesPop.vue b/src/components/Topbar/TopbarFavoritesPop.vue
index c75a77ff..40e185d8 100644
--- a/src/components/Topbar/TopbarFavoritesPop.vue
+++ b/src/components/Topbar/TopbarFavoritesPop.vue
@@ -151,7 +151,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
 
 <template>
   <div
-    bg="$bew-content-solid-1"
+    bg="$bew-elevated-solid-1"
     w="500px"
     h="430px"
     rounded="$bew-radius"
diff --git a/src/components/Topbar/TopbarHistoryPop.vue b/src/components/Topbar/TopbarHistoryPop.vue
index 7ec7693f..db35f124 100644
--- a/src/components/Topbar/TopbarHistoryPop.vue
+++ b/src/components/Topbar/TopbarHistoryPop.vue
@@ -183,7 +183,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
 
 <template>
   <div
-    bg="$bew-content-solid-1"
+    bg="$bew-elevated-solid-1"
     w="380px"
     rounded="$bew-radius"
     pos="relative"
@@ -196,7 +196,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
       p="y-4 x-6"
       pos="fixed top-0 left-0"
       w="full"
-      bg="$bew-content-1"
+      bg="$bew-elevated-1"
       z="2"
       border="!rounded-t-$bew-radius"
       backdrop-glass
diff --git a/src/components/Topbar/TopbarMomentsPop.vue b/src/components/Topbar/TopbarMomentsPop.vue
index faf7a8ac..d8fad9b1 100644
--- a/src/components/Topbar/TopbarMomentsPop.vue
+++ b/src/components/Topbar/TopbarMomentsPop.vue
@@ -267,7 +267,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
 
 <template>
   <div
-    bg="$bew-content-solid-1"
+    bg="$bew-elevated-solid-1"
     w="380px"
     rounded="$bew-radius"
     pos="relative"
@@ -281,7 +281,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
       p="y-4 x-6"
       pos="fixed top-0 left-0"
       w="full"
-      bg="$bew-content-1"
+      bg="$bew-elevated-1"
       z="1"
       border="!rounded-t-$bew-radius"
       backdrop-glass
diff --git a/src/components/Topbar/TopbarMorePop.vue b/src/components/Topbar/TopbarMorePop.vue
index 76966ed0..0eca77a3 100644
--- a/src/components/Topbar/TopbarMorePop.vue
+++ b/src/components/Topbar/TopbarMorePop.vue
@@ -15,7 +15,7 @@ const list = [
 
 <template>
   <div
-    bg="$bew-content-solid-1"
+    bg="$bew-elevated-solid-1"
     w="170px"
     p="4"
     rounded="$bew-radius"
diff --git a/src/components/Topbar/TopbarNotificationsPop.vue b/src/components/Topbar/TopbarNotificationsPop.vue
index 704751b6..1dc175ba 100644
--- a/src/components/Topbar/TopbarNotificationsPop.vue
+++ b/src/components/Topbar/TopbarNotificationsPop.vue
@@ -66,12 +66,12 @@ export default defineComponent({
 
 <template>
   <div
-    bg="$bew-content-solid-1"
+    bg="$bew-elevated-solid-1"
     w="170px"
     p="4"
     rounded="$bew-radius"
     flex="~ col"
-    style="box-shadow: var(--bew-shadow-3)"
+    shadow="$bew-shadow-3"
   >
     <a
       v-for="item in list"
diff --git a/src/components/Topbar/TopbarUploadPop.vue b/src/components/Topbar/TopbarUploadPop.vue
index 623d219e..8478d713 100644
--- a/src/components/Topbar/TopbarUploadPop.vue
+++ b/src/components/Topbar/TopbarUploadPop.vue
@@ -1,9 +1,9 @@
 <template>
   <div
     flex="~ col"
-    bg="$bew-content-solid-1"
+    bg="$bew-elevated-solid-1"
     rounded="$bew-radius"
-    style="box-shadow: var(--bew-shadow-3);"
+    shadow="$bew-shadow-3"
     p="4"
     w="150px"
   >
diff --git a/src/components/Topbar/TopbarUserPanelPop.vue b/src/components/Topbar/TopbarUserPanelPop.vue
index d3b7e79d..d9470926 100644
--- a/src/components/Topbar/TopbarUserPanelPop.vue
+++ b/src/components/Topbar/TopbarUserPanelPop.vue
@@ -140,8 +140,7 @@ async function logout() {
 <style lang="scss" scoped>
 #user-info-panel {
   --at-apply: p-4 rounded-$bew-radius w-300px -z-1
-    bg-$bew-content-solid-1;
-  box-shadow: var(--bew-shadow-3);
+    bg-$bew-elevated-solid-1 shadow-$bew-shadow-3;
 }
 
 #base-info {
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 0f35f313..9c2d96f0 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -195,14 +195,14 @@ function setAppAppearance() {
             right: settings.dockPosition === 'right',
             bottom: settings.dockPosition === 'bottom',
           }"
-          pos="absolute top-0" flex="~ col" h-100vh justify-center z-999
+          pos="absolute top-0" flex="~ col" h-100vh justify-center z-999 pointer-events-none
         >
           <div
             class="dock-content"
             p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
-            rounded="$bew-radius" border="1px $bew-fill-1"
+            rounded="$bew-radius" border="1px $bew-border-color"
             shadow="$bew-shadow-2"
-            backdrop-glass
+            backdrop-glass pointer-events-auto
           >
             <Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
               <button
@@ -337,7 +337,7 @@ function setAppAppearance() {
   }
 
   .divider {
-    --at-apply: my-2 w-full h-2px bg-$bew-fill-3;
+    --at-apply: my-2 w-full h-1px bg-$bew-fill-4;
   }
 
   &.bottom .divider {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 231705c1..0410ca1d 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -26,7 +26,7 @@ html > ::-webkit-scrollbar-track {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(120, 120, 122, .5);
+  background-color: rgba(120, 120, 122, .6);
   border-radius: 20px;
 }
 
@@ -54,6 +54,7 @@ html > ::-webkit-scrollbar-track {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
+  line-break: anywhere;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ed364e42..365b9f73 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -101,10 +101,12 @@
   --bew-elevated-solid-2: hsl(0 0% 100%);
   // #endregion
 
-  --bew-fill-1: rgb(120 120 128 / 12%);
-  --bew-fill-2: rgb(120 120 128 / 22%);
-  --bew-fill-3: rgb(120 120 128 / 32%);
-  --bew-fill-4: rgb(120 120 128 / 42%);
+  --bew-fill-1: rgb(95 95 125 / 13%);
+  --bew-fill-2: rgb(95 95 125 / 23%);
+  --bew-fill-3: rgb(95 95 125 / 33%);
+  --bew-fill-4: rgb(95 95 125 / 43%);
+
+  --bew-border-color: var(--bew-fill-1);
 
   --bew-page-max-width: 2000px;
 }
@@ -134,10 +136,10 @@
   --bew-elevated-solid-1: hsl(230 12% 15%);
   --bew-elevated-solid-2: hsl(230 12% 20%);
 
-  --bew-fill-1: rgb(120 120 128 / 16%);
-  --bew-fill-2: rgb(120 120 128 / 26%);
-  --bew-fill-3: rgb(120 120 128 / 36%);
-  --bew-fill-4: rgb(120 120 128 / 46%);
+  --bew-fill-1: rgb(95 95 125 / 18%);
+  --bew-fill-2: rgb(95 95 125 / 26%);
+  --bew-fill-3: rgb(95 95 125 / 36%);
+  --bew-fill-4: rgb(95 95 125 / 46%);
 }
 
 :root {