mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-09-20 04:53:43 +02:00
Improve close popup button
This commit is contained in:
parent
24fc5e4370
commit
f7510eea88
2 changed files with 132 additions and 107 deletions
|
@ -7,14 +7,26 @@
|
|||
}
|
||||
|
||||
/*
|
||||
* IDs on container element (when inserted in page), <html> element,
|
||||
* <body> element and main container
|
||||
* Container when popup displayed in-page
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupContainer {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable fixed popup width when displayed in-page
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupContainer #sponsorBlockPopupBody {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Main containers
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupHTML {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
@ -33,14 +45,6 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable fixed popup width when displayed inline
|
||||
*/
|
||||
|
||||
#sponsorBlockPopupContainer #sponsorBlockPopupBody {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable transition on all elements until the extension has loaded
|
||||
*/
|
||||
|
@ -49,6 +53,25 @@
|
|||
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
|
||||
*/
|
||||
|
|
|
@ -1677,13 +1677,15 @@ function openInfoMenu() {
|
|||
popup.innerHTML = htmlData;
|
||||
|
||||
//close button
|
||||
const closeButton = document.createElement("div");
|
||||
closeButton.innerText = chrome.i18n.getMessage("closePopup");
|
||||
closeButton.classList.add("smallLink");
|
||||
closeButton.setAttribute("align", "center");
|
||||
const closeButton = document.createElement("button");
|
||||
const closeButtonIcon = document.createElement("img");
|
||||
closeButtonIcon.src = chrome.extension.getURL("icons/close.png");
|
||||
closeButtonIcon.width = 16;
|
||||
closeButtonIcon.height = 16;
|
||||
closeButton.appendChild(closeButtonIcon);
|
||||
closeButton.setAttribute("title", chrome.i18n.getMessage("closePopup"));
|
||||
closeButton.classList.add("sbCloseButton");
|
||||
closeButton.addEventListener("click", closeInfoMenu);
|
||||
// Theme based color
|
||||
closeButton.style.color = "var(--yt-spec-text-primary)";
|
||||
|
||||
//add the close button
|
||||
popup.prepend(closeButton);
|
||||
|
|
Loading…
Reference in a new issue