Added drawer, added mouse overs

index.js

@@ -19,8 +19,8 @@ function CreateWindow() {
 
     app.win = app.ame.win.CreateBrowserWindow() // Create the BrowserWindow
     /** CIDER **/
-    // const cider = require("./resources/functions/cider-win")
+    const cider = require("./resources/functions/cider-win")
-    // cider.CreateBrowserWindow()
+    cider.CreateBrowserWindow()
     /** CIDER **/
     app.ame.handler.WindowStateHandler(); // Handling the Window
     app.ame.handler.PlaybackStateHandler(); // Playback Change Listener

resources/cider-ui-tests/index.html

@@ -18,7 +18,7 @@
         <div id="app-main">
             <div class="app-chrome">
                 <div class="app-chrome--left">
-                    <div class="app-chrome-item">
+                    <div class="app-chrome-item full-height">
                         <div class="app-title"></div>
                     </div>
                     <div class="app-chrome-item">
@@ -72,7 +72,7 @@
                     <div class="app-chrome-item generic">
                         <button class="playback-button--small lyrics"></button>
                     </div>
-                    <div class="app-chrome-item">
+                    <div class="app-chrome-item full-height">
                         <div class="window-controls">
                             <div class="minimize"></div>
                             <div class="minmax"></div>
@@ -140,9 +140,13 @@
                     </div>
                     <br>
                     <br>
+                    <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
                     <button class="md-btn">Button</button>
                     <button class="md-btn md-btn-primary">Button</button>
                 </div>
+                <div class="app-drawer" v-if="drawertest">
+
+                </div>
             </div>
         </div>
         <div class="bg-artwork"></div>

resources/cider-ui-tests/index.js

@@ -1,6 +1,6 @@
 var app = new Vue({
     el: "#app",
     data: {
-        
+        drawertest: false
     }
 })

resources/cider-ui-tests/style.css

@@ -140,9 +140,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 #app-sidebar {
     /* background-color: var(--color1); */
     height:100%;
-    width:320px;
+    width:260px;
     display:flex;
     flex-direction: column;
+    flex: 0 0 auto;
 }
 #app-content {
     background-color: var(--color2);
@@ -157,6 +158,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     border-top: 1px solid rgb(0 0 0 / 25%);
 }
 
+
+.app-drawer {
+    width: 300px;
+    border-left: 1px solid rgb(0 0 0 / 25%);
+    flex: 0 0 auto;
+    border-top: 1px solid rgb(0 0 0 / 25%);
+}
+
 .search-input-container {
     position: relative;
 }
@@ -287,7 +296,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .app-sidebar-item.active {
     border: 1px solid rgb(200 200 200 / 5%);
     background: rgb(200 200 200 / 15%);
-    transform: scale(0.98);
+    transform: scale(1);
     transition: transform 0s;
 }
 
@@ -344,10 +353,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     justify-content: center;
     align-items: center;
     -webkit-app-region: no-drag;
+    height: auto;
 }
 
 .app-chrome .app-chrome-item.generic {
-    width: 60px;
+    width: 50px;
     opacity: 0.70;
 }
 
@@ -391,6 +401,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     width: 60px;
 }
 
+.app-chrome .app-chrome-item.full-height {
+    height: 100%;
+}
+
 .app-chrome .app-chrome-item>.app-title {
     width: 100px;
     font-size: 13px;
@@ -496,7 +510,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     height:12px;
     border-radius: 2px;
     background: var(--keyColor);
-    cursor: pointer;
+    cursor: ew-resize;
 }
 
 .app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range]::-moz-range-thumb  {
@@ -660,7 +674,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .playback-button {
     font-size: 2em;
     width: 40px;
-    height: 64px;
+    height: 36px;
     padding: 0px;
     background: transparent;
     border: 0px;
@@ -670,6 +684,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     background-position: center;
     background-repeat: no-repeat;
     opacity: 0.70;
+    border-radius: 6px;
 }
 
 .playback-button:active {
@@ -677,6 +692,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .playback-button--small {
+    border-radius: 6px;
     font-size: 1em;
     color: inherit;
     background-size: 14px;
@@ -689,6 +705,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     box-shadow: unset;
 }
 
+.playback-button:hover, .playback-button--small:hover {
+    background-color: rgb(200 200 200 / 10%);
+}
+
+.playback-button:active, .playback-button--small:active {
+    transform: scale(0.9);
+}
+
 .playback-button--small.active {
     background-color: rgb(200 200 200 / 10%);
 }