Merge pull request #1189 from AlecRust/improve-popup

Add menu bar to popup
author: Ajay Ramachandran <[email protected]> 2022-03-12 00:24:46 -0500
committer: GitHub <[email protected]> 2022-03-12 00:24:46 -0500
commit: d495be18a37edbcde86dc840191688f5bf9dd4e1 (patch)
tree: 126db730ccd6ece7412db5001e2aaa5de06bba53
parent: 476efff47b5de8f567a0fcee2854f66339bb224b (diff)
parent: dcbefb5457ca4d727908f11991c595674887eff0 (diff)
download: SponsorBlock-d495be18a37edbcde86dc840191688f5bf9dd4e1.tar.gz
SponsorBlock-d495be18a37edbcde86dc840191688f5bf9dd4e1.zip
2 files changed, 387 insertions, 295 deletions
diff --git a/public/popup.css b/public/popup.css
index f8cc5b2c..9ab4100e 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -1,236 +1,256 @@
 :root {
+  --sb-main-font-family: "Source Sans Pro", sans-serif;
   --sb-main-bg-color: #222626;
-  --sb-main-fg-color: white;
-  --sb-gray-fg-color: #444848;
-  --sb-on-white-bg: black;
-  --sb-green-bg: #077B27;
+  --sb-main-fg-color: #fff;
+  --sb-grey-bg-color: #333;
+  --sb-red-bg-color: #cc1717;
+}
+
+/*
+ * IDs on container element (when inserted in page), <html> element,
+ * <body> element and main container
+ */
+
+#sponsorBlockPopupContainer {
+  margin-bottom: 16px;
 }
 
 #sponsorBlockPopupHTML {
   color-scheme: dark;
 }
 
-#sponsorBlockPopupBody .hidden {
-  display: none !important;
+#sponsorBlockPopupBody {
+  margin: 0;
+  width: 374px;
+  font-family: var(--sb-main-font-family);
+  font-size: 14px;
+  background-color: var(--sb-main-bg-color);
+  color: var(--sb-main-fg-color);
+  color-scheme: dark;
 }
 
-.sponsorTimesCategoryColorCircle {
-  margin: 0 8px;
+#sponsorblockPopup {
+  text-align: center;
 }
 
-.voteButtonsContainer--hide {
-  display: none;
-}
+/*
+ * Disable transition on all elements until the extension has loaded
+ */
 
-@media only screen and (max-width: 600px) {
-  #sponsorBlockPopupBody {
-    width: 100%; 
-  }
+.sb-preload * {
+  transition: none !important;
 }
 
-#sponsorBlockPopupBody {
-  margin: auto; 
-  width: 374px; 
-  background: var(--sb-main-bg-color);
+/*
+ * Header logo
+ */
 
-  color-scheme: dark;
+.sbPopupLogo {
+  display: flex;
+  align-items: center;
+  font-size: 32px;
+  font-weight: bold;
+  justify-content: center;
+  user-select: none;
+  padding: 20px 0 10px;
 }
 
-#sponsorblockPopup {
-  color: var(--sb-main-fg-color);
-  font-family: 'Source Sans Pro', sans-serif;
-  font-size: 14px;
+.sbPopupLogo img {
+  margin-right: 8px;
+}
+
+/*
+ * Refresh segments button
+ */
+
+#refreshSegmentsButton {
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
   display: flex;
-  flex-flow: column nowrap;
+  padding: 5px;
+  margin: 5px auto;
   align-items: center;
-  width: 330px;
-  padding: 22px;
-  text-align: center;
-  margin-bottom: var(--ytd-margin-6x);
 }
 
-#issueReporterTimeButtons > .votingButtons > .segmentTimeButton {
-  font-weight: bold;
+#refreshSegmentsButton:hover {
+  background-color: var(--sb-grey-bg-color);
+}
+
+/*
+ * Individual segments (<button> elements)
+ */
+
+.segmentTimeButton {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
   color: var(--sb-main-fg-color);
-  background: none;
-  border: none;
+  font-weight: bold;
   padding: 7px;
   outline: none;
-
-  cursor: pointer;
+  width: 100%;
   white-space: nowrap;
 }
 
