From 8c871ee4f9b250977b74d638c3ca5988bb40ba13 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sat, 16 Apr 2022 02:01:04 +0800
Subject: [PATCH] feat: optimize scrollbar

---
 src/components/Menu.vue    |  8 ++++----
 src/components/ToolTag.vue |  2 +-
 src/pages/index.vue        |  2 +-
 src/styles/index.scss      | 28 ++++++++++++++++++++++++++++
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 9ac4994..ad2f09a 100644
--- a/src/components/Menu.vue
+++ b/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>
diff --git a/src/components/ToolTag.vue b/src/components/ToolTag.vue
index 96e930c..d0df2a2 100644
--- a/src/components/ToolTag.vue
+++ b/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 />
diff --git a/src/pages/index.vue b/src/pages/index.vue
index c2e835d..2d228c0 100644
--- a/src/pages/index.vue
+++ b/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">
       好的，今天我们来做菜！
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 41a90e1..deb73fd 100644
--- a/src/styles/index.scss
+++ b/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);
+  }
+}