perf(style): beautify scrollbar

src/client/theme-default/components/VPSidebar.vue

@@ -120,5 +120,25 @@ watchPostEffect(async () => {
   .group + .group {
     margin-top: 24px;
   }
+
+  .VPSidebar:hover::-webkit-scrollbar {
+    display: block;
+  }
+
+  .VPSidebar::-webkit-scrollbar {
+    display: none;
+    width: 10px;
+    background: transparent;
+  }
+
+  .VPSidebar::-webkit-scrollbar-thumb {
+    background: var(--vp-c-text-4) content-box;
+    border: 2px solid transparent;
+    border-radius: 5px;
+  }
+
+  .VPSidebar::-webkit-scrollbar-thumb:hover {
+    background: var(--vp-c-text-3) content-box;
+  }
 }
 </style>

src/client/theme-default/styles/base.css

@@ -32,6 +32,21 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body::-webkit-scrollbar-thumb {
+  background: var(--vp-c-text-4) content-box;
+  border: 2px solid transparent;
+  border-radius: 5px;
+}
+
+body::-webkit-scrollbar {
+  width: 10px;
+  background: transparent;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+  background: var(--vp-c-text-3) content-box;
+}
+
 main {
   display: block;
 }

src/client/theme-default/styles/components/vp-doc.css

@@ -270,12 +270,37 @@
     border-radius: 8px;
     margin: 16px 0;
   }
+
+  .vp-doc div[class*='language-'] {
+    padding: 6px;
+  }
+
+  .vp-doc div[class*='language-'] pre {
+    padding: 8px 18px;
+  }
+
+  .vp-doc div[class*='language-'] pre::-webkit-scrollbar {
+    height: 6px;
+    background: transparent;
+  }
+
+  .vp-doc div[class*='language-'] pre::-webkit-scrollbar-thumb {
+    background: var(--vp-c-text-inverse-3) content-box;
+    border: 0px solid transparent;
+    border-radius: 3px;
+  }
+
+  .vp-doc div[class*='language-'] pre::-webkit-scrollbar-thumb:hover {
+    background: var(--vp-c-text-inverse-2) content-box;
+  }
 }
 
 @media (max-width: 639px) {
   .vp-doc li div[class*='language-'] {
     border-radius: 8px 0 0 8px;
   }
+
+  
 }
 
 .vp-doc div[class*='language-'] + div[class*='language-'],