Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-12 06:27:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

popup styling requested adjustments

Browse Source
This commit is contained in:
Nikita Krupin
2022-05-02 21:22:25 -04:00
parent 9fdce8e814
commit e4dd0f1ac6
4 changed files with 165 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
public/popup.css
View File

@@ -1,6 +1,6 @@
:root { :root {
--sb-main-font-family: "Source Sans Pro", sans-serif; --sb-main-font-family: "Source Sans Pro", sans-serif;
--sb-main-bg-color: #111; --sb-main-bg-color: #212121;
--sb-main-fg-color: #fff; --sb-main-fg-color: #fff;
--sb-grey-bg-color: #333; --sb-grey-bg-color: #333;
--sb-grey-fg-color: #999; --sb-grey-fg-color: #999;
@@ -10,6 +10,9 @@
.grey-text { .grey-text {
color: var(--sb-grey-fg-color); color: var(--sb-grey-fg-color);
} }
.white-text {
color: var(--sb-main-fg-color);
}
/* /*
* Container when popup displayed in-page * Container when popup displayed in-page
@@ -74,25 +77,6 @@
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;
}
/* /*
* Alert indicating that Beta server is enabled * Alert indicating that Beta server is enabled
*/ */
@@ -118,15 +102,34 @@
font-weight: bold; font-weight: bold;
justify-content: center; justify-content: center;
user-select: none; user-select: none;
padding: 1rem; padding-top: 16px;
} }
.sbPopupLogo img { .sbPopupLogo img {
margin: 0.5rem 0; margin: 0.5rem;
}
/*
* Close popup button when displayed in-page (top-left corner)
*/
.sbCloseButton {
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
position: absolute;
top: 26px;
left: 26px;
opacity: 0.5;
}
.sbCloseButton:hover {
opacity: 1;
} }
/* /*
* Options button * Options button (top-right corner)
*/ */
#optionsButton { #optionsButton {
@@ -141,8 +144,8 @@
right: 26px; right: 26px;
padding: 5px; padding: 5px;
z-index: 69; z-index: 69;
height: 2rem; height: 32px;
width: 2rem; width: 32px;
} }
#optionsButton svg { #optionsButton svg {
transition: transform 0.15s ease-in-out !important; transition: transform 0.15s ease-in-out !important;
@@ -205,6 +208,8 @@
*/ */
.votingButtons { .votingButtons {
margin: 4px 16px;
border-radius: 8px;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
@@ -221,19 +226,32 @@
*/ */
.segmentSummary { .segmentSummary {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
padding: 7px; padding: 4px 8px;
list-style: none; list-style: none;
white-space: nowrap; white-space: nowrap;
} }
.segmentSummary > div {
text-align: left;
}
.summaryLabel {
overflow-wrap: break-word !important;
max-width: 50px !important;
white-space: normal;
}
/* /*
* Category dot in segment * Category dot in segment
*/ */
.sponsorTimesCategoryColorCircle { .sponsorTimesCategoryColorCircle {
margin: 0 8px; margin-right: 8px;
} }
.dot { .dot {
@@ -266,10 +284,12 @@
*/ */
.sbControlsMenu { .sbControlsMenu {
background-color: var(--sb-grey-bg-color); margin: 16px;
border-radius: 8px;
overflow: hidden;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
margin-top: 10px; background-color: var(--sb-grey-bg-color);
} }
.sbControlsMenu-item { .sbControlsMenu-item {
@@ -283,6 +303,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
trasition: background-color 0.2s ease-in-out;
} }
.sbControlsMenu-item:hover { .sbControlsMenu-item:hover {
@@ -399,12 +420,16 @@
*/ */
#mainControls { #mainControls {
margin-bottom: 12px; margin: 16px;
padding: 8px;
border-radius: 8px;
text-align: left;
border: 2px solid var(--sb-grey-bg-color);
} }
.sponsorStartHint { .sponsorStartHint {
display: block; display: block;
padding: 0 10px 12px; text-align: left;
} }
/* /*
@@ -420,7 +445,7 @@
display: inline-block; display: inline-block;
color: var(--sb-main-fg-color); color: var(--sb-main-fg-color);
font-size: 16px; font-size: 16px;
padding: 8px 37px; padding: 8px 16px;
font-family: var(--sb-main-font-family); font-family: var(--sb-main-font-family);
transition: 0.01s background-color; transition: 0.01s background-color;
} }
@@ -451,7 +476,8 @@
.sbHeader { .sbHeader {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
margin: 10px 0 5px; text-align: left;
margin: 0;
} }
/* /*
@@ -459,15 +485,23 @@
*/ */
.sbYourWorkCols { .sbYourWorkCols {
display: flex; margin: 16px;
margin: 1rem; border-radius: 8px;
border: 2px solid var(--sb-grey-bg-color);
} }
.sbYourWorkCols > div { .sbYourWorkCols > div {
display: flex; display: flex;
align-items: center; border-top: 2px solid var(--sb-grey-bg-color);
flex-basis: 50%; }
justify-content: center;
#usernameElement {
z-index: 2;
padding: 8px;
}
#sponsorTimesContributionsContainer {
padding: 8px;
} }
/* /*
@@ -498,7 +532,7 @@
*/ */
#submitUsername { #submitUsername {
padding-left: 7px; padding-left: 16px;
} }
/* /*
@@ -516,11 +550,17 @@
* Left align "Username" and "Submissions" labels * Left align "Username" and "Submissions" labels
*/ */
#usernameElement > div > p, #usernameElement > div > span,
#sponsorTimesContributionsContainer { #sponsorTimesContributionsContainer {
text-align: start; text-align: start;
} }
#sponsorTimesContributionsContainer {
margin-left: 8px;
padding-left: 8px;
border-left: 2px solid var(--sb-grey-bg-color);
}
/* /*
* Enable flexbox for buttons with SVG icon * Enable flexbox for buttons with SVG icon
*/ */
@@ -553,8 +593,10 @@
#usernameElement > div, #usernameElement > div,
#sponsorTimesContributionsContainer > div { #sponsorTimesContributionsContainer > div {
display: flex; display: flex;
flex-flow: column nowrap; flex-direction: column;
align-items: flex-start; justify-content: start;
/* flex-flow: column nowrap; */
/* align-items: flex-start; */
} }
/* /*
@@ -564,20 +606,18 @@
#usernameValue { #usernameValue {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 130px; white-space: nowrap;
margin: 0 8px 0 0; margin: 0 8px 0 0;
max-width: 130px;
} }
/* /*
* Set username form container with "expanded" state * Set username form container with "expanded" state
*/ */
#setUsername {
display: flex;
}
#setUsername.SBExpanded { #setUsername.SBExpanded {
width: 200%; text-align: left;
width: calc(200% - 130px);
} }
/* /*
@@ -585,12 +625,13 @@
*/ */
#usernameInput { #usernameInput {
background: transparent; border: none;
padding: 2px; padding: 4px 8px;
border: var(--sb-main-fg-color) 1px solid; border-radius: 4px;
color: var(--sb-main-fg-color); width: calc(100% - 68px);
width: calc(100% - 24px);
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--sb-main-fg-color);
background: var(--sb-grey-bg-color);
} }
/* /*
@@ -598,17 +639,16 @@
*/ */
#sbFooter { #sbFooter {
margin-top: 10px; padding: 8px 0;
padding-bottom: 20px;
} }
#sbFooter a { #sbFooter a {
display: inline-block; display: inline-block;
color: var(--sb-main-fg-color); color: var(--sb-main-fg-color);
text-decoration: none; text-decoration: none;
background: #222; background: #333;
cursor: pointer; cursor: pointer;
padding: 5px 16px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: 500;
transition: background 0.3s ease !important; transition: background 0.3s ease !important;
@@ -637,6 +677,7 @@
#sponsorBlockPopupBody .u-mZ { #sponsorBlockPopupBody .u-mZ {
margin: 0 !important; margin: 0 !important;
position: relative;
} }
#sponsorBlockPopupBody .hidden { #sponsorBlockPopupBody .hidden {

