Fix scrollbars

Saltssaumure · Jun 26, 2024 · ed65253 · ed65253
1 parent 9093b5f
commit ed65253
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 40 deletions.
diff --git a/scss/main/_chatbox.scss b/scss/main/_chatbox.scss
@@ -12,7 +12,7 @@
         @include boxes.clickable;
         background: $grey;
     }
-    .webkit__8d35a .buttons_d0696b {
+    @at-root .has-webkit-scrollbar .buttons_d0696b {
         margin-right: 0;
     }
 

diff --git a/scss/part/_scrollbar.scss b/scss/part/_scrollbar.scss
@@ -2,49 +2,24 @@
 @use "../top/boxes" as boxes;
 
 // Scrollbars always visible
-.fade_eed6a8::-webkit-scrollbar-thumb,
-.fade_eed6a8::-webkit-scrollbar-track {
-    visibility: visible;
-}
-
-// Main scrollbars
-.scrollerBase_eed6a8 {
-    &:not(.none_eed6a8)::-webkit-scrollbar {
-        width: 18px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        @include boxes.thin;
-        background: $grey;
-    }
-
+:is(.fade_eed6a8, .fade_c49869) {
+    &::-webkit-scrollbar-thumb,
     &::-webkit-scrollbar-track {
-        background: $lightgrey;
-        margin-bottom: 0;
+        visibility: visible;
     }
 }
 
+// Main scrollbars
+.scrollerBase_eed6a8,
+.scrollerBase_c49869,
+// Chatbox scrollbar
+.scrollableContainer_d0696b,
 // Textbox scrollbar
-.webkit__8d35a {
-    &::-webkit-scrollbar {
-        width: 18px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        @include boxes.thin;
-        background: $grey;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: $lightgrey;
-    }
-}
-
+.webkit__8d35a,
 // Spooky scary scrollbars
 .scrollbarGhostHairline_c858ce {
-    &::-webkit-scrollbar {
+    &:not(.none_eed6a8, .none_c49869)::-webkit-scrollbar {
         width: 18px;
-        height: 18px;
     }
 
     &::-webkit-scrollbar-thumb {
@@ -54,9 +29,11 @@
 
     &::-webkit-scrollbar-track {
         background: $lightgrey;
+        margin-bottom: 0;
     }
 }
 
+// Code view scrollbar
 .codeView_ad9cbd::-webkit-scrollbar-track {
     margin: 0;
 }
@@ -72,21 +49,25 @@
 
     &:start:decrement:vertical {
         background: $grey
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -4 12 12'%3E%3Cpath d='M 0 4 H 8 L 4 0 Z' fill='%23000000'/%3E%3C/svg%3E");
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -4 12 12'%3E%3Cpath d='M 0 4 H 8 L 4 0 Z' fill='%23000000'/%3E%3C/svg%3E")
+            no-repeat;
     }
 
     &:end:increment:vertical {
         background: $grey
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -4 12 12'%3E%3Cpath d='M 0 0 H 8 L 4 4 Z' fill='%23000000'/%3E%3C/svg%3E");
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -4 12 12'%3E%3Cpath d='M 0 0 H 8 L 4 4 Z' fill='%23000000'/%3E%3C/svg%3E")
+            no-repeat;
     }
 
     &:start:decrement:horizontal {
         background: $grey
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -2 12 12'%3E%3Cpath d='M 0 4 Z L 4 0 V 8 Z' fill='%23000000'/%3E%3C/svg%3E");
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -2 12 12'%3E%3Cpath d='M 0 4 Z L 4 0 V 8 Z' fill='%23000000'/%3E%3C/svg%3E")
+            no-repeat;
     }
 
     &:end:increment:horizontal {
         background: $grey
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -2 12 12'%3E%3Cpath d='M 4 4 Z L 0 0 V 8 Z' fill='%23000000'/%3E%3C/svg%3E");
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -2 12 12'%3E%3Cpath d='M 4 4 Z L 0 0 V 8 Z' fill='%23000000'/%3E%3C/svg%3E")
+            no-repeat;
     }
 }