Add gaps to layout, remove padding.

diff --git a/src/main/webapp/layouts/en-us-qwerty.xml b/src/main/webapp/layouts/en-us-qwerty.xml
index 9335a8c..34ab1a5 100644 (file)
--- a/src/main/webapp/layouts/en-us-qwerty.xml
+++ b/src/main/webapp/layouts/en-us-qwerty.xml
@@ -18,7 +18,7 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<keyboard lang="en_US" layout="qwerty" size="21">
+<keyboard lang="en_US" layout="qwerty" size="22">
     <row>
         <key>
             <cap keysym="0xFF1B">Esc</cap>
@@ -27,12 +27,15 @@
         <key>
             <cap keysym="0xFFBE">F1</cap>
         </key>
+        <gap size="0.1"/>
         <key>
             <cap keysym="0xFFBF">F2</cap>
         </key>
+        <gap size="0.1"/>
         <key>
             <cap keysym="0xFFC0">F3</cap>
         </key>
+        <gap size="0.1"/>
         <key>
             <cap keysym="0xFFC1">F4</cap>
         </key>
@@ -40,12 +43,15 @@
         <key>
             <cap keysym="0xFFC2">F5</cap>
         </key>
+        <gap size="0.1"/>
         <key>
             <cap keysym="0xFFC3">F6</cap>
         </key>
+        <gap size="0.1"/>
         <key>
             <cap keysym="0xFFC4">F7</cap>
         </key>
+        <gap size="0.1"/>
         <key>
             <cap keysym="0xFFC5">F8</cap>
         </key>
@@ -53,12 +59,15 @@
         <key>
             <cap keysym="0xFFC6">F9</cap>
         </key>
+        <gap size="0.1"/>
         <key>
             <cap keysym="0xFFC7">F10</cap>
         </key>
+        <gap size="0.1"/>
         <key>
             <cap keysym="0xFFC8">F11</cap>
         </key>
+        <gap size="0.1"/>
         <key>
             <cap keysym="0xFFC9">F12</cap>
         </key>
