aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAlec Rust <[email protected]>2022-02-15 17:25:33 +0000
committerAlec Rust <[email protected]>2022-02-24 19:37:00 +0000
commita3734e050f3dea8e160b1e3edf40cee4d484f80b (patch)
tree7ba9e787044183978314b14f2b3ff2e7fb6a6147
parent5496b05c88feabb5c2ccaf1327c5a6a50ca7ad39 (diff)
downloadSponsorBlock-a3734e050f3dea8e160b1e3edf40cee4d484f80b.tar.gz
SponsorBlock-a3734e050f3dea8e160b1e3edf40cee4d484f80b.zip
Refactor away global styles
Diffstat
-rw-r--r--public/popup.css167
-rw-r--r--public/popup.html45
2 files changed, 106 insertions, 106 deletions
diff --git a/public/popup.css b/public/popup.css
index 7b16d4b8..bd828825 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -7,47 +7,14 @@
}
/*
- * Default browser styles
+ * IDs on container element (when inserted in page), <html> element,
+ * <body> element and main container
*/
-html {
- box-sizing: border-box;
+#sponsorBlockPopupContainer {
+ 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 {
color-scheme: dark;
}
@@ -67,10 +34,18 @@ button {
}
/*
+ * Disable transition on all elements until the extension has loaded
+ */
+
+.preload * {
+ transition: none !important;
+}
+
+/*
* Header logo
*/
-.logo {
+.sbPopupLogo {
display: flex;
align-items: center;
font-size: 32px;
@@ -80,7 +55,7 @@ button {
padding: 20px 0 10px;
}
-.logo img {
+.sbPopupLogo img {
margin-right: 8px;
}
@@ -89,7 +64,10 @@ button {
*/
#refreshSegmentsButton {
+ background: transparent;
+ border: 0;
border-radius: 50%;
+ cursor: pointer;
display: flex;
padding: 5px;
margin: 5px auto;
@@ -105,8 +83,11 @@ button {
*/
.segmentTimeButton {
- font-weight: bold;
+ background: transparent;
+ border: 0;
+ cursor: pointer;
color: var(--sb-main-fg-color);
+ font-weight: bold;
padding: 7px;
outline: none;
width: 100%;
@@ -150,14 +131,14 @@ button {
* Main controls menu
*/
-.controlsMenu {
+.sbControlsMenu {
background-color: var(--sb-grey-bg-color);
display: flex;
justify-content: space-evenly;
margin-top: 10px;
}
-.controlsMenu-item {
+.sbControlsMenu-item {
background-color: var(--sb-grey-bg-color);
border: 0;
padding: 0;
@@ -171,11 +152,11 @@ button {
justify-content: center;
}
-.controlsMenu-item:hover {
+.sbControlsMenu-item:hover {
background-color: #444;
}
-.controlsMenu-itemIcon {
+.sbControlsMenu-itemIcon {
margin-bottom: 6px;
}
@@ -292,12 +273,14 @@ button {
* Generic buttons used for "Segment Starts Now" and "Submit Times"
*/
-.mediumButton {
+.sbMediumButton {
background-color: var(--sb-red-bg-color);
+ border: 0;
-moz-border-radius: 28px;
-webkit-border-radius: 28px;
border-radius: 28px;
display: inline-block;
+ cursor: pointer;
color: var(--sb-main-fg-color);
font-size: 16px;
padding: 8px 37px;
@@ -305,13 +288,13 @@ button {
transition: 0.01s background-color;
}
-.mediumButton:hover,
-.mediumButton:focus {
+.sbMediumButton:hover,
+.sbMediumButton:focus {
outline: none;
background-color: #ec1c1c;
}
-.mediumButton:active {
+.sbMediumButton:active {
position: relative;
top: 1px;
}
@@ -325,15 +308,44 @@ button {
}
/*
+ * 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
*/
#setUsernameButton,
#submitUsername,
#copyUserID {
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+ padding: 0;
color: var(--sb-main-fg-color);
width: fit-content;
- padding-left: 0;
}
/*
@@ -377,7 +389,7 @@ button {
* Enable flexbox for buttons with SVG icon
*/
-#c > button {
+#setUsernameContainer > button {
display: flex;
}
@@ -409,12 +421,6 @@ button {
align-items: flex-start;
}
-.sidebyside > #usernameElement,
-.sidebyside > #sponsorTimesContributionsContainer {
- display: flex;
- align-items: center;
-}
-
/*
* Truncate username display
*/
@@ -456,7 +462,14 @@ button {
*/
#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,45 +477,31 @@ button {
*/
#showNoticeAgain {
- margin-top: 30px;
- color: var(--sb-main-fg-color);
+ background: transparent;
border: 1px solid #fff;
- padding: 5px;
border-radius: 5px;
+ color: var(--sb-main-fg-color);
+ cursor: pointer;
+ margin-bottom: 20px;
+ padding: 5px;
}
/*
- * Generic hide utility classes
- */
-
-#sponsorBlockPopupBody .hidden {
- display: none !important;
-}
-
-.voteButtonsContainer--hide {
- display: none;
-}
-
-/*
- * Generic heading utility class
+ * Generic spacing classes
*/
-.sbHeader {
- font-size: 20px;
- font-weight: bold;
- margin: 10px 0 5px;
+.u-mZ {
+ margin: 0 !important;
}
/*
- * Generic flexbox "side by side" utility class
+ * Generic hide utility classes
*/
-.sidebyside {
- display: flex;
- margin: 0 20px 12px;
+#sponsorBlockPopupBody .hidden {
+ display: none !important;
}
-.sidebyside > div {
- width: 50%;
- justify-content: center;
+.voteButtonsContainer--hide {
+ display: none;
}
diff --git a/public/popup.html b/public/popup.html
index 66aabbe5..abf2dba0 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -11,16 +11,16 @@
<body id="sponsorBlockPopupBody">
<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">
- <p>SponsorBlock</p>
+ <p class="u-mZ">SponsorBlock</p>
</header>
<div id="videoInfo">
<!-- 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 -->
- <p id="videoFound"></p>
+ <p id="videoFound" class="u-mZ"></p>
<button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
<img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
</button>
@@ -29,17 +29,17 @@
</div>
</div>
- <div class="controlsMenu">
- <label id="whitelistButton" for="whitelistToggle" class="hidden controlsMenu-item" title="__MSG_forceChannelCheckPopup__">
+ <div class="sbControlsMenu">
+ <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_forceChannelCheckPopup__">
<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" />
</svg>
<span id="whitelistChannel">__MSG_whitelistChannel__</span>
<span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
</label>
<!--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">
<input type="checkbox" style="display:none;" id="toggleSwitch" checked>
<span class="switchBg shadow"></span>
@@ -50,13 +50,13 @@
<span id="disableSkipping">__MSG_disableSkipping__</span>
<span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
</label>
- <button id="optionsButton" class="controlsMenu-item" title="__MSG_optionsInfo__">
- <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="controlsMenu-itemIcon" id="sbPopupIconSettings" />
+ <button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__">
+ <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
__MSG_Options__
</button>
</div>
- <p id="whitelistForceCheck" class="hidden">
+ <p id="whitelistForceCheck" class="u-mZ hidden">
__MSG_forceChannelCheckPopup__
</p>
@@ -66,20 +66,21 @@
</p>
<sub style="margin-bottom: 12px;">__MSG_popupHint__</sub>
<div>
- <button id="sponsorStart" class="mediumButton">__MSG_sponsorStart__</button>
+ <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="mediumButton">__MSG_submitTimesButton__</button>
+ <button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
</div>
</div>
+
<h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
- <div class="sidebyside">
+ <div class="sbYourWorkCols">
<div id="usernameElement">
<div>
- <p>__MSG_Username__:</p>
+ <p class="u-mZ">__MSG_Username__:</p>
<div id="setUsernameContainer">
- <p id="usernameValue"></p>
+ <p id="usernameValue" class="u-mZ"></p>
<button id="setUsernameButton" title="__MSG_setUsername__">
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
</button>
@@ -89,7 +90,7 @@
</div>
<div id="setUsername" style="display: none">
<div id="setUsernameStatusContainer" style="display: none">
- <p id="setUsernameStatus"></p>
+ <p id="setUsernameStatus" class="u-mZ"></p>
</div>
<input id="usernameInput" placeholder="Username">
<button id="submitUsername">
@@ -100,7 +101,7 @@
</div>
<div id="sponsorTimesContributionsContainer" class="hidden">
<div>
- <p>__MSG_Submissions__:</p>
+ <p class="u-mZ">__MSG_Submissions__:</p>
<span id="sponsorTimesContributionsDisplay">
0
</span>
@@ -108,7 +109,7 @@
</div>
</div>
- <p id="sponsorTimesViewsContainer" style="display: none">
+ <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
__MSG_savedPeopleFrom__
<b><span id="sponsorTimesViewsDisplay">
0
@@ -119,7 +120,7 @@
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
<span>__MSG_youHaveSavedTimeEnd__</span>).
</p>
- <p id="sponsorTimesSkipsDoneContainer" style="display: none">
+ <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ">
__MSG_youHaveSkipped__
<b><span id="sponsorTimesSkipsDoneDisplay">
0
@@ -146,11 +147,11 @@
<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" 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>
</footer>
- <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
+ <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
</div>
<!-- Scripts that need to load after the html -->
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 01:44:42 +0000