diff --git a/public/content.css b/public/content.css index e97116df..deaa875a 100644 --- a/public/content.css +++ b/public/content.css @@ -776,7 +776,7 @@ input::-webkit-inner-spin-button { } /* full video labels on thumbnails */ -#sponsorThumbnailLabel { +.sponsorThumbnailLabel { display: none; position: absolute; top: 0; @@ -791,32 +791,32 @@ input::-webkit-inner-spin-button { font-size: 10px; } -#sponsorThumbnailLabel.sponsorThumbnailLabelVisible { +.sponsorThumbnailLabel.sponsorThumbnailLabelVisible { display: flex; } -#sponsorThumbnailLabel svg { +.sponsorThumbnailLabel svg { height: 2em; fill: var(--category-text-color, #fff); } -#sponsorThumbnailLabel span { +.sponsorThumbnailLabel span { display: none; padding-left: 0.25em; font-size: 1.5em; color: var(--category-text-color, #fff); } -#sponsorThumbnailLabel:hover { +.sponsorThumbnailLabel:hover { border-radius: 0.25em; opacity: 1; } -#sponsorThumbnailLabel:hover span { +.sponsorThumbnailLabel:hover span { display: inline; } -.pod-item #sponsorThumbnailLabel { +.pod-item .sponsorThumbnailLabel { position: relative; margin: 0 0 0 0.5em; box-shadow: none; diff --git a/src/thumbnail-utils/thumbnails.ts b/src/thumbnail-utils/thumbnails.ts index 1d38dffd..052798e0 100644 --- a/src/thumbnail-utils/thumbnails.ts +++ b/src/thumbnail-utils/thumbnails.ts @@ -81,7 +81,7 @@ export async function labelThumbnailProcess( } async function getOldThumbnailLabel(thumbnail: HTMLElement): Promise { - return waitFor(() => thumbnail.querySelector("#sponsorThumbnailLabel"), 50, 5).catch(() => null); + return waitFor(() => thumbnail.querySelector(".sponsorThumbnailLabel"), 50, 5).catch(() => null); } async function hideThumbnailLabel(thumbnail: HTMLElement): Promise { @@ -118,7 +118,7 @@ async function createOrGetThumbnail( } const overlay = document.createElement("div") as HTMLElement; - overlay.id = "sponsorThumbnailLabel"; + overlay.classList.add("sponsorThumbnailLabel"); // Disable hover autoplay overlay.addEventListener("pointerenter", (e) => { e.stopPropagation();