Added easings

resources/cider-ui-tests/ameframework.css

@@ -1,3 +1,8 @@
+:root {
+    --appleEase: cubic-bezier(.42, 0, .58, 1);
+    --appleTransition: .2s var(--appleEase);
+}
+
 /* Simple CSS framework for Apple Music Electron */
 
 .md-labeltext {

resources/cider-ui-tests/index.js

@@ -2,5 +2,8 @@ var app = new Vue({
     el: "#app",
     data: {
         drawertest: false
+    },
+    methods: {
+
     }
 })

resources/cider-ui-tests/style.css

@@ -366,6 +366,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     margin-right: 6px;
 }
 
+.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb {
+    transition: all var(--appleTransition);
+}
+
+.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:hover {
+    background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
+    transform: scale(1.2);
+}
+
+.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:active {
+    background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
+    transform: scale(1);
+}
+
 .app-chrome .app-chrome-item.volume>input[type=range] {
     width:100%;
 }
@@ -385,7 +399,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     width: 14px;
     border-radius: 50%;
     background: rgb(50 50 50);
-    cursor: ew-resize;
+    cursor: default;
     box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
 }