added window style to settings

src/renderer/less/directives.less

@@ -1,22 +1,177 @@
 #app.twopanel {
-    --chromeHeight1: 42px;
-    --chromeHeight2: 55px;
-    --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
-    .app-chrome {
-        .app-mainmenu {
-            width: 88px;
-        }
-        height: var(--chromeHeight1);
-        &.chrome-bottom {
-            height: var(--chromeHeight2);
-            box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
-            .app-chrome--left {
-                padding-left: 32px;
-            }
-        }
+  --chromeHeight1: 42px;
+  --chromeHeight2: 76px;
+  --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
+
+  .app-chrome {
+    .app-mainmenu {
+      margin-left: 10px;
+      width: 88px;
     }
 
-    .app-sidebar-footer--controls {
-        display: none!important;
+    height: var(--chromeHeight1);
+
+    &.chrome-bottom {
+      height: var(--chromeHeight2);
+      box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
     }
-}
+  }
+
+  .app-sidebar-footer--controls {
+    display: none !important;
+  }
+
+  .app-chrome.chrome-bottom {
+    .app-playback-controls .actions {
+      align-self: center;
+    }
+
+    .playback-button.play,
+    .playback-button.pause {
+      width: 42px;
+      height: 42px;
+      background-color: rgb(200 200 200 / 20%);
+      border-radius: 50%;
+      margin: 6px;
+      box-shadow: 0px 0px 0px 2px var(--keyColor);
+    }
+
+    .app-chrome--center {
+      display: flex;
+      flex-direction: column;
+
+      .app-chrome-playback-controls {
+        display: flex;
+        z-index: 1;
+        // margin-bottom: 12px;
+      }
+
+      .app-chrome-playback-duration {
+        position: relative;
+        width: 80%;
+        -webkit-app-region: no-drag;
+        height: 16px;
+
+        .song-progress {
+          @bgColor: transparent;
+          height: 16px;
+          position: absolute;
+          bottom: 4px;
+          left: 0px;
+          right: 4px;
+          background: @bgColor;
+          z-index: 0;
+
+
+          .song-duration {
+            display: flex;
+          }
+
+          .song-duration p {
+            font-weight: 400;
+            font-size: 10px;
+            height: 1.2em;
+            line-height: 1.3em;
+            overflow: hidden;
+            margin: 0 0 0 0.25em;
+          }
+
+          &:hover {
+            > input[type=range] {
+              &::-webkit-slider-thumb {
+                opacity: 1;
+                transform: scale(1);
+                z-index: 1;
+              }
+            }
+          }
+
+          input[type=range] {
+            appearance: none;
+            width: 100%;
+            height: 4px;
+            background-color: rgb(200 200 200 / 10%);
+            border-radius: 2px;
+
+            &::-webkit-slider-thumb {
+              opacity: 0;
+              transform: scale(0.5);
+              -webkit-appearance: none;
+              appearance: none;
+              width: 12px;
+              height: 12px;
+              border-radius: 100%;
+              background: var(--keyColor);
+              cursor: default;
+              transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+            }
+          }
+        }
+      }
+
+    }
+
+    .app-chrome--left {
+      width: 30%;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .playback-controls {
+        .artwork {
+          width: var(--chromeHeight2);
+          height: var(--chromeHeight2);
+          margin: 0px 6px 0px 0px;
+          box-shadow: unset;
+          border: 0px;
+
+          .mediaitem-artwork,
+          img {
+            border-radius: 0px;
+            box-shadow: unset;
+            border: 0px;
+          }
+        }
+
+        .playback-info {
+          align-items: flex-start;
+          margin: 6px;
+
+          .song-name {
+            text-align: left;
+            font-size: 15px;
+            font-weight: initial;
+            width: 100%;
+            -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
+          }
+
+          .song-artist-album {
+            width: 100%;
+            -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
+          }
+
+          .audio-type {
+            margin: 0px;
+          }
+
+          .song-artist-album-content {
+            text-align: left;
+            font-size: 12px;
+          }
+        }
+
+
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        border: 0px;
+      }
+
+      flex: 0 0 auto;
+    }
+
+    .app-chrome--right {
+      width: 30%;
+      flex: 0 0 auto;
+    }
+  }
+}