mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-11-10 01:01:55 +01:00
popup styling requested adjustments
This commit is contained in:
Nikita Krupin
parent
9fdce8e814
commit
e4dd0f1ac6
4 changed files with 165 additions and 111 deletions
155
public/popup.css
155
public/popup.css
|
|
@ -1,6 +1,6 @@
|
|||
:root {
|
||||
--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-grey-bg-color: #333;
|
||||
--sb-grey-fg-color: #999;
|
||||
|
|
@ -10,6 +10,9 @@
|
|||
.grey-text {
|
||||
color: var(--sb-grey-fg-color);
|
||||
}
|
||||
.white-text {
|
||||
color: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* Container when popup displayed in-page
|
||||
|
|
@ -74,25 +77,6 @@
|
|||
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
|
||||
*/
|
||||
|
|
@ -118,15 +102,34 @@
|
|||
font-weight: bold;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
padding: 1rem;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -141,8 +144,8 @@
|
|||
right: 26px;
|
||||
padding: 5px;
|
||||
z-index: 69;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
#optionsButton svg {
|
||||
transition: transform 0.15s ease-in-out !important;
|
||||
|
|
@ -205,6 +208,8 @@
|
|||
*/
|
||||
|
||||
.votingButtons {
|
||||
margin: 4px 16px;
|
||||
border-radius: 8px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -221,19 +226,32 @@
|
|||
*/
|
||||
|
||||
.segmentSummary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
padding: 7px;
|
||||
padding: 4px 8px;
|
||||
list-style: none;
|
||||
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
|
||||
*/
|
||||
|
||||
.sponsorTimesCategoryColorCircle {
|
||||
margin: 0 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
|
|
@ -266,10 +284,12 @@
|
|||
*/
|
||||
|
||||
.sbControlsMenu {
|
||||
background-color: var(--sb-grey-bg-color);
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 10px;
|
||||
background-color: var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
.sbControlsMenu-item {
|
||||
|
|
@ -283,6 +303,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
trasition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.sbControlsMenu-item:hover {
|
||||
|
|
@ -399,12 +420,16 @@
|
|||
*/
|
||||
|
||||
#mainControls {
|
||||
margin-bottom: 12px;
|
||||
margin: 16px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
border: 2px solid var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
.sponsorStartHint {
|
||||
display: block;
|
||||
padding: 0 10px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -420,7 +445,7 @@
|
|||
display: inline-block;
|
||||
color: var(--sb-main-fg-color);
|
||||
font-size: 16px;
|
||||
padding: 8px 37px;
|
||||
padding: 8px 16px;
|
||||
font-family: var(--sb-main-font-family);
|
||||
transition: 0.01s background-color;
|
||||
}
|
||||
|
|
@ -451,7 +476,8 @@
|
|||
.sbHeader {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0 5px;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -459,15 +485,23 @@
|
|||
*/
|
||||
|
||||
.sbYourWorkCols {
|
||||
display: flex;
|
||||
margin: 1rem;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
.sbYourWorkCols > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-basis: 50%;
|
||||
justify-content: center;
|
||||
border-top: 2px solid var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
#usernameElement {
|
||||
z-index: 2;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#sponsorTimesContributionsContainer {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -498,7 +532,7 @@
|
|||
*/
|
||||
|
||||
#submitUsername {
|
||||
padding-left: 7px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -516,11 +550,17 @@
|
|||
* Left align "Username" and "Submissions" labels
|
||||
*/
|
||||
|
||||
#usernameElement > div > p,
|
||||
#usernameElement > div > span,
|
||||
#sponsorTimesContributionsContainer {
|
||||
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
|
||||
*/
|
||||
|
|
@ -553,8 +593,10 @@
|
|||
#usernameElement > div,
|
||||
#sponsorTimesContributionsContainer > div {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
/* flex-flow: column nowrap; */
|
||||
/* align-items: flex-start; */
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -564,20 +606,18 @@
|
|||
#usernameValue {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 130px;
|
||||
white-space: nowrap;
|
||||
margin: 0 8px 0 0;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Set username form container with "expanded" state
|
||||
*/
|
||||
|
||||
#setUsername {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#setUsername.SBExpanded {
|
||||
width: 200%;
|
||||
text-align: left;
|
||||
width: calc(200% - 130px);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -585,12 +625,13 @@
|
|||
*/
|
||||
|
||||
#usernameInput {
|
||||
background: transparent;
|
||||
padding: 2px;
|
||||
border: var(--sb-main-fg-color) 1px solid;
|
||||
color: var(--sb-main-fg-color);
|
||||
width: calc(100% - 24px);
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
width: calc(100% - 68px);
|
||||
text-overflow: ellipsis;
|
||||
color: var(--sb-main-fg-color);
|
||||
background: var(--sb-grey-bg-color);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -598,17 +639,16 @@
|
|||
*/
|
||||
|
||||
#sbFooter {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
#sbFooter a {
|
||||
display: inline-block;
|
||||
color: var(--sb-main-fg-color);
|
||||
text-decoration: none;
|
||||
background: #222;
|
||||
background: #333;
|
||||
cursor: pointer;
|
||||
padding: 5px 16px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background 0.3s ease !important;
|
||||
|
|
@ -637,6 +677,7 @@
|
|||
|
||||
#sponsorBlockPopupBody .u-mZ {
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#sponsorBlockPopupBody .hidden {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<header class="sbPopupLogo">
|
||||
<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>
|
||||
|
||||
<div id="videoInfo">
|
||||
|
|
@ -68,50 +68,55 @@
|
|||
<p class="sbHeader">
|
||||
__MSG_recordTimesDescription__
|
||||
</p>
|
||||
<sub class="sponsorStartHint">__MSG_popupHint__</sub>
|
||||
<div>
|
||||
<button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button>
|
||||
</div>
|
||||
<div id="submissionSection" style="display: none">
|
||||
<b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
|
||||
<button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
|
||||
<sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
|
||||
<div align="center" style="margin: 8px 0;">
|
||||
<button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
|
||||
<button id="submitTimes" class="sbMediumButton" style="display: none; margin: 0 !important;">__MSG_submitTimesButton__</button>
|
||||
</div>
|
||||
<span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
|
||||
</div>
|
||||
|
||||
<h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
|
||||
<div class="sbYourWorkCols">
|
||||
<div id="sponsorTimesContributionsContainer" class="hidden">
|
||||
<div>
|
||||
<p class="u-mZ grey-text">__MSG_Submissions__:</p>
|
||||
<span id="sponsorTimesContributionsDisplay">
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="usernameElement">
|
||||
<div>
|
||||
<p class="u-mZ grey-text">__MSG_Username__:</p>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
<button id="setUsernameButton" title="__MSG_setUsername__">
|
||||
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
|
||||
</button>
|
||||
<button id="copyUserID" title="__MSG_copyPublicID__">
|
||||
<img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
|
||||
</button>
|
||||
</div>
|
||||
<div id="setUsername" style="display: none">
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<p id="setUsernameStatus" class="u-mZ"></p>
|
||||
<!-- Your Work -->
|
||||
<details class="sbYourWorkCols">
|
||||
<summary class="recordingSubtitle sbHeader" style="padding: 8px 16px; cursor: pointer;"> __MSG_yourWork__</summary>
|
||||
<div>
|
||||
<!-- Username -->
|
||||
<div id="usernameElement">
|
||||
<div>
|
||||
<span class="u-mZ grey-text">__MSG_Username__:
|
||||
<!-- loading/errors -->
|
||||
<span id="setUsernameStatusContainer" style="display: none">
|
||||
<span id="setUsernameStatus" class="u-mZ white-text"></span>
|
||||
</span>
|
||||
</span>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
<button id="setUsernameButton" title="__MSG_setUsername__">
|
||||
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
|
||||
</button>
|
||||
<button id="copyUserID" title="__MSG_copyPublicID__">
|
||||
<img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
|
||||
</button>
|
||||
</div>
|
||||
<input id="usernameInput" placeholder="Username">
|
||||
<button id="submitUsername">
|
||||
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
|
||||
</button>
|
||||
<div id="setUsername" style="display: none">
|
||||
<input id="usernameInput" placeholder="Username">
|
||||
<button id="submitUsername">
|
||||
<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>
|
||||
</details>
|
||||
|
||||
<p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
|
||||
__MSG_savedPeopleFrom__
|
||||
|
|
@ -145,13 +150,13 @@
|
|||
<img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" />
|
||||
</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/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
|
||||
<br />
|
||||
<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://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>
|
||||
</footer>
|
||||
|
||||
|
|
|
|||
|
|
@ -1708,7 +1708,6 @@ function openInfoMenu() {
|
|||
//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
|
||||
const logo = <HTMLImageElement> popup.querySelector("#sponsorBlockPopupLogo");
|
||||
const settings = <HTMLImageElement> popup.querySelector("#sbPopupIconSettings");
|
||||
const edit = <HTMLImageElement> popup.querySelector("#sbPopupIconEdit");
|
||||
const copy = <HTMLImageElement> popup.querySelector("#sbPopupIconCopyUserID");
|
||||
const check = <HTMLImageElement> popup.querySelector("#sbPopupIconCheck");
|
||||
|
|
@ -1716,7 +1715,6 @@ function openInfoMenu() {
|
|||
const heart = <HTMLImageElement> popup.querySelector(".sbHeart");
|
||||
const close = <HTMLImageElement> popup.querySelector("#sbCloseDonate");
|
||||
logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
|
||||
settings.src = chrome.extension.getURL("icons/settings.svg");
|
||||
edit.src = chrome.extension.getURL("icons/pencil.svg");
|
||||
copy.src = chrome.extension.getURL("icons/clipboard.svg");
|
||||
check.src = chrome.extension.getURL("icons/check.svg");
|
||||
|
|
|
|||
34
src/popup.ts
34
src/popup.ts
|
|
@ -100,7 +100,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
"submitUsername",
|
||||
"sbPopupIconCopyUserID",
|
||||
// More
|
||||
"submissionSection",
|
||||
"submissionHint",
|
||||
"mainControls",
|
||||
"loadingIndicator",
|
||||
"videoFound",
|
||||
|
|
@ -411,7 +411,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category]?.color;
|
||||
categoryColorCircle.classList.add("dot");
|
||||
categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle");
|
||||
|
||||
|
||||
let extraInfo = "";
|
||||
if (segmentTimes[i].hidden === SponsorHideType.Downvoted) {
|
||||
//this one is downvoted
|
||||
|
|
@ -420,26 +420,35 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
//this one is too short
|
||||
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
|
||||
} 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 segmentTimeFromToNode = document.createElement("div");
|
||||
if (segmentTimes[i].actionType === ActionType.Full) {
|
||||
segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full");
|
||||
} else {
|
||||
segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) +
|
||||
(segmentTimes[i].actionType !== ActionType.Poi
|
||||
? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
|
||||
: "");
|
||||
(segmentTimes[i].actionType !== ActionType.Poi
|
||||
? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
|
||||
: "");
|
||||
}
|
||||
|
||||
|
||||
segmentTimeFromToNode.style.margin = "5px";
|
||||
|
||||
// for inline-styling purposes
|
||||
const labelContainer = document.createElement("div");
|
||||
labelContainer.appendChild(categoryColorCircle);
|
||||
|
||||
segmentSummary.appendChild(categoryColorCircle);
|
||||
segmentSummary.appendChild(textNode);
|
||||
const span = document.createElement('span');
|
||||
span.className = "summaryLabel";
|
||||
span.appendChild(textNode);
|
||||
labelContainer.appendChild(span);
|
||||
// for inline-styling purposes
|
||||
|
||||
segmentSummary.appendChild(labelContainer);
|
||||
segmentSummary.appendChild(segmentTimeFromToNode);
|
||||
|
||||
|
||||
const votingButtons = document.createElement("details");
|
||||
votingButtons.classList.add("votingButtons");
|
||||
|
||||
|
|
@ -562,7 +571,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
|||
function updateSegmentEditingUI() {
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue