style: adjusted styling

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>

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 {

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"

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

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

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"

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

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

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"

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"

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"
   >

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 {

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 {

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;
 }

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 {