From 17954a46a7a99a494dfb78723e33dfe13f002237 Mon Sep 17 00:00:00 2001
From: kyle <42522603+ktg5@users.noreply.github.com>
Date: Wed, 26 Jun 2024 14:24:27 -0700
Subject: [PATCH] some good stuff i suppose

---
 css/2010-dark.css       |  3 +--
 css/2010-white.css      | 13 ++-----------
 css/2010.css            | 25 +++++++++++++++----------
 css/2011.css            | 24 ++++++++++++------------
 css/2012-dark.css       | 12 +-----------
 css/2012-white.css      | 14 ++------------
 css/2012.css            | 29 ++++++++++++-----------------
 css/3rd-party-style.css | 11 +++++++++--
 html/popup.js           |  4 ++--
 html/update.html        | 23 +++++++++++++++++++----
 manifest.json           |  2 +-
 src/pt-main.js          |  4 ----
 12 files changed, 76 insertions(+), 88 deletions(-)

diff --git a/css/2010-dark.css b/css/2010-dark.css
index fbc59cf..f99783f 100644
--- a/css/2010-dark.css
+++ b/css/2010-dark.css
@@ -22,10 +22,9 @@
 .ytp-scrubber-button {
     background: url(chrome-extension://__MSG_@@extension_id__/img/2010-scrubber.png) no-repeat !important;
     background-position: 0px 0px !important;
-    background-size: 18px !important;
+    background-size: 16px !important;
     height: 18px !important;
     width: 18px !important;
-    top: -2px;
     transition: .5s !important;
     position: relative;
 }
diff --git a/css/2010-white.css b/css/2010-white.css
index 0238b9e..795d175 100644
--- a/css/2010-white.css
+++ b/css/2010-white.css
@@ -21,10 +21,9 @@
 .ytp-scrubber-button {
     background: url(chrome-extension://__MSG_@@extension_id__/img/2010-scrubber.png) no-repeat !important;
     background-position: 0px 0px !important;
-    background-size: 18px !important;
+    background-size: 16px !important;
     height: 18px !important;
     width: 18px !important;
-    top: -2px;
     transition: .5s !important;
     position: relative;
 }
@@ -79,38 +78,30 @@
 /* DEFAULT */
 .ytp-button.ytp-mute-button svg {
 	background: url('chrome-extension://__MSG_@@extension_id__/img/2010%20icons/volume.png') no-repeat center;
-	background-size: 34px;
-	position: absolute;
-	top: 0;
-	left: 0;
 }
 
 .ytp-button.ytp-mute-button:hover svg {
 	background: url('chrome-extension://__MSG_@@extension_id__/img/2010%20icons/volume-mute-hover.png') no-repeat center !important;
-    background-size: 34px !important;
+    background-size: 36px !important;
 }
 
 /* MEDIUM VOLUME */
 .ytp-volume-area[simplevolumenow="med"] .ytp-button.ytp-mute-button svg {
     background: url('chrome-extension://__MSG_@@extension_id__/img/2010%20icons/volume-med.png') no-repeat center;
-	background-size: 34px;
 }
 
 /* LOW VOLUME */
 .ytp-volume-area[simplevolumenow="low"] .ytp-button.ytp-mute-button svg {
     background: url('chrome-extension://__MSG_@@extension_id__/img/2010%20icons/volume-low.png') no-repeat center;
-	background-size: 34px;
 }
 
 /* MUTE */
 .ytp-button.ytp-mute-button[title="Unmute (m)"] svg {
 	background: url('chrome-extension://__MSG_@@extension_id__/img/2010%20icons/volume-mute.png') no-repeat center;
-    background-size: 34px;
 }
 
 .ytp-button.ytp-mute-button[data-title-no-tooltip="Unmute"]:hover svg {
 	background: url('chrome-extension://__MSG_@@extension_id__/img/2010%20icons/volume-hover.png') no-repeat center;
-    background-size: 34px;
 }
 
 /* ################################# */
diff --git a/css/2010.css b/css/2010.css
index 1014474..03d53e8 100644
--- a/css/2010.css
+++ b/css/2010.css
@@ -157,16 +157,6 @@
     height: 5px;
 }
 
-.ytp-autohide .ytp-progress-bar-container {
-    width: calc( 100% + 20px );
-    margin-left: -12px;
-}
-
-.ytp-big-mode.ytp-autohide .ytp-progress-bar-container {
-    width: calc( 100% + 48px );
-    margin-left: -24px;
-}
-
 .ytp-autohide .ytp-player-content:not(.html5-endscreen) {
     transition: bottom .5s cubic-bezier(0.0,0.0,0.2,1), top .5s cubic-bezier(0.0,0.0,0.2,1);
 }
@@ -260,6 +250,13 @@
 	width: auto;
 }
 
