Customize global scrollbar

2022-06-30 19:57:16 +02:00
parent 9cc1146148
commit cab3d23c4d
1 changed files with 17 additions and 0 deletions
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -57,6 +57,23 @@ button {
    }
 }

+// Scrollbar
+html {
+    scrollbar-width: thin;
+    scrollbar-color: rgba($color-tertiary, 0.6) $color-primary-darker;
+}
+::-webkit-scrollbar {
+    width: 12px;
+}
+::-webkit-scrollbar-track {
+    background: $color-primary-darker;
+}
+::-webkit-scrollbar-thumb {
+    background: rgba($color-tertiary, 0.6);
+    border: 4px solid $color-primary-darker;
+    border-radius: 10px;
+}
+
 // Accessibility outline
 // Remove default focus styles for mouse users if :focus-visible is supported
 [data-js-focus-visible] :focus:not([data-focus-visible-added]) {