Merge branch 'upcoming' into upcoming

src/renderer/style.less

@@ -1056,7 +1056,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   height: 1.2em;
   line-height: 1.3em;
   overflow: hidden;
-  margin: 0 0 0.5em;
+  margin: 0 0 0 0.25em;
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-artist {
@@ -2058,9 +2058,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .md-btn {
   background: rgba(100, 100, 100, 0.5);
-  padding: 4px 12px;
+  padding: 6px 12px;
   border-radius: 4px;
-  font-size: 13px;
+  font-size: 16px;
   border: 1px solid rgb(100 100 100 / 35%);
   color: #eee;
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
@@ -2094,6 +2094,40 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.md-ico-play {
+  content:url("./assets/playPng.png");
+  width: 10px;
+  height: 12px; 
+  margin-right: 1px;
+  align-self: center;
+}
+
+.md-ico-shuffle {
+  content:url("./assets/shufflePng.png");
+  width: 15px;
+  height: 13px; 
+  margin-right: 1px;
+  align-self: center;
+}
+
+.md-ico-remove {
+  content:url("./assets/feather/x-circlePng.png");
+  width: 16px;
+  height: 16px; 
+  margin-right: 1px;
+  margin-bottom: -1.5px;
+  align-self: center;
+}
+
+.md-ico-add {
+  content:url("./assets/feather/plus-circle-white.svg");
+  width: 16px;
+  height: 16px; 
+  margin-right: 1px;
+  margin-bottom: -1.5px;
+  align-self: center;
+}
+
 .md-select {
   width: 100%;
   padding: 6px;
@@ -2519,6 +2553,107 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+// Podcast Page
+.content-inner.podcasts-page {
+  display: flex;
+  height: calc(100% - var(--navigationBarHeight));
+  padding: 0px;
+
+  .podcast-artwork {
+    width: 200px;
+    margin: 16px auto;
+    height: 200px;
+  }
+
+  .podcasts-list {
+    height: 100%;
+    width: 280px;
+    background: rgb(200 200 200 / 10%);
+    overflow-y: overlay;
+    border-right: 1px solid var(--color2);
+    flex: none;
+    overflow-x: hidden;
+  }
+
+  .episodes-list {
+    height: 100%;
+    width: 100%;
+    background: rgb(200 200 200 / 6%);
+    overflow-y: overlay;
+    overflow-x: hidden;
+
+    .episodes-inline-info {
+      padding: 14px 14px 0px 14px;
+
+      .podcast-show-info {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      .podcast-show-description {
+        margin: 32px 6px;
+        font-size: 0.8rem;
+        white-space: pre-wrap;
+        display:block;
+      }
+
+      .podcast-artwork {
+        width: 120px;
+        margin: 0px auto;
+        height: 120px;
+      }
+    }
+  }
+
+  .podcasts-details {
+    height: 100%;
+    width: 400px;
+    flex: none;
+    background: rgba(200, 200, 200, 0.1);
+    overflow-y: overlay;
+    border-left: 1px solid var(--color2);
+    overflow-x: hidden;
+
+    .podcast-genre {
+      text-align: center;
+      margin: 6px;
+      font-size: 0.8em;
+      font-weight: 500;
+      opacity: 0.8;
+    }
+
+    .podcast-metainfo {
+      text-align: center;
+      font-size: 0.7em;
+      opacity: 0.8;
+    }
+
+    .podcast-header {
+      text-align:center;
+    }
+
+    .podcast-play-btn {
+      width: 50%;
+      display: block;
+      margin: 0 auto;
+    }
+
+    .podcast-description {
+      margin: 12px;
+      font-size: 0.75em;
+      white-space: pre-wrap;
+      display:block;
+    }
+
+    
+  }
+
+}
+
+
+
+
 /* Album / Playlist Page */
 .playlist-page {
   --bgColor: transparent;
@@ -4372,7 +4507,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         height: 1.2em;
         line-height: 1.3em;
         overflow: hidden;
-        margin: 0 0 0.5em;
+        margin: 0 0 0 0.25em;
       }
 
       &:hover {