ref: move "bytm-dom-yt/ytm" class to document body

src/components/BytmDialog.ts

@@ -84,7 +84,7 @@ export class BytmDialog extends NanoEmitter<{
 
     const bgElem = document.createElement("div");
     bgElem.id = `bytm-${this.id}-dialog-bg`;
-    bgElem.classList.add("bytm-dialog-bg", `bytm-dom-${getDomain()}`);
+    bgElem.classList.add("bytm-dialog-bg");
     if(this.options.closeOnBgClick)
       bgElem.ariaLabel = bgElem.title = t("close_menu_tooltip");
 
@@ -266,7 +266,7 @@ export class BytmDialog extends NanoEmitter<{
 
     const dialogWrapperEl = document.createElement("div");
     dialogWrapperEl.id = `bytm-${this.id}-dialog`;
-    dialogWrapperEl.classList.add("bytm-dialog", `bytm-dom-${getDomain()}`);
+    dialogWrapperEl.classList.add("bytm-dialog");
     dialogWrapperEl.ariaLabel = dialogWrapperEl.title = "";
     dialogWrapperEl.role = "dialog";
     dialogWrapperEl.setAttribute("aria-labelledby", `bytm-${this.id}-dialog-title`);

src/dialogs/dialogs.css

@@ -1,3 +1,4 @@
+/* #region general */
 :root {
   --bytm-locale-color: #5ea2ec;
   --bytm-advanced-mode-color: #ceb663;
@@ -10,19 +11,20 @@
 #bytm-cfg-dialog-bg,
 #bytm-cfg-menu-bg
 {
-  --bytm-dialog-height-max: 800px;
   --bytm-dialog-width-max: 1150px;
-  --bytm-menu-height-max: 800px;
   --bytm-menu-width-max: 1150px;
+  --bytm-dialog-height-max: 800px;
+  --bytm-menu-height-max: 800px;
 }
 
-.bytm-dialog-bg.bytm-dom-yt,
-.bytm-menu-bg.bytm-dom-yt {
+/* Have to do it like this since various extensions use a pretty damn high z-index and since I haven't implemented top layer for dialogs yet (https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) */
+.bytm-dom-yt .bytm-dialog-bg,
+.bytm-dom-yt .bytm-menu-bg {
   z-index: 10042;
 }
 
-.bytm-dialog.bytm-dom-yt,
-.bytm-menu.bytm-dom-yt {
+.bytm-dom-yt .bytm-dialog,
+.bytm-dom-yt .bytm-menu {
   z-index: 10069;
 }
 
@@ -35,6 +37,13 @@
   font-style: italic;
 }
 
+.bytm-secondary-label {
+  padding-left: 12px;
+  font-size: 1.3rem;
+}
+
+/* #region version notification */
+
 #bytm-version-notif-dialog-btns {
   display: flex;
   flex-direction: row;
@@ -70,9 +79,10 @@
   justify-content: flex-start;
 }
 
-.bytm-secondary-label {
-  padding-left: 12px;
-  font-size: 1.3rem;
+/* #region cfg menu */
+
+.bytm-ftconf-adv-copy-btn {
+  margin: 0px 10px;
 }
 
 .bytm-adorn-icon {
@@ -81,9 +91,7 @@
   cursor: help;
 }
 
-.bytm-ftconf-adv-copy-btn {
-  margin: 0px 10px;
-}
+/* #region cfg menu adornments */
 
 .bytm-ftitem-adornment svg path {
   fill: var(--bytm-locale-color, #fff) !important;
@@ -110,7 +118,7 @@
   fill: var(--bytm-reload-col, #fff) !important;
 }
 
-/* #SECTION welcome dialog */
+/* #region welcome dialog */
 
 #bytm-welcome-menu-title-wrapper {
   display: flex;

src/index.ts

@@ -114,6 +114,7 @@ async function onDomLoad() {
   const features = getFeatures();
   const ftInit = [] as [string, Promise<void>][];
 
+  // for being able to apply domain-specific styles (prefix any CSS selector with "body.bytm-dom-yt" or "body.bytm-dom-ytm")
   document.body.classList.add(`bytm-dom-${domain}`);
 
   try {

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-dom-${getDomain()}`);
+  backgroundElem.classList.add("bytm-menu-bg");
   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-dom-${getDomain()}`);
+  menuContainer.classList.add("bytm-menu");
   menuContainer.id = "bytm-cfg-menu";