Skip to content

Commit eec1651

Browse files
AyIongMrMelbert
authored andcommitted
[NO GBP] Fix 516 scrollbar and background image (#88617)
## About The Pull Request Ports - ParadiseSS13/Paradise#26433 Fixes scrollbar color for Byond 516, and background position ## Why It's Good For The Game Colorfull scrollbar <details><summary> Videos </summary> https://github.com/user-attachments/assets/969b4f6f-f553-4786-86c7-df11c034675b </details> ## Changelog :cl: fix: Fixed scrollbar colors and background position in TGUI on Byond 516 /:cl:
1 parent 907a04e commit eec1651

File tree

5 files changed

+41
-5
lines changed

5 files changed

+41
-5
lines changed

html/statbrowser.css

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
.light:root {
2+
--scrollbar-base: #f2f2f2;
3+
--scrollbar-thumb: #a7a7a7;
4+
}
5+
6+
html,
7+
body {
8+
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-base);
9+
}
10+
111
body {
212
font-family: Verdana, Geneva, Tahoma, sans-serif;
313
font-size: 12px;
@@ -182,9 +192,16 @@ img {
182192
margin-bottom: 1em;
183193
}
184194

185-
/* Dark theme colors */
195+
/**
196+
* MARK: Dark theme colors
197+
*/
198+
.dark:root {
199+
--scrollbar-base: #151515;
200+
--scrollbar-thumb: #363636;
201+
}
202+
186203
body.dark {
187-
background-color: #131313;
204+
background-color: #151515;
188205
color: #b2c4dd;
189206
scrollbar-base-color: #1c1c1c;
190207
scrollbar-face-color: #3b3b3b;
@@ -206,7 +223,7 @@ body.dark {
206223
}
207224

208225
.dark #menu {
209-
background-color: #131313;
226+
background-color: #151515;
210227
}
211228

212229
.dark #menu.tabs-classic .button.active {

html/statbrowser.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -705,9 +705,11 @@ function draw_verbs(cat) {
705705
function set_theme(which) {
706706
if (which == "light") {
707707
document.body.className = "";
708+
document.documentElement.className = 'light';
708709
set_style_sheet("browserOutput_white");
709710
} else if (which == "dark") {
710711
document.body.className = "dark";
712+
document.documentElement.className = 'dark';
711713
set_style_sheet("browserOutput");
712714
}
713715
}

tgui/packages/tgui/layouts/Layout.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ type Props = Partial<{
1919

2020
export function Layout(props: Props) {
2121
const { className, theme = 'nanotrasen', children, ...rest } = props;
22+
document.documentElement.className = `theme-${theme}`;
2223

2324
return (
2425
<div className={'theme-' + theme}>

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,28 @@
55

66
@use 'sass:color';
77
@use '../base';
8+
@use '../functions.scss' as *;
89

10+
$luminance: luminance(base.$color-bg);
911
$scrollbar-color-multiplier: 1 !default;
12+
$scrollbar-base: color.scale(
13+
base.$color-bg,
14+
$lightness: -33% * $scrollbar-color-multiplier
15+
);
16+
$scrollbar-face: color.scale(
17+
base.$color-bg,
18+
$lightness: if($luminance > 0.05, 30%, 10%) * $scrollbar-color-multiplier
19+
);
1020

21+
// Fancy scrollbar
22+
html,
23+
body {
24+
scrollbar-color: $scrollbar-face $scrollbar-base;
25+
}
26+
27+
// Remove with 516, IE legacy code
1128
.Layout,
1229
.Layout * {
13-
// Fancy scrollbar
1430
scrollbar-base-color: color.scale(
1531
base.$color-bg,
1632
$lightness: -25% * $scrollbar-color-multiplier

tgui/packages/tgui/styles/main.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
// NT Theme
6666
.Layout__content {
6767
background-image: url('../assets/bg-nanotrasen.svg');
68-
background-size: 70%;
68+
background-size: 70% 70%;
6969
background-position: center;
7070
background-repeat: no-repeat;
7171
}

0 commit comments

Comments
 (0)