+.ytp-button.ytp-mute-button svg {
+	background-size: 36px !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
 /* ################################# */
 
 /* LEFT BUTTONS */
@@ -671,4 +668,12 @@
     background-position: -1px -524px;
 }
 
+/* ################################# */
+
+/* 3rd-party extensions */
+
+.ytp-autohide .ytp-chrome-bottom #previewbar {
+	top: -5px;
+}
+
 /* ################################# */
\ No newline at end of file
diff --git a/css/2011.css b/css/2011.css
index 6d9a0a7..56bcc8e 100644
--- a/css/2011.css
+++ b/css/2011.css
@@ -170,16 +170,6 @@
     height: 5px;
 }
 
-.ytp-autohide .ytp-progress-bar-container {
-    width: calc( 100% + 20px );
-    margin-left: -12px;
-}
-
-.ytp-big-mode.ytp-autohide .ytp-progress-bar-container {
-    width: calc( 100% + 48px );
-    margin-left: -24px;
-}
-
 .ytp-autohide .ytp-player-content:not(.html5-endscreen) {
     transition: bottom .5s cubic-bezier(0.0,0.0,0.2,1), top .5s cubic-bezier(0.0,0.0,0.2,1);
 }
@@ -394,8 +384,6 @@
 /* CHAPTER TITLE */
 
 .ytp-chrome-bottom .ytp-chapter-title.ytp-button {
-	position: relative !important;
-    bottom: 2px;
     width: auto !important;
 }
 
@@ -403,6 +391,10 @@
 	font-size: 14px;
 }
 
+.ytp-chrome-bottom .ytp-chapter-container {
+    color: var(--pt-progress-text) !important;
+}
+
 .ytp-chapter-container .ytp-chapter-title-content {
   margin-bottom: 2px;
 }
@@ -825,4 +817,12 @@
     background-position: -1px -524px;
 }
 
+/* ################################# */
+
+/* 3rd-party extensions */
+
+.ytp-autohide .ytp-chrome-bottom #previewbar {
+	top: -8px;
+}
+
 /* ################################# */
\ No newline at end of file
diff --git a/css/2012-dark.css b/css/2012-dark.css
index 07bd03a..d2845de 100644
--- a/css/2012-dark.css
+++ b/css/2012-dark.css
@@ -24,7 +24,6 @@
 .ytp-button.ytp-prev-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
 	background-position: 4px -1px;
-	background-size: 200px;
 }
 
 /* PLAY BUTTON */
@@ -32,7 +31,6 @@
 .ytp-button.ytp-play-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
 	background-position: -50px -1330px;
-	background-size: 200px;
 	width: 55px !important;
 }
 
@@ -49,7 +47,6 @@
 .ytp-button.ytp-next-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
 	background-position: 4px -1216px;
-	background-size: 200px;
 	width: 45px !important;
 }	
 
@@ -58,7 +55,6 @@
 .ytp-button.ytp-mute-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
 	background-position: -113px -154.5px;
-	background-size: 200px;
 	width: 45px !important;
 }
 
@@ -78,7 +74,7 @@
 
 /* MUTE */
 .ytp-button.ytp-mute-button[title="Unmute (m)"] {
-	background-position: -155px -1000px;
+	background-position: -155px -1000px !important;
 }
 
 .ytp-button.ytp-mute-button[data-title-no-tooltip="Unmute"]:hover {
@@ -108,7 +104,6 @@
 .ytp-subtitles-button.ytp-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
 	background-position: -116px -998px;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -121,7 +116,6 @@
 .ytp-button.ytp-settings-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
 	background-position: -157.5px -521px;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -139,7 +133,6 @@
 
 .ytp-button.ytp-size-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -158,7 +151,6 @@
 	background-position: -120px -268px;
 	position: sticky !important;
 	width: 55px !important;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -167,7 +159,6 @@
 .ytp-button.ytp-fullscreen-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
 	background-position: -116px -523px;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -180,7 +171,6 @@
 .ytp-button.playertube-watchlater {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
 	background-position: -56px -1099px;
-	background-size: 200px;
 	display: inline-block;
 	bottom: 5px;
 }
diff --git a/css/2012-white.css b/css/2012-white.css
index 3797689..acc2f5d 100644
--- a/css/2012-white.css
+++ b/css/2012-white.css
@@ -24,7 +24,6 @@
 .ytp-button.ytp-prev-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons-alt.png) no-repeat;
 	background-position: 4px -1px;
