mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2026-08-25 06:00:16 +01:00
Refactor Stat Panel styles and more TGUI-like appearance (#85257)
## About The Pull Request The PR came out a little bigger than I had planned, but creating separate ones for a couple of little things seemed unnecessary to me. Let me start with the most important thing: Stat Panel now scales like TGchat and also looks closer to TGUI! By default, the Stat Panel font size is tied to the chat font size, but this can be changed in a couple of clicks... The rest of the changes are not as big: 1. Stat Panel styles are now more organised 2. The way themes are applied to Byond Skin has been refactored, if someone decides to make a new theme (maybe me), it won't be necessary to copy all the elements 3. NumberInput into the general chat settings tab, was changed to slider 4. Reoder tab buttons changed, they are more compact now 5. With the light theme, chat tabs now have a background when hovering/active tabbing <details> <summary>How it look's like</summary> | New reorder tab buttons | Light Chat tabs | | - | - | |  |  | </details> <details> <summary>General Preview</summary> https://github.com/user-attachments/assets/7647d584-c2fd-41b2-b2ee-c7ee61569d1f </details> ## Why It's Good For The Game More accessibility for owners of 2/4k monitors Better appearance NumberInput is behaving extremely strangely in chat ## Changelog 🆑 add: Stat Panel now scales like a chat, depends on the font size. Defaults from the chat font size, but you can separate it. refactor: Refactored Stat Panel styles and Byond skin theme applying. Stat Panel now looks more like a TGUI /🆑
This commit is contained in:
Aylong
+132
-147
@@ -1,150 +1,125 @@
|
||||
body {
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 12px !important;
|
||||
font-size: 12px;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
background-color: #131313;
|
||||
color: #b2c4dd;
|
||||
scrollbar-base-color: #1c1c1c;
|
||||
scrollbar-face-color: #3b3b3b;
|
||||
scrollbar-3dlight-color: #252525;
|
||||
scrollbar-highlight-color: #252525;
|
||||
scrollbar-track-color: #1c1c1c;
|
||||
scrollbar-arrow-color: #929292;
|
||||
scrollbar-shadow-color: #3b3b3b;
|
||||
}
|
||||
|
||||
#menu {
|
||||
background-color: #F0F0F0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.dark #menu {
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
#statcontent {
|
||||
padding: 7px 7px 7px 7px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.dark a {
|
||||
color: #b2c4dd;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.dark a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
color: #003399;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li a:hover:not(.active) {
|
||||
background-color: #111;
|
||||
a:hover {
|
||||
color: #007fff;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
overflow-x: hidden;
|
||||
white-space: pre-wrap;
|
||||
padding: 0 4px;
|
||||
h3 {
|
||||
margin: 0 -0.5em 0.25em;
|
||||
padding: 1em 0.66em 0.5em;
|
||||
border-bottom: 0.1667em solid;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.stat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#menu {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0.25em 0.25em 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #dfdfdf;
|
||||
border: 1px solid #cecece;
|
||||
border-bottom-width: 2px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
padding: 6px 4px 4px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
display: inline-table;
|
||||
cursor: pointer;
|
||||
transition-duration: 100ms;
|
||||
order: 3;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.dark button {
|
||||
background-color: #222222;
|
||||
border-color: #343434;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
user-select: none;
|
||||
-ms-user-select: none; /* Remove after Byond 516 */
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
min-width: 2.9em;
|
||||
padding: 0.5em 0.5em 0.4em;
|
||||
background-color: transparent;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
border: 0;
|
||||
border-bottom: 0.1667em solid transparent;
|
||||
border-radius: 0.25em 0.25em 0 0;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #ececec;
|
||||
transition-duration: 0;
|
||||
}
|
||||
|
||||
.dark button:hover {
|
||||
background-color: #2e2e2e;
|
||||
}
|
||||
|
||||
.button:active,
|
||||
.button.active {
|
||||
background-color: #ffffff;
|
||||
background-color: #dfdfdf;
|
||||
color: black;
|
||||
border-top-color: #cecece;
|
||||
border-left-color: #cecece;
|
||||
border-right-color: #cecece;
|
||||
border-bottom-color: #ffffff;
|
||||
border-bottom-color: #000000;
|
||||
}
|
||||
|
||||
.dark .button:active,
|
||||
.dark .button.active {
|
||||
background-color: #444444;
|
||||
color: white;
|
||||
border-top-color: #343434;
|
||||
border-left-color: #343434;
|
||||
border-right-color: #343434;
|
||||
border-bottom-color: #ffffff;
|
||||
#under-menu {
|
||||
height: 0.5em;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
#statcontent {
|
||||
flex: 1;
|
||||
padding: 0.75em 0.5em;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
margin: -2px;
|
||||
margin-right: -15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
-ms-user-select: none; /* Remove after Byond 516 */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
padding: 3px 2px;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.grid-item:hover {
|
||||
color: #003399;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.grid-item-text {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
padding: 0.33em 0.5em;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.grid-item-text:hover {
|
||||
position: absolute;
|
||||
top: -1.33em;
|
||||
white-space: normal;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.grid-item-text:active {
|
||||
background-color: #dfdfdf;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 300px) {
|
||||
@@ -171,57 +146,67 @@ li a:hover:not(.active) {
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item:hover {
|
||||
z-index: 1;
|
||||
.status-info {
|
||||
margin: 0 0.33em 0.25em;
|
||||
}
|
||||
|
||||
.grid-item:hover .grid-item-text {
|
||||
width: auto;
|
||||
text-decoration: underline;
|
||||
.interview_panel_stats,
|
||||
.interview_panel_controls {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.grid-item-text {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
margin: 0 -6px;
|
||||
padding: 0 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
/* Dark theme colors */
|
||||
body.dark {
|
||||
background-color: #131313;
|
||||
color: #b2c4dd;
|
||||
scrollbar-base-color: #1c1c1c;
|
||||
scrollbar-face-color: #3b3b3b;
|
||||
scrollbar-3dlight-color: #252525;
|
||||
scrollbar-highlight-color: #252525;
|
||||
scrollbar-track-color: #1c1c1c;
|
||||
scrollbar-arrow-color: #929292;
|
||||
scrollbar-shadow-color: #3b3b3b;
|
||||
}
|
||||
|
||||
.dark .grid-item-text {
|
||||
.dark a {
|
||||
color: #6699ff;
|
||||
}
|
||||
|
||||
.dark a:hover,
|
||||
.dark .grid-item:hover {
|
||||
color: #80bfff;
|
||||
}
|
||||
|
||||
.dark #menu {
|
||||
background-color: #131313;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 7px 14px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
margin: 2px 2px;
|
||||
.dark .button {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.dark .link {
|
||||
color: #abc6ec;
|
||||
.dark .button:hover {
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
.dark .button.active {
|
||||
background-color: #313131;
|
||||
color: #d4dfec;
|
||||
border-bottom-color: #d4dfec;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
image-rendering: pixelated;
|
||||
.dark #under-menu {
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
.interview_panel_controls,
|
||||
.interview_panel_stats {
|
||||
margin-bottom: 10px;
|
||||
.dark .grid-item{
|
||||
color: #b2c4dd;
|
||||
}
|
||||
|
||||
.dark .grid-item-text:hover {
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
.dark .grid-item-text:active {
|
||||
background-color: #313131;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<ul id="menu" class="button-container"></ul>
|
||||
<div id="under_menu"></div>
|
||||
<div id="statcontent"></div>
|
||||
<div class="stat-container">
|
||||
<div id="menu" class="button-container"></div>
|
||||
<div id="under-menu"></div>
|
||||
<div id="statcontent"></div>
|
||||
</div>
|
||||
|
||||
+14
-15
@@ -32,7 +32,6 @@ var turfname = "";
|
||||
var imageRetryDelay = 500;
|
||||
var imageRetryLimit = 50;
|
||||
var menu = document.getElementById('menu');
|
||||
var under_menu = document.getElementById('under_menu');
|
||||
var statcontentdiv = document.getElementById('statcontent');
|
||||
var storedimages = [];
|
||||
var split_admin_tabs = false;
|
||||
@@ -58,23 +57,23 @@ function createStatusTab(name) {
|
||||
if (!verb_tabs.includes(name) && !permanent_tabs.includes(name)) {
|
||||
return;
|
||||
}
|
||||
var B = document.createElement("BUTTON");
|
||||
B.onclick = function () {
|
||||
var button = document.createElement("DIV");
|
||||
button.onclick = function () {
|
||||
tab_change(name);
|
||||
this.blur();
|
||||
statcontentdiv.focus();
|
||||
};
|
||||
B.id = name;
|
||||
B.textContent = name;
|
||||
B.className = "button";
|
||||
button.id = name;
|
||||
button.textContent = name;
|
||||
button.className = "button";
|
||||
//ORDERING ALPHABETICALLY
|
||||
B.style.order = name.charCodeAt(0);
|
||||
button.style.order = name.charCodeAt(0);
|
||||
if (name == "Status" || name == "MC") {
|
||||
B.style.order = name == "Status" ? 1 : 2;
|
||||
button.style.order = name == "Status" ? 1 : 2;
|
||||
}
|
||||
//END ORDERING
|
||||
menu.appendChild(B);
|
||||
menu.appendChild(button);
|
||||
SendTabToByond(name);
|
||||
under_menu.style.height = menu.clientHeight + 'px';
|
||||
}
|
||||
|
||||
function removeStatusTab(name) {
|
||||
@@ -88,7 +87,6 @@ function removeStatusTab(name) {
|
||||
}
|
||||
menu.removeChild(document.getElementById(name));
|
||||
TakeTabFromByond(name);
|
||||
under_menu.style.height = menu.clientHeight + 'px';
|
||||
}
|
||||
|
||||
function sortVerbs() {
|
||||
@@ -104,10 +102,6 @@ function sortVerbs() {
|
||||
})
|
||||
}
|
||||
|
||||
window.onresize = function () {
|
||||
under_menu.style.height = menu.clientHeight + 'px';
|
||||
}
|
||||
|
||||
function addPermanentTab(name) {
|
||||
if (!permanent_tabs.includes(name)) {
|
||||
permanent_tabs.push(name);
|
||||
@@ -361,6 +355,7 @@ function draw_status() {
|
||||
} else {
|
||||
var div = document.createElement("div");
|
||||
div.textContent = status_tab_parts[i];
|
||||
div.className = "status-info";
|
||||
document.getElementById("statcontent").appendChild(div);
|
||||
}
|
||||
}
|
||||
@@ -717,6 +712,10 @@ function set_theme(which) {
|
||||
}
|
||||
}
|
||||
|
||||
function set_font_size(size) {
|
||||
document.body.style.setProperty('font-size', size);
|
||||
}
|
||||
|
||||
function set_style_sheet(sheet) {
|
||||
if (document.getElementById("goonStyle")) {
|
||||
var currentSheet = document.getElementById("goonStyle");
|
||||
|
||||
@@ -30,7 +30,23 @@ export const ChatPageSettings = (props) => {
|
||||
return (
|
||||
<Section>
|
||||
<Stack align="center">
|
||||
<Stack.Item grow>
|
||||
{!!!page.isMain && (
|
||||
<Stack.Item>
|
||||
<Button
|
||||
color="blue"
|
||||
icon="angles-left"
|
||||
tooltip="Reorder tab to the left"
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
moveChatPageLeft({
|
||||
pageId: page.id,
|
||||
}),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Stack.Item>
|
||||
)}
|
||||
<Stack.Item grow ml={0.5}>
|
||||
<Input
|
||||
width="100%"
|
||||
value={page.name}
|
||||
@@ -44,9 +60,24 @@ export const ChatPageSettings = (props) => {
|
||||
}
|
||||
/>
|
||||
</Stack.Item>
|
||||
{!!!page.isMain && (
|
||||
<Stack.Item ml={0.5}>
|
||||
<Button
|
||||
color="blue"
|
||||
icon="angles-right"
|
||||
tooltip="Reorder tab to the right"
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
moveChatPageRight({
|
||||
pageId: page.id,
|
||||
}),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Stack.Item>
|
||||
)}
|
||||
<Stack.Item>
|
||||
<Button.Checkbox
|
||||
content="Mute"
|
||||
checked={page.hideUnreadCount}
|
||||
icon={page.hideUnreadCount ? 'bell-slash' : 'bell'}
|
||||
tooltip="Disables unread counter"
|
||||
@@ -58,13 +89,15 @@ export const ChatPageSettings = (props) => {
|
||||
}),
|
||||
)
|
||||
}
|
||||
/>
|
||||
>
|
||||
Mute
|
||||
</Button.Checkbox>
|
||||
</Stack.Item>
|
||||
{!page.isMain ? (
|
||||
{!!!page.isMain && (
|
||||
<Stack.Item>
|
||||
<Button
|
||||
icon="times"
|
||||
color="red"
|
||||
icon="times"
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
removeChatPage({
|
||||
@@ -76,42 +109,6 @@ export const ChatPageSettings = (props) => {
|
||||
Remove
|
||||
</Button>
|
||||
</Stack.Item>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</Stack>
|
||||
<Divider />
|
||||
<Stack align="center">
|
||||
{!page.isMain ? (
|
||||
<Stack.Item>
|
||||
Reorder Chat: 
|
||||
<Button
|
||||
color="blue"
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
moveChatPageLeft({
|
||||
pageId: page.id,
|
||||
}),
|
||||
)
|
||||
}
|
||||
>
|
||||
«
|
||||
</Button>
|
||||
<Button
|
||||
color="blue"
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
moveChatPageRight({
|
||||
pageId: page.id,
|
||||
}),
|
||||
)
|
||||
}
|
||||
>
|
||||
»
|
||||
</Button>
|
||||
</Stack.Item>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</Stack>
|
||||
<Divider />
|
||||
|
||||
@@ -8,8 +8,8 @@ import {
|
||||
Divider,
|
||||
Input,
|
||||
LabeledList,
|
||||
NumberInput,
|
||||
Section,
|
||||
Slider,
|
||||
Stack,
|
||||
} from 'tgui/components';
|
||||
|
||||
@@ -20,10 +20,11 @@ import { FONTS } from './constants';
|
||||
import { selectSettings } from './selectors';
|
||||
|
||||
export function SettingsGeneral(props) {
|
||||
const { theme, fontFamily, fontSize, lineHeight } =
|
||||
const { theme, fontFamily, fontSize, lineHeight, statLinked, statFontSize } =
|
||||
useSelector(selectSettings);
|
||||
const dispatch = useDispatch();
|
||||
const [freeFont, setFreeFont] = useState(false);
|
||||
const [statFont, setStatFont] = useState(false);
|
||||
|
||||
return (
|
||||
<Section>
|
||||
@@ -109,35 +110,66 @@ export function SettingsGeneral(props) {
|
||||
)}
|
||||
</Stack.Item>
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Font size">
|
||||
<NumberInput
|
||||
width="4.2em"
|
||||
step={1}
|
||||
stepPixelSize={10}
|
||||
minValue={8}
|
||||
maxValue={32}
|
||||
value={fontSize}
|
||||
unit="px"
|
||||
format={(value) => toFixed(value)}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
updateSettings({
|
||||
fontSize: value,
|
||||
}),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<LabeledList.Item label="Font size" verticalAlign="middle">
|
||||
<Stack textAlign="center">
|
||||
<Stack.Item grow>
|
||||
<Slider
|
||||
width="100%"
|
||||
step={1}
|
||||
stepPixelSize={20}
|
||||
minValue={8}
|
||||
maxValue={32}
|
||||
value={statFont ? statFontSize : fontSize}
|
||||
unit="px"
|
||||
format={(value) => toFixed(value)}
|
||||
onChange={(e, value) =>
|
||||
dispatch(
|
||||
updateSettings({
|
||||
[statFont ? 'statFontSize' : 'fontSize']: value,
|
||||
}),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Button
|
||||
width={statFont ? 7.3 : 10}
|
||||
onClick={() => setStatFont(!statFont)}
|
||||
>
|
||||
{statFont ? 'Stat Panel' : 'Chat'}
|
||||
</Button>
|
||||
</Stack.Item>
|
||||
{!!statFont && (
|
||||
<Stack.Item>
|
||||
<Button
|
||||
tooltip={
|
||||
statLinked
|
||||
? 'Unlink Stat Panel settings from chat'
|
||||
: 'Link Stat Panel settings to chat'
|
||||
}
|
||||
icon={statLinked ? 'link' : 'link-slash'}
|
||||
color={statLinked ? 'bad' : 'good'}
|
||||
onClick={() =>
|
||||
dispatch(
|
||||
updateSettings({
|
||||
statLinked: !statLinked,
|
||||
}),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Stack.Item>
|
||||
)}
|
||||
</Stack>
|
||||
</LabeledList.Item>
|
||||
<LabeledList.Item label="Line height">
|
||||
<NumberInput
|
||||
width="4.2em"
|
||||
<Slider
|
||||
width="100%"
|
||||
step={0.01}
|
||||
stepPixelSize={2}
|
||||
minValue={0.8}
|
||||
maxValue={5}
|
||||
value={lineHeight}
|
||||
format={(value) => toFixed(value, 2)}
|
||||
onDrag={(value) =>
|
||||
onDrag={(e, value) =>
|
||||
dispatch(
|
||||
updateSettings({
|
||||
lineHeight: value,
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
import { FONTS_DISABLED } from './constants';
|
||||
import { selectSettings } from './selectors';
|
||||
|
||||
let setStatFontTimer: NodeJS.Timeout;
|
||||
let overrideRule: HTMLStyleElement;
|
||||
let overrideFontFamily: string | undefined;
|
||||
let overrideFontSize: string;
|
||||
@@ -44,8 +45,23 @@ function updateGlobalOverrideRule() {
|
||||
document.body.style.setProperty('font-size', overrideFontSize);
|
||||
}
|
||||
|
||||
function setGlobalFontSize(fontSize: string) {
|
||||
function setGlobalFontSize(
|
||||
fontSize: string,
|
||||
statFontSize: string,
|
||||
statLinked: boolean,
|
||||
) {
|
||||
overrideFontSize = `${fontSize}px`;
|
||||
|
||||
// Used solution from theme.ts
|
||||
clearInterval(setStatFontTimer);
|
||||
Byond.command(
|
||||
`.output statbrowser:set_font_size ${statLinked ? fontSize : statFontSize}px`,
|
||||
);
|
||||
setStatFontTimer = setTimeout(() => {
|
||||
Byond.command(
|
||||
`.output statbrowser:set_font_size ${statLinked ? fontSize : statFontSize}px`,
|
||||
);
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function setGlobalFontFamily(fontFamily: string) {
|
||||
@@ -86,7 +102,11 @@ export function settingsMiddleware(store) {
|
||||
const settings = selectSettings(store.getState());
|
||||
|
||||
// Update global UI font size
|
||||
setGlobalFontSize(settings.fontSize);
|
||||
setGlobalFontSize(
|
||||
settings.fontSize,
|
||||
settings.statFontSize,
|
||||
settings.statLinked,
|
||||
);
|
||||
setGlobalFontFamily(settings.fontFamily);
|
||||
updateGlobalOverrideRule();
|
||||
|
||||
|
||||
@@ -38,6 +38,8 @@ const initialState = {
|
||||
visible: false,
|
||||
activeTab: SETTINGS_TABS[0].id,
|
||||
},
|
||||
statLinked: true,
|
||||
statFontSize: 12,
|
||||
} as const;
|
||||
|
||||
export function settingsReducer(
|
||||
|
||||
@@ -34,7 +34,12 @@
|
||||
// Components
|
||||
@include meta.load-css(
|
||||
'~tgui/styles/components/Tabs.scss',
|
||||
$with: ('text-color': rgba(0, 0, 0, 0.5), 'color-default': rgba(0, 0, 0, 1))
|
||||
$with: (
|
||||
'text-color': rgba(0, 0, 0, 0.5),
|
||||
'color-default': rgba(0, 0, 0, 1),
|
||||
'tab-color-selected': rgba(0, 0, 0, 0.125),
|
||||
'tab-color-hovered': rgba(0, 0, 0, 0.075)
|
||||
)
|
||||
);
|
||||
@include meta.load-css('~tgui/styles/components/Section.scss');
|
||||
@include meta.load-css(
|
||||
@@ -52,7 +57,7 @@
|
||||
'~tgui/styles/components/Input.scss',
|
||||
$with: (
|
||||
'border-color': colors.fg(colors.$label),
|
||||
'background-color': #ffffff
|
||||
'background-color': #e6e6e6
|
||||
)
|
||||
);
|
||||
@include meta.load-css('~tgui/styles/components/NumberInput.scss');
|
||||
|
||||
@@ -6,9 +6,20 @@
|
||||
|
||||
export const THEMES = ['light', 'dark'];
|
||||
|
||||
const COLOR_DARK_BG = '#202020';
|
||||
const COLOR_DARK_BG_DARKER = '#171717';
|
||||
const COLOR_DARK_TEXT = '#a4bad6';
|
||||
const COLORS = {
|
||||
DARK: {
|
||||
BG_BASE: '#202020',
|
||||
BG_SECOND: '#171717',
|
||||
BUTTON: '#494949',
|
||||
TEXT: '#A4BAD6',
|
||||
},
|
||||
LIGHT: {
|
||||
BG_BASE: '#EEEEEE',
|
||||
BG_SECOND: '#FFFFFF',
|
||||
BUTTON: 'none',
|
||||
TEXT: '#000000',
|
||||
},
|
||||
};
|
||||
|
||||
let setClientThemeTimer: NodeJS.Timeout;
|
||||
|
||||
@@ -31,112 +42,53 @@ export const setClientTheme = (name) => {
|
||||
Byond.command(`.output statbrowser:set_theme ${name}`);
|
||||
}, 1500);
|
||||
|
||||
if (name === 'light') {
|
||||
return Byond.winset({
|
||||
// Main windows
|
||||
'infowindow.background-color': 'none',
|
||||
'infowindow.text-color': '#000000',
|
||||
'info.background-color': 'none',
|
||||
'info.text-color': '#000000',
|
||||
'browseroutput.background-color': 'none',
|
||||
'browseroutput.text-color': '#000000',
|
||||
'outputwindow.background-color': 'none',
|
||||
'outputwindow.text-color': '#000000',
|
||||
'mainwindow.background-color': 'none',
|
||||
'split.background-color': 'none',
|
||||
// Buttons
|
||||
'changelog.background-color': 'none',
|
||||
'changelog.text-color': '#000000',
|
||||
'rules.background-color': 'none',
|
||||
'rules.text-color': '#000000',
|
||||
'wiki.background-color': 'none',
|
||||
'wiki.text-color': '#000000',
|
||||
'forum.background-color': 'none',
|
||||
'forum.text-color': '#000000',
|
||||
'github.background-color': 'none',
|
||||
'github.text-color': '#000000',
|
||||
'report-issue.background-color': 'none',
|
||||
'report-issue.text-color': '#000000',
|
||||
'fullscreen-toggle.background-color': 'none',
|
||||
'fullscreen-toggle.text-color': '#000000',
|
||||
// Status and verb tabs
|
||||
'output.background-color': 'none',
|
||||
'output.text-color': '#000000',
|
||||
'statwindow.background-color': 'none',
|
||||
'statwindow.text-color': '#000000',
|
||||
'stat.background-color': '#FFFFFF',
|
||||
'stat.tab-background-color': 'none',
|
||||
'stat.text-color': '#000000',
|
||||
'stat.tab-text-color': '#000000',
|
||||
'stat.prefix-color': '#000000',
|
||||
'stat.suffix-color': '#000000',
|
||||
// Say, OOC, me Buttons etc.
|
||||
'saybutton.background-color': 'none',
|
||||
'saybutton.text-color': '#000000',
|
||||
'oocbutton.background-color': 'none',
|
||||
'oocbutton.text-color': '#000000',
|
||||
'mebutton.background-color': 'none',
|
||||
'mebutton.text-color': '#000000',
|
||||
'asset_cache_browser.background-color': 'none',
|
||||
'asset_cache_browser.text-color': '#000000',
|
||||
'tooltip.background-color': 'none',
|
||||
'tooltip.text-color': '#000000',
|
||||
'input.background-color': '#FFFFFF',
|
||||
'input.text-color': '#000000',
|
||||
});
|
||||
}
|
||||
if (name === 'dark') {
|
||||
Byond.winset({
|
||||
// Main windows
|
||||
'infowindow.background-color': COLOR_DARK_BG,
|
||||
'infowindow.text-color': COLOR_DARK_TEXT,
|
||||
'info.background-color': COLOR_DARK_BG,
|
||||
'info.text-color': COLOR_DARK_TEXT,
|
||||
'browseroutput.background-color': COLOR_DARK_BG,
|
||||
'browseroutput.text-color': COLOR_DARK_TEXT,
|
||||
'outputwindow.background-color': COLOR_DARK_BG,
|
||||
'outputwindow.text-color': COLOR_DARK_TEXT,
|
||||
'mainwindow.background-color': COLOR_DARK_BG,
|
||||
'split.background-color': COLOR_DARK_BG,
|
||||
// Buttons
|
||||
'changelog.background-color': '#494949',
|
||||
'changelog.text-color': COLOR_DARK_TEXT,
|
||||
'rules.background-color': '#494949',
|
||||
'rules.text-color': COLOR_DARK_TEXT,
|
||||
'wiki.background-color': '#494949',
|
||||
'wiki.text-color': COLOR_DARK_TEXT,
|
||||
'forum.background-color': '#494949',
|
||||
'forum.text-color': COLOR_DARK_TEXT,
|
||||
'github.background-color': '#3a3a3a',
|
||||
'github.text-color': COLOR_DARK_TEXT,
|
||||
'report-issue.background-color': '#492020',
|
||||
'report-issue.text-color': COLOR_DARK_TEXT,
|
||||
'fullscreen-toggle.background-color': '#494949',
|
||||
'fullscreen-toggle.text-color': COLOR_DARK_TEXT,
|
||||
// Status and verb tabs
|
||||
'output.background-color': COLOR_DARK_BG_DARKER,
|
||||
'output.text-color': COLOR_DARK_TEXT,
|
||||
'statwindow.background-color': COLOR_DARK_BG_DARKER,
|
||||
'statwindow.text-color': COLOR_DARK_TEXT,
|
||||
'stat.background-color': COLOR_DARK_BG_DARKER,
|
||||
'stat.tab-background-color': COLOR_DARK_BG,
|
||||
'stat.text-color': COLOR_DARK_TEXT,
|
||||
'stat.tab-text-color': COLOR_DARK_TEXT,
|
||||
'stat.prefix-color': COLOR_DARK_TEXT,
|
||||
'stat.suffix-color': COLOR_DARK_TEXT,
|
||||
// Say, OOC, me Buttons etc.
|
||||
'saybutton.background-color': COLOR_DARK_BG,
|
||||
'saybutton.text-color': COLOR_DARK_TEXT,
|
||||
'oocbutton.background-color': COLOR_DARK_BG,
|
||||
'oocbutton.text-color': COLOR_DARK_TEXT,
|
||||
'mebutton.background-color': COLOR_DARK_BG,
|
||||
'mebutton.text-color': COLOR_DARK_TEXT,
|
||||
'asset_cache_browser.background-color': COLOR_DARK_BG,
|
||||
'asset_cache_browser.text-color': COLOR_DARK_TEXT,
|
||||
'tooltip.background-color': COLOR_DARK_BG,
|
||||
'tooltip.text-color': COLOR_DARK_TEXT,
|
||||
'input.background-color': COLOR_DARK_BG_DARKER,
|
||||
'input.text-color': COLOR_DARK_TEXT,
|
||||
});
|
||||
const themeColor = COLORS[name.toUpperCase()];
|
||||
if (!themeColor) {
|
||||
return;
|
||||
}
|
||||
|
||||
return Byond.winset({
|
||||
// Main windows
|
||||
'infowindow.background-color': themeColor.BG_BASE,
|
||||
'infowindow.text-color': themeColor.TEXT,
|
||||
'info.background-color': themeColor.BG_BASE,
|
||||
'info.text-color': themeColor.TEXT,
|
||||
'browseroutput.background-color': themeColor.BG_BASE,
|
||||
'browseroutput.text-color': themeColor.TEXT,
|
||||
'outputwindow.background-color': themeColor.BG_BASE,
|
||||
'outputwindow.text-color': themeColor.TEXT,
|
||||
'mainwindow.background-color': themeColor.BG_BASE,
|
||||
'split.background-color': themeColor.BG_BASE,
|
||||
// Buttons
|
||||
'changelog.background-color': themeColor.BUTTON,
|
||||
'changelog.text-color': themeColor.TEXT,
|
||||
'rules.background-color': themeColor.BUTTON,
|
||||
'rules.text-color': themeColor.TEXT,
|
||||
'wiki.background-color': themeColor.BUTTON,
|
||||
'wiki.text-color': themeColor.TEXT,
|
||||
'forum.background-color': themeColor.BUTTON,
|
||||
'forum.text-color': themeColor.TEXT,
|
||||
'github.background-color': themeColor.BUTTON,
|
||||
'github.text-color': themeColor.TEXT,
|
||||
'report-issue.background-color': themeColor.BUTTON,
|
||||
'report-issue.text-color': themeColor.TEXT,
|
||||
'fullscreen-toggle.background-color': themeColor.BUTTON,
|
||||
'fullscreen-toggle.text-color': themeColor.TEXT,
|
||||
// Status and verb tabs
|
||||
'output.background-color': themeColor.BG_BASE,
|
||||
'output.text-color': themeColor.TEXT,
|
||||
// Say, OOC, me Buttons etc.
|
||||
'saybutton.background-color': themeColor.BG_BASE,
|
||||
'saybutton.text-color': themeColor.TEXT,
|
||||
'oocbutton.background-color': themeColor.BG_BASE,
|
||||
'oocbutton.text-color': themeColor.TEXT,
|
||||
'mebutton.background-color': themeColor.BG_BASE,
|
||||
'mebutton.text-color': themeColor.TEXT,
|
||||
'asset_cache_browser.background-color': themeColor.BG_BASE,
|
||||
'asset_cache_browser.text-color': themeColor.TEXT,
|
||||
'tooltip.background-color': themeColor.BG_BASE,
|
||||
'tooltip.text-color': themeColor.TEXT,
|
||||
'input.background-color': themeColor.BG_SECOND,
|
||||
'input.text-color': themeColor.TEXT,
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user