virtual keyboard key colour fix

SeanArchibald · Mar 26, 2022 · 4f3b27a · 4f3b27a
1 parent f2944a0
commit 4f3b27a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 20 deletions.
diff --git 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
@@ -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)