miniplayer ui fix

src/renderer/style.less

@@ -4713,6 +4713,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     background-color: rgba(200, 200, 200, 0.7);
   }
 
+  .player-exit {
+    z-index: 3;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    -webkit-app-region: no-drag;
+  }
+
   .playback-button--small {
     opacity: 0.7;
   }
@@ -4932,14 +4940,27 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     flex-direction: column;
 
     .artwork {
-      width: 50vh;
-      height: 50vh;
-      -webkit-app-region: no-drag;
+      width: 100%;
+      height: 100%;
+
+      .mediaitem-artwork{
+        border-radius: unset;
+      }
     }
 
     .controls-parents {
-      width: 50vh;
+      width: 100%;
+      position: absolute;
+      background: black;
+      bottom: 0px;
+      z-index: 3;
+      opacity: 0;
+      padding: 3%;
+      &:hover {
+        opacity : 1;
+      }
     }
+    
 
     .app-playback-controls {
       -webkit-app-region: no-drag;
@@ -5005,7 +5026,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       @bgColor: transparent;
       //height: 16px;
       position: absolute;
-      bottom: -1.5vh;
+      bottom: -3.5vh;
       left: 0px;
       background: @bgColor;
 
@@ -5059,7 +5080,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
 
     .control-buttons {
-      margin-top: 2vh;
+      margin-top: 3.5vh;
       display: inline-flex;
       width: 100%;
       justify-content: center;