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

Refactor away global styles

Browse Source
This commit is contained in:
Alec Rust
2022-02-15 17:25:33 +00:00
parent 5496b05c88
commit a3734e050f
2 changed files with 106 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
public/popup.css
View File

@@ -7,47 +7,14 @@
} }
/* /*
* Default browser styles * IDs on container element (when inserted in page), <html> element,
* <body> element and main container
*/ */
html { #sponsorBlockPopupContainer {
box-sizing: border-box; margin-bottom: 16px;
} }
*,
*::before,
*::after {
box-sizing: inherit;
}
p {
margin: 0;
}
a {
color: var(--sb-main-fg-color);
text-decoration: none;
}
button {
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
}
/*
* Disable transition on all elements until the extension has loaded
*/
.preload * {
transition: none !important;
}
/*
* IDs on <html> element, <body> element and main container
*/
#sponsorBlockPopupHTML { #sponsorBlockPopupHTML {
color-scheme: dark; color-scheme: dark;
} }
@@ -66,11 +33,19 @@ button {
text-align: center; text-align: center;
} }
/*
* Disable transition on all elements until the extension has loaded
*/
.preload * {
transition: none !important;
}
/* /*
* Header logo * Header logo
*/ */
.logo { .sbPopupLogo {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 32px; font-size: 32px;
@@ -80,7 +55,7 @@ button {
padding: 20px 0 10px; padding: 20px 0 10px;
} }
.logo img { .sbPopupLogo img {
margin-right: 8px; margin-right: 8px;
} }
@@ -89,7 +64,10 @@ button {
*/ */
#refreshSegmentsButton { #refreshSegmentsButton {
background: transparent;
border: 0;
border-radius: 50%; border-radius: 50%;
cursor: pointer;
display: flex; display: flex;
padding: 5px; padding: 5px;
margin: 5px auto; margin: 5px auto;
@@ -105,8 +83,11 @@ button {
*/ */
.segmentTimeButton { .segmentTimeButton {
font-weight: bold; background: transparent;
border: 0;
cursor: pointer;
color: var(--sb-main-fg-color); color: var(--sb-main-fg-color);
font-weight: bold;
padding: 7px; padding: 7px;
outline: none; outline: none;
width: 100%; width: 100%;
@@ -150,14 +131,14 @@ button {
* Main controls menu * Main controls menu
*/ */
.controlsMenu { .sbControlsMenu {
background-color: var(--sb-grey-bg-color); background-color: var(--sb-grey-bg-color);
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
margin-top: 10px; margin-top: 10px;
} }
.controlsMenu-item { .sbControlsMenu-item {
background-color: var(--sb-grey-bg-color); background-color: var(--sb-grey-bg-color);
border: 0; border: 0;
padding: 0; padding: 0;
@@ -171,11 +152,11 @@ button {
justify-content: center; justify-content: center;
} }
.controlsMenu-item:hover { .sbControlsMenu-item:hover {
background-color: #444; background-color: #444;
} }
.controlsMenu-itemIcon { .sbControlsMenu-itemIcon {
margin-bottom: 6px; margin-bottom: 6px;
} }
@@ -292,12 +273,14 @@ button {
* Generic buttons used for "Segment Starts Now" and "Submit Times" * Generic buttons used for "Segment Starts Now" and "Submit Times"
*/ */
.mediumButton { .sbMediumButton {
background-color: var(--sb-red-bg-color); background-color: var(--sb-red-bg-color);
border: 0;
-moz-border-radius: 28px; -moz-border-radius: 28px;
-webkit-border-radius: 28px; -webkit-border-radius: 28px;
border-radius: 28px; border-radius: 28px;
display: inline-block; display: inline-block;
cursor: pointer;
color: var(--sb-main-fg-color); color: var(--sb-main-fg-color);
font-size: 16px; font-size: 16px;
padding: 8px 37px; padding: 8px 37px;
@@ -305,13 +288,13 @@ button {
transition: 0.01s background-color; transition: 0.01s background-color;
} }
.mediumButton:hover, .sbMediumButton:hover,
.mediumButton:focus { .sbMediumButton:focus {
outline: none; outline: none;
background-color: #ec1c1c; background-color: #ec1c1c;
} }
.mediumButton:active { .sbMediumButton:active {
position: relative; position: relative;
top: 1px; top: 1px;
} }
@@ -324,6 +307,32 @@ button {
margin-top: 12px; margin-top: 12px;
} }
/*
* Heading utility class
*/
.sbHeader {
font-size: 20px;
font-weight: bold;
margin: 10px 0 5px;
}
/*
* Side-by-side section of "Your Work"
*/
.sbYourWorkCols {
display: flex;
margin: 0 20px 12px;
}
.sbYourWorkCols > div {
display: flex;
align-items: center;
width: 50%;
justify-content: center;
}
/* /*
* <button> elements that have icons * <button> elements that have icons
*/ */
@@ -331,9 +340,12 @@ button {
#setUsernameButton, #setUsernameButton,
#submitUsername, #submitUsername,
#copyUserID { #copyUserID {
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
color: var(--sb-main-fg-color); color: var(--sb-main-fg-color);
width: fit-content; width: fit-content;
padding-left: 0;
} }
/* /*
@@ -377,7 +389,7 @@ button {
* Enable flexbox for buttons with SVG icon * Enable flexbox for buttons with SVG icon
*/ */
#c > button { #setUsernameContainer > button {
display: flex; display: flex;
} }
@@ -409,12 +421,6 @@ button {
align-items: flex-start; align-items: flex-start;
} }
.sidebyside > #usernameElement,
.sidebyside > #sponsorTimesContributionsContainer {
display: flex;
align-items: center;
}
/* /*
* Truncate username display * Truncate username display
*/ */
@@ -456,7 +462,14 @@ button {
*/ */
#sbFooter { #sbFooter {
margin: 10px 0 20px; margin-top: 10px;
padding-bottom: 20px;
}
#sbFooter a {
color: var(--sb-main-fg-color);
cursor: pointer;
text-decoration: none;
} }
/* /*
@@ -464,11 +477,21 @@ button {
*/ */
#showNoticeAgain { #showNoticeAgain {
margin-top: 30px; background: transparent;
color: var(--sb-main-fg-color);
border: 1px solid #fff; border: 1px solid #fff;
padding: 5px;
border-radius: 5px; border-radius: 5px;
color: var(--sb-main-fg-color);
cursor: pointer;
margin-bottom: 20px;
padding: 5px;
}
/*
* Generic spacing classes
*/
.u-mZ {
margin: 0 !important;
} }
/* /*
@@ -482,27 +505,3 @@ button {
.voteButtonsContainer--hide { .voteButtonsContainer--hide {
display: none; display: none;
} }
/*
* Generic heading utility class
*/
.sbHeader {
font-size: 20px;
font-weight: bold;
margin: 10px 0 5px;
}
/*
* Generic flexbox "side by side" utility class
*/
.sidebyside {
display: flex;
margin: 0 20px 12px;
}
.sidebyside > div {
width: 50%;
justify-content: center;
}

