ui overhaul episode 1

- replaced Inter with Pretendard
- starting overhaul for redmond style
  - moved search bar to the title bar
  - added cast button to bottom chrome
  - moved mini player button to title bar
  - moved playback progress above controls
  - artwork is now spaced out from the bottom corner
  - seperated artist and album text
- made mediaitems overall smaller to show more content
- media items now resize based on window size
- changed color of volume knob
- made default appearance slightly lighter
- made content area darker
- increase size of action buttons

src/renderer/less/elements.less

@@ -897,8 +897,10 @@
 
 /* mediaitem-square */
 .cd-mediaitem-square {
-  width: 220px;
-  height: 238px;
+  --scaleRate: 1.25;
+  --scaleRateArtwork: 1;
+  width: 200px;
+  height: 200px;
   display: inline-flex;
   flex: 0 0 auto;
   flex-direction: column;
@@ -911,8 +913,8 @@
     position: relative;
 
     .artwork {
-      height: 190px;
-      width: 190px;
+      height: 150px;
+      width: 150px;
       background: blue;
       border-radius: var(--mediaItemRadius);
       background: var(--artwork);
@@ -920,7 +922,6 @@
       flex: 0 0 auto;
       margin: 6px;
       cursor: pointer;
-
       .mediaitem-artwork {
         box-shadow: unset;
       }
@@ -993,6 +994,15 @@
     }
   }
 
+  @media (min-width: 1600px) {
+    width: calc(200px * var(--scaleRate));
+    height: calc(200px * var(--scaleRate));
+    .artwork-container>.artwork {
+      width: calc(190px * var(--scaleRateArtwork));
+      height: calc(190px * var(--scaleRateArtwork));
+    }
+  }
+
   .info-rect {
     width: 90%;
     height: 100%;
@@ -1074,8 +1084,6 @@
     background: var(--spcolor);
     height: 298px;
     width: 230px;
-    max-width: 250px;
-    max-height: 500px;
     overflow: hidden;
     position: relative;
     border-radius: calc(var(--mediaItemRadius) * 2);
@@ -1157,6 +1165,15 @@
       pointer-events: none;
       border-radius: inherit;
     }
+
+    //@media (min-width: 1600px) {
+    //  width: calc(230px * 1.25);
+    //  height: calc(298px * 1.25);
+    //  .artwork-container>.artwork {
+    //    width: calc(230px * 1.25);
+    //    height: calc(230px * 1.25);
+    //  }
+    //}
   }
 }
 
@@ -1532,7 +1549,7 @@ input[type=checkbox][switch]:checked:active::before {
   border-radius: 6px;
   font-size: 1em;
   color: inherit;
-  background-size: 14px;
+  background-size: 0.98em;
   background-repeat: no-repeat;
   background-position: center;
   background-color: transparent;
@@ -1563,6 +1580,7 @@ input[type=checkbox][switch]:checked:active::before {
 
 .playback-button--small.cast {
   background-image: url("./assets/cast_white.svg");
+  background-size: 1.25em;
 }
 
 .playback-button--small.miniplayer {