85
public/popup.html
View File

@@ -18,7 +18,7 @@
<header class="sbPopupLogo"> <header class="sbPopupLogo">
<img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo"> <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
<p class="u-mZ">SponsorBlock</p> <p class="u-mZ" style="margin: auto;">SponsorBlock</p>
</header> </header>
<div id="videoInfo"> <div id="videoInfo">
@@ -68,50 +68,55 @@
<p class="sbHeader"> <p class="sbHeader">
__MSG_recordTimesDescription__ __MSG_recordTimesDescription__
</p> </p>
<sub class="sponsorStartHint">__MSG_popupHint__</sub> <sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
<div> <div align="center" style="margin: 8px 0;">
<button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button> <button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
</div> <button id="submitTimes" class="sbMediumButton" style="display: none; margin: 0 !important;">__MSG_submitTimesButton__</button>
<div id="submissionSection" style="display: none">
<b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
<button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
</div> </div>
<span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
</div> </div>
<h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1> <!-- Your Work -->
<div class="sbYourWorkCols"> <details class="sbYourWorkCols">
<div id="sponsorTimesContributionsContainer" class="hidden"> <summary class="recordingSubtitle sbHeader" style="padding: 8px 16px; cursor: pointer;">&nbsp;&nbsp;__MSG_yourWork__</summary>
<div> <div>
<p class="u-mZ grey-text">__MSG_Submissions__:</p> <!-- Username -->
<span id="sponsorTimesContributionsDisplay"> <div id="usernameElement">
0 <div>
</span> <span class="u-mZ grey-text">__MSG_Username__:
</div> <!-- loading/errors -->
</div> <span id="setUsernameStatusContainer" style="display: none">
<div id="usernameElement"> <span id="setUsernameStatus" class="u-mZ white-text"></span>
<div> </span>
<p class="u-mZ grey-text">__MSG_Username__:</p> </span>
<div id="setUsernameContainer"> <div id="setUsernameContainer">
<p id="usernameValue"></p> <p id="usernameValue"></p>
<button id="setUsernameButton" title="__MSG_setUsername__"> <button id="setUsernameButton" title="__MSG_setUsername__">
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit"> <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
</button> </button>
<button id="copyUserID" title="__MSG_copyPublicID__"> <button id="copyUserID" title="__MSG_copyPublicID__">
<img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID"> <img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
</button> </button>
</div>
<div id="setUsername" style="display: none">
<div id="setUsernameStatusContainer" style="display: none">
<p id="setUsernameStatus" class="u-mZ"></p>
</div> </div>
<input id="usernameInput" placeholder="Username"> <div id="setUsername" style="display: none">
<button id="submitUsername"> <input id="usernameInput" placeholder="Username">
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck"> <button id="submitUsername">
</button> <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
</button>
</div>
</div>
</div>
<!-- Submissions -->
<div id="sponsorTimesContributionsContainer" class="hidden">
<div>
<p class="u-mZ grey-text">__MSG_Submissions__:</p>
<span id="sponsorTimesContributionsDisplay">
0
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </details>
<p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ"> <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
__MSG_savedPeopleFrom__ __MSG_savedPeopleFrom__
@@ -145,13 +150,13 @@
<img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" /> <img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" />
</div> </div>
<a id="helpButton">__MSG_help__</a>
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a> <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
<a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a> <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
<br />
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a> <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
<br/>
<a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a> <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
<a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a> <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
<a id="helpButton">__MSG_help__</a>
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a> <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a>
</footer> </footer>

2
src/content.ts
View File

@@ -1708,7 +1708,6 @@ function openInfoMenu() {
//make the logo source not 404 //make the logo source not 404
//query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet //query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet
const logo = <HTMLImageElement> popup.querySelector("#sponsorBlockPopupLogo"); const logo = <HTMLImageElement> popup.querySelector("#sponsorBlockPopupLogo");
const settings = <HTMLImageElement> popup.querySelector("#sbPopupIconSettings");
const edit = <HTMLImageElement> popup.querySelector("#sbPopupIconEdit"); const edit = <HTMLImageElement> popup.querySelector("#sbPopupIconEdit");
const copy = <HTMLImageElement> popup.querySelector("#sbPopupIconCopyUserID"); const copy = <HTMLImageElement> popup.querySelector("#sbPopupIconCopyUserID");
const check = <HTMLImageElement> popup.querySelector("#sbPopupIconCheck"); const check = <HTMLImageElement> popup.querySelector("#sbPopupIconCheck");
@@ -1716,7 +1715,6 @@ function openInfoMenu() {
const heart = <HTMLImageElement> popup.querySelector(".sbHeart"); const heart = <HTMLImageElement> popup.querySelector(".sbHeart");
const close = <HTMLImageElement> popup.querySelector("#sbCloseDonate"); const close = <HTMLImageElement> popup.querySelector("#sbCloseDonate");
logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png"); logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
settings.src = chrome.extension.getURL("icons/settings.svg");
edit.src = chrome.extension.getURL("icons/pencil.svg"); edit.src = chrome.extension.getURL("icons/pencil.svg");
copy.src = chrome.extension.getURL("icons/clipboard.svg"); copy.src = chrome.extension.getURL("icons/clipboard.svg");
check.src = chrome.extension.getURL("icons/check.svg"); check.src = chrome.extension.getURL("icons/check.svg");

34
src/popup.ts
View File

@@ -100,7 +100,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
"submitUsername", "submitUsername",
"sbPopupIconCopyUserID", "sbPopupIconCopyUserID",
// More // More
"submissionSection", "submissionHint",
"mainControls", "mainControls",
"loadingIndicator", "loadingIndicator",
"videoFound", "videoFound",
@@ -411,7 +411,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category]?.color; categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category]?.color;
categoryColorCircle.classList.add("dot"); categoryColorCircle.classList.add("dot");
categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle"); categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle");
let extraInfo = ""; let extraInfo = "";
if (segmentTimes[i].hidden === SponsorHideType.Downvoted) { if (segmentTimes[i].hidden === SponsorHideType.Downvoted) {
//this one is downvoted //this one is downvoted
@@ -420,26 +420,35 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
//this one is too short //this one is too short
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")"; extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
} else if (segmentTimes[i].hidden === SponsorHideType.Hidden) { } else if (segmentTimes[i].hidden === SponsorHideType.Hidden) {
extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")"; extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") +")";
} }
const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo); const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo);
const segmentTimeFromToNode = document.createElement("div"); const segmentTimeFromToNode = document.createElement("div");
if (segmentTimes[i].actionType === ActionType.Full) { if (segmentTimes[i].actionType === ActionType.Full) {
segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full"); segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full");
} else { } else {
segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) +
(segmentTimes[i].actionType !== ActionType.Poi (segmentTimes[i].actionType !== ActionType.Poi
? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
: ""); : "");
} }
segmentTimeFromToNode.style.margin = "5px"; segmentTimeFromToNode.style.margin = "5px";
// for inline-styling purposes
const labelContainer = document.createElement("div");
labelContainer.appendChild(categoryColorCircle);
segmentSummary.appendChild(categoryColorCircle); const span = document.createElement('span');
segmentSummary.appendChild(textNode); span.className = "summaryLabel";
span.appendChild(textNode);
labelContainer.appendChild(span);
// for inline-styling purposes
segmentSummary.appendChild(labelContainer);
segmentSummary.appendChild(segmentTimeFromToNode); segmentSummary.appendChild(segmentTimeFromToNode);
const votingButtons = document.createElement("details"); const votingButtons = document.createElement("details");
votingButtons.classList.add("votingButtons"); votingButtons.classList.add("votingButtons");
@@ -562,7 +571,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
function updateSegmentEditingUI() { function updateSegmentEditingUI() {
PageElements.sponsorStart.innerText = chrome.i18n.getMessage(creatingSegment ? "sponsorEnd" : "sponsorStart"); PageElements.sponsorStart.innerText = chrome.i18n.getMessage(creatingSegment ? "sponsorEnd" : "sponsorStart");
PageElements.submissionSection.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none"; PageElements.submitTimes.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
PageElements.submissionHint.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
} }
//make the options div visible //make the options div visible