redesign episode 2

src/renderer/less/directives.less

@@ -1,3 +1,13 @@
+@colorMixRate: 1%;
+@transparencyRate: 50%;
+
+@keyColor  : #fc3c44;
+@ciderColor: #ff2654;
+@baseColor: #1e1e1e;
+@baseColorMix: mix(@baseColor, transparent, @transparencyRate);
+@sidebarColor: #2e2e2e;
+@sidebarColorMix: mix(@sidebarColor, transparent, @transparencyRate);
+
 #app.navbar {
   --navigationBarHeight: 38px;
 }
@@ -8,13 +18,57 @@
   --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
 
   .app-chrome {
+
+    &:not(.chrome-bottom) {
+      .app-chrome--center {
+        flex: 1;
+        .top-nav-group {
+          background: @baseColor;
+          border: 1px solid lighten(@baseColor, 8);
+          border-radius: 10px;
+          display: flex;
+          height: 32px;
+  
+          .app-sidebar-item {
+              background-color: @baseColor;
+              border-radius: 10px!important;
+              border:0px;
+              min-width: 120px;
+              padding:6px;
+              justify-content: center;
+              align-items: center;
+              margin: 0px;
+              height: 100%;
+
+              &:after {
+                display: none;
+              }
+  
+              &:hover {
+                  background-color: lighten(@baseColor, @colorMixRate * 5);
+              }
+  
+              &.active {
+                  background-color: lighten(@baseColor, @colorMixRate * 5);
+              }
+      
+              &.md-btn-primary {
+                  box-shadow: 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
+                  background-color: lighten(@baseColor, @colorMixRate * 5);
+                  z-index: 1;
+              }
+          }
+      }
+      }
+    }
+
     .app-mainmenu {
       width: 30px;
       height: 30px;
     }
 
     .search-input {
-      width: 300px;
+      width: 180px;
     }
 
     height: var(--chromeHeight1);