feat: finish config menu option on yt

src/components/BytmDialog.css

@@ -281,6 +281,10 @@
   margin-left: 5px;
 }
 
+select.bytm-ftconf-input {
+  cursor: pointer;
+}
+
 #bytm-export-dialog-text, #bytm-import-dialog-text {
   font-size: 1.6em;
   margin-bottom: 15px;

src/features/layout.css

@@ -119,6 +119,7 @@ button.bytm-btn {
   text-transform: revert;
   color: revert;
   background: revert;
+  cursor: pointer;
   line-height: 1.4em;
 }
 
@@ -192,22 +193,26 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
 }
 
 .bytm-yt-cfg-menu-option {
+  position: relative;
+  width: calc(100% - 12px);
+}
+
+.bytm-yt-cfg-menu-option-inner {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  padding: 0px 12px;
-  min-height: var(--paper-item-min-height,48px);
-  width: calc(100% - 12px);
+  min-height: var(--paper-item-min-height, 48px);
   max-width: calc(100% - 12px);
+  padding: 0px 12px;
+  border-radius: var(--paper-item-focused-before-border-radius, 10px);
   cursor: pointer;
   background-color: transparent;
   transition: background-color 0.2s ease;
 }
 
-.bytm-yt-cfg-menu-option:hover {
-  /* I would've loved to just use the YT-provided var(--yt-spec-badge-chip-background) but darkreader is being a bitch and a half and overwrites it */
-  background-color: rgba(255, 255, 255, 0.05);
+.bytm-yt-cfg-menu-option-inner:hover {
+  background-color: var(--yt-spec-badge-chip-background, rgba(255, 255, 255, 0.1));
 }
 
 .bytm-yt-cfg-menu-option-icon {
@@ -220,9 +225,16 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
 }
 
 .bytm-yt-cfg-menu-option-item {
+  width: 100%;
+  color: #fff;
   font-size: 14px;
 }
 
+.bytm-yt-cfg-menu-option-item:hover {
+  /* Support for "Enhancer for YouTube" extension's custom themes */
+  color: var(--main-color, #fff) !important;
+}
+
 /* #region watermark */
 
 #bytm-watermark {

src/features/layout.ts

@@ -147,12 +147,14 @@ export async function addConfigMenuOptionYTM(container: HTMLElement) {
 
 /** Called whenever the titlebar (masthead) exists on YT to add a BYTM config menu button */
 export async function addConfigMenuOptionYT(container: HTMLElement) {
-  // TODO:
+  const cfgOptWrapperElem = document.createElement("div");
+  cfgOptWrapperElem.classList.add("bytm-yt-cfg-menu-option", "darkreader-ignore");
+  cfgOptWrapperElem.role = "button";
+  cfgOptWrapperElem.tabIndex = 0;
+  cfgOptWrapperElem.ariaLabel = cfgOptWrapperElem.title = t("open_menu_tooltip", scriptInfo.name);
+
   const cfgOptElem = document.createElement("div");
-  cfgOptElem.classList.add("bytm-yt-cfg-menu-option", "darkreader-ignore");
-  cfgOptElem.role = "button";
-  cfgOptElem.tabIndex = 0;
-  cfgOptElem.ariaLabel = cfgOptElem.title = t("open_menu_tooltip", scriptInfo.name);
+  cfgOptElem.classList.add("bytm-yt-cfg-menu-option-inner");
 
   const cfgOptImgElem = document.createElement("img");
   cfgOptImgElem.classList.add("bytm-yt-cfg-menu-option-icon");
@@ -165,12 +167,14 @@ export async function addConfigMenuOptionYT(container: HTMLElement) {
   cfgOptElem.appendChild(cfgOptImgElem);
   cfgOptElem.appendChild(cfgOptItemElem);
 
-  onInteraction(cfgOptElem, openCfgMenu);
+  cfgOptWrapperElem.appendChild(cfgOptElem);
+
+  onInteraction(cfgOptWrapperElem, openCfgMenu);
 
   const firstChild = container?.firstElementChild;
 
   if(firstChild)
-    container.insertBefore(cfgOptElem, firstChild);
+    container.insertBefore(cfgOptWrapperElem, firstChild);
   else
     return error("Couldn't add config menu option to YT titlebar - couldn't find container element");
 }

src/menu/menu_old.ts

@@ -442,7 +442,7 @@ async function addCfgMenu() {
           advCopyHintElem.style.display = "none";
 
           const advCopyHiddenBtn = document.createElement("button");
-          advCopyHiddenBtn.classList.add("bytm-ftconf-adv-copy-btn");
+          advCopyHiddenBtn.classList.add("bytm-ftconf-adv-copy-btn", "bytm-btn");
           advCopyHiddenBtn.tabIndex = 0;
           advCopyHiddenBtn.textContent = t("copy_hidden_value");
           advCopyHiddenBtn.ariaLabel = advCopyHiddenBtn.title = t("copy_hidden_tooltip");
@@ -597,6 +597,7 @@ async function addCfgMenu() {
             break;
           case "button":
             wrapperElem = document.createElement("button");
+            wrapperElem.classList.add("bytm-btn");
             wrapperElem.tabIndex = 0;
             wrapperElem.textContent = wrapperElem.ariaLabel = wrapperElem.title = hasKey(`feature_btn_${featKey}`) ? t(`feature_btn_${featKey}`) : t("trigger_btn_action");