external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-09-20 04:53:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

Tidy/simplify popup

Browse source
This commit is contained in:
Alec Rust 2022-08-20 15:12:45 +01:00
parent 577994cc95
commit d9f03a62ee
No known key found for this signature in database
GPG key ID: EB374231DBCA5067
2 changed files with 37 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
public/popup.css
View file

@ -403,7 +403,7 @@
*/
#mainControls {
margin: 16px;
padding: 8px 12px;
padding: 8px 14px;
text-align: left;
border-radius: 8px;
border: 2px solid var(--sb-grey-bg-color);
@ -411,6 +411,7 @@
.sponsorStartHint {
display: block;
text-align: left;
padding-top: 3px;
}
/*
@ -448,24 +449,24 @@
/*
* Your Work box
*/
.sbYourWorkCols {
.sbYourWorkBox {
margin: 16px;
margin-bottom: 8px;
border-radius: 8px;
border: 2px solid var(--sb-grey-bg-color);
}
.sbYourWorkCols > div {
display: flex;
.sbYourWorkCols {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 2px solid var(--sb-grey-bg-color);
border-bottom: 2px solid var(--sb-grey-bg-color);
}
.sbStatsSentence {
padding-top: 5px;
padding-bottom: 5px;
padding: 6px 14px;
}
.sbStatsSentence .sbExtraInfo {
.sbExtraInfo {
display: inline-block;
}
@ -473,37 +474,26 @@
* Increase font size of username input and display
*/
#usernameValue,
#usernameInput,
#sponsorTimesContributionsDisplay {
#usernameInput {
font-size: 16px;
flex: 1 0;
}
#sponsorTimesContributionsDisplay {
font-size: 16px;
}
/*
* Improve alignment of username and submissions
*/
#usernameElement,
#usernameElement > p,
#sponsorTimesContributionsContainer {
display: flex;
flex-direction: column;
justify-content: start;
}
#usernameElement > span,
#sponsorTimesContributionsContainer {
text-align: start;
}
#sponsorTimesContributionsContainer {
margin-left: 8px;
padding-left: 8px;
border-left: 2px solid var(--sb-grey-bg-color);
text-align: left;
}
/*
* Username
*/
#usernameElement {
padding: 8px;
min-width: 50%;
padding: 8px 14px;
}
#setUsernameContainer {
display: flex;
@ -549,14 +539,15 @@
width: calc(100% - 68px);
text-overflow: ellipsis;
color: var(--sb-main-fg-color);
background: var(--sb-grey-bg-color);
background-color: var(--sb-grey-bg-color);
}
/*
* Submissions
*/
#sponsorTimesContributionsContainer {
padding: 8px;
padding: 8px 14px;
border-left: 2px solid var(--sb-grey-bg-color);
}
/*
@ -571,14 +562,13 @@
display: inline-block;
text-decoration: none;
border-radius: 4px;
background: #333;
cursor: pointer;
background-color: #333;
padding: 4px 8px;
font-weight: 500;
margin: 2px 1px;
}
#sbFooter a:hover {
background: #444;
background-color: #444;
}
#sponsorTimesDonateContainer a {

30
public/popup.html
View file

@ -13,7 +13,7 @@
<div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
<button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
<img src="icons/close.png" width="15" height="15">
<img src="icons/close.png" width="15" height="15" alt="Close icon">
</button>
<div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
@ -68,7 +68,7 @@
<!-- Toggle Box -->
<div class="sbControlsMenu">
<label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
<input type="checkbox" style="display:none;" id="whitelistToggle">
<input type="checkbox" style="display: none" id="whitelistToggle">
<svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
</svg>
@ -78,7 +78,7 @@
<!--github: mbledkowski/toggle-switch-->
<label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item">
<span class="toggleSwitchContainer-switch">
<input type="checkbox" style="display:none;" id="toggleSwitch" checked>
<input type="checkbox" style="display: none" id="toggleSwitch" checked>
<span class="switchBg shadow"></span>
<span class="switchBg white"></span>
<span class="switchBg green"></span>
@ -99,29 +99,29 @@
<!-- Submit box -->
<div id="mainControls" style="display: none">
<p class="sbHeader">
<h1 class="sbHeader">
__MSG_recordTimesDescription__
</p>
</h1>
<sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
<div align="center" style="margin: 8px 0;">
<div style="text-align: center; margin: 8px 0;">
<button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
<button id="submitTimes" class="sbMediumButton" style="display: none;">__MSG_submitTimesButton__</button>
<button id="submitTimes" class="sbMediumButton" style="display: none">__MSG_submitTimesButton__</button>
</div>
<span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
<span id="submissionHint" style="display: none">__MSG_submissionEditHint__</span>
</div>
<!-- Your Work box -->
<div class="sbYourWorkCols">
<p class="sbHeader" style="padding: 8px 16px;">
<div class="sbYourWorkBox">
<h1 class="sbHeader" style="padding: 8px 15px;">
__MSG_yourWork__
</p>
<div>
</h1>
<div class="sbYourWorkCols">
<!-- Username -->
<div id="usernameElement">
<span class="u-mZ grey-text">__MSG_Username__:
<p class="u-mZ grey-text">__MSG_Username__:
<!-- loading/errors -->
<span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
</span>
</p>
<div id="setUsernameContainer">
<p id="usernameValue"></p>
<button id="setUsernameButton" title="__MSG_setUsername__">
@ -141,7 +141,7 @@
<!-- Submissions -->
<div id="sponsorTimesContributionsContainer" class="hidden">
<p class="u-mZ grey-text">__MSG_Submissions__:</p>
<span id="sponsorTimesContributionsDisplay">0</span>
<p id="sponsorTimesContributionsDisplay" class="u-mZ">0</p>
</div>
</div>