-	background-size: 200px;
 }
 
 /* PLAY BUTTON */
@@ -32,7 +31,6 @@
 .ytp-button.ytp-play-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons-alt.png) no-repeat;
 	background-position: -50px -1330px;
-	background-size: 200px;
 	width: 55px !important;
 }
 
@@ -49,7 +47,6 @@
 .ytp-button.ytp-next-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons-alt.png) no-repeat;
 	background-position: 4px -1216px;
-	background-size: 200px;
 	width: 45px !important;
 }	
 
@@ -58,7 +55,6 @@
 .ytp-button.ytp-mute-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons-alt.png) no-repeat;
 	background-position: -113px -154.5px;
-	background-size: 200px;
 	width: 45px !important;
 }
 
@@ -78,7 +74,7 @@
 
 /* MUTE */
 .ytp-button.ytp-mute-button[title="Unmute (m)"] {
-	background-position: -155px -1000px;
+	background-position: -155px -1000px !important;
 }
 
 .ytp-button.ytp-mute-button[data-title-no-tooltip="Unmute"]:hover {
@@ -90,7 +86,7 @@
 /* VOLUME PANEL */
 
 .ytp-volume-panel .ytp-volume-slider-handle {
-	background: #ddd !important;
+	background: #797979 !important;
 }
 
 .ytp-volume-slider-handle::after {
@@ -108,7 +104,6 @@
 .ytp-subtitles-button.ytp-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons-alt.png) no-repeat;
 	background-position: -116px -998px;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -121,7 +116,6 @@
 .ytp-button.ytp-settings-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons-alt.png) no-repeat;
 	background-position: -157.5px -521px;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -139,7 +133,6 @@
 
 .ytp-button.ytp-size-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons-alt.png) no-repeat;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -158,7 +151,6 @@
 	background-position: -120px -268px;
 	position: sticky !important;
 	width: 55px !important;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -167,7 +159,6 @@
 .ytp-button.ytp-fullscreen-button {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons-alt.png) no-repeat;
 	background-position: -116px -523px;
-	background-size: 200px;
 	bottom: 5px;
 }
 
@@ -180,7 +171,6 @@
 .ytp-button.playertube-watchlater {
 	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons-alt.png) no-repeat;
 	background-position: -56px -1099px;
-	background-size: 200px;
 	display: inline-block;
 	bottom: 5px;
 }
diff --git a/css/2012.css b/css/2012.css
index d99c239..daf5fb2 100644
--- a/css/2012.css
+++ b/css/2012.css
@@ -24,7 +24,7 @@
 
 .ytp-chrome-bottom .ytp-progress-bar-container {
 	width: 100% !important;
-	bottom: 31px !important;
+	bottom: 32px !important;
 }
 
 .ytp-chrome-bottom .ytp-chapters-container {
@@ -85,7 +85,6 @@
 }
 
 .ytp-progress-bar:hover {
-	margin-bottom: 1px;
 	height: var(--pt-progress-bar-full-height);
 }
 
@@ -145,16 +144,6 @@
     height: 5px;
 }
 
-.ytp-autohide .ytp-progress-bar-container {
-    width: calc( 100% + 20px );
-    margin-left: -12px;
-}
-
-.ytp-big-mode.ytp-autohide .ytp-progress-bar-container {
-    width: calc( 100% + 48px );
-    margin-left: -24px;
-}
-
 .ytp-autohide .ytp-player-content:not(.html5-endscreen) {
     transition: bottom .5s cubic-bezier(0.0,0.0,0.2,1), top .5s cubic-bezier(0.0,0.0,0.2,1);
 }
@@ -252,6 +241,10 @@
     display: none;
 }
 
+.ytp-chrome-bottom .ytp-button {
+	background-size: 200px;
+}
+
 .ytp-button svg {
 	display: none;
 }
@@ -300,7 +293,7 @@
     width: auto !important;
 }
 
-.ytp-big-mode .ytp-chapter-title-content {
+.ytp-big-mode .ytp-chapter-title {
 	font-size: 14px;
 }
 
@@ -309,11 +302,11 @@
 }
 
 .ytp-chapter-container .ytp-chapter-title-content {
-  margin-bottom: 2px;
+	margin-bottom: 2px;
 }
 
 .ytp-chapter-container .ytp-chapter-title-prefix {
-  margin-bottom: 2px;
+	margin-bottom: 2px;
 }
 
 /* ################################# */
@@ -623,5 +616,7 @@
 /* 3rd-party extensions */
 
 .ytp-autohide .ytp-chrome-bottom #previewbar {
