feat: mostly fix menu on yt domain

src/components/BytmDialog.ts

@@ -1,6 +1,6 @@
 // hoist the class declaration because either rollup or babel is being a hoe
 import { NanoEmitter } from "../utils/NanoEmitter";
-import { addStyle, clearInner, getResourceUrl, onInteraction, warn } from "../utils";
+import { addStyle, clearInner, getDomain, getResourceUrl, onInteraction, warn } from "../utils";
 import { t } from "../utils/translations";
 import { emitInterface } from "../interface";
 import "./BytmDialog.css";
@@ -79,7 +79,7 @@ export class BytmDialog extends NanoEmitter<{
 
     const bgElem = document.createElement("div");
     bgElem.id = `bytm-${this.id}-dialog-bg`;
-    bgElem.classList.add("bytm-dialog-bg");
+    bgElem.classList.add("bytm-dialog-bg", `bytm-dom-${getDomain()}`);
     if(this.options.closeOnBgClick)
       bgElem.ariaLabel = bgElem.title = t("close_menu_tooltip");
 
@@ -245,7 +245,7 @@ export class BytmDialog extends NanoEmitter<{
 
     const dialogWrapperEl = document.createElement("div");
     dialogWrapperEl.id = `bytm-${this.id}-dialog`;
-    dialogWrapperEl.classList.add("bytm-dialog");
+    dialogWrapperEl.classList.add("bytm-dialog", `bytm-dom-${getDomain()}`);
     dialogWrapperEl.ariaLabel = dialogWrapperEl.title = "";
     dialogWrapperEl.role = "dialog";
     dialogWrapperEl.setAttribute("aria-labelledby", `bytm-${this.id}-dialog-title`);

src/dialogs/dialogs.css

@@ -16,6 +16,16 @@
   --bytm-menu-width-max: 1150px;
 }
 
+.bytm-dialog-bg.bytm-dom-yt,
+.bytm-menu-bg.bytm-dom-yt {
+  z-index: 10042;
+}
+
+.bytm-dialog.bytm-dom-yt,
+.bytm-menu.bytm-dom-yt {
+  z-index: 10069;
+}
+
 .bytm-dialog-body p {
   overflow-wrap: break-word;
 }

src/menu/menu_old.ts

@@ -41,7 +41,7 @@ async function addCfgMenu() {
   //#region bg & container
   const backgroundElem = document.createElement("div");
   backgroundElem.id = "bytm-cfg-menu-bg";
-  backgroundElem.classList.add("bytm-menu-bg", `bytm-menu-bg-dom-${getDomain()}`);
+  backgroundElem.classList.add("bytm-menu-bg", `bytm-dom-${getDomain()}`);
   backgroundElem.ariaLabel = backgroundElem.title = t("close_menu_tooltip");
   backgroundElem.style.visibility = "hidden";
   backgroundElem.style.display = "none";
@@ -56,7 +56,7 @@ async function addCfgMenu() {
 
   const menuContainer = document.createElement("div");
   menuContainer.ariaLabel = menuContainer.title = ""; // prevent bg title from propagating downwards
-  menuContainer.classList.add("bytm-menu", `bytm-menu-dom-${getDomain()}`);
+  menuContainer.classList.add("bytm-menu", `bytm-dom-${getDomain()}`);
   menuContainer.id = "bytm-cfg-menu";