feat(style): 🌟 add scrollbar style

vanntile · Aug 20, 2022 · f149c91 · f149c91
1 parent d1cfd15
commit f149c91
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -58,7 +58,7 @@ const origin = url.origin
     </script>
   </head>
 
-  <body>
+  <body class="scrollbar">
     {withNav && <Navigation />}
     <slot />
   </body>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -36,7 +36,7 @@
   }
 
   body {
-    @apply min-h-screen text-sm leading-6 text-gray-700 bg-white dark:text-brand-tint md:text-base md:leading-7 2xl:text-2xl 2xl:leading-relaxed selection:bg-brand selection:text-gray-50 dark:selection:bg-gray-100 dark:selection:text-brand dark:bg-gray-900;
+    @apply min-h-screen text-sm leading-6 text-gray-700 bg-gray-50 dark:text-brand-tint md:text-base md:leading-7 2xl:text-2xl 2xl:leading-relaxed selection:bg-brand selection:text-gray-50 dark:selection:bg-gray-100 dark:selection:text-brand dark:bg-gray-900;
   }
 
   /* Remove Safari input shadow on mobile */
@@ -247,6 +247,19 @@
       transform: scale(0.7) translateX(30px);
     }
   }
+}
+
+
+@layer utilities {
+  .pseudo-none::before,
+  .pseudo-none:hover::before,
+  .pseudo-none:focus::before,
+  .pseudo-none::after,
+  .pseudo-none:hover::after,
+  .pseudo-none:focus::after,
+  pre::-webkit-scrollbar {
+    display: none !important;
+  }
 
   /* ----------------------------------------------
   * Generated by Animista on 2021-3-26 14:40:37
@@ -303,17 +316,31 @@
     transform: translateY(20px);
     transition: opacity 300ms var(--easing),transform 300ms var(--easing);
   }
-}
 
+  .scrollbar {
+    scrollbar-color: bg-gray-600 bg-gray-900;
+  }
+
+   /* Scroll thumb styles */
+  .scrollbar::-webkit-scrollbar {
+    @apply w-2;
+  }
+  .scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-gray-600 rounded;
+  }
+  .scrollbar::-webkit-scrollbar-thumb:active {
+    @apply bg-gray-700 dark:text-brand-tint;
+  }
+  .scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-700 dark:text-brand-tint;
+  }
 
-@layer utilities {
-  .pseudo-none::before,
-  .pseudo-none:hover::before,
-  .pseudo-none:focus::before,
-  .pseudo-none::after,
-  .pseudo-none:hover::after,
-  .pseudo-none:focus::after,
-  pre::-webkit-scrollbar {
-    display: none !important;
+  /* Scroll track styles (Background) */
+  .scrollbar::-webkit-scrollbar-track {
+    @apply rounded bg-gray-50 dark:bg-gray-900;
+  }
+  .scrollbar::-webkit-scrollbar-track:hover,
+  .scrollbar::-webkit-scrollbar-track:active {
+    @apply bg-gray-50 dark:bg-gray-900;
   }
 }