still working on V3 stuff

been having a very difficult time with this part of the development process, and also i've been working on other projects too. hopefully i can finish this sometime this week.

css/2010.css

@@ -433,10 +433,6 @@
 	height: 4px !important;
 }
 
-.ytp-volume-panel .ytp-volume-slider-handle::before {
-	left: -64px;
-}
-
 /* ################################# */
 
 /* RIGHT BUTTONS */

css/2012.css

@@ -305,9 +305,9 @@
 /* PLAY BUTTON */
 
 .ytp-button.ytp-play-button {
-	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png);
-	background-position: -79px 153.5px;
-	background-size: 210px;
+	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) !important;
+	background-position: -79px 153.5px !important;
+	background-size: 210px !important;
 	width: 55px !important;
 }
 
@@ -316,11 +316,11 @@
 }
 
 .ytp-button.ytp-play-button[data-title-no-tooltip="Play"] {
-	background-position: -114px 91.5px;
+	background-position: -114px 91.5px !important;
 }
 
 .ended-mode .ytp-button.ytp-play-button {
-	background-position: -114px 27px;
+	background-position: -114px 27px !important;
 }
 
 /* NEXT BUTTON */
@@ -331,9 +331,9 @@
 /* VOLUME BUTTON */
 /* DEFAULT */
 .ytp-button.ytp-mute-button {
-	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png);
-	background-position: -175px -296px;
-	background-size: 210px;
+	background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) !important;
+	background-position: -175px -296px !important;
+	background-size: 210px !important;
 	width: 40px !important;
 }
 
@@ -344,12 +344,12 @@
 
 /* MEDIUM VOLUME */
 .ytp-volume-area[simplevolumenow="med"] .ytp-button.ytp-mute-button {
-    background-position: -138px -296px;
+    background-position: -138px -296px !important;
 }
 
 /* LOW VOLUME */
 .ytp-volume-area[simplevolumenow="low"] .ytp-button.ytp-mute-button {
-    background-position: -138px -296px;
+    background-position: -138px -296px !important;
 }
 
 /* MUTE */
@@ -462,10 +462,6 @@
     height: 4px !important;
 }
 
-.ytp-volume-panel .ytp-volume-slider-handle::before {
-	left: -64px;
-}
-
 /* ################################# */
 
 /* RIGHT BUTTONS */

css/2013.css

@@ -364,10 +364,6 @@
 	height: 4px !important;
 }
 
-.ytp-volume-panel .ytp-volume-slider-handle::before {
-	left: -64px;
-}
-
 /* ################################# */
 
 /* RIGHT BUTTONS */

css/forv3.css

@@ -22,30 +22,35 @@
     background: var(--pt-progress-bar-bg) !important;
 }
 
-/* volume slider */
-.spitfire-body-container.v3 .html5-video-controls .ytp-volume-slider .ytp-volume-slider-foreground:before {
-    background: var(--pt-volume-slider) !important;
-}
-
-.spitfire-body-container.v3 .html5-video-controls .ytp-volume-slider .ytp-volume-slider-foreground:after {
-    background: black;
-}
-
 
 /* ### 2012 ### */
 /* base */
 .spitfire-body-container.v3[pt-year="2012"] .html5-video-player .html5-video-controls {
     height: 35px !important;
 }
 .spitfire-body-container.v3[pt-year="2012"] .html5-video-player .html5-player-chrome {
-    background: transparent !important;
+    top: -2px;
+}
+.spitfire-body-container.v3[pt-year="2012"] .html5-video-player .html5-player-chrome:before {
+    content: '';
+    display: block;
+    position: relative;
+    top: 2px;
+    width: 100%;
+    height: 1px;
+    background: #ffffff33;
 }
 
-/* buttons */
-.spitfire-body-container.v3[pt-year="2012"] .ytp-button.ytp-button-volume {
-    width: 30px !important;
+/* volume control & panel */
+.spitfire-body-container.v3[pt-year="2012"] .ytp-volume-slider-active .ytp-volume-panel {
+    width: 56px !important;
+}
+
+.spitfire-body-container.v3[pt-year="2012"] .ytp-volume-panel {
+    top: 2px;
 }
 
+/* buttons */
 .spitfire-body-container.v3[pt-year="2012"] .ytp-subtitles-button-active {
     background: url(chrome-extension://__MSG_@@extension_id__/img/2012-icons.png) no-repeat;
     background-size: 200px;

html/base.js

@@ -10,7 +10,8 @@ var runtime = browser.runtime;
 /// Version
 var version = runtime.getManifest().version;
 
-setTimeout(() => {
+
+setTimeout(async () => {
     // Add version number to page title
     var pageName = document.getElementById('page-name').innerHTML;
     document.title = `PlayerTube v${version} : ${pageName}`;

html/update.html

@@ -34,10 +34,10 @@
                     <h1>PlayerTube has been updated!</h1>
                     <h3>Some year names have been changed and they are listed below.</h3>
                     <ul>
-                        <li><b>Renamed the 2012 theme to 2013 & 2011 to 2012</b> because of <a href="https://i.imgur.com/jqa9TkR.jpeg">this</a> image (that's new to me).</li>
+                        <li><b>Renamed the 2012 theme to 2013 & 2011 to 2012</b> because of <a href="https://i.imgur.com/jqa9TkR.jpeg">this image</a> (that's new to me).</li>
                         <li>Change of placement for the <kbd>Change year of Player</kbd> settings option.</li>
                         <li><b>Fixed the "TrustedTypes" issue with the resize script.</b></li>
-                        <li><b>Added <a href="https://vorapis.pages.dev/#/">Project V3</a> support</b> (somewhat). As of currently, there is no manual configuration needed for this extension.</li>
+                        <li><b>Added <a href="https://vorapis.pages.dev/#/">Project V3</a> support</b>, only 2013-2010 themes & custom themes are supported. As of currently, there is no manual configuration needed for this extension.</li>
                         <li>A lot of CSS improvements.</li>
                         <li>Added <a href="https://github.com/ktg5/PlayerTube/issues/28">#28 -- "[ Feature Request ] add a toggle for the custom loading icon"</a> under <kbd>Toggle the loading spinner [...]</kbd>.</li>
                     </ul>

manifest.json

@@ -47,7 +47,7 @@
 
     "web_accessible_resources": [{
         "matches": ["*://*.youtube.com/*"],
-        "resources": ["css/*", "src/*", "img/*"]
+        "resources": ["css/*", "src/*", "img/*", "v3elmnts.json"]
     }],
 
     "permissions": [