Fix scrollbars on BYOND 516 (#5142)

Monkestation · Jan 30, 2025 · 4e65141 · 4e65141
1 parent e006b29
commit 4e65141
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx b/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
@@ -268,7 +268,7 @@ export const DesignBrowser = <T extends Design = Design>(
               </Section>
             </Stack.Item>
             <Stack.Item grow>
-              <Section fill style={{ overflow: 'auto' }}>
+              <Section fill scrollable>
                 {searchText.length > 0 ? (
                   sortBy((design: T) => design.name)(
                     Object.values(root.descendants),

diff --git a/tgui/packages/tgui/styles/layouts/Layout.scss b/tgui/packages/tgui/styles/layouts/Layout.scss
@@ -5,8 +5,24 @@
 
 @use 'sass:color';
 @use '../base.scss';
+@use '../functions.scss' as *;
 
 $scrollbar-color-multiplier: 1 !default;
+$luminance: luminance(base.$color-bg);
+$scrollbar-base: color.scale(
+  base.$color-bg,
+  $lightness: -25% * $scrollbar-color-multiplier
+);
+$scrollbar-face: color.scale(
+  base.$color-bg,
+  $lightness: if($luminance > 0.05, 30%, 10%) * $scrollbar-color-multiplier
+);
+
+// Fancy scrollbar
+html,
+body {
+  scrollbar-color: $scrollbar-face $scrollbar-base;
+}
 
 @mixin fancy-scrollbar($base-color, $color-multiplier) {
   scrollbar-base-color: color.scale(

diff --git a/tgui/packages/tgui/styles/main.scss b/tgui/packages/tgui/styles/main.scss
@@ -101,7 +101,7 @@
 // NT Theme
 .Layout__content {
   background-image: url('../assets/bg-nanotrasen.svg');
-  background-size: 70%;
+  background-size: 70% 70%;
   background-position: center;
   background-repeat: no-repeat;
 }