feat: optimize scrollbar

src/components/Menu.vue

@@ -8,19 +8,19 @@ import { toggleDark } from '~/composables'
       <div i-ri-home-2-line />
     </RouterLink>
 
-    <button class="icon-btn mx-2 !outline-none" title="切换" @click="toggleDark()">
+    <button class="icon-btn mx-2 hover:text-yellow-400 !outline-none" title="切换" @click="toggleDark()">
       <div i="ri-sun-line dark:ri-moon-line" />
     </button>
 
-    <RouterLink class="icon-btn mx-2" to="/about" title="关于">
+    <RouterLink class="icon-btn mx-2 hover:text-blue-400" to="/about" title="关于">
       <div i-ri-information-line />
     </RouterLink>
 
-    <a class="icon-btn mx-2" rel="noreferrer" href="https://space.bilibili.com/1579790" target="_blank" title="BiliBili">
+    <a class="icon-btn mx-2 hover:text-pink-400" rel="noreferrer" href="https://space.bilibili.com/1579790" target="_blank" title="BiliBili">
       <div i-ri-bilibili-line />
     </a>
 
-    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/YunYouJun/cook" target="_blank" title="GitHub">
+    <a class="icon-btn mx-2 hover:text-black-400" rel="noreferrer" href="https://github.com/YunYouJun/cook" target="_blank" title="GitHub">
       <div i-ri-github-line />
     </a>
   </nav>

src/components/ToolTag.vue

@@ -8,7 +8,7 @@ defineProps<{
   <span
     class="tag rounded" p="x-2"
     :border="'~ stone-200 dark:stone-800' + (active ? 'dark:stone-200' : '')"
-    :bg="active ? 'stone-500 opacity-90' : 'stone-300 opacity-20'"
+    :bg="active ? 'stone-600 opacity-100' : 'stone-300 opacity-20'"
     :text="active ? 'stone-100' : 'stone-800 dark:stone-200'"
   >
     <slot />

src/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div text-4xl m="t-4">
-      <div i-mdi-pot-steam-outline inline-block />
+      <div class="bg-gradient-to-b from-dark-100 to-black-900 dark:(from-stone-200 to-light-900)" i-mdi-pot-steam-outline inline-block />
     </div>
     <p text="sm" m="b-4">
       好的，今天我们来做菜！

src/styles/index.scss

@@ -25,3 +25,31 @@ a {
 .v-leave-to {
   opacity: 0;
 }
+
+// scrollbar
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: rgba(122, 122, 122, 0.3);
+
+  &:window-inactive {
+    background-color: rgba(122, 122, 122, 0.3);
+  }
+
+  &:hover {
+    background-color: rgba(122, 122, 122, 0.7);
+  }
+
+  &:active {
+    background-color: rgba(122, 122, 122, 0.9);
+  }
+}