+/*
+ * Category dot in segment
+ */
+
+.sponsorTimesCategoryColorCircle {
+  margin: 0 8px;
+}
+
 .dot {
-  height: 10px;
   width: 10px;
+  height: 10px;
   border-radius: 50%;
   display: inline-block;
 }
 
-.sponsorTimesThanksForVotingText {
-  font-size: large;
-}
+/*
+ * Buttons that appear under a segment on click
+ */
 
 .voteButton {
   height: 20px;
   padding: 0 5px;
-
   cursor: pointer;
 }
 
-#videoInfo>p, #videoInfo>div>p {
-  margin: 0;
+/*
+ * "Voted!" text that appears after voting on a segment
+ */
+
+.sponsorTimesThanksForVotingText {
+  font-size: large;
 }
 
-div.logoText {
+/*
+ * Main controls menu
+ */
+
+.sbControlsMenu {
+  background-color: var(--sb-grey-bg-color);
   display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  color: var(--sb-main-fg-color);
+  justify-content: space-evenly;
+  margin-top: 10px;
 }
 
-div.logoText>p, .sbHeader {
-  font-size: 32px;
-  margin: -4px 0 -2px;
-  font-weight: bold;
+.sbControlsMenu-item {
+  background-color: var(--sb-grey-bg-color);
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  user-select: none;
+  padding: 10px 15px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
-.sbHeader.sbSubHeader {
-  font-size: 20px;
+.sbControlsMenu-item:hover {
+  background-color: #444;
 }
 
-.largeButton{
-  background: white;
-  /*font-weight: bold;*/
-  padding: 6px 24px;
-  font-size: 20px;
-  border-radius: 25px;
-  border: none;
-  text-decoration: none;
-  color: black;
-  min-height: 26px;
-  min-width: 152px;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: 'Source Sans Pro', sans-serif;
-}
-
-.sponsorBlockPageBody .mediumButton {
-  background-color:#cc1717;
-  -moz-border-radius:28px;
-  -webkit-border-radius:28px;
-  border-radius:28px;
-  border: none;
-  display:inline-block;
-  cursor:pointer;
-  color:#ffffff;
-  font-size:16px;
-  padding:8px 37px;
-  text-decoration:none;
-  text-shadow:0px 0px 0px #662727;
-  font-family: 'Source Sans Pro', sans-serif;
-
-  transition: 0.01s background-color;
-}
-.sponsorBlockPageBody .mediumButton:hover {
-  background-color:#ec1c1c;
-}
-.sponsorBlockPageBody .mediumButton:focus {
-outline: none;
-background-color:#ec1c1c;
-}
-.sponsorBlockPageBody .mediumButton:active {
-  position:relative;
-  top:1px;
+.sbControlsMenu-itemIcon {
+  margin-bottom: 6px;
 }
 
-/* disable extension */
+/*
+ * "Skipping is enabled" toggle
+ */
 
-#disableExtension {
+.toggleSwitchContainer {
+  cursor: pointer;
   display: flex;
-  flex-flow: column nowrap;
+  flex-direction: column;
   align-items: center;
 }
 
-/* switch button */
-
-.toggleSwitchContainer {
+.toggleSwitchContainer-switch {
   display: flex;
-  cursor: pointer;
+  margin-bottom: 6px;
 }
 
 .switchBg {
   display: block;
-  height: 37px;
-  width: 78px;
+  width: 50px;
+  height: 23px;
   border-radius: 18.5px;
 }
 
 .switchBg.shadow {
-  background: none;
   box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
   opacity: 1;
 }
 
 .switchBg.white {
   position: absolute;
-  background: white;
+  background-color: #ccc;
   opacity: 1;
 }
 
 .switchBg.green {
   position: absolute;
-  background: #00a205;
+  background-color: #00a205;
   opacity: 0;
-  transition: opacity .2s ease-out;
+  transition: opacity 0.2s ease-out;
 }
 
 .switchDot {
-  width: 25px;
-  height: 25px;
-  margin: 6px;
-  background: white;
+  background-color: var(--sb-main-fg-color);
+  border-radius: 50%;
+  width: 15px;
+  height: 15px;
+  margin: 4px;
   position: absolute;
-  border-radius: 12.5px;
-  box-shadow: .75px .75px 3.8px 0px rgba(50, 50, 50, 0.45);
-  transition: transform .2s ease-out;
+  box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
+  transition: transform 0.2s ease-out;
 }
 
-.preload * {
-  transition: none !important;
+#toggleSwitch:checked ~ .switchDot {
+  transform: translateX(27px);
 }
 
-#toggleSwitch:checked~.switchDot {
-  transform: translateX(40px);
+#toggleSwitch:checked ~ .switchBg.green {
+  opacity: 1;
 }
 
-#toggleSwitch:checked~.switchBg.green {
-  opacity: 1 !important;
+#toggleSwitch:checked ~ .switchBg.white {
+  opacity: 0;
+  transition: opacity 0.2s step-end;
 }
 
-#toggleSwitch:checked~.switchBg.white {
-  opacity: 0 !important;
-  transition: opacity .2s step-end;
-}
+/*
+ * Whitelist add/remove icon
+ */
 
-.sidebyside {
-  display: flex;
-  flex-flow: row nowrap;
-  width: 88%;
-  margin: 0 6% 0 6%;
+.SBWhitelistIcon > path {
+  fill: var(--sb-main-fg-color);
 }
 
-.sidebyside>div {
-  width: 50%;
-  justify-content: center;
+.SBWhitelistIcon.rotated {
+  transform: rotate(45deg);
 }
 
-#whitelistButton, #sponsorTimesSkipsDoneContainer, .toggleSwitchContainer {
-  margin-bottom: 2px !important;
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
+/*
+ * Notice that appears when whitelisting a channel, that recommends
+ * enabling the "Force Channel Check Before Skipping" option
+ */
+
 #whitelistForceCheck {
   font-weight: bold;
   text-decoration: underline;
@@ -239,173 +259,249 @@ background-color:#ec1c1c;
   padding: 10px 0;
 }
 
-.sbHeader {
-  margin-bottom: 5px !important;
-}
+/*
+ * Container around the "Segment Starts Now" and "Submit Times" buttons
+ */
 
-.logoText {
-  margin-bottom: 6px !important;
-}
-
-#videoInfo, #mainControls, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton {
-  margin-bottom: 12px !important;
-}
-#mainControls{
-  flex-flow: column;
-  align-items: center;
-}
-#submitTimesContainer{
+#mainControls {
   flex-flow: column;
   align-items: center;
+  margin-bottom: 12px;
 }
-/* additional buttons */
 
-#additionalButtons {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-}
-
-.sbSlimButton, #additionalButtons>button, button#setUsernameButton, #submitUsername, #copyUserID {
-  background: none;
-  border: none;
-  color: white;
-  width: fit-content;
-  padding-left: 0;
+/*
+ * Generic buttons used for "Segment Starts Now" and "Submit Times"
+ */
 
+.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;
+  font-family: var(--sb-main-font-family);
+  transition: 0.01s background-color;
 }
 
