cider-ui-tests

index.js

@@ -22,7 +22,6 @@ function CreateWindow() {
     //const cider = require("./resources/functions/cider-win")
     //cider.CreateBrowserWindow()
     /** CIDER **/
-
     app.ame.handler.WindowStateHandler(); // Handling the Window
     app.ame.handler.PlaybackStateHandler(); // Playback Change Listener
     app.ame.handler.MediaStateHandler(); // Media Change Listener

resources/cider-ui-tests/index.html

@@ -42,8 +42,8 @@
                         <div class="app-playback-controls">
                             <div class="artwork"></div>
                             <div class="playback-info">
-                                <div class="song-name">Spun</div>
-                                <div class="song-artist">Rezz - Spiral</div>
+                                <div class="song-name">Song Name</div>
+                                <div class="song-artist">Artist - Album</div>
                                 <div class="song-progress">
                                     <input type="range" step="0.01" min="0" max="1500">
                                 </div>
@@ -109,9 +109,15 @@
                         <div class="app-sidebar-header-text">
                             Playlists
                         </div>
-                        <button class="app-sidebar-item">Playist</button>
-                        <button class="app-sidebar-item">Playist</button>
-                        <button class="app-sidebar-item">Playist</button>
+                        <button class="app-sidebar-item" v-for="i in 32">Playist</button>
+                    </div>
+                    <div class="app-sidebar-footer">
+                        <button class="app-sidebar-button" style="width:100%">
+                            <div class="sidebar-user-icon">
+
+                            </div>
+                            <div class="sidebar-user-text">Cider User</div>
+                        </button>
                     </div>
                 </div>
                 <div id="app-content">

resources/cider-ui-tests/index.js

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

resources/cider-ui-tests/style.css

@@ -175,6 +175,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     position: relative;
 }
 
+.search-input:focus {
+    outline: none;
+    border-bottom: 1px solid var(--keyColor);
+}
+
 .search-input--icon {
     content: '';
     width: 100%;
@@ -204,6 +209,39 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     opacity: 0.50;
 }
 
+.app-sidebar-footer {
+    padding: 11px;
+}
+
+.app-sidebar-button {
+    width:100%;
+    padding: 8px;
+    font-family: inherit;
+    display:flex;
+    border-radius: 6px;
+    border: 1px solid rgb(200 200 200 / 5%);
+    background: rgb(100 100 100 / 25%);
+    color: #eee;
+    font-weight: 500;
+    align-items: center;
+}
+
+.app-sidebar-button>.sidebar-user-icon {
+    width: 22px;
+    height: 22px;
+    border-radius: 100%;
+    background: var(--keyColor);
+    margin: 2px;
+    flex: 0 0 auto;
+}
+
+.app-sidebar-button>.sidebar-user-text {
+    width:100%;
+    display:flex;
+    font-size: 16px;
+    margin: 6px 12px;
+}
+
 .app-sidebar-content {
     padding: 8px;
     overflow-y: scroll;
@@ -297,6 +335,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     display: flex;
     justify-content: center;
     align-items: center;
+    -webkit-app-region: no-drag;
 }
 
 .app-chrome .app-chrome-item.generic {
@@ -355,6 +394,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     margin-right: 16px;
     margin-left: 16px;
     image-rendering: -webkit-optimize-contrast;
+    -webkit-app-region: drag;
 }
 
 .app-chrome .app-chrome-item>.window-controls {