-	
-}
\ No newline at end of file
+	top: -7px;
+}
+
+/* ################################# */
\ No newline at end of file
diff --git a/css/3rd-party-style.css b/css/3rd-party-style.css
index 9f0b9db..eca54f9 100644
--- a/css/3rd-party-style.css
+++ b/css/3rd-party-style.css
@@ -36,11 +36,18 @@ on the GitHUb repo! Much thanks! */
     height: 80% !important;
 }
 
-.ytp-time-display #sponsorBlockDurationAfterSkips {
-    color: var(--alt-progress-text) !important;
+.ytp-left-controls .ytp-time-display #sponsorBlockDurationAfterSkips,
+.ytp-left-controls #skipButtonControlBarContainer 
+{
+    color: var(--pt-alt-progress-text) !important;
     text-shadow: none;
 }
 
+.ytp-left-controls .sponsorChapterText {
+    position: relative;
+    top: -1px;
+}
+
 .playerButton svg path {
     display: block !important;
 }
diff --git a/html/popup.js b/html/popup.js
index 02a73bd..1bdc56b 100644
--- a/html/popup.js
+++ b/html/popup.js
@@ -310,10 +310,10 @@ async function start(userConfig) {
 
             <h3>General Settings</h3>
 
-            ${makeMenuOption(`selection`, `year`, `Change year of Player`, yearOptions)}
-
             ${makeMenuOption('toggle', 'showReleaseNotes', 'Toggle Release Notes when reloading or updating PlayerTube')}
 
+            ${makeMenuOption(`selection`, `year`, `Change year of Player`, yearOptions)}
+
             <div id="menu-if-alt-mode"></div>
 
             ${makeMenuOption('toggle', 'toggleRoundedCorners', 'Toggle rounded corners around a YouTube video')}
diff --git a/html/update.html b/html/update.html
index f1a1d85..3dff96a 100644
--- a/html/update.html
+++ b/html/update.html
@@ -30,10 +30,11 @@
             <div class="text">
                 <!-- <b>New updates to the <a href="extensions.html">Extension Support page</a>! Please check it to see if you need to do manual configuration for your extensions!</b>
                 <br> -->
-                <div class="v1dot7dot1">
-                    <h1 class="showVersion">PlayerTube has been updated to </h1>
+                <div class="v1dot7dot3">
+                    <h1>PlayerTube has been updated!</h1>
                     <ul>
-                        <li>Quick update to fix an issue with fake bar toggle not working.</li>
+                        <li>A lot of CSS improvements.</li>
+                        <li>Change of placement for the "Change year of Player" settings option.</li>
                     </ul>
                 </div>
 
@@ -51,7 +52,16 @@ <h1 class="showVersion">PlayerTube has been updated to </h1>
                 <br>
 
                 <h2>Past versions...</h2>
-                <div class="v1dot7">
+                <div class="v1dot7dot2">
+                    <div style="font-weight: 600;">v1.7.2</div>
+                    <ul>
+                        <li>Quick update to fix an issue with fake bar toggle not working.</li>
+                    </ul>
+                </div>
+
+                <br>
+
+                <div class="v1dot7dot1">
                     <div style="font-weight: 600;">v1.7.1</div>
                     <ul>
                         <li>Improvements to resize script (using custom detection v2.1).</li>
@@ -60,6 +70,11 @@ <h2>Past versions...</h2>
                         <li>Make configuration menu buttons look a bit nicer.</li>
                         <li>Improvements to all extension pages.</li>
                     </ul>
+                </div>
+                
+                <br>
+
+                <div class="v1dot7">
                     <div style="font-weight: 600;">v1.7</div>
                     This update took too long to make... <b>But I can say that this extension is now 90% stable & finished.</b>
                     <br>
diff --git a/manifest.json b/manifest.json
index 3b5c6f3..550071c 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "PlayerTube",
     "description": "The secret ingredient for a older (and better) looking YouTube.",
-    "version": "1.7.2",
+    "version": "1.7.3",
     "homepage_url": "https://github.com/ktg5/PlayerTube",
 
     "background": {
diff --git a/src/pt-main.js b/src/pt-main.js
index 331d069..75f6e67 100644
--- a/src/pt-main.js
+++ b/src/pt-main.js
@@ -470,10 +470,6 @@ function extraStyles() {
         var thirdPartyCSS2010 = 
         `
         /* This is 3rd-party CSS for those using the 2010 theme */
-
-        #previewbar {
-            top: 1px !important;
-        }
         
         .ytp-chrome-bottom .playerButton.ytp-button {
             background: none !important;