-button#setUsernameButton {
-	flex: 0 1;
+.sbMediumButton:hover,
+.sbMediumButton:focus {
+  outline: none;
+  background-color: #ec1c1c;
 }
 
-#submitUsername {
-  padding-left: 5pt;
+.sbMediumButton:active {
+  position: relative;
+  top: 1px;
 }
 
-#additionalButtons, #additionalButtons>button {
-  font-size: 15px;
-}
+/*
+ * "Submit Times" button
+ */
 
-#usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{
-  font-size: 16px;
-  flex: 1 0;
+#submitTimes {
+  margin-top: 12px;
 }
 
-.SBWhitelistIcon {
-  min-width: 16px;
-  min-height: 16px;
-  margin-top: auto;
-  margin-bottom: auto;
-}
+/*
+ * Heading utility class
+ */
 
-.SBWhitelistIcon>path {
-  fill: var(--sb-main-fg-color);
+.sbHeader {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 10px 0 5px;
 }
 
-label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponsorTimesContributionsContainer > div > p, #usernameElement > div > #setUsername > #setUsernameStatusContainer > p {
-  margin: 0;
-}
+/*
+ * Side-by-side section of "Your Work"
+ */
 
-#usernameElement > div > p, #sponsorTimesContributionsContainer {
-  text-align: start;
+.sbYourWorkCols {
+  display: flex;
+  margin: 0 20px 12px;
 }
 
