aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay Ramachandran <[email protected]>2022-04-22 15:26:30 -0400
committerGitHub <[email protected]>2022-04-22 15:26:30 -0400
commitaa88ab19855a526a67b1115b4e4647a07986ef4a (patch)
tree0d82cefd7d65f2e3cfebf272249050161f8755aa
parentb075116502e38e783b14a7299fa0e86251de049e (diff)
parenta47fa2065294aa09e8c8fe0339c028bd385a3e42 (diff)
downloadSponsorBlock-aa88ab19855a526a67b1115b4e4647a07986ef4a.tar.gz
SponsorBlock-aa88ab19855a526a67b1115b4e4647a07986ef4a.zip
Merge pull request #1237 from AlecRust/refine-popup
Improve popup alert and fix Firefox issues
-rw-r--r--public/popup.css84
-rw-r--r--public/popup.html10
-rw-r--r--src/popup.ts6
3 files changed, 59 insertions, 41 deletions
diff --git a/public/popup.css b/public/popup.css
index 48af762e..1f1dd637 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -16,6 +16,14 @@
}
/*
+ * Disable popup max height when displayed in-page
+ */
+
+#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
+ max-height: none;
+}
+
+/*
* Disable fixed popup width when displayed in-page
*/
@@ -29,11 +37,14 @@
#sponsorBlockPopupHTML {
color-scheme: dark;
+ max-height: 600px;
+ overflow-y: auto;
}
#sponsorBlockPopupBody {
margin: 0;
width: 374px;
+ max-width: 100%; /* NOTE: Ensures content doesn't exceed restricted popup widths in Firefox */
font-family: var(--sb-main-font-family);
font-size: 14px;
background-color: var(--sb-main-bg-color);
@@ -45,6 +56,11 @@
text-align: center;
}
+#sponsorblockPopup a,
+#sponsorblockPopup button {
+ cursor: pointer;
+}
+
/*
* Disable transition on all elements until the extension has loaded
*/
@@ -73,6 +89,19 @@
}
/*
+ * Alert indicating that Beta server is enabled
+ */
+
+#sbBetaServerWarning {
+ padding: 8px;
+ font-size: 1em;
+ font-weight: 700;
+ color: var(--sb-main-fg-color);
+ background-color: var(--sb-red-bg-color);
+ cursor: pointer;
+}
+
+/*
* Header logo
*/
@@ -98,7 +127,6 @@
background: transparent;
border: 0;
border-radius: 50%;
- cursor: pointer;
display: flex;
padding: 5px;
margin: 5px auto;
@@ -182,9 +210,8 @@
}
.sbControlsMenu-item {
- background-color: var(--sb-grey-bg-color);
+ background: transparent;
border: 0;
- padding: 0;
cursor: pointer;
user-select: none;
padding: 10px 15px;
@@ -208,7 +235,6 @@
*/
.toggleSwitchContainer {
- cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
@@ -295,11 +321,14 @@
*/
#whitelistForceCheck {
- font-weight: bold;
- text-decoration: underline;
- font-size: large;
- cursor: pointer;
- padding: 10px 0;
+ background-color: #fff3cd;
+ color: #664d03;
+ display: block;
+ padding: 10px 15px;
+}
+
+#whitelistForceCheck:hover {
+ background-color: #f2e4b7;
}
/*
@@ -307,11 +336,14 @@
*/
#mainControls {
- flex-flow: column;
- align-items: center;
margin-bottom: 12px;
}
+.sponsorStartHint {
+ display: block;
+ padding: 0 10px 12px;
+}
+
/*
* Generic buttons used for "Segment Starts Now" and "Submit Times"
*/
@@ -323,7 +355,6 @@
-webkit-border-radius: 28px;
border-radius: 28px;
display: inline-block;
- cursor: pointer;
color: var(--sb-main-fg-color);
font-size: 16px;
padding: 8px 37px;
@@ -372,7 +403,7 @@
.sbYourWorkCols > div {
display: flex;
align-items: center;
- width: 50%;
+ flex-basis: 50%;
justify-content: center;
}
@@ -381,11 +412,10 @@
*/
#setUsernameButton,
-#submitUsername,
-#copyUserID {
+#copyUserID,
+#submitUsername {
background: transparent;
border: 0;
- cursor: pointer;
padding: 0;
color: var(--sb-main-fg-color);
width: fit-content;
@@ -472,7 +502,7 @@
overflow: hidden;
text-overflow: ellipsis;
max-width: 130px;
- margin-right: 8px;
+ margin: 0 8px 0 0;
}
/*
@@ -511,7 +541,6 @@
#sbFooter a {
color: var(--sb-main-fg-color);
- cursor: pointer;
text-decoration: none;
}
@@ -524,33 +553,18 @@
border: 1px solid #fff;
border-radius: 5px;
color: var(--sb-main-fg-color);
- cursor: pointer;
margin-bottom: 20px;
padding: 5px;
}
/*
- * Generic spacing classes
+ * Generic utilities
*/
-.u-mZ {
+ #sponsorBlockPopupBody .u-mZ {
margin: 0 !important;
}
-/*
- * Generic hide utility classes
- */
-
#sponsorBlockPopupBody .hidden {
display: none !important;
}
-
-#sbBetaServerWarning {
- padding: 8px;
- font-size: 1em;
- font-weight: 700;
- word-break: break-word;
- color: var(--sb-main-fg-color);
- background: var(--sb-red-bg-color);
- cursor: pointer;
-}
diff --git a/public/popup.html b/public/popup.html
index c94dddbc..b1a241c4 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -34,7 +34,7 @@
</div>
<div class="sbControlsMenu">
- <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_forceChannelCheckPopup__">
+ <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
<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" />
@@ -60,15 +60,15 @@
</button>
</div>
- <p id="whitelistForceCheck" class="u-mZ hidden">
+ <a id="whitelistForceCheck" class="hidden">
__MSG_forceChannelCheckPopup__
- </p>
+ </a>
<div id="mainControls" style="display: none">
<p class="sbHeader">
__MSG_recordTimesDescription__
</p>
- <sub style="margin-bottom: 12px;">__MSG_popupHint__</sub>
+ <sub class="sponsorStartHint">__MSG_popupHint__</sub>
<div>
<button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button>
</div>
@@ -84,7 +84,7 @@
<div>
<p class="u-mZ">__MSG_Username__:</p>
<div id="setUsernameContainer">
- <p id="usernameValue" class="u-mZ"></p>
+ <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>
diff --git a/src/popup.ts b/src/popup.ts
index 5957f651..a04f0ce6 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -306,7 +306,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
//if request is undefined, then the page currently being browsed is not YouTube
if (request != undefined) {
//remove loading text
- PageElements.mainControls.style.display = "flex";
+ PageElements.mainControls.style.display = "block";
if (request.onMobileYouTube) PageElements.mainControls.classList.add("hidden");
PageElements.whitelistButton.classList.remove("hidden");
PageElements.loadingIndicator.style.display = "none";
@@ -693,6 +693,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
PageElements.unwhitelistChannel.style.display = "unset";
document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
+ //show 'consider force channel check' alert
if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.classList.remove("hidden");
//save this
@@ -740,6 +741,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
PageElements.unwhitelistChannel.style.display = "none";
document.querySelectorAll('.SBWhitelistIcon')[0].classList.remove("rotated");
+ //hide 'consider force channel check' alert
+ PageElements.whitelistForceCheck.classList.add("hidden");
+
//save this
Config.config.whitelistedChannels = whitelistedChannels;