Styled user menu, added info for future about page

resources/cider-ui-tests/style.less

@@ -305,6 +305,23 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   color: #eee;
   font-weight: 500;
   align-items: center;
+
+  &.active {
+    background:rgb(200 200 200 / 15%);
+    animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
+  }
+}
+
+@keyframes usermenuBtnClick {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
 }
 
 .app-sidebar-button>.sidebar-user-icon {
@@ -355,19 +372,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   height: 100%;
 }
 
-.search-hints-container {
+#cmenu() {
+  .container {
     position: absolute;
-  top: 44px;
     width: 100%;
     padding: 10px;
     z-index: 1;
-  .search-hints {
+  }
+  .body {
     background: #242424;
     padding: 6px;
     border-radius: 6px;
     width: 100%;
     box-shadow: var(--mediaItemShadow-Shadow);
-    .search-hint {
+  }
+  .item {
     background: transparent;
     display: block;
     width: 100%;
@@ -384,6 +403,27 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
       background: var(--keyColor);
     }
   }
+}
+
+.search-hints-container {
+  top: 44px;
+  #cmenu.container();
+  .search-hints {
+    #cmenu.body();
+    .search-hint {
+      #cmenu.item();
+    }
+  }
+}
+
+.usermenu-container {
+  bottom: 66px;
+  #cmenu.container();
+  .usermenu-body {
+    #cmenu.body();
+    .usermenu-item {
+      #cmenu.item();
+    }
   }
 }
 

resources/cider-ui-tests/views/main.ejs

@@ -127,13 +127,15 @@
                                @focus="search.showHints = true"
                                @blur="setTimeout(()=>{search.showHints = false}, 100)"
                                v-on:keyup.enter="searchQuery()"
-                               @change="showSearch();" @input="getSearchHints()" placeholder="Search..." v-model="search.term"
+                               @change="showSearch();" @input="getSearchHints()" placeholder="Search..."
+                               v-model="search.term"
                                class="search-input">
                     </div>
                 </div>
                 <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
                     <div class="search-hints">
-                    <button class="search-hint" v-for="hint in search.hints" @click="search.term = hint;search.showHints = false;searchQuery(hint)">
+                        <button class="search-hint" v-for="hint in search.hints"
+                                @click="search.term = hint;search.showHints = false;searchQuery(hint)">
                             {{ hint }}
                         </button>
                     </div>
@@ -163,29 +165,33 @@
                     </button>
                 </div>
                 <transition name="wpfade">
-                    <div class="app-sidebar-content" v-if="chrome.menuOpened">
+                    <div class="usermenu-container" v-if="chrome.menuOpened">
-                        <button class="app-sidebar-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
+                        <div class="usermenu-body">
+                            <button class="usermenu-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
                                 Toggle Personal Info
                             </button>
-                        <button class="app-sidebar-item">
+                            <button class="usermenu-item">
                                 About
                             </button>
-                        <button class="app-sidebar-item">
+                            <button class="usermenu-item">
                                 Discord
                             </button>
-                        <button class="app-sidebar-item">
+                            <button class="usermenu-item">
                                 Settings
                             </button>
-                        <button class="app-sidebar-item">
+                            <button class="usermenu-item">
                                 Sign Out
                             </button>
                         </div>
+                    </div>
                 </transition>
                 <div class="app-sidebar-footer">
                     <input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
                            v-model="mk.volume"
                            v-if="typeof mk.volume != 'undefined'">
                     <button class="app-sidebar-button" style="width:100%"
+                            :class="{active: chrome.menuOpened}"
+                            @blur="chrome.menuOpened = false"
                             @click="chrome.menuOpened = !chrome.menuOpened">
                         <template v-if="chrome.userinfo.attributes">
                             <img class="sidebar-user-icon" loading="lazy"

resources/cider-ui-tests/views/pages/about.ejs

@@ -0,0 +1,19 @@
+Major thanks to the Cider Development Team and all of our contributors.
+
+<p>"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
+                                       target="_blank"
+                                       rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
+    All Rights
+    Reserved.</p>
+
+cryptofyre - Developer - https://github.com/cryptofyre
+Core - Developer - https://github.com/coredev-uk
+Quacksire - Developer - https://github.com/child-duckling
+booploops - Developer - https://github.com/booploops
+vapormusic - Developer - https://github.com/vapormusic
+Void - Social Communications Team - https://twitter.com/MoonyVoid
+NoseySG - Social Communications Team - https://twitter.com/noah_grose
+
+<img class="md-contributors"
+     onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
+     src="https://contrib.rocks/image?repo=ciderapp/Cider"/>