-.grayedOut>.SBWhitelistIcon>path {
-  fill: var(--sb-gray-fg-color);
+.sbYourWorkCols > div {
+  display: flex;
+  align-items: center;
+  width: 50%;
+  justify-content: center;
 }
 
-.grayedOut>label {
-  color: var(--sb-gray-fg-color);
+/*
+ * <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;
 }
 
-.SBWhitelistIcon.rotated {
-  transform: rotate(45deg);
+/*
+ * Prevent username from wrapping
+ */
+
+#setUsernameButton {
+  flex: 0 1;
+  margin-right: 5px;
 }
 
-@keyframes rotate {
-	from { transform: rotate(0deg); }
-	  to { transform: rotate(360deg); }
+/*
+ * Set username button
+ */
+
+#submitUsername {
+  padding-left: 7px;
 }
 
-.SBWhitelistIconContainer, button#optionsButton {
-  display: flex;
-  align-items: center;
+/*
+ * Increase font size of username input and display
+ */
+
+#usernameValue,
+#usernameInput,
+#sponsorTimesContributionsDisplay {
+  font-size: 16px;
+  flex: 1 0;
 }
 
-.SBWhitelistIconContainer, button#optionsButton>img, .logoText>img, #usernameValue {
-  margin-right: 8px;
+/*
+ * Left align "Username" and "Submissions" labels
+ */
+
+#usernameElement > div > p,
+#sponsorTimesContributionsContainer {
+  text-align: start;
 }
 
-#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
+/*
+ * Enable flexbox for buttons with SVG icon
+ */
+
+#setUsernameContainer > button {
   display: flex;
-  flex-flow: row nowrap;
 }
 
-.sbSlimButton, #whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
-  cursor: pointer;
-}
+/*
+ * Improve position of "Copy User ID" button
+ */
 
 #copyUserID {
   width: 100%;
   flex: 0 1;
 }
 
+/*
+ * Container around username display and edit
+ */
+
 #setUsernameContainer {
   display: flex;
 }
 
-#usernameElement > div, #sponsorTimesContributionsContainer > div {
+/*
+ * Improve alignment of username and submissions
+ */
+
+#usernameElement > div,
+#sponsorTimesContributionsContainer > div {
   display: flex;
   flex-flow: column nowrap;
   align-items: flex-start;
 }
 
-.sidebyside > #usernameElement, .sidebyside > #sponsorTimesContributionsContainer {
-  display: flex;
-  align-items: center;
-}
+/*
+ * Truncate username display
+ */
 
-#usernameValue{
+#usernameValue {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 130px;
+  margin-right: 8px;
 }
 
+/*
+ * Set username form container with "expanded" state
+ */
+
 #setUsername {
-  display:flex;
+  display: flex;
 }
 
+#setUsername.SBExpanded {
+  width: 200%;
+}
+
+/*
+ * Set username input
+ */
+
 #usernameInput {
-  background: none;
-  padding: 0;
-  border: white 1px solid;
+  background: transparent;
+  padding: 2px;
+  border: var(--sb-main-fg-color) 1px solid;
   color: var(--sb-main-fg-color);
   width: calc(100% - 24px);
