feat: thumbnail indicator opacity & change advanced mode

src/features/index.ts

@@ -161,6 +161,16 @@ export const featInfo = {
     type: "toggle",
     category: "layout",
     default: true,
+    textAdornment: adornments.reloadRequired,
+  },
+  thumbnailOverlayIndicatorOpacity: {
+    type: "slider",
+    category: "layout",
+    min: 5,
+    max: 100,
+    step: 5,
+    default: 25,
+    unit: "%",
     advanced: true,
     textAdornment: () => combineAdornments([adornments.advanced, adornments.reloadRequired]),
   },

src/features/layout.ts

@@ -510,6 +510,7 @@ export async function initThumbnailOverlay() {
     // overlay
     const overlayElem = document.createElement("div");
     overlayElem.id = "bytm-thumbnail-overlay";
+    overlayElem.title = ""; // prevent child titles from propagating
     overlayElem.classList.add("bytm-no-select");
     overlayElem.style.display = "none";
 
@@ -522,6 +523,7 @@ export async function initThumbnailOverlay() {
       indicatorElem.title = indicatorElem.ariaLabel = t("thumbnail_overlay_indicator_tooltip");
       indicatorElem.ariaHidden = "true";
       indicatorElem.style.display = "none";
+      indicatorElem.style.opacity = String(getFeatures().thumbnailOverlayIndicatorOpacity / 100);
     }
   
     const thumbImgElem = document.createElement("img");