From 4f3b27a6aa67064c0d0b2192a5bb1082472d43fd Mon Sep 17 00:00:00 2001
From: Sean Archibald <sean@sevish.com>
Date: Sat, 26 Mar 2022 21:54:22 +0000
Subject: [PATCH] virtual keyboard key colour fix

---
 src/css/style.css | 21 ++++-----------------
 src/js/ui.js      |  6 +++---
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index ad045a0..41a1a3e 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -248,24 +248,11 @@ div#splash-center img {
   color: #888;
 }
 
-#virtual-keyboard .key.white {
-  background: white;
-}
-#virtual-keyboard .key.white:hover {
-  background: #f4faf2;
-}
-#virtual-keyboard .key.white.active {
-  background: #dff0d8 !important;
-}
-
-#virtual-keyboard .key.black {
-  background: black;
-}
-#virtual-keyboard .key.black:hover {
-  background: #1e1e1e;
+#virtual-keyboard .key:hover {
+  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,0,0,0.5) 50%, rgba(255,255,255,0) 100%);
 }
-#virtual-keyboard .key.black.active {
-  background: #70786c !important;
+#virtual-keyboard .key.active {
+  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,255,0,0.5) 50%, rgba(0,0,0,0) 100%);
 }
 
 /*
diff --git a/src/js/ui.js b/src/js/ui.js
index 23c75c4..7409b36 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -30,8 +30,8 @@ function touch_kbd_open() {
   jQuery('#virtual-keyboard td').each(function (index) {
     // clear content of cell
     jQuery(this).empty()
-    // remove any classes that might be on the cell
-    jQuery(this).attr('class', '')
+    // reset any classes that might be on the cell
+    jQuery(this).attr('class', 'key')
   })
 
   // display tuning info on virtual keys
@@ -47,7 +47,7 @@ function touch_kbd_open() {
     var keynum = (midinote - tuning_table['base_midi_note']).mod(key_colors.length)
 
     // set the color of the key
-    this.classList.add('key', key_colors[keynum])
+    this.style.backgroundColor = key_colors[keynum]
   })
 
   state.set('mobile menu visible', false)