-
   text-overflow: ellipsis;
 }
 
-#setUsername.SBExpanded {
-  width: 200%;
-}
+/*
+ * Footer
+ */
 
-/* footer */
+#sbFooter {
+  margin-top: 10px;
+  padding-bottom: 20px;
+}
 
 #sbFooter a {
   color: var(--sb-main-fg-color);
+  cursor: pointer;
   text-decoration: none;
 }
 
-#showNoticeAgain {
-  margin-top: 30px;
+/*
+ * "Show Notice Again" button
+ */
 
+#showNoticeAgain {
+  background: transparent;
+  border: 1px solid #fff;
+  border-radius: 5px;
   color: var(--sb-main-fg-color);
-  background: none;
-  border: 1px solid white;
   cursor: pointer;
+  margin-bottom: 20px;
   padding: 5px;
+}
 
-  border-radius: 5px;
+/*
+ * Generic spacing classes
+ */
+
+.u-mZ {
+  margin: 0 !important;
+}
+
+/*
+ * Generic hide utility classes
+ */
+
+#sponsorBlockPopupBody .hidden {
+  display: none !important;
+}
+
+.voteButtonsContainer--hide {
+  display: none;
 }
diff --git a/public/popup.html b/public/popup.html
index 09cacf34..78001e86 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -1,92 +1,86 @@
+<!DOCTYPE html>
 <html id="sponsorBlockPopupHTML">
   <head>
+    <meta charset="utf-8" />
     <title>__MSG_openPopup__</title>
-    <link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css">
-    <link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css">
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link id="sponsorBlockPopupFont" href="/libs/Source+Sans+Pro.css" rel="stylesheet">
+    <link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
   </head>
 
   <body id="sponsorBlockPopupBody">
-    <div id="sponsorblockPopup" class="sponsorBlockPageBody preload">
-      <div class="logoText bottomSpace">
-        <img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
-        <p>SponsorBlock</p>
-      </div>
-      <div id="videoInfo" class="bottomSpace">
-        <div class="bottomSpace">
-          <!-- Loading text -->
-          <p id="loadingIndicator">__MSG_noVideoID__</p>
-          <!-- If the video was found in the database -->
-          <p id="videoFound"></p>
-          <button class="sbSlimButton" id="refreshSegmentsButton" title="__MSG_refreshSegments__">
-            <img id="refreshSegments" src="/icons/refresh.svg"/>
-          </button>
-        </div>
+    <div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
+
+      <header class="sbPopupLogo">
+        <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
+        <p class="u-mZ">SponsorBlock</p>
+      </header>
+
+      <div id="videoInfo">
+        <!-- Loading text -->
+        <p id="loadingIndicator" class="u-mZ">__MSG_noVideoID__</p>
+        <!-- If the video was found in the database -->
+        <p id="videoFound" class="u-mZ"></p>
+        <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
+          <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
+        </button>
         <div id="issueReporterContainer">
           <div id="issueReporterTimeButtons"></div>
         </div>
       </div>
-      <div class="sidebyside">
-        <div id="disableExtension">
-          <!--github: mbledkowski/toggle-switch-->
-          <label for="toggleSwitch" class="toggleSwitchContainer">
+
+      <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 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 sbControlsMenu-item">
+          <span class="toggleSwitchContainer-switch">
             <input type="checkbox" style="display:none;" id="toggleSwitch" checked>
             <span class="switchBg shadow"></span>
             <span class="switchBg white"></span>
             <span class="switchBg green"></span>
             <span class="switchDot"></span>
