some ui tweaks

- scrollbar collapse is now on chrome-top as show/hide library
- adjusted rollover effect for nav playback-buttons

src/i18n/en_US.json

@@ -212,6 +212,8 @@
   "podcast.episodes": "Episodes",
   "podcast.playEpisode": "Play Episode",
   "podcast.website": "Podcast Website",
+  "action.hideLibrary": "Hide Library",
+  "action.showLibrary": "Show Library",
   "action.cut": "Cut",
   "action.paste": "Paste",
   "action.selectAll": "Select All",

src/i18n/source/en_US.json

@@ -212,6 +212,12 @@
   "podcast.episodes": "Episodes",
   "podcast.playEpisode": "Play Episode",
   "podcast.website": "Podcast Website",
+  "action.hideLibrary": "Hide Library",
+  "action.showLibrary": "Show Library",
+  "action.cut": "Cut",
+  "action.paste": "Paste",
+  "action.selectAll": "Select All",
+  "action.delete": "Delete",
   "action.edit": "Edit",
   "action.done": "Done",
   "action.editTracklist": "Edit Tracklist",
@@ -592,11 +598,12 @@
   "oobe.general.text": "",
   "oobe.audio.title": "Audio",
   "oobe.audio.subtitle": "",
-  "oobe.audio.text": "",
+  "oobe.audio.text": "Cider features a custom tuned and designed audio stack that delivers a rich high quality audio experience.\nFeaturing Cider Adrenaline, Atmosphere Realizer, and Spatialized Audio.\nTo enable this functionality \"Advanced Audio Functionality\" must be enabled.\nEnabling Advanced Audio Functionality will give you access to these enhancements in the Cider Audio Labs, found in the app settings.",
   "oobe.audio.advancedFunctionality": "",
   "oobe.visual.title": "Visual",
   "oobe.visual.subtitle": "",
   "oobe.visual.text": "",
+  "oobe.visual.layout.text": "Cider features two window different layouts.\nMaverick is an iTunes like layout with the player at the top of the window.\nMojave is a new spin created by the Cider Collective.\n\nYou can change the layout any time in the settings.",
   "oobe.visual.suggestingThemes": "Theming is a great way to personalize your experience. Here are a few we suggest: ",
   "oobe.visual.suggestingThemes.subtext": "(These themes will be downloaded from GitHub)",
   "oobe.visual.suggestingThemes.default": "Cider",

src/renderer/index.js

