Add custom scroll bar (#64)

* Add custom scroll bar * Move styling to GeneralLayout * Disable custom scrollbar for mobile devices * Use tailwind breakpoint Co-authored-by: User1 <xumichael94@yahoo.com>
acmutd · Aug 13, 2020 · a95c3ab · a95c3ab
1 parent 6bf1de9
commit a95c3ab
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html ${htmlAttrs}>
-
 <head>
   ${head}
 

diff --git a/src/layouts/GeneralLayout.vue b/src/layouts/GeneralLayout.vue
@@ -46,4 +46,32 @@ export default {
   top:0;
   left:0;
 }
-</style>
+
+@screen md {
+  /* scrollbar width */
+  ::-webkit-scrollbar {
+    background-color:#292F362c;
+    width:8px;
+  }
+
+  /* scrollbar track */
+  ::-webkit-scrollbar-track {
+    background-color:#292f362c;
+  }
+  
+  /* scrollbar handle */
+  ::-webkit-scrollbar-thumb {
+    background-color:#ffc286;
+    border-radius:8px;
+  }
+
+  /* scrollbar handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #ce9d6d; 
+  }
+
+  ::-webkit-scrollbar-button {
+    display:none
+  }
+}
+</style>