Merge pull request #30 from ostyjs/scrollbar

Enhance Scrollbar
ostyjs · Jan 17, 2025 · 53e4b53 · 53e4b53
2 parents ea19231 + 1ff814e
commit 53e4b53
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-osty",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "type": "module",
   "license": "MIT",
   "author": "Sepehr Safari",

diff --git a/templates/nostribe/package.json b/templates/nostribe/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nostribe",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/templates/nostribe/src/app/index.css b/templates/nostribe/src/app/index.css
@@ -33,6 +33,10 @@
     --ring: 0 0% 3.9%;
 
     --radius: 0.5rem;
+
+    --scrollbar-width: 0.5rem;
+    --scrollbar-color: 0 0% 0% / 0.2;
+    --scrollbar-color-hover: 0 0% 0% / 0.4;
   }
 
   .dark {
@@ -63,6 +67,9 @@
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
     --ring: 0 0% 83.1%;
+
+    --scrollbar-color: 0 0% 100% / 0.2;
+    --scrollbar-color-hover: 0 0% 100% / 0.4;
   }
 }
 
@@ -98,3 +105,16 @@
     @apply text-sm font-medium leading-none;
   }
 }
+
+::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: var(--radius);
+  background: hsla(var(--scrollbar-color));
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsla(var(--scrollbar-color-hover));
+}