change scrollbar color

LightNovelShelf · Sep 9, 2024 · e0b8135 · e0b8135
1 parent 06c6f68
commit e0b8135
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 119 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -91,101 +91,14 @@ onMounted(() => {
     },
     {
       scrollbars: {
-        theme: 'scrollbar-base scrollbar-dark',
+        theme: 'scrollbar-base scrollbar-auto',
         autoHide: 'move',
         autoHideDelay: 500,
         autoHideSuspend: false
       }
     }
   )
-  console.log('hello body')
 })
 </script>
 
-<style lang="scss">
-:root {
-  --scrollbar-bg-light: rgba(0, 0, 0, 0.4);
-  --scrollbar-bg-hover-light: rgba(0, 0, 0, 0.5);
-  --scrollbar-bg-active-light: rgba(0, 0, 0, 0.6);
-
-  --scrollbar-bg-dark: rgba(255, 255, 255, 0.4);
-  --scrollbar-bg-hover-dark: rgba(255, 255, 255, 0.5);
-  --scrollbar-bg-active-dark: rgba(255, 255, 255, 0.6);
-
-  --scrollbar-bg: var(--scrollbar-bg-light), var(--scrollbar-bg-dark);
-  --scrollbar-bg-hover: var(--scrollbar-bg-hover-light), var(--scrollbar-bg-hover-dark);
-  --scrollbar-bg-active: var(--scrollbar-bg-active-light), var(--scrollbar-bg-active-dark);
-}
-
-.scrollbar-base.os-scrollbar {
-  padding-top: 0.5rem; /* 8px */
-  padding-bottom: 0.5rem; /* 8px */
-  transition: width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s,
-    bottom 0.15s, left 0.15s;
-  pointer-events: unset;
-
-  &.os-scrollbar-horizontal {
-    padding-top: 4px;
-    padding-bottom: 4px;
-    height: 16px;
-
-    .os-scrollbar-track .os-scrollbar-handle {
-      height: 4px;
-      border-radius: 4px;
-    }
-
-    &:hover .os-scrollbar-track .os-scrollbar-handle {
-      height: 8px;
-    }
-
-    &.px-2 {
-      padding-left: 8px;
-      padding-right: 8px;
-    }
-  }
-
-  &.os-scrollbar-vertical {
-    padding-left: 4px;
-    padding-right: 4px;
-    width: 16px;
-
-    .os-scrollbar-track .os-scrollbar-handle {
-      width: 4px;
-      border-radius: 4px;
-    }
-
-    &:hover .os-scrollbar-track .os-scrollbar-handle {
-      width: 8px;
-    }
-
-    &.py-1 {
-      padding-top: 4px;
-      padding-bottom: 4px;
-    }
-  }
-}
-
-.scrollbar-auto {
-  &.os-scrollbar {
-    --os-handle-bg: var(--scrollbar-bg);
-    --os-handle-bg-hover: var(--scrollbar-bg-hover);
-    --os-handle-bg-active: var(--scrollbar-bg-active);
-  }
-}
-
-.scrollbar-dark {
-  &.os-scrollbar {
-    --os-handle-bg: var(--scrollbar-bg-dark);
-    --os-handle-bg-hover: var(--scrollbar-bg-hover-dark);
-    --os-handle-bg-active: var(--scrollbar-bg-active-dark);
-  }
-}
-
-.scrollbar-light {
-  &.os-scrollbar {
-    --os-handle-bg: var(--scrollbar-bg-light);
-    --os-handle-bg-hover: var(--scrollbar-bg-hover-light);
-    --os-handle-bg-active: var(--scrollbar-bg-active-light);
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -1,43 +1,71 @@
 // app global css in SCSS form
 
-@media only screen and (min-device-width: 600px) {
-  html {
-    scrollbar-gutter: stable;
-  }
+// scroll
+.body--dark {
+  --scrollbar-bg: rgba(255, 255, 255, 0.4);
+  --scrollbar-bg-hover: rgba(255, 255, 255, 0.5);
+  --scrollbar-bg-active: rgba(255, 255, 255, 0.6);
+}
 
-  ::-webkit-scrollbar-thumb {
-    background-color: rgba(130, 130, 130, 0.5);
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-  }
+.body--light {
+  --scrollbar-bg: rgba(130, 130, 130, 0.4);
+  --scrollbar-bg-hover: rgba(130, 130, 130, 0.5);
+  --scrollbar-bg-active: rgba(130, 130, 130, 0.6);
+}
 
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(130, 130, 130);
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
+.scrollbar-base.os-scrollbar {
+  padding-top: 0.5rem; /* 8px */
+  padding-bottom: 0.5rem; /* 8px */
+  transition: width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s,
+    bottom 0.15s, left 0.15s;
+  pointer-events: unset;
+
+  &.os-scrollbar-horizontal {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    height: 16px;
+
+    .os-scrollbar-track .os-scrollbar-handle {
+      height: 4px;
+      border-radius: 4px;
+    }
+
+    &:hover .os-scrollbar-track .os-scrollbar-handle {
+      height: 8px;
+    }
+
+    &.px-2 {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
   }
 
-  ::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
+  &.os-scrollbar-vertical {
+    padding-left: 4px;
+    padding-right: 4px;
+    width: 16px;
 
-  ::-webkit-scrollbar-thumb:active {
-    background-color: rgba(130, 130, 130);
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-  }
+    .os-scrollbar-track .os-scrollbar-handle {
+      width: 4px;
+      border-radius: 4px;
+    }
 
-  ::-webkit-scrollbar-corner {
-    background: rgba(0, 0, 0, 0);
-    -webkit-border-radius: 4px;
-    border-radius: 0 0 8px 0;
+    &:hover .os-scrollbar-track .os-scrollbar-handle {
+      width: 8px;
+    }
+
+    &.py-1 {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
   }
+}
 
-  ::-webkit-scrollbar-button {
-    background-color: rgba(0, 0, 0, 0);
-    height: 2px;
-    width: 2px;
+.scrollbar-auto {
+  &.os-scrollbar {
+    --os-handle-bg: var(--scrollbar-bg);
+    --os-handle-bg-hover: var(--scrollbar-bg-hover);
+    --os-handle-bg-active: var(--scrollbar-bg-active);
   }
 }