restyled music videos

src/renderer/style.less

@@ -2973,10 +2973,79 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   width: 100%;
   height: calc(100% - var(--chromeHeight));
   bottom: 0;
-  z-index: 100000;
+  z-index: 100000; 
 }
 
+#apple-music-video-container {
 
+  // AM Web Style Fullscreen Button
+  #player-fullscreen {
+      background-size    : 50%;
+      background-position: center;
+      background-repeat  : no-repeat;
+      filter             : opacity(0.6);
+      // filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 80%));
+      background-color   : transparent;
+      border-radius      : 10px;
+      transition         : 0.2s ease-in-out filter;
+      bottom             : 0;
+
+      &:hover {
+          filter    : opacity(1);
+          transition: 0.2s ease-in-out filter;
+      }
+  }
+
+  // AM Web Style PiP Button
+  #player-pip {
+      background-color: transparent;
+      border-radius   : 10px;
+      bottom          : 0;
+      filter          : opacity(0.6);
+      transition      : 0.2s ease-in-out filter;
+
+      &:hover {
+          filter    : opacity(1);
+          transition: 0.2s ease-in-out filter;
+      }
+  }
+  .playback-info{
+      position: absolute;
+      width:100%;
+      bottom: 0;
+      padding: 20px 40px;
+      background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%);
+      .song-artist{
+        font-size: 1.7rem;
+        font-weight: bold;
+      }
+      .song-name{
+        font-size: 1.2rem;
+        font-weight: bold;
+        color:rgb(255,255,255,0.8);
+      }
+  }
+  input[type="range"]{
+      align-self: center;
+      height: 4px;
+      border-radius: .5rem;
+      margin-inline: 10px;
+  }
+  
+  .song-progress input[type="range"]{
+      appearance: initial;
+      &::-webkit-slider-thumb {
+          box-shadow: 0px 0px 0px #000000;
+          border: 1px solid #39404D;
+          background: #fff;
+          height:0.7rem;
+          width:0.7rem;
+          border-radius: 50%;
+          cursor: pointer;
+          -webkit-appearance: none;
+        }
+  }
+}
 
 #apple-music-video-player {
   position: absolute;
@@ -3000,10 +3069,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   width: 100%;
   height: 100%;
   .playback-info{
-    position: absolute;
-    bottom: 2vw;
-    left: 2vw;
-    width: 97%;
     .song-progress {
       display: flex;
     }
@@ -3073,7 +3138,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   margin: 10px;
   right: 50px;
   border-radius: 100%;
-  background: rgb(255 255 255 / 50%);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -3092,7 +3156,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   margin: 10px;
   right: 0px;
   border-radius: 100%;
-  background: rgb(255 255 255 / 50%);
   display: flex;
   justify-content: center;
   align-items: center;

src/renderer/views/app/panels.ejs

@@ -62,16 +62,6 @@
             :
             '')}}
         </div>
-        <div id="player-pip"
-             @click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
-             title="Picture-in-Picture">
-            <%- include("../svg/pip.svg") %>
-        </div>
-        <div id="player-fullscreen"
-             @click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
-             title="Fullscreen">
-            <%- include("../svg/fullscreen.svg") %>
-        </div>
         <div class="playback-info music-player-info">
             <div class="song-artist-album-content"
             style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
@@ -120,7 +110,17 @@
                                 <button class="playback-button--small lyrics"
                                         :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
                             </template>
-                </div>        
+                </div> 
+                <div id="player-pip"
+                    @click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
+                    title="Picture-in-Picture">
+                    <%- include("../svg/pip.svg") %>
+                </div>
+                <div id="player-fullscreen"
+                    @click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
+                    title="Fullscreen">
+                    <%- include("../svg/fullscreen.svg") %>
+                </div>       
             </div>
         </div>
     </div>