feat(ui): customize ui styles on webkit based browsers

mateusfg7 · Oct 4, 2023 · 1f99d63 · 1f99d63
1 parent 64187e1
commit 1f99d63
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/app/global.css b/src/app/global.css
@@ -38,4 +38,33 @@
       md:h-2 md:w-2
       md:group-hover:h-3 md:group-hover:w-3;
   }
+
+  .styled-scrollbar {
+    /* WEBKIT */
+
+    /* width */
+    &::-webkit-scrollbar {
+      @apply w-2 bg-transparent;
+    }
+
+    /* Track */
+    /*&::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }*/
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      @apply cursor-pointer rounded-full bg-neutral-800/40;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      @apply cursor-grab bg-neutral-800/70;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:active {
+      @apply bg-neutral-800/90;
+    }
+  }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -18,7 +18,7 @@ export default function Home() {
   return (
     <div className={container({ background })}>
       <Header />
-      <div className="h-[90vh] space-y-24 overflow-y-scroll pt-16 md:h-[87vh]">
+      <div className="styled-scrollbar h-[90vh] space-y-24 overflow-y-scroll pt-16 md:h-[87vh]">
         <div className="m-auto flex w-fit flex-col items-center gap-3">
           <div className="hidden w-full items-center justify-end gap-2 px-4 xs:flex">
             <SaveComboButton />