-          </label>
-          <p id="disableSkipping">__MSG_disableSkipping__</p>
-          <p id="enableSkipping" style="display: none">__MSG_enableSkipping__</p>
-        </div>
-        <div id="additionalButtons">
-          <!-- grayedOut until loading complete -->
-          <div id="whitelistButton" class="hidden bottomSpace" title="__MSG_forceChannelCheckPopup__">
-            <input type="checkbox" style="display:none;" id="whitelistToggle">
-            <label for="whitelistToggle" class="whitelistToggleText">
-              <div class="SBWhitelistIconContainer">
-                <svg viewBox="0 0 24 24" width="16" height="16" class="SBWhitelistIcon">
-                  <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
-                </svg>
-              </div>
-              <p id="whitelistChannel">__MSG_whitelistChannel__</p>
-              <p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
-            </label>
-          </div>
-          <button id="optionsButton" title="__MSG_optionsInfo__">
-            <img src="/icons/settings.svg" alt="Settings icon" width="16" height="16" id="sbPopupIconSettings">
-            __MSG_Options__
-          </button>
-        </div>
+          </span>
+          <span id="disableSkipping">__MSG_disableSkipping__</span>
+          <span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
+        </label>
+        <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>
 
-      <div id="whitelistForceCheck" class="hidden">
+      <p id="whitelistForceCheck" class="u-mZ hidden">
         __MSG_forceChannelCheckPopup__
-      </div>
+      </p>
 
       <div id="mainControls" style="display: none">
-        <p class="sbHeader sbSubHeader">
+        <p class="sbHeader">
           __MSG_recordTimesDescription__
         </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>
-          <div id="submitTimesContainer" style="margin-top: 12px;">
-            <button id="submitTimes" class="mediumButton">__MSG_submitTimesButton__</button>
-          </div>
+          <button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
         </div>
       </div>
-      <h1 class="recordingSubtitle sbHeader sbSubHeader">__MSG_yourWork__</h1>
-      <div class="sidebyside">
+
+      <h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
+      <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>
@@ -96,9 +90,9 @@
             </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" hint="Username"></input>
+              <input id="usernameInput" placeholder="Username">
               <button id="submitUsername">
                 <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
               </button>
@@ -107,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>
@@ -115,7 +109,7 @@
         </div>
       </div>
 
-      <span id="sponsorTimesViewsContainer" style="display: none">
+      <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
         __MSG_savedPeopleFrom__
         <b><span id="sponsorTimesViewsDisplay">
             0
@@ -125,8 +119,8 @@
         (<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
           <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
         <span>__MSG_youHaveSavedTimeEnd__</span>).
-      </span>
-      <div id="sponsorTimesSkipsDoneContainer" style="display: none">
+      </p>
+      <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ">
         __MSG_youHaveSkipped__
         <b><span id="sponsorTimesSkipsDoneDisplay">
             0
@@ -136,14 +130,15 @@
             0
           </span>
           <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
-      </div>
+      </p>
+
       <footer id="sbFooter">
         <div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
-          <img class="sbHeart" src="/icons/heart.svg"/>
+          <img class="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
           <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
             __MSG_considerDonating__
           </a>
-          <img id="sbCloseDonate" src="/icons/close.png" height="8px" style="padding-left: 5px; cursor: pointer;"/>
+          <img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" />
         </div>
 
         <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a> |
@@ -152,14 +147,15 @@
         <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 -->
     <script src="./js/vendor.js" async></script>
     <script src="./js/popup.js" async></script>
   </body>
-</html>
-\ No newline at end of file
+</html>
author	Ajay Ramachandran <[email protected]>	2022-03-12 00:24:46 -0500
committer	GitHub <[email protected]>	2022-03-12 00:24:46 -0500
commit	d495be18a37edbcde86dc840191688f5bf9dd4e1 (patch)
tree	126db730ccd6ece7412db5001e2aaa5de06bba53
parent	476efff47b5de8f567a0fcee2854f66339bb224b (diff)
parent	dcbefb5457ca4d727908f11991c595674887eff0 (diff)
download	SponsorBlock-d495be18a37edbcde86dc840191688f5bf9dd4e1.tar.gz SponsorBlock-d495be18a37edbcde86dc840191688f5bf9dd4e1.zip