popup styling tweaks

public/popup.css

@@ -1,11 +1,16 @@
 :root {
   --sb-main-font-family: "Source Sans Pro", sans-serif;
-  --sb-main-bg-color: #222626;
+  --sb-main-bg-color: #111;
   --sb-main-fg-color: #fff;
   --sb-grey-bg-color: #333;
+  --sb-grey-fg-color: #999;
   --sb-red-bg-color: #cc1717;
 }
 
+.grey-text {
+  color: var(--sb-grey-fg-color);
+}
+
 /*
  * Container when popup displayed in-page
  */
@@ -107,18 +112,76 @@
 
 .sbPopupLogo {
   display: flex;
+  flex-direction: column;
   align-items: center;
   font-size: 32px;
   font-weight: bold;
   justify-content: center;
   user-select: none;
-  padding: 20px 0 10px;
+  padding: 1rem;
 }
 
 .sbPopupLogo img {
-  margin-right: 8px;
+  margin: 0.5rem 0;
 }
 
+/* 
+ * Options button
+ */
+
+#optionsButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  background: none;
+  box-shadow: none;
+  border: none;
+  top: 26px;
+  right: 26px;
+  padding: 5px;
+  z-index: 69;
+  height: 2rem;
+  width: 2rem;
+}
+#optionsButton svg {
+  transition: transform 0.15s ease-in-out !important;
+  transform-origin: center center;
+  color: var(--sb-grey-fg-color);
+}
+
+#optionsButton:hover svg {
+  color: var(--sb-main-fg-color);
+  transform: rotate(90deg);
+}
+
+#optionsButton:active svg {
+  transform: scale(1.5);
+}
+
+#optionsButton:before {
+  content: attr(data-hover);
+  opacity: 0;
+  pointer-events: none;
+  width: content;
+  color: var(--sb-main-fg-color);
+  background-color: var(--sb-grey-bg-color);
+  border-radius: 1rem;
+  padding: 0.25rem 0.5rem;
+  transition: .3s;
+
+  position: absolute;
+  z-index: 1;
+  left: -200%;
+  top: 0.25rem;
+}
+
+#optionsButton:hover:before {
+  opacity: 1;
+  transform: translateX(-5px);
+}
+
+
 /*
  * Refresh segments button
  */
@@ -397,7 +460,7 @@
 
 .sbYourWorkCols {
   display: flex;
-  margin: 0 20px 12px;
+  margin: 1rem;
 }
 
 .sbYourWorkCols > div {
@@ -540,10 +603,21 @@
 }
 
 #sbFooter a {
+  display: inline-block;
   color: var(--sb-main-fg-color);
   text-decoration: none;
+  background: #222;
+  cursor: pointer;
+  padding: 5px 16px;
+  border-radius: 4px;
+  font-weight: 500;
+  transition: 0.4s;
+  margin: 2px 1px;
 }
 
+#sbFooter a:hover {
+  background: #444;
+}
 /*
  * "Show Notice Again" button
  */
@@ -561,7 +635,7 @@
  * Generic utilities
  */
 
- #sponsorBlockPopupBody .u-mZ {
+#sponsorBlockPopupBody .u-mZ {
   margin: 0 !important;
 }
 

public/popup.html

@@ -15,16 +15,17 @@
         __MSG_betaServerWarning__
       </div>
 
+      
       <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>
+        <p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
         <!-- If the video was found in the database -->
-        <p id="videoFound" class="u-mZ"></p>
+        <p id="videoFound" class="u-mZ grey-text"></p>
         <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
           <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
         </button>
@@ -32,7 +33,7 @@
           <div id="issueReporterTimeButtons"></div>
         </div>
       </div>
-
+      
       <div class="sbControlsMenu">
         <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
           <input type="checkbox" style="display:none;" id="whitelistToggle">
@@ -54,9 +55,8 @@
           <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__">
+        <button id="optionsButton" data-hover="__MSG_Options__" title="__MSG_OptionsInfo__">
-          <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"  fill="currentColor"><path d="M24 13.6v-3.2c-1.7-.6-2.7-.8-3.2-2h0c-.5-1.3.1-2.1.8-3.7l-2.3-2.3c-1.6.7-2.4 1.4-3.7.8h0c-1.3-.5-1.4-1.6-2-3.2h-3.2c-.6 1.6-.7 2.7-2 3.2h0c-1.3.5-2.1-.1-3.7-.8L2.4 4.7c.7 1.6 1.4 2.4.8 3.7s-1.6 1.4-3.2 2v3.2c1.6.6 2.7.7 3.2 2 .5 1.3-.1 2.2-.8 3.7l2.3 2.3c1.6-.7 2.4-1.4 3.7-.8h0c1.3.5 1.4 1.6 2 3.2h3.2c.6-1.6.8-2.7 2-3.2h0c1.3-.5 2.1.1 3.7.9l2.3-2.3c-.7-1.6-1.4-2.4-.8-3.7s1.6-1.4 3.2-2zM12 16a4 4 0 1 1 0-8 4 4 0 1 1 0 8z"/></svg>
-          __MSG_Options__
         </button>
       </div>
 
@@ -80,9 +80,17 @@
 
       <h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
       <div class="sbYourWorkCols">
+        <div id="sponsorTimesContributionsContainer" class="hidden">
+          <div>
+            <p class="u-mZ grey-text">__MSG_Submissions__:</p>
+            <span id="sponsorTimesContributionsDisplay">
+              0
+            </span>
+          </div>
+        </div>
         <div id="usernameElement">
           <div>
-            <p class="u-mZ">__MSG_Username__:</p>
+            <p class="u-mZ grey-text">__MSG_Username__:</p>
             <div id="setUsernameContainer">
               <p id="usernameValue"></p>
               <button id="setUsernameButton" title="__MSG_setUsername__">
@@ -103,14 +111,6 @@
             </div>
           </div>
         </div>
-        <div id="sponsorTimesContributionsContainer" class="hidden">
-          <div>
-            <p class="u-mZ">__MSG_Submissions__:</p>
-            <span id="sponsorTimesContributionsDisplay">
-              0
-            </span>
-          </div>
-        </div>
       </div>
 
       <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
@@ -145,13 +145,13 @@
           <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> |
+        <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
-        <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a> |
+        <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
         <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
         <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">__MSG_help__</a> |
+        <a id="helpButton">__MSG_help__</a>
         <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a>
       </footer>