style: highlight sidebar and ToC scrollbar on hover (#660)

style: change sidebar and ToC scrollbar width as thin
hbstack · Feb 17, 2024 · 9bb66f9 · 9bb66f9
1 parent 10be556
commit 9bb66f9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/assets/hb/modules/blog/scss/_sidebar.scss b/assets/hb/modules/blog/scss/_sidebar.scss
@@ -29,10 +29,6 @@
     .hb-blog-sidebar {
         grid-area: sidebar;
 
-        &::-webkit-scrollbar {
-            width: 2px;
-        }
-
         @include media-breakpoint-up(lg) {
             overflow: auto;
 
@@ -42,6 +38,12 @@
 
                 @include top-offset(sticky);
             }
+
+            scrollbar-width: thin;
+
+            &:hover {
+                scrollbar-color: var(--#{$prefix}primary) transparent;
+            }
         }
 
         .hb-module {

diff --git a/assets/hb/modules/blog/scss/post/_toc.scss b/assets/hb/modules/blog/scss/post/_toc.scss
@@ -18,6 +18,12 @@
         }
 
         @include top-offset;
+
+        scrollbar-width: thin;
+
+        &:hover {
+            scrollbar-color: var(--#{$prefix}primary) transparent;
+        }
     }
 }