Improve close popup button

This commit is contained in:
Alec Rust 2022-03-13 11:42:16 +00:00
parent 24fc5e4370
commit f7510eea88
No known key found for this signature in database
GPG key ID: EB374231DBCA5067
2 changed files with 132 additions and 107 deletions

View file

@ -7,14 +7,26 @@
} }
/* /*
* IDs on container element (when inserted in page), <html> element, * Container when popup displayed in-page
* <body> element and main container
*/ */
#sponsorBlockPopupContainer { #sponsorBlockPopupContainer {
position: relative;
margin-bottom: 16px; margin-bottom: 16px;
} }
/*
* Disable fixed popup width when displayed in-page
*/
#sponsorBlockPopupContainer #sponsorBlockPopupBody {
width: auto;
}
/*
* Main containers
*/
#sponsorBlockPopupHTML { #sponsorBlockPopupHTML {
color-scheme: dark; color-scheme: dark;
} }
@ -33,14 +45,6 @@
text-align: center; text-align: center;
} }
/*
* Disable fixed popup width when displayed inline
*/
#sponsorBlockPopupContainer #sponsorBlockPopupBody {
width: auto;
}
/* /*
* Disable transition on all elements until the extension has loaded * Disable transition on all elements until the extension has loaded
*/ */
@ -49,6 +53,25 @@
transition: none !important; transition: none !important;
} }
/*
* Close popup button when displayed in-page
*/
.sbCloseButton {
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
opacity: 0.5;
}
.sbCloseButton:hover {
opacity: 1;
}
/* /*
* Header logo * Header logo
*/ */

View file

@ -1677,13 +1677,15 @@ function openInfoMenu() {
popup.innerHTML = htmlData; popup.innerHTML = htmlData;
//close button //close button
const closeButton = document.createElement("div"); const closeButton = document.createElement("button");
closeButton.innerText = chrome.i18n.getMessage("closePopup"); const closeButtonIcon = document.createElement("img");
closeButton.classList.add("smallLink"); closeButtonIcon.src = chrome.extension.getURL("icons/close.png");
closeButton.setAttribute("align", "center"); closeButtonIcon.width = 16;
closeButtonIcon.height = 16;
closeButton.appendChild(closeButtonIcon);
closeButton.setAttribute("title", chrome.i18n.getMessage("closePopup"));
closeButton.classList.add("sbCloseButton");
closeButton.addEventListener("click", closeInfoMenu); closeButton.addEventListener("click", closeInfoMenu);
// Theme based color
closeButton.style.color = "var(--yt-spec-text-primary)";
//add the close button //add the close button
popup.prepend(closeButton); popup.prepend(closeButton);