ref: function for setting global css vars & rename them

assets/style/fixSpacing.css

@@ -19,5 +19,5 @@ ytmusic-tab-renderer #automix-contents .bytm-queue-btn-container {
 :root body ytmusic-app yt-notification-action-renderer tp-yt-paper-toast#toast,
 :root body ytmusic-app yt-notification-text-renderer tp-yt-paper-toast#toast
 {
-  top: calc(var(--bytm-viewport-height, 1200px) + 150px);
+  top: calc(var(--bytm-inner-height, 1200px) + 150px);
 }

src/features/volume.ts

@@ -1,6 +1,6 @@
 import { addParent, type Stringifiable } from "@sv443-network/userutils";
 import { getFeature } from "../config.js";
-import { addStyleFromResource, error, log, resourceAsString, t, waitVideoElementReady } from "../utils/index.js";
+import { addStyleFromResource, error, log, resourceAsString, setGlobalCssVar, t, waitVideoElementReady } from "../utils/index.js";
 import { siteEvents } from "../siteEvents.js";
 import { featInfo } from "./index.js";
 import "./volume.css";
@@ -158,7 +158,7 @@ function setVolSliderSize() {
   if(typeof size !== "number" || isNaN(Number(size)))
     return error("Invalid volume slider size:", size);
 
-  document.documentElement.style.setProperty("--bytm-vol-slider-size", `${size}px`);
+  setGlobalCssVar("--bytm-vol-slider-size", `${size}px`);
   addStyleFromResource("css-vol_slider_size");
 }
 

src/index.ts

@@ -1,5 +1,5 @@
 import { compress, decompress, pauseFor, type Stringifiable } from "@sv443-network/userutils";
-import { addStyleFromResource, domLoaded, warn } from "./utils/index.js";
+import { addStyleFromResource, domLoaded, setGlobalCssVars, warn } from "./utils/index.js";
 import { clearConfig, fixCfgKeys, getFeatures, initConfig, setFeatures } from "./config.js";
 import { buildNumber, compressionFormat, defaultLogLevel, mode, scriptInfo } from "./constants.js";
 import { dbg, error, getDomain, info, getSessionId, log, setLogLevel, initTranslations, setLocale } from "./utils/index.js";
@@ -288,8 +288,12 @@ async function insertGlobalStyle() {
 /** Initializes global CSS variables */
 function initGlobalCssVars() {
   const applyVars = () => {
-    document.documentElement.style.setProperty("--bytm-viewport-height", `${window.innerHeight}px`);
-    document.documentElement.style.setProperty("--bytm-viewport-width", `${window.innerWidth}px`);
+    setGlobalCssVars({
+      "--bytm-inner-height": `${window.innerHeight}px`,
+      "--bytm-outer-height": `${window.outerHeight}px`,
+      "--bytm-inner-width": `${window.innerWidth}px`,
+      "--bytm-outer-width": `${window.outerWidth}px`,
+    });
   };
   applyVars();
   window.addEventListener("resize", applyVars);

src/utils/dom.ts

@@ -163,6 +163,17 @@ export async function addStyle(css: string, ref?: string, transform: (css: strin
   return elem;
 }
 
+/** Sets a global CSS variable on the <document> element */
+export function setGlobalCssVar(name: string, value: Stringifiable) {
+  document.documentElement.style.setProperty(name, String(value));
+}
+
+/** Sets multiple global CSS variables on the <document> element */
+export function setGlobalCssVars(vars: Record<string, Stringifiable>) {
+  for(const [name, value] of Object.entries(vars))
+    setGlobalCssVar(name, value);
+}
+
 /**
  * Checks if the currently playing media is a song or a video.  
  * This function should only be called after awaiting {@linkcode waitVideoElementReady}!