[NO GBP] Fix 516 scrollbar and background image (#88617)

Ports - ParadiseSS13/Paradise#26433
Fixes scrollbar color for Byond 516, and background position

Colorfull scrollbar
<details><summary> Videos </summary>

https://github.com/user-attachments/assets/969b4f6f-f553-4786-86c7-df11c034675b

</details>

:cl:
fix: Fixed scrollbar colors and background position in TGUI on Byond 516
/:cl:

Author: DenIS318

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);
+}
+
 body {
 	font-family: Verdana, Geneva, Tahoma, sans-serif;
 	font-size: 12px;
@@ -177,9 +187,16 @@ img {
 	margin-bottom: 1em;
 }
 
-/* Dark theme colors */
+/**
+ * MARK: Dark theme colors
+ */
+.dark:root {
+	--scrollbar-base: #151515;
+	--scrollbar-thumb: #363636;
+}
+
 body.dark {
-	background-color: #131313;
+	background-color: #151515;
 	color: #b2c4dd;
 	scrollbar-base-color: #1c1c1c;
 	scrollbar-face-color: #3b3b3b;
@@ -201,7 +218,7 @@ body.dark {
 }
 
 .dark #menu {
-	background-color: #131313;
+	background-color: #151515;
 }
 
 .dark #menu.tabs-classic .button.active {

html/statbrowser.js

@@ -705,9 +705,11 @@ function draw_verbs(cat) {
 function set_theme(which) {
 	if (which == "light") {
 		document.body.className = "";
+		document.documentElement.className = 'light';
 		set_style_sheet("browserOutput_white");
 	} else if (which == "dark") {
 		document.body.className = "dark";
+		document.documentElement.className = 'dark';
 		set_style_sheet("browserOutput");
 	}
 }

tgui/packages/tgui/layouts/Layout.tsx

@@ -21,6 +21,7 @@ type Props = Partial<{
 
 export function Layout(props: Props) {
   const { className, theme = 'nanotrasen', children, ...rest } = props;
+  document.documentElement.className = `theme-${theme}`;
 
   return (
     <div className={'theme-' + theme}>

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

@@ -4,13 +4,29 @@
  */
 
 @use 'sass:color';
-@use '../base.scss';
+@use '../base';
+@use '../functions.scss' as *;
 
+$luminance: luminance(base.$color-bg);
 $scrollbar-color-multiplier: 1 !default;
+$scrollbar-base: color.scale(
+  base.$color-bg,
+  $lightness: -33% * $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 * {
-  // Fancy scrollbar
   scrollbar-base-color: color.scale(
     base.$color-bg,
     $lightness: -25% * $scrollbar-color-multiplier

tgui/packages/tgui/styles/main.scss

@@ -96,7 +96,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;
 }