From 06154b408e9cff3be60e8b7e6990898dd37172bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B0=D0=BD=D0=B8=D1=97=D0=BB=20=D0=93=D1=80=D0=B8?= =?UTF-8?q?=D0=B3=D0=BE=D1=80=27=D1=94=D0=B2?= Date: Fri, 20 Jun 2025 07:01:58 +0300 Subject: [PATCH] Replace --ui-scale variable with rem unit Replace --ui-scale inline style on the 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. --- src/css/dynamic_ui.scss | 3 +-- src/js/application.js | 4 ++-- src/js/mods/mod_interface.js | 5 +---- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/css/dynamic_ui.scss b/src/css/dynamic_ui.scss index e90e0b24..5d9b3b1d 100644 --- a/src/css/dynamic_ui.scss +++ b/src/css/dynamic_ui.scss @@ -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 diff --git a/src/js/application.js b/src/js/application.js index 2de49a7d..1204ad0a 100644 --- a/src/js/application.js +++ b/src/js/application.js @@ -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(); } } diff --git a/src/js/mods/mod_interface.js b/src/js/mods/mod_interface.js index e2bb15b4..578d2bfe 100644 --- a/src/js/mods/mod_interface.js +++ b/src/js/mods/mod_interface.js @@ -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);