[TGUI] Fixes scrollbar & background styles for 516 (#26433)

* Fixes scrollbar and background image styles for 516

* Background

html/statbrowser.css

@@ -1,3 +1,13 @@
+.light:root {
+	--scrollbar-base: #f2f2f2;
+	--scrollbar-thumb: #a7a7a7;
+}
+
+html,
+body {
+	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-base);
+}
+
 /* Light theme */
 body {
 	font-family: Verdana, Geneva, Tahoma, sans-serif;
@@ -190,6 +200,11 @@ img {
 }
 
 /* Dark Theme */
+.dark:root {
+	--scrollbar-base: #181818;
+	--scrollbar-thumb: #363636;
+}
+
 body.dark {
 	background-color: #131313;
 	color: #b2c4dd;
@@ -236,6 +251,11 @@ body.dark {
 }
 
 /* NTOS theme */
+.ntos:root {
+	--scrollbar-base: #141d26;
+	--scrollbar-thumb: #2a3b4f;
+}
+
 body.ntos {
 	background-color: #121922;
 	color: #b2c4dd;
@@ -280,6 +300,11 @@ body.ntos {
 }
 
 /* Paradise theme */
+.paradise:root {
+	--scrollbar-base: #680b29;
+	--scrollbar-thumb: #cb1551;
+}
+
 body.paradise {
 	background-color: #400125;
 	color: #dec5bd;
@@ -324,6 +349,11 @@ body.paradise {
 }
 
 /* Syndicate theme */
+.syndicate:root {
+	--scrollbar-base: #3a0202;
+	--scrollbar-thumb: #770303;
+}
+
 body.syndicate {
 	background-color: #2b0101;
 	color: #debdbd;

html/statbrowser.js

@@ -685,18 +685,23 @@ function draw_verbs(cat) {
 function set_theme(which) {
 	if (which == 'light') {
 		document.body.className = '';
+		document.documentElement.className = 'light';
 		set_style_sheet('chat_panel_white');
 	} else if (which == 'dark') {
 		document.body.className = 'dark';
+		document.documentElement.className = 'dark';
 		set_style_sheet('chat_panel');
 	} else if (which == 'ntos') {
 		document.body.className = 'ntos';
+		document.documentElement.className = 'ntos';
 		set_style_sheet('chat_panel_ntos');
 	} else if (which == 'paradise') {
 		document.body.className = 'paradise';
+		document.documentElement.className = 'paradise';
 		set_style_sheet('chat_panel_paradise');
 	} else if (which == 'syndicate') {
 		document.body.className = 'syndicate';
+		document.documentElement.className = 'syndicate';
 		set_style_sheet('chat_panel_syndicate');
 	}
 }

tgui/packages/tgui/layouts/Layout.js

@@ -10,6 +10,8 @@ import { addScrollableNode, removeScrollableNode } from '../events';
 
 export const Layout = (props) => {
   const { className, theme = 'nanotrasen', children, ...rest } = props;
+  document.documentElement.className = `theme-${theme}`;
+
   return (
     <div className={'theme-' + theme}>
       <div className={classes(['Layout', className, ...computeBoxClassName(rest)])} {...computeBoxProps(rest)}>

tgui/packages/tgui/styles/layouts/Layout.scss

@@ -5,12 +5,22 @@
 
 @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;
+}
+
+// Remove with 516, IE legacy code
 .Layout,
 .Layout * {
-  // Remove with 516, IE legacy code
   scrollbar-base-color: color.scale(base.$color-bg, $lightness: -25% * $scrollbar-color-multiplier);
   scrollbar-face-color: color.scale(base.$color-bg, $lightness: 10% * $scrollbar-color-multiplier);
   scrollbar-3dlight-color: color.scale(base.$color-bg, $lightness: 0% * $scrollbar-color-multiplier);
@@ -18,18 +28,6 @@ $scrollbar-color-multiplier: 1 !default;
   scrollbar-track-color: color.scale(base.$color-bg, $lightness: -25% * $scrollbar-color-multiplier);
   scrollbar-arrow-color: color.scale(base.$color-bg, $lightness: 50% * $scrollbar-color-multiplier);
   scrollbar-shadow-color: color.scale(base.$color-bg, $lightness: 10% * $scrollbar-color-multiplier);
-  // Fancy scrollbar
-  &::-webkit-scrollbar {
-    width: 12px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: color.scale(base.$color-bg, $lightness: -25% * $scrollbar-color-multiplier);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: color.scale(base.$color-bg, $lightness: 10% * $scrollbar-color-multiplier);
-  }
 }
 
 .Layout__content {

tgui/packages/tgui/styles/main.scss

@@ -81,7 +81,7 @@
 .Layout__content {
   // From 'packages/tgui/assets/bg-nanotrasen.svg', converted to base64 manually to stop webpack exploding
   background-image: url('../assets/bg-nanotrasen.svg');
-  background-size: 70%;
+  background-size: 70% 70%;
   background-position: center;
   background-repeat: no-repeat;
 }

tgui/public/tgui-panel.bundle.js

@@ -417,7 +417,7 @@
  * @file
  * @copyright 2020 Aleksej Komarov
  * @license MIT
- */function c(i,d){if(i==null)return{};var l={};for(var g in i)if({}.hasOwnProperty.call(i,g)){if(d.includes(g))continue;l[g]=i[g]}return l}var h=e.Layout=function(){function i(d){var l=d.className,g=d.theme,v=g===void 0?"nanotrasen":g,p=d.children,m=c(d,u);return(0,n.createVNode)(1,"div","theme-"+v,(0,n.normalizeProps)((0,n.createVNode)(1,"div",(0,r.classes)(["Layout",l].concat((0,o.computeBoxClassName)(m))),p,0,Object.assign({},(0,o.computeBoxProps)(m)))),2)}return i}(),f=function(d){var l=d.className,g=d.scrollable,v=d.children,p=c(d,s);return(0,n.normalizeProps)((0,n.createVNode)(1,"div",(0,r.classes)(["Layout__content",g&&"Layout__content--scrollable",l,(0,o.computeBoxClassName)(p)]),v,0,Object.assign({},(0,o.computeBoxProps)(p))))};f.defaultHooks={onComponentDidMount:function(){function i(d){return(0,a.addScrollableNode)(d)}return i}(),onComponentWillUnmount:function(){function i(d){return(0,a.removeScrollableNode)(d)}return i}()},h.Content=f},96945:function(E,e,t){"use strict";e.__esModule=!0,e.Pane=void 0;var n=t(89005),r=t(35840),o=t(72253),a=t(36036),u=t(99851),s=t(17617),c=["theme","children","className"],h=["className","fitted","children"];/**
+ */function c(i,d){if(i==null)return{};var l={};for(var g in i)if({}.hasOwnProperty.call(i,g)){if(d.includes(g))continue;l[g]=i[g]}return l}var h=e.Layout=function(){function i(d){var l=d.className,g=d.theme,v=g===void 0?"nanotrasen":g,p=d.children,m=c(d,u);return document.documentElement.className="theme-"+v,(0,n.createVNode)(1,"div","theme-"+v,(0,n.normalizeProps)((0,n.createVNode)(1,"div",(0,r.classes)(["Layout",l].concat((0,o.computeBoxClassName)(m))),p,0,Object.assign({},(0,o.computeBoxProps)(m)))),2)}return i}(),f=function(d){var l=d.className,g=d.scrollable,v=d.children,p=c(d,s);return(0,n.normalizeProps)((0,n.createVNode)(1,"div",(0,r.classes)(["Layout__content",g&&"Layout__content--scrollable",l,(0,o.computeBoxClassName)(p)]),v,0,Object.assign({},(0,o.computeBoxProps)(p))))};f.defaultHooks={onComponentDidMount:function(){function i(d){return(0,a.addScrollableNode)(d)}return i}(),onComponentWillUnmount:function(){function i(d){return(0,a.removeScrollableNode)(d)}return i}()},h.Content=f},96945:function(E,e,t){"use strict";e.__esModule=!0,e.Pane=void 0;var n=t(89005),r=t(35840),o=t(72253),a=t(36036),u=t(99851),s=t(17617),c=["theme","children","className"],h=["className","fitted","children"];/**
  * @file
  * @copyright 2020 Aleksej Komarov
  * @license MIT

tgui/public/tgui.bundle.js

@@ -242,7 +242,7 @@
  * @file
  * @copyright 2020 Aleksej Komarov
  * @license MIT
- */function k(h,i){if(h==null)return{};var c={};for(var m in h)if({}.hasOwnProperty.call(h,m)){if(i.includes(m))continue;c[m]=h[m]}return c}var S=r.Layout=function(){function h(i){var c=i.className,m=i.theme,d=m===void 0?"nanotrasen":m,u=i.children,s=k(i,f);return(0,e.createVNode)(1,"div","theme-"+d,(0,e.normalizeProps)((0,e.createVNode)(1,"div",(0,a.classes)(["Layout",c].concat((0,t.computeBoxClassName)(s))),u,0,Object.assign({},(0,t.computeBoxProps)(s)))),2)}return h}(),y=function(i){var c=i.className,m=i.scrollable,d=i.children,u=k(i,b);return(0,e.normalizeProps)((0,e.createVNode)(1,"div",(0,a.classes)(["Layout__content",m&&"Layout__content--scrollable",c,(0,t.computeBoxClassName)(u)]),d,0,Object.assign({},(0,t.computeBoxProps)(u))))};y.defaultHooks={onComponentDidMount:function(){function h(i){return(0,o.addScrollableNode)(i)}return h}(),onComponentWillUnmount:function(){function h(i){return(0,o.removeScrollableNode)(i)}return h}()},S.Content=y},96945:function(w,r,n){"use strict";r.__esModule=!0,r.Pane=void 0;var e=n(89005),a=n(35840),t=n(72253),o=n(36036),f=n(99851),b=n(17617),k=["theme","children","className"],S=["className","fitted","children"];/**
+ */function k(h,i){if(h==null)return{};var c={};for(var m in h)if({}.hasOwnProperty.call(h,m)){if(i.includes(m))continue;c[m]=h[m]}return c}var S=r.Layout=function(){function h(i){var c=i.className,m=i.theme,d=m===void 0?"nanotrasen":m,u=i.children,s=k(i,f);return document.documentElement.className="theme-"+d,(0,e.createVNode)(1,"div","theme-"+d,(0,e.normalizeProps)((0,e.createVNode)(1,"div",(0,a.classes)(["Layout",c].concat((0,t.computeBoxClassName)(s))),u,0,Object.assign({},(0,t.computeBoxProps)(s)))),2)}return h}(),y=function(i){var c=i.className,m=i.scrollable,d=i.children,u=k(i,b);return(0,e.normalizeProps)((0,e.createVNode)(1,"div",(0,a.classes)(["Layout__content",m&&"Layout__content--scrollable",c,(0,t.computeBoxClassName)(u)]),d,0,Object.assign({},(0,t.computeBoxProps)(u))))};y.defaultHooks={onComponentDidMount:function(){function h(i){return(0,o.addScrollableNode)(i)}return h}(),onComponentWillUnmount:function(){function h(i){return(0,o.removeScrollableNode)(i)}return h}()},S.Content=y},96945:function(w,r,n){"use strict";r.__esModule=!0,r.Pane=void 0;var e=n(89005),a=n(35840),t=n(72253),o=n(36036),f=n(99851),b=n(17617),k=["theme","children","className"],S=["className","fitted","children"];/**
  * @file
  * @copyright 2020 Aleksej Komarov
  * @license MIT