45
public/popup.html
View File

@@ -11,16 +11,16 @@
<body id="sponsorBlockPopupBody"> <body id="sponsorBlockPopupBody">
<div id="sponsorblockPopup" class="sponsorBlockPageBody preload"> <div id="sponsorblockPopup" class="sponsorBlockPageBody preload">
<header class="logo"> <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>SponsorBlock</p> <p class="u-mZ">SponsorBlock</p>
</header> </header>
<div id="videoInfo"> <div id="videoInfo">
<!-- Loading text --> <!-- Loading text -->
<p id="loadingIndicator">__MSG_noVideoID__</p> <p id="loadingIndicator" class="u-mZ">__MSG_noVideoID__</p>
<!-- If the video was found in the database --> <!-- If the video was found in the database -->
<p id="videoFound"></p> <p id="videoFound" class="u-mZ"></p>
<button id="refreshSegmentsButton" title="__MSG_refreshSegments__"> <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
<img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" /> <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
</button> </button>
@@ -29,17 +29,17 @@
</div> </div>
</div> </div>
<div class="controlsMenu"> <div class="sbControlsMenu">
<label id="whitelistButton" for="whitelistToggle" class="hidden controlsMenu-item" title="__MSG_forceChannelCheckPopup__"> <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_forceChannelCheckPopup__">
<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 controlsMenu-itemIcon"> <svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" /> <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
</svg> </svg>
<span id="whitelistChannel">__MSG_whitelistChannel__</span> <span id="whitelistChannel">__MSG_whitelistChannel__</span>
<span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span> <span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
</label> </label>
<!--github: mbledkowski/toggle-switch--> <!--github: mbledkowski/toggle-switch-->
<label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer controlsMenu-item"> <label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item">
<span class="toggleSwitchContainer-switch"> <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 shadow"></span>
@@ -50,13 +50,13 @@
<span id="disableSkipping">__MSG_disableSkipping__</span> <span id="disableSkipping">__MSG_disableSkipping__</span>
<span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span> <span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
</label> </label>
<button id="optionsButton" class="controlsMenu-item" title="__MSG_optionsInfo__"> <button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__">
<img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="controlsMenu-itemIcon" id="sbPopupIconSettings" /> <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
__MSG_Options__ __MSG_Options__
</button> </button>
</div> </div>
<p id="whitelistForceCheck" class="hidden"> <p id="whitelistForceCheck" class="u-mZ hidden">
__MSG_forceChannelCheckPopup__ __MSG_forceChannelCheckPopup__
</p> </p>
@@ -66,20 +66,21 @@
</p> </p>
<sub style="margin-bottom: 12px;">__MSG_popupHint__</sub> <sub style="margin-bottom: 12px;">__MSG_popupHint__</sub>
<div> <div>
<button id="sponsorStart" class="mediumButton">__MSG_sponsorStart__</button> <button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button>
</div> </div>
<div id="submissionSection" style="display: none"> <div id="submissionSection" style="display: none">
<b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b> <b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
<button id="submitTimes" class="mediumButton">__MSG_submitTimesButton__</button> <button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
</div> </div>
</div> </div>
<h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1> <h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
<div class="sidebyside"> <div class="sbYourWorkCols">
<div id="usernameElement"> <div id="usernameElement">
<div> <div>
<p>__MSG_Username__:</p> <p class="u-mZ">__MSG_Username__:</p>
<div id="setUsernameContainer"> <div id="setUsernameContainer">
<p id="usernameValue"></p> <p id="usernameValue" class="u-mZ"></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>
@@ -89,7 +90,7 @@
</div> </div>
<div id="setUsername" style="display: none"> <div id="setUsername" style="display: none">
<div id="setUsernameStatusContainer" style="display: none"> <div id="setUsernameStatusContainer" style="display: none">
<p id="setUsernameStatus"></p> <p id="setUsernameStatus" class="u-mZ"></p>
</div> </div>
<input id="usernameInput" placeholder="Username"> <input id="usernameInput" placeholder="Username">
<button id="submitUsername"> <button id="submitUsername">
@@ -100,7 +101,7 @@
</div> </div>
<div id="sponsorTimesContributionsContainer" class="hidden"> <div id="sponsorTimesContributionsContainer" class="hidden">
<div> <div>
<p>__MSG_Submissions__:</p> <p class="u-mZ">__MSG_Submissions__:</p>
<span id="sponsorTimesContributionsDisplay"> <span id="sponsorTimesContributionsDisplay">
0 0
</span> </span>
@@ -108,7 +109,7 @@
</div> </div>
</div> </div>
<p id="sponsorTimesViewsContainer" style="display: none"> <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
__MSG_savedPeopleFrom__ __MSG_savedPeopleFrom__
<b><span id="sponsorTimesViewsDisplay"> <b><span id="sponsorTimesViewsDisplay">
0 0
@@ -119,7 +120,7 @@
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b> <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
<span>__MSG_youHaveSavedTimeEnd__</span>). <span>__MSG_youHaveSavedTimeEnd__</span>).
</p> </p>
<p id="sponsorTimesSkipsDoneContainer" style="display: none"> <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ">
__MSG_youHaveSkipped__ __MSG_youHaveSkipped__
<b><span id="sponsorTimesSkipsDoneDisplay"> <b><span id="sponsorTimesSkipsDoneDisplay">
0 0
@@ -146,11 +147,11 @@
<br/> <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" style="cursor: pointer;">__MSG_help__</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>
<button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button> <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
</div> </div>
<!-- Scripts that need to load after the html --> <!-- Scripts that need to load after the html -->