@@ -135,7 +135,7 @@ document.addEventListener("musickitloaded", function () {
       function waitForApp() {
         if (typeof app.init !== "undefined") {
           app.init();
-          if (app.cfg.visual.window_background_style == "mica") {
+          if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
             app.spawnMica();
           }
         } else {

src/renderer/less/codicon.css

@@ -6,7 +6,7 @@
 @font-face {
 	font-family: "codicon";
 	font-display: block;
-	src: url("codicon.ttf") format("truetype");
+	src: url("./codicon.ttf?f06865699f1720ee6ca6e0a4aa084d76") format("truetype");
 }
 
 .codicon[class*='codicon-'] {
@@ -43,6 +43,10 @@
 	opacity: 0.5;
 }
 
+.codicon-modifier-hidden {
+	opacity: 0;
+}
+
 /* custom speed & easing for loading icon */
 .codicon-loading {
 	animation-duration: 1s !important;
@@ -551,3 +555,7 @@
 .codicon-arrow-circle-left:before { content: "\ebfd" }
 .codicon-arrow-circle-right:before { content: "\ebfe" }
 .codicon-arrow-circle-up:before { content: "\ebff" }
+.codicon-layout-sidebar-right-off:before { content: "\ec00" }
+.codicon-layout-panel-off:before { content: "\ec01" }
+.codicon-layout-sidebar-left-off:before { content: "\ec02" }
+.codicon-blank:before { content: "\ec03" }

src/renderer/less/elements.less

@@ -393,11 +393,13 @@
   align-items    : center;
   border-radius  : var(--mediaItemRadius);
   position       : relative;
+
   &:hover {
     .heart-icon {
       display: none;
     }
   }
+
   .popular {
     background-image : url(assets/star.svg);
     background-repeat: no-repeat;
@@ -522,27 +524,35 @@
     10% {
       box-shadow: inset 0 -4px 0
     }
+
     20% {
       box-shadow: inset 0 -10px 0
     }
+
     30% {
       box-shadow: inset 0 -12px 0
     }
+
     40% {
       box-shadow: inset 0 -8px 0
     }
+
     50% {
       box-shadow: inset 0 -4px 0
     }
+
     60% {
       box-shadow: inset 0 -6px 0
     }
+
     80% {
       box-shadow: inset 0 -12px 0
     }
+
     90% {
       box-shadow: inset 0 -6px 0
     }
+
     to {
       box-shadow: inset 0 -2px 0
     }
@@ -952,6 +962,7 @@
       flex           : 0 0 auto;
       margin         : 6px;
       cursor         : pointer;
+
       .mediaitem-artwork {
         box-shadow: unset;
       }
@@ -1027,6 +1038,7 @@
   @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));
@@ -1093,6 +1105,7 @@
     @media (min-width: 1600px) {
       width : calc(240px * var(--scaleRate));
       height: calc(200px * var(--scaleRate));
+
       .artwork-container>.artwork {
         width : calc(212px * var(--scaleRateArtwork));
         height: calc(120px * var(--scaleRateArtwork));
@@ -1175,6 +1188,7 @@
       font-size      : 0.9em;
       font-weight    : 500;
       z-index        : 1;
+
       &+.subtitle {
         max-height: none !important;
         margin-top: -0.5em;
@@ -1580,10 +1594,28 @@ input[type=checkbox][switch]:checked:active::before {
   background-repeat  : no-repeat;
   opacity            : 0.70;
   border-radius      : 6px;
+  position: relative;
+
+  &:before {
+   content: "";
+    display: block;
+    top:0;left:0;right:0;bottom:0;
+    background: var(--selected);
+    border-radius: inherit;
+    position: absolute; 
+    opacity: 0;
+    z-index: -1;
+    transform: scale(0.5);
+    pointer-events: none;
+    transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
   }
 
-.playback-button:active {
+  &:hover {
-  transform: scale(0.95);
+    &:before {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
 }
 
 .playback-button--small {
@@ -1599,20 +1631,40 @@ input[type=checkbox][switch]:checked:active::before {
   border             : 0px;
   box-shadow         : unset;
   opacity            : 0.70;
+  position: relative;
+
+  &:before {
+    content: "";
+     display: block;
+     top:0;left:0;right:0;bottom:0;
+     background: var(--selected);
+     border-radius: inherit;
+     position: absolute; 
+     opacity: 0;
+     z-index: -1;
+     transform: scale(0.5);
+     pointer-events: none;
+     transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
    }
  
+   &:hover {
+     &:before {
+       transform: scale(1);
+       opacity: 1;
+     }
+   }
+}
+.playback-button--small.active {
+  background-color: rgb(200 200 200 / 25%);
+}
 .playback-button:hover,
 .playback-button--small:hover {
-  background-color: rgb(200 200 200 / 10%);
+  // background-color: var(--selected);
 }
 
 .playback-button:active,
 .playback-button--small:active {
-  transform: scale(0.9);
+  background-color: var(--selected-click);
-}
-
-.playback-button--small.active {
-  background-color: rgb(200 200 200 / 25%);
 }
 
 .playback-button--small.search {
@@ -1655,6 +1707,12 @@ input[type=checkbox][switch]:checked:active::before {
   background-position: center;
 }
 
+.playback-button.collapseLibrary {
+  font-family: "codicon";
+  font-size  : 1em;
+  color: var(--textColor);
+}
+
 .playback-button.pause {
   background-image   : url('./assets/cider-icons/pause.svg');
   background-size    : 38px;
@@ -1678,10 +1736,13 @@ input[type=checkbox][switch]:checked:active::before {
   background-size    : 60%;
   background-position: center;
 }
-.playback-button.disabled, .playback-button--small.disabled {
+
+.playback-button.disabled,
+.playback-button--small.disabled {
   opacity       : 0.25 !important;
   pointer-events: none;
   transform     : none !important;
+
   &:hover {
     background-color: transparent !important;
     transform       : none !important;
@@ -1694,6 +1755,7 @@ input[type=checkbox][switch]:checked:active::before {
     justify-content: center;
     align-items    : center;
     color          : white;
+
     >svg {
       height        : 16px;
       width         : 16px;
@@ -1907,6 +1969,7 @@ input[type=checkbox][switch]:checked:active::before {
       border-radius: inherit;
     }
   }
+
   .artist-chip__name {
     pointer-events: none;
   }
@@ -1990,6 +2053,7 @@ input[type=checkbox][switch]:checked:active::before {
 // fancy pills
 .nav-pills {
   position: relative;
+
   .nav-link {
     transition: transform .3s var(--appleEase);
     position  : relative;
@@ -2095,6 +2159,7 @@ input[type=checkbox][switch]:checked:active::before {
   display              : grid;
   grid-template-columns: repeat(3, 1fr);
   gap                  : 16px;
+
   .grouping-btn {
     padding      : 16px;
     appearance   : none;
@@ -2126,8 +2191,7 @@ input[type=checkbox][switch]:checked:active::before {
   }
 }
 
-.app-sidebar-header 
+.app-sidebar-header .search-input-container .search-hints-container {
-.search-input-container .search-hints-container {
   top    : 38px;
   padding: 3px;
 }
@@ -2137,15 +2201,14 @@ input[type=checkbox][switch]:checked:active::before {
     .heart-icon {
       left: 7px;
     }
+
     .cd-mediaitem-list-item {
       padding-left: 25px;
     }
   }
 
   &.library-artists-page {
-    .inner-container 
+    .inner-container .list-container .podcasts-list {
-    .list-container 
-    .podcasts-list {
       background : rgba(27, 27, 27);
       padding-top: 14px;
       width      : 272px;
@@ -2153,6 +2216,7 @@ input[type=checkbox][switch]:checked:active::before {
       .cd-mediaitem-list-item {
         margin-left: 10px;
       }
+
       .cd-mediaitem-list-item:hover {
         width: 96%;
       }

src/renderer/style.less

@@ -530,18 +530,15 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
   &.collapseTab {
     display:flex;
-    padding:0px;
+    padding:6px;
+    border:0;
     >button {
       appearance: none;
-      border:0px;
       width: 100%;
       position: relative;
-      padding: 12px;
+      padding-left: 40px;
-      padding-left: 32px;
       text-align: left;
       font-family: inherit;
-      background-color: var(--color2);
-      color: var(--textColor);
       &:hover {
         background-color: var(--selected);
       }
@@ -549,17 +546,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
         background-color: var(--selected-click);
       }
       &:after {
-        content: '';
+        content: '';
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 32px;
+        width: 46px;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         font-weight: bold;
-        font-size: 1.2em;
+        font-size: 1em;
         font-family: "codicon";
       }
     }
@@ -1019,21 +1016,31 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   align-items: center;
   -webkit-app-region: no-drag;
   height: auto;
+
+  &.collapseLibrary {
+    .md-btn {
+      font-family: "codicon";
+      font-size: 1em;
+      padding: 5px 12px;
+      background: transparent;
+      border: 0;
+    }
   }
 
-.app-chrome .app-chrome-item.generic {
+  &.generic {
     width: 50px;
     opacity: 0.70;
   }
 
-.app-chrome .app-chrome-item.volume {
+  &.volume {
     width: 100px;
     margin-right: 6px;
   }
 
-.app-chrome .app-chrome-item.search {
+  &.search {
     margin-right: 6px;
   }
+}
 
 .volume-button {
   background-image: url("./assets/feather/volume-2.svg");

src/renderer/views/app/chrome-top.ejs

@@ -53,6 +53,16 @@
           <%- include('../svg/chevron-right.svg') %>
         </button>
       </div>
+      <div class="app-chrome-item" v-if="cfg.advanced.experiments.includes('collapseSidebar')">
+        <button 
+        class="playback-button collapseLibrary" 
+        v-b-tooltip.hover
+        :title="chrome.sidebarCollapsed ? getLz('action.showLibrary') : getLz('action.hideLibrary')"
+        @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
+          <span v-if="chrome.sidebarCollapsed"></span>
+          <span v-else></span>
+        </button>
+      </div>
       <div
         class="vdiv display--large"
         v-if="getThemeDirective('windowLayout') != 'twopanel'"

src/renderer/views/app/sidebar.ejs

@@ -183,11 +183,6 @@
         </sidebar-playlist>
       </template>
     </div>
-    <div class="app-sidebar-footer collapseTab" v-if="cfg.advanced.experiments.includes('collapseSidebar')">
-      <button @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
-        Collapse
-      </button>
-    </div>
     <div class="app-sidebar-footer display--small app-sidebar-footer--controls">
       <div
         class="app-playback-controls"