|
@@ -21,10 +21,12 @@
|
|
|
.left { transform: translate(-15px, 0); }
|
|
|
.right { transform: translate(+15px, 0); }
|
|
|
|
|
|
- .shortcut { font-size: smaller; }
|
|
|
+ .shortcut { font-size: 10px; transform: translate(-3px, -1px); }
|
|
|
.layerSym { font-weight: normal; }
|
|
|
.layerMod { font-weight: bold; font-size: 14px; }
|
|
|
- .layerNav { font-weight: bold; transform: translateY(-22.6px); }
|
|
|
+ .layerNav { font-weight: bold; }
|
|
|
+ .layerNav { font-weight: bold; }
|
|
|
+ .right .layerNav { font-weight: normal; }
|
|
|
|
|
|
.layerMod, .colorMod { fill: #333; }
|
|
|
.layerSym, .colorSym { fill: blue; }
|
|
@@ -45,29 +47,31 @@
|
|
|
<g transform="translate(90)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">Q</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">⇥</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">@</text>
|
|
|
</g>
|
|
|
<g transform="translate(150)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">W</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav shortcut">^w</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym">[</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">⇱</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym"><</text>
|
|
|
</g>
|
|
|
<g transform="translate(210)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">E</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">⎗</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym">]</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">↑</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym">></text>
|
|
|
</g>
|
|
|
<g transform="translate(270)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">R</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">⎘</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">⇲</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">$</text>
|
|
|
</g>
|
|
|
<g transform="translate(330)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">T</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">⇞</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">%</text>
|
|
|
</g>
|
|
|
</g>
|
|
@@ -75,25 +79,25 @@
|
|
|
<g transform="translate(390)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">Y</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">⇱</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">/</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">^</text>
|
|
|
</g>
|
|
|
<g transform="translate(450)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">U</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">⇟</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">7</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">&</text>
|
|
|
</g>
|
|
|
<g transform="translate(510)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">I</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">⇞</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym">"</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">8</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym">*</text>
|
|
|
</g>
|
|
|
<g transform="translate(570)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">O</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">⇲</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">9</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">'</text>
|
|
|
</g>
|
|
|
<g transform="translate(630)">
|
|
@@ -109,7 +113,7 @@
|
|
|
<g transform="translate(90)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">A</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav shortcut">^a</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav shortcut">all</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">{</text>
|
|
|
</g>
|
|
|
<g transform="translate(150)">
|
|
@@ -117,7 +121,7 @@
|
|
|
<rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
<text x="12.8" y="20.6" class="level2">S</text>
|
|
|
<text x="12.8" y="43.4" class="layerMod">⌘</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav shortcut">^s</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">←</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">(</text>
|
|
|
</g>
|
|
|
<g transform="translate(210)">
|
|
@@ -125,7 +129,7 @@
|
|
|
<rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
<text x="12.8" y="20.6" class="level2">D</text>
|
|
|
<text x="12.8" y="43.4" class="layerMod">⌥</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">⇤</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">↓</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">)</text>
|
|
|
</g>
|
|
|
<g transform="translate(270)">
|
|
@@ -133,28 +137,29 @@
|
|
|
<rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
<text x="12.8" y="20.6" class="level2">F</text>
|
|
|
<text x="12.8" y="43.4" class="layerMod">⌃</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">⇥</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">→</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">}</text>
|
|
|
</g>
|
|
|
<g transform="translate(330)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">G</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym">_</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">⇟</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym"> = </text>
|
|
|
</g>
|
|
|
</g>
|
|
|
<g class="right">
|
|
|
<g transform="translate(390)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">H</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">←</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym">|</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">-</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym">\</text>
|
|
|
</g>
|
|
|
<g transform="translate(450)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
<text x="12.8" y="20.6" class="level2">J</text>
|
|
|
<text x="12.8" y="43.4" class="layerMod">⌃</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">↓</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">4</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">+</text>
|
|
|
</g>
|
|
|
<g transform="translate(510)">
|
|
@@ -162,7 +167,7 @@
|
|
|
<rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
<text x="12.8" y="20.6" class="level2">K</text>
|
|
|
<text x="12.8" y="43.4" class="layerMod">⌥</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">↑</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">5</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">-</text>
|
|
|
</g>
|
|
|
<g transform="translate(570)">
|
|
@@ -170,13 +175,14 @@
|
|
|
<rect width="26" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
<text x="12.8" y="20.6" class="level2">L</text>
|
|
|
<text x="12.8" y="43.4" class="layerMod">⌘</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">→</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym">*</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">6</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym">/</text>
|
|
|
</g>
|
|
|
<g transform="translate(630)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="43.4" class="level1">;</text>
|
|
|
<text x="12.8" y="20.6" class="level2">:</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">0</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">!</text>
|
|
|
</g>
|
|
|
</g>
|
|
@@ -188,7 +194,7 @@
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<g>
|
|
|
<text x="12.8" y="20.6" class="level2">Z</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav shortcut">^z</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav shortcut">undo</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">~</text>
|
|
|
</g>
|
|
|
</g>
|
|
@@ -196,30 +202,31 @@
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<g>
|
|
|
<text x="12.8" y="20.6" class="level2">X</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav shortcut">^x</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym"><</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav shortcut">cut</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym">[</text>
|
|
|
</g>
|
|
|
</g>
|
|
|
<g transform="translate(210)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<g>
|
|
|
<text x="12.8" y="20.6" class="level2">C</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav shortcut">^c</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym">></text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav shortcut">copy</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym">]</text>
|
|
|
</g>
|
|
|
</g>
|
|
|
<g transform="translate(270)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<g>
|
|
|
<text x="12.8" y="20.6" class="level2">V</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav shortcut">^v</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym"> = </text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav shortcut">paste</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym">_</text>
|
|
|
</g>
|
|
|
</g>
|
|
|
<g transform="translate(330)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<g>
|
|
|
<text x="12.8" y="20.6" class="level2">B</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">⇤</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">#</text>
|
|
|
</g>
|
|
|
</g>
|
|
@@ -228,36 +235,33 @@
|
|
|
<g transform="translate(390)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">N</text>
|
|
|
- <text x="30.0" y="43.4" class="layerNav">🖰</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">←</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym">\</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">,</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym">|</text>
|
|
|
</g>
|
|
|
<g transform="translate(450)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">M</text>
|
|
|
- <text x="30.0" y="43.4" class="layerNav">🖰</text>
|
|
|
- <text x="42.0" y="43.4" class="layerNav">↓</text>
|
|
|
- <text x="38.0" y="43.4" class="layerSym">/</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">1</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerSym">!</text>
|
|
|
</g>
|
|
|
<g transform="translate(510)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="43.4" class="level1">,</text>
|
|
|
<text x="12.8" y="20.6" class="level2"><</text>
|
|
|
- <text x="30.0" y="43.4" class="layerNav">🖰</text>
|
|
|
- <text x="42.0" y="43.4" class="layerNav">↑</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">2</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">;</text>
|
|
|
</g>
|
|
|
<g transform="translate(570)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="43.4" class="level1">.</text>
|
|
|
<text x="12.8" y="20.6" class="level2">></text>
|
|
|
- <text x="30.0" y="43.4" class="layerNav">🖰</text>
|
|
|
- <text x="38.0" y="43.4" class="layerNav">→</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">3</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">:</text>
|
|
|
</g>
|
|
|
<g transform="translate(630)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">?</text>
|
|
|
+ <text x="38.0" y="20.6" class="layerNav">.</text>
|
|
|
<text x="38.0" y="43.4" class="layerSym">?</text>
|
|
|
</g>
|
|
|
</g>
|
|
@@ -267,21 +271,20 @@
|
|
|
<g transform="translate(180)">
|
|
|
<rect width="82" height="52" rx="5" ry="5"/>
|
|
|
<rect width="41" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
- <text x="20.5" y="42.8" class="layerMod shortcut">shift</text>
|
|
|
- <text x="61.5" y="42.8" class="layerMod shortcut colorSym">num</text>
|
|
|
- <text x="61.5" y="42.8" class="layerNav" style="font-size: 14px;">⌦</text>
|
|
|
+ <text x="20.5" y="42.8" class="layerMod">shift</text>
|
|
|
+ <text x="61.5" y="20.6" class="layerNav" style="font-size: 14px;">⌦</text>
|
|
|
<text x="20.5" y="20.6" class="level2" style="font-size: 14px;">⌫</text>
|
|
|
</g>
|
|
|
<g transform="translate(270)">
|
|
|
<rect width="232" height="52" rx="5" ry="5"/>
|
|
|
- <rect width="116" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
- <text x="58.0" y="42.8" class="layerMod colorNav shortcut">navigation</text>
|
|
|
+ <rect width="41" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
+ <text x="20.5" y="42.8" class="layerMod colorNav">nav</text>
|
|
|
</g>
|
|
|
<g transform="translate(510)">
|
|
|
<rect width="82" height="52" rx="5" ry="5"/>
|
|
|
<rect width="41" height="26" rx="2" ry="2" class="dualKey"/>
|
|
|
- <text x="20.5" y="42.8" class="layerMod colorSym shortcut">sym</text>
|
|
|
- <text x="61.5" y="42.8" class="layerNav">⎋</text>
|
|
|
+ <text x="20.5" y="42.8" class="layerMod colorSym">sym</text>
|
|
|
+ <text x="61.5" y="20.6" class="layerNav" style="font-weight: normal;">⎋</text>
|
|
|
<text x="20.5" y="22.6" class="level2">⏎</text>
|
|
|
</g>
|
|
|
</g>
|