feat: customize scrollbar

MetaCubeX · Sep 6, 2023 · c27b192 · c27b192
1 parent 474d4da
commit c27b192
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -111,7 +111,7 @@ export const Header = () => {
   const [openedDrawer, setOpenedDrawer] = createSignal(false)
 
   return (
-    <ul class="navbar rounded-box sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
+    <ul class="navbar sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
       <div class="navbar-start gap-4">
         <div class={twMerge('drawer w-auto lg:hidden', '')}>
           <input

diff --git a/src/index.css b/src/index.css
@@ -10,6 +10,23 @@
   src: url('assets/Twemoji.Mozilla.ttf') format('truetype');
 }
 
+:root {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--p)) transparent;
+}
+
 ::-webkit-scrollbar {
-  display: none;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply rounded-box bg-primary;
+}
+
+::-webkit-scrollbar:vertical {
+  width: 6px;
+}
+
+::-webkit-scrollbar:horizontal {
+  height: 6px;
 }
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
@@ -306,7 +306,7 @@ export default () => {
   ]
 
   return (
-    <div class="flex h-full flex-col gap-4 p-1">
+    <div class="flex h-full flex-col gap-2 p-1">
       <div class="tabs-boxed tabs gap-2">
         <For each={tabs()}>
           {(tab) => (