some ui tweaks

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

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/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: 32px;
+      padding-left: 40px;
       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,20 +1016,30 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   align-items: center;
   -webkit-app-region: no-drag;
   height: auto;
-}
 
-.app-chrome .app-chrome-item.generic {
-  width: 50px;
-  opacity: 0.70;
-}
+  &.collapseLibrary {
+    .md-btn {
+      font-family: "codicon";
+      font-size: 1em;
+      padding: 5px 12px;
+      background: transparent;
+      border: 0;
+    }
+  }
 
-.app-chrome .app-chrome-item.volume {
-  width: 100px;
-  margin-right: 6px;
-}
+  &.generic {
+    width: 50px;
+    opacity: 0.70;
+  }
 
-.app-chrome .app-chrome-item.search {
-  margin-right: 6px;
+  &.volume {
+    width: 100px;
+    margin-right: 6px;
+  }
+
+  &.search {
+    margin-right: 6px;
+  }
 }
 
 .volume-button {

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"