Style scrollbar for supported browsers

ComputerScienceHouse · Aug 7, 2022 · 9d52f0d · 9d52f0d
1 parent df28c3f
commit 9d52f0d
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -9,15 +9,33 @@ $csh-pink: #b0197e;
 
 
 body {
+  position: relative;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
+  overflow: overlay; // For transparent scrollbar
+  background: white;
 }
 
-body {
-  position: relative;
-  background: white;
+/* Scrollbar (only supported by some browsers) */
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.2);
+  border: 3px solid transparent;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 0.4);
+  border: 2px solid transparent;
 }
 
 .container.spaced {