Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-12-11 09:11:50 +00:00
Code Issues Projects Releases Wiki Activity

Replace --ui-scale variable with rem unit

Browse Source 
Replace --ui-scale inline style on the <html> element with font-size set
to UI scale * 10px and modify SCSS D(...) mixin to use the rem unit
instead of multiplying by var(--ui-scale). This makes it possible to get
rid of mixin hell and makes following UI scale in external stylesheets
(mods) much easier.
This commit is contained in:
Даниїл Григор'єв 2025-06-20 07:01:58 +03:00
parent d845cb33a5
commit 06154b408e
No known key found for this signature in database
GPG Key ID: B890DF16341D8C1D
3 changed files with 4 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/dynamic_ui.scss
View File

@ -9,8 +9,7 @@
// Helper method to scale a value, for use in calc() etc // Helper method to scale a value, for use in calc() etc
@function D($v) { @function D($v) {
$baseValue: strip-unit($v) * 1px; @return strip-unit($v) * 0.1rem;
@return calc(#{$baseValue} * var(--ui-scale));
} }
// Helper method to scale a property value // Helper method to scale a property value

4
src/js/application.js
View File

@ -7,7 +7,7 @@ import { Loader } from "./core/loader";
import { createLogger } from "./core/logging"; import { createLogger } from "./core/logging";
import { StateManager } from "./core/state_manager"; import { StateManager } from "./core/state_manager";
import { TrackedState } from "./core/tracked_state"; import { TrackedState } from "./core/tracked_state";
import { getPlatformName, waitNextFrame } from "./core/utils"; import { getPlatformName, round2Digits, waitNextFrame } from "./core/utils";
import { Vector } from "./core/vector"; import { Vector } from "./core/vector";
import { MOD_SIGNALS } from "./mods/mod_signals"; import { MOD_SIGNALS } from "./mods/mod_signals";
import { MODS } from "./mods/modloader"; import { MODS } from "./mods/modloader";
@ -321,7 +321,7 @@ export class Application {
} }
const scale = this.getEffectiveUiScale(); const scale = this.getEffectiveUiScale();
waitNextFrame().then(() => document.documentElement.style.setProperty("--ui-scale", `${scale}`)); document.documentElement.style.fontSize = `${round2Digits(scale * 10)}px`;
window.focus(); window.focus();
} }
} }

5
src/js/mods/mod_interface.js
View File

@ -67,11 +67,8 @@ export class ModInterface {
this.modLoader = modLoader; this.modLoader = modLoader;
} }
/** @deprecated */
registerCss(cssString) { registerCss(cssString) {
// Preprocess css
cssString = cssString.replace(/\$scaled\(([^)]*)\)/gim, (substr, expression) => {
return "calc((" + expression + ") * var(--ui-scale))";
});
const element = document.createElement("style"); const element = document.createElement("style");
element.textContent = cssString; element.textContent = cssString;
document.head.appendChild(element); document.head.appendChild(element);