From 8d1fdb2fc02c66e8f1600d449df16393dcc74e30 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 25 Nov 2021 09:59:19 -0800
Subject: [PATCH] Added easings

---
 resources/cider-ui-tests/ameframework.css |  5 +++++
 resources/cider-ui-tests/index.js         |  3 +++
 resources/cider-ui-tests/style.css        | 16 +++++++++++++++-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/resources/cider-ui-tests/ameframework.css b/resources/cider-ui-tests/ameframework.css
index a7b524a3..ec7826da 100644
--- a/resources/cider-ui-tests/ameframework.css
+++ b/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 {
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 360c7e3c..564c6bda 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -2,5 +2,8 @@ var app = new Vue({
     el: "#app",
     data: {
         drawertest: false
+    },
+    methods: {
+
     }
 })
\ No newline at end of file
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index 3edff028..e7db7d70 100644
--- a/resources/cider-ui-tests/style.css
+++ b/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);
 }