@@ -72,288 +81,354 @@
                 <cap>`</cap>
                 <cap if="shift">~</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>1</cap>
                 <cap if="shift">!</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>2</cap>
                 <cap if="shift">@</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>3</cap>
                 <cap if="shift">#</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>4</cap>
                 <cap if="shift">$</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>5</cap>
                 <cap if="shift">%</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>6</cap>
                 <cap if="shift">^</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>7</cap>
                 <cap if="shift">&amp;</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>8</cap>
                 <cap if="shift">*</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>9</cap>
                 <cap if="shift">(</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>0</cap>
                 <cap if="shift">)</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>-</cap>
                 <cap if="shift">_</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>=</cap>
                 <cap if="shift">+</cap>
             </key>
+            <gap size="0.1"/>
             <key size="2">
                 <cap keysym="0xFF08">Back</cap>
             </key>
         </row>
 
+        <row><gap size="0.1"/></row>
+
         <row>
             <key size="1.5">
                 <cap keysym="0xFF09">Tab</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>q</cap>
                 <cap if="caps">Q</cap>
                 <cap if="shift">Q</cap>
                 <cap if="caps,shift">q</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>w</cap>
                 <cap if="caps">W</cap>
                 <cap if="shift">W</cap>
                 <cap if="caps,shift">w</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>e</cap>
                 <cap if="caps">E</cap>
                 <cap if="shift">E</cap>
                 <cap if="caps,shift">e</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>r</cap>
                 <cap if="caps">R</cap>
                 <cap if="shift">R</cap>
                 <cap if="caps,shift">r</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>t</cap>
                 <cap if="caps">T</cap>
                 <cap if="shift">T</cap>
                 <cap if="caps,shift">t</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>y</cap>
                 <cap if="caps">Y</cap>
                 <cap if="shift">Y</cap>
                 <cap if="caps,shift">y</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>u</cap>
                 <cap if="caps">U</cap>
                 <cap if="shift">U</cap>
                 <cap if="caps,shift">u</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>i</cap>
                 <cap if="caps">I</cap>
                 <cap if="shift">I</cap>
                 <cap if="caps,shift">i</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>o</cap>
                 <cap if="caps">O</cap>
                 <cap if="shift">O</cap>
                 <cap if="caps,shift">o</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>p</cap>
                 <cap if="caps">P</cap>
                 <cap if="shift">P</cap>
                 <cap if="caps,shift">p</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>[</cap>
                 <cap if="shift">{</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>]</cap>
                 <cap if="shift">}</cap>
             </key>
+            <gap size="0.1"/>
             <key size="1.5">
                 <cap>\</cap>
                 <cap if="shift">|</cap>
             </key>
         </row>
+
+        <row><gap size="0.1"/></row>
+
         <row>
-            <key size="1.75">
+            <key size="1.85">
                 <cap modifier="caps" keysym="0xFFE5" sticky="true">Caps</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>a</cap>
                 <cap if="caps">A</cap>
                 <cap if="shift">A</cap>
                 <cap if="caps,shift">a</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>s</cap>
                 <cap if="caps">S</cap>
                 <cap if="shift">S</cap>
                 <cap if="caps,shift">s</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>d</cap>
                 <cap if="caps">D</cap>
                 <cap if="shift">D</cap>
                 <cap if="caps,shift">d</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>f</cap>
                 <cap if="caps">F</cap>
                 <cap if="shift">F</cap>
                 <cap if="caps,shift">f</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>g</cap>
                 <cap if="caps">G</cap>
                 <cap if="shift">G</cap>
                 <cap if="caps,shift">g</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>h</cap>
                 <cap if="caps">H</cap>
                 <cap if="shift">H</cap>
                 <cap if="caps,shift">h</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>j</cap>
                 <cap if="caps">J</cap>
                 <cap if="shift">J</cap>
                 <cap if="caps,shift">j</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>k</cap>
                 <cap if="caps">K</cap>
                 <cap if="shift">K</cap>
                 <cap if="caps,shift">k</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>l</cap>
                 <cap if="caps">L</cap>
                 <cap if="shift">L</cap>
                 <cap if="caps,shift">l</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>;</cap>
                 <cap if="shift">:</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>'</cap>
                 <cap if="shift">"</cap>
             </key>
+            <gap size="0.1"/>
             <key size="2.25">
                 <cap keysym="0xFF0D">Enter</cap>
             </key>
         </row>
+
+        <row><gap size="0.1"/></row>
+
         <row>
-            <key size="2">
+            <key size="2.1">
                 <cap modifier="shift" keysym="0xFFE1">Shift</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>z</cap>
                 <cap if="caps">Z</cap>
                 <cap if="shift">Z</cap>
                 <cap if="caps,shift">z</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>x</cap>
                 <cap if="caps">X</cap>
                 <cap if="shift">X</cap>
                 <cap if="caps,shift">x</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>c</cap>
                 <cap if="caps">C</cap>
                 <cap if="shift">C</cap>
                 <cap if="caps,shift">c</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>v</cap>
                 <cap if="caps">V</cap>
                 <cap if="shift">V</cap>
                 <cap if="caps,shift">v</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>b</cap>
                 <cap if="caps">B</cap>
                 <cap if="shift">B</cap>
                 <cap if="caps,shift">b</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>n</cap>
                 <cap if="caps">N</cap>
                 <cap if="shift">N</cap>
                 <cap if="caps,shift">n</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>m</cap>
                 <cap if="caps">M</cap>
                 <cap if="shift">M</cap>
                 <cap if="caps,shift">m</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>,</cap>
                 <cap if="shift">&lt;</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>.</cap>
                 <cap if="shift">&gt;</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap>/</cap>
                 <cap if="shift">?</cap>
             </key>
-            <key size="3">
+            <gap size="0.1"/>
+            <key size="3.1">
                 <cap modifier="shift" keysym="0xFFE2">Shift</cap>
             </key>
         </row>
+
+        <row><gap size="0.1"/></row>
+
         <row>
-            <key size="1.5">
+            <key size="1.6">
                 <cap modifier="control" keysym="0xFFE3">Ctrl</cap>
             </key>
-            <key size="1.5">
+            <gap size="0.1"/>
+            <key size="1.6">
                 <cap modifier="super" keysym="0xFFEB">Super</cap>
             </key>
-            <key size="1.5">
+            <gap size="0.1"/>
+            <key size="1.6">
                 <cap modifier="alt" keysym="0xFFE9">Alt</cap>
             </key>
-            <key size="6">
+            <gap size="0.1"/>
+            <key size="6.1">
                 <cap> </cap>
             </key>
-            <key size="1.5">
+            <gap size="0.1"/>
+            <key size="1.6">
                 <cap modifier="alt" keysym="0xFFE3">Alt</cap>
             </key>
-            <key size="1.5">
+            <gap size="0.1"/>
+            <key size="1.6">
                 <cap modifier="super" keysym="0xFF67">Menu</cap>
             </key>
-            <key size="1.5">
+            <gap size="0.1"/>
+            <key size="1.6">
                 <cap modifier="control" keysym="0xFFE4">Ctrl</cap>
             </key>
         </row>
@@ -368,20 +443,25 @@
             <key size="1.75">
                 <cap keysym="0xFF63">Ins</cap>
             </key>
+            <gap size="0.1"/>
             <key size="1.75">
                 <cap keysym="0xFF50">Home</cap>
             </key>
+            <gap size="0.1"/>
             <key size="1.75">
                 <cap keysym="0xFF55">PgUp</cap>
             </key>
         </row>
+        <row><gap size="0.1"/></row>
         <row>
             <key size="1.75">
                 <cap keysym="0xFFFF">Del</cap>
             </key>
+            <gap size="0.1"/>
             <key size="1.75">
                 <cap keysym="0xFF57">End</cap>
             </key>
+            <gap size="0.1"/>
             <key size="1.75">
                 <cap keysym="0xFF56">PgDn</cap>
             </key>
@@ -394,13 +474,16 @@
                 <cap keysym="0xFF52">&#x2191;</cap>
             </key>
         </row>
+        <row><gap size="0.1"/></row>
         <row>
             <key>
                 <cap keysym="0xFF51">&#x2190;</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap keysym="0xFF54">&#x2193;</cap>
             </key>
+            <gap size="0.1"/>
             <key>
                 <cap keysym="0xFF53">&#x2192;</cap>
             </key>

diff --git a/src/main/webapp/styles/keyboard.css b/src/main/webapp/styles/keyboard.css
index e5b3c49..aff864a 100644 (file)
--- a/src/main/webapp/styles/keyboard.css
+++ b/src/main/webapp/styles/keyboard.css
@@ -25,7 +25,7 @@
     bottom: 0;
     width: 100%;
     margin: 0;
-    padding: 0.5em;
+    padding: 0;
 
     border-top: 1px solid black;
     background: #222;
@@ -38,6 +38,7 @@
 .guacamole-keyboard {
     display: inline-block;
     width: 100%;
+    
     margin: 0;
     padding: 0;
     cursor: default;
@@ -84,9 +85,14 @@
     border-color: #DD4;
 }
 
+.guacamole-keyboard .guacamole-keyboard-row {
+    line-height: 0;
+}
+
 .guacamole-keyboard .guacamole-keyboard-column {
     display: inline-block;
     text-align: center;
+    vertical-align: top;
 }
 
 .guacamole-keyboard .guacamole-keyboard-gap {