Adding background to certain keys to create better contrast (#340)

tiny-pilot · Nov 17, 2020 · 8f19c1b · 8f19c1b
1 parent d5657ab
commit 8f19c1b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/app/templates/custom-elements/key.html b/app/templates/custom-elements/key.html
@@ -28,7 +28,7 @@
 
     :host([pressed="true"]) .key {
       outline: 1px solid #333333;
-      background-color: #8f8f8f;
+      background-color: #8f8f8f !important;
     }
 
     .key .content-top {
@@ -47,6 +47,10 @@
       visibility: hidden;
     }
 
+    :host(.accented) .key {
+      background-color: #dbdbdb;
+    }
+
     :host(.key-collapse-half) .key {
       width: 24px;
     }

diff --git a/app/templates/custom-elements/on-screen-keyboard.html b/app/templates/custom-elements/on-screen-keyboard.html
@@ -36,7 +36,7 @@
   <div class="keyboard">
     <div id="keyboard-block-left" class="keyboard-block">
       <div class="keyboard-row keyboard-row-bump">
-        <keyboard-key code="27">Esc</keyboard-key>
+        <keyboard-key class="accented" code="27">Esc</keyboard-key>
         <keyboard-key class="hidden"></keyboard-key>
         <keyboard-key code="112">F1</keyboard-key>
         <keyboard-key code="113">F2</keyboard-key>
@@ -111,12 +111,16 @@
           <span slot="bottom">=</span>
         </keyboard-key>
 
-        <keyboard-key code="8" class="key-extend-full">Backspace</keyboard-key>
+        <keyboard-key code="8" class="key-extend-full accented"
+          >Backspace</keyboard-key
+        >
       </div>
       <!-- end keyboard-row -->
 
       <div class="keyboard-row">
-        <keyboard-key code="9" class="key-extend-full">Tab</keyboard-key>
+        <keyboard-key code="9" class="key-extend-full accented"
+          >Tab</keyboard-key
+        >
         <keyboard-key code="81">Q</keyboard-key>
         <keyboard-key code="87">W</keyboard-key>
         <keyboard-key code="69">E</keyboard-key>
@@ -142,7 +146,9 @@
       </div>
       <!-- end keyboard-row -->
       <div class="keyboard-row">
-        <keyboard-key code="20" class="key-extend-full">Caps Lock</keyboard-key>
+        <keyboard-key code="20" class="key-extend-full accented"
+          >Caps Lock</keyboard-key
+        >
         <keyboard-key code="65">A</keyboard-key>
         <keyboard-key code="83">S</keyboard-key>
         <keyboard-key code="68">D</keyboard-key>
@@ -161,7 +167,9 @@
           <span slot="bottom">'</span>
         </keyboard-key>
 
-        <keyboard-key code="13" class="key-extend-full">Enter</keyboard-key>
+        <keyboard-key code="13" class="key-extend-full accented"
+          >Enter</keyboard-key
+        >
       </div>
       <!-- end keyboard-row -->
 
@@ -170,7 +178,7 @@
           code="16"
           modifier="true"
           location="left"
-          class="shift-modifier key-extend-full-half"
+          class="shift-modifier key-extend-full-half accented"
           >Shift</keyboard-key
         >
 
@@ -197,7 +205,7 @@
           code="16"
           modifier="true"
           location="right"
-          class="shift-modifier key-extend-full-half"
+          class="shift-modifier key-extend-full-half accented"
           >Shift</keyboard-key
         >
       </div>
@@ -208,49 +216,49 @@
           code="17"
           modifier="true"
           location="left"
-          class="ctrl-modifier key-extend-full"
+          class="ctrl-modifier key-extend-full accented"
           >Control</keyboard-key
         >
         <keyboard-key
           code="102"
           modifier="true"
           location="left"
-          class="meta-modifier key-extend-half"
+          class="meta-modifier key-extend-half accented"
           >Meta</keyboard-key
         >
         <keyboard-key
           code="18"
           modifier="true"
-          class="alt-modifier"
+          class="alt-modifier accented"
           location="left"
           >Alt</keyboard-key
         >
         <keyboard-key code="32" class="key-space">Space</keyboard-key>
         <keyboard-key
           code="18"
           modifier="true"
-          class="alt-modifier"
+          class="alt-modifier accented"
           location="right"
           >Alt</keyboard-key
         >
         <keyboard-key
           code="102"
           modifier="true"
           location="right"
-          class="meta-modifier key-extend-half"
+          class="meta-modifier key-extend-half accented"
           >Meta</keyboard-key
         >
         <keyboard-key
           code="93"
           symbolic-value="ContextMenu"
-          class="key-extend-half"
+          class="key-extend-half accented"
           >Menu</keyboard-key
         >
         <keyboard-key
           code="17"
           modifier="true"
           location="right"
-          class="ctrl-modifier key-extend-full"
+          class="ctrl-modifier key-extend-full accented"
           >Control</keyboard-key
         >
       </div>