style: more flexible scrollbar

resources/css/common.css

@@ -59,9 +59,9 @@ html[data-theme=dark] {
   --ls-page-blockquote-border-color: var(--ls-border-color);
   --ls-page-inline-code-color: var(--ls-primary-text-color);
   --ls-page-inline-code-bg-color: #01222a;
-  --ls-scrollbar-foreground-color: #001f27;
-  --ls-scrollbar-background-color: var(--ls-primary-background-color);
-  --ls-scrollbar-thumb-hover-color: #b4b4b466;
+  --ls-scrollbar-foreground-color: rgba(255, 255, 255, 0.1);
+  --ls-scrollbar-background-color: rgba(255, 255, 255, 0.05);
+  --ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
   --ls-head-text-color: var(--ls-link-text-color);
   --ls-icon-color: var(--ls-link-text-color);
   --ls-search-icon-color: var(--ls-link-text-color);
@@ -109,9 +109,9 @@ html[data-theme=light] {
   --ls-page-blockquote-border-color: var(--ls-active-primary-color);
   --ls-page-inline-code-bg-color: var(--ls-secondary-background-color);
   --ls-page-inline-code-color: var(--ls-primary-text-color);
-  --ls-scrollbar-foreground-color: var(--ls-primary-text-color);
-  --ls-scrollbar-background-color: var(--ls-primary-background-color);
-  --ls-scrollbar-thumb-hover-color: var(--ls-secondary-text-color);
+  --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1);
+  --ls-scrollbar-background-color: rgba(0, 0, 0, 0.05);
+  --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2);
   --ls-head-text-color: var(--ls-link-text-color);
   --ls-icon-color: #6b7280;
   --ls-search-icon-color: var(--ls-icon-color);

src/main/frontend/components/theme.css

@@ -1,24 +1,38 @@
 :root {
-  scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color) !important;
-  scrollbar-width: thin !important;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color);
 }
 
-html:not(.is-mac)[data-theme=dark] {
-  &::-webkit-scrollbar,
-  html::-webkit-scrollbar-track-piece {
-    background-color: var(--ls-scrollbar-background-color);
-    border: 4px solid var(--ls-scrollbar-background-color);
+html:not(.is-mac) {
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--ls-scrollbar-foreground-color);
   }
 
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--ls-scrollbar-foreground-color);
-    background-clip: padding-box;
-    min-height: 28px;
+  ::-webkit-scrollbar {
+    background-color: var(--ls-scrollbar-background-color);
   }
 
-  &::-webkit-scrollbar-thumb:hover {
+  ::-webkit-scrollbar-thumb:active {
     background-color: var(--ls-scrollbar-thumb-hover-color);
   }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    -webkit-border-radius: 100px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 100px;
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    -webkit-border-radius: 100px;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 }
 
 html[data-theme=dark] {