ref: better prefix for global css vars

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-inner-height, 1200px) + 150px);
+  top: calc(var(--bytm-global-inner-height, 1200px) + 150px);
 }

assets/style/volSliderSize.css

@@ -1,3 +1,3 @@
 #bytm-vol-slider-cont tp-yt-paper-slider#volume-slider {
-  width: var(--bytm-vol-slider-size, 68px) !important;
+  width: var(--bytm-global-vol-slider-size, 68px) !important;
 }

src/features/volume.ts

@@ -158,7 +158,7 @@ function setVolSliderSize() {
   if(typeof size !== "number" || isNaN(Number(size)))
     return error("Invalid volume slider size:", size);
 
-  setGlobalCssVar("--bytm-vol-slider-size", `${size}px`);
+  setGlobalCssVar("vol-slider-size", `${size}px`);
   addStyleFromResource("css-vol_slider_size");
 }
 

src/index.ts

@@ -31,7 +31,7 @@ import {
   initVersionCheck,
 } from "./features/index.js";
 
-//#region console watermark
+//#region cns. watermark
 
 {
   // console watermark with sexy gradient
@@ -43,7 +43,7 @@ import {
     `${styleCommon} ${styleGradient} font-weight: bold; padding-left: 6px; padding-right: 6px;`,
     `${styleCommon} background-color: #333; padding-left: 8px; padding-right: 8px;`,
     "color: #fff; font-size: 1.2rem;",
-    "padding: initial;",
+    "padding: initial; font-size: 0.9rem;"
   );
   console.log([
     "Powered by:",
@@ -287,16 +287,15 @@ async function insertGlobalStyle() {
 
 /** Initializes global CSS variables */
 function initGlobalCssVars() {
-  const applyVars = () => {
-    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();
+  const applyVars = () => setGlobalCssVars({
+    "inner-height": `${window.innerHeight}px`,
+    "outer-height": `${window.outerHeight}px`,
+    "inner-width": `${window.innerWidth}px`,
+    "outer-width": `${window.outerWidth}px`,
+  });
+
   window.addEventListener("resize", applyVars);
+  applyVars();
 }
 
 //#region dev menu cmds

src/utils/dom.ts

@@ -165,7 +165,7 @@ export async function addStyle(css: string, ref?: string, transform: (css: strin
 
 /** Sets a global CSS variable on the <document> element */
 export function setGlobalCssVar(name: string, value: Stringifiable) {
-  document.documentElement.style.setProperty(name, String(value));
+  document.documentElement.style.setProperty(`--bytm-global-${name}`, String(value));
 }
 
 /** Sets multiple global CSS variables on the <document> element */