Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-12-09 16:21:51 +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
@function D($v) {
$baseValue: strip-unit($v) * 1px;
@return calc(#{$baseValue} * var(--ui-scale));
@return strip-unit($v) * 0.1rem;
}
// 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 { StateManager } from "./core/state_manager";
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 { MOD_SIGNALS } from "./mods/mod_signals";
import { MODS } from "./mods/modloader";
@ -321,7 +321,7 @@ export class Application {
}
const scale = this.getEffectiveUiScale();
waitNextFrame().then(() => document.documentElement.style.setProperty("--ui-scale", `${scale}`));
document.documentElement.style.fontSize = `${round2Digits(scale * 10)}px`;
window.focus();
}
}

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

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