Visual Tweaks to Miniplayer and add assets to Web Remote.

src/renderer/index.js

@@ -3293,7 +3293,7 @@ const app = new Vue({
                 this.tmpWidth = window.innerWidth;
                 this.tmpHeight = window.innerHeight;
                 ipcRenderer.send('setFullScreen', false);
-                ipcRenderer.send('windowresize', 250, 250, false)
+                ipcRenderer.send('windowresize', 364, 364, false)
                 app.appMode = 'mini';
             } else {
                 ipcRenderer.send('windowresize', this.tmpWidth, this.tmpHeight, false)

src/renderer/style.less

@@ -4754,7 +4754,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 .mini-view {
   width: 100%;
   height: 100%;
-  background: black;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -5005,7 +5004,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     .controls-parents {
       width: 100%;
       position: absolute;
-      background: black;
+      background: #0000009e;
+      backdrop-filter: blur(10px);
       bottom: 0px;
       z-index: 3;
       opacity: 0;

src/renderer/views/components/miniplayer.ejs

@@ -3,7 +3,7 @@
         <div class="background">
         </div>  
         <div class="player-exit" title="Close" @click="app.miniPlayer(false)">
-            <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
+            <svg fill="#323232e3" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
                  aria-role="presentation" focusable="false">
                 <path
                         d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
@@ -26,7 +26,7 @@
                             {{ app.mk.nowPlayingItem["attributes"]["name"] }}
                         </div>
                         <div
-                             style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden;">
+                             style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap; margin-top: 0.25vh; overflow: hidden; margin-bottom: 5px;">
                             <div class="item-navigate song-artist" style="display: inline-block;"
                                  @click="app.getNowPlayingItemDetailed(`artist`)">
                                 {{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
@@ -39,7 +39,7 @@
                         </div>
 
                         <div class="song-progress">
-                            <div class="song-duration" style="justify-content: space-between; height: 1px;"
+                            <div class="song-duration" style="justify-content: space-between; height: 1px; margin-bottom: 1px;"
                                  :style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
                                 <p style="width: auto">{{ app.convertToMins(app.getSongProgress()) }}</p>
                                 <p style="width: auto">{{ app.convertToMins(app.mk.currentPlaybackDuration) }}</p>