utils scrollbar

Author: Ohswedd

src/css/bundle.css

@@ -513,6 +513,47 @@ body.typography-bold {
 }
 
 
+/* --- scrollbar.css --- */
+html, body {
+    scrollbar-width: thin; /* For Firefox */
+    scrollbar-color: var(--neutral-300) var(--neutral-50); /* Thumb and Track */
+}
+
+/* Webkit-based Browsers */
+html::-webkit-scrollbar, body::-webkit-scrollbar {
+    width: 12px; /* Vertical scrollbar width */
+    height: 12px; /* Horizontal scrollbar height */
+    background-color: var(--neutral-50); /* Track background */
+}
+
+html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
+    background-color: var(--neutral-300); /* Thumb color */
+    border-radius: var(--radius-lg); /* Rounded corners for thumb */
+    border: 3px solid var(--neutral-50); /* Creates a spacing effect */
+}
+
+html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
+    background-color: var(--neutral-400); /* Slightly darker thumb on hover */
+}
+
+html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active {
+    background-color: var(--neutral-500); /* Even darker thumb on active */
+}
+
+html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
+    background-color: var(--neutral-50); /* Track background */
+    border-radius: var(--radius-md); 
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    html::-webkit-scrollbar, body::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+}
+
+
 /* --- sections.css --- */
 /* Base Section Styling */
 section {

src/css/utils/scrollbar.css

@@ -0,0 +1,38 @@
+html, body {
+    scrollbar-width: thin; /* For Firefox */
+    scrollbar-color: var(--neutral-300) var(--neutral-50); /* Thumb and Track */
+}
+
+/* Webkit-based Browsers */
+html::-webkit-scrollbar, body::-webkit-scrollbar {
+    width: 12px; /* Vertical scrollbar width */
+    height: 12px; /* Horizontal scrollbar height */
+    background-color: var(--neutral-50); /* Track background */
+}
+
+html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
+    background-color: var(--neutral-300); /* Thumb color */
+    border-radius: var(--radius-lg); /* Rounded corners for thumb */
+    border: 3px solid var(--neutral-50); /* Creates a spacing effect */
+}
+
+html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
+    background-color: var(--neutral-400); /* Slightly darker thumb on hover */
+}
+
+html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active {
+    background-color: var(--neutral-500); /* Even darker thumb on active */
+}
+
+html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
+    background-color: var(--neutral-50); /* Track background */
+    border-radius: var(--radius-md); 
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    html::-webkit-scrollbar, body::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+}