summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorMaxim Devaev <[email protected]>2022-10-05 13:43:25 +0300
committerMaxim Devaev <[email protected]>2022-10-05 13:43:25 +0300
commitb3c7340504cacba50bba2cb4ba4817d3085edaf7 (patch)
treeb7bd8b4c1dee089337193db1c6d4728a001ffc30 /web
parent808cd020182820c603a7146d2f0e51f718da1322 (diff)
improved mobile keyboard layout
Diffstat (limited to 'web')
-rw-r--r--web/kvm/index.html310
-rw-r--r--web/kvm/window-keyboard.pug279
-rw-r--r--web/kvm/window-stream.pug28
-rw-r--r--web/share/css/keypad.css38
4 files changed, 439 insertions, 216 deletions
diff --git a/web/kvm/index.html b/web/kvm/index.html
index 26c798d1..6d64ec5a 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -772,21 +772,26 @@
<div class="keypad" id="stream-mouse-buttons" align="center">
<div class="keypad-block">
<div class="keypad-row">
- <div class="key wide-4 left small" data-code="left"><span>Mouse<br>Left</span></div>
- <div class="modifier wide-2 left small" data-code="left"><span><b>&bull;</b><br>&larr; Hold</span></div>
- <div class="empty-key" style="width:10px"></div>
- <div class="key wide-2 left small" data-code="middle"><span>Mouse<br>Middle</span></div>
- <div class="modifier wide-2 left small" data-code="middle"><span><b>&bull;</b><br>&larr; Hold</span></div>
- <div class="empty-key" style="width:10px"></div>
- <div class="modifier wide-2 right small" data-code="right"><span><b>&bull;</b><br>Hold &rarr;</span></div>
- <div class="key wide-4 right small" data-code="right"><span>Mouse<br>Right</span></div>
- </div>
- <div class="keypad-row" style="display:none">
- <div class="key wide-4 left small" data-code="up"><span>Mouse<br>Up/Back</span></div>
- <div class="modifier wide-2 left small" data-code="up"><span><b>&bull;</b><br>&larr; Hold</span></div>
- <div class="empty-key" style="width:10px"></div>
- <div class="modifier wide-2 right small" data-code="down"><span><b>&bull;</b><br>Hold &rarr;</span></div>
- <div class="key wide-4 right small" data-code="down"><span>Mouse<br>Down/Fw</span></div>
+ <div class="key wide-3 left rounded-left" data-code="left">
+ <div class="label">Left</div>
+ </div>
+ <div class="modifier left small rounded-right" data-code="left">
+ <div class="label"><b>&bull;</b><br>Hold</div>
+ </div>
+ <div class="empty" style="width:15px"></div>
+ <div class="key wide-1 left rounded-left" data-code="middle">
+ <div class="label">Mid</div>
+ </div>
+ <div class="modifier left small rounded-right" data-code="middle">
+ <div class="label"><b>&bull;</b><br>Hold</div>
+ </div>
+ <div class="empty" style="width:15px"></div>
+ <div class="modifier right small rounded-left" data-code="right">
+ <div class="label"><b>&bull;</b><br>Hold</div>
+ </div>
+ <div class="key wide-3 right rounded-right" data-code="right">
+ <div class="label">Right</div>
+ </div>
</div>
</div>
</div>
@@ -803,53 +808,74 @@
<div class="label">Esc
</div>
</div>
- <div class="empty-key" style="width:24px"></div>
+ <div class="spacer-fixed"></div>
+ <div class="empty " style="width:24px">
+ <div class="label">&nbsp;</div>
+ </div>
+ <div class="spacer"></div>
<div class="key small" data-code="F1">
<div class="label">F1
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="F2">
<div class="label">F2
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="F3">
<div class="label">F3
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="F4">
<div class="label">F4
</div>
</div>
- <div class="empty-key" style="width:10px"></div>
+ <div class="spacer"></div>
+ <div class="empty " style="width:10px">
+ <div class="label">&nbsp;</div>
+ </div>
+ <div class="spacer"></div>
<div class="key small" data-code="F5">
<div class="label">F5
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="F6">
<div class="label">F6
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="F7">
<div class="label">F7
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="F8">
<div class="label">F8
</div>
</div>
- <div class="empty-key" style="width:10px"></div>
+ <div class="spacer"></div>
+ <div class="empty " style="width:10px">
+ <div class="label">&nbsp;</div>
+ </div>
+ <div class="spacer"></div>
<div class="key small" data-code="F9">
<div class="label">F9
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="F10">
<div class="label">F10
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="F11">
<div class="label">F11
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="F12">
<div class="label">F12
</div>
@@ -861,217 +887,266 @@
<div class="label">~<br>`
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit1">
<div class="label">!<br>1
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit2">
<div class="label">@<br>2
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit3">
<div class="label">#<br>3
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit4">
<div class="label">$<br>4
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit5">
<div class="label">%<br>5
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit6">
<div class="label">^<br>6
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit7">
<div class="label">&amp;<br>7
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit8">
<div class="label">*<br>8
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit9">
<div class="label">(<br>9
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit0">
<div class="label">)<br>0
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Minus">
<div class="label">_<br>-
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Equal">
<div class="label">+<br>=
</div>
</div>
- <div class="key wide-2 right" data-code="Backspace">
+ <div class="spacer-fixed"></div>
+ <div class="key wide-1 right" data-code="Backspace">
<div class="label">&#8612;
</div>
</div>
</div>
<div class="keypad-row">
- <div class="key wide-2 left" data-code="Tab">
+ <div class="key wide-1 left" data-code="Tab">
<div class="label">&#8676;<br>&#8677;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key single" data-code="KeyQ">
<div class="label">Q
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyW">
<div class="label">W
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyE">
<div class="label">E
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyR">
<div class="label">R
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyT">
<div class="label">T
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyY">
<div class="label">Y
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyU">
<div class="label">U
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyI">
<div class="label">I
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyO">
<div class="label">O
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyP">
<div class="label">P
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="BracketLeft">
<div class="label">{<br>[
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="BracketRight">
<div class="label">}<br>]
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Backslash">
<div class="label">|<br>&bsol;
</div>
</div>
</div>
<div class="keypad-row">
- <div class="key wide-3 left small" data-code="CapsLock">
+ <div class="key wide-2 left small" data-code="CapsLock">
<div class="label"><img class="inline-lamp hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"><br> Caps Lock
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key single" data-code="KeyA">
<div class="label">A
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyS">
<div class="label">S
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyD">
<div class="label">D
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyF">
<div class="label">F
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyG">
<div class="label">G
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyH">
<div class="label">H
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyJ">
<div class="label">J
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyK">
<div class="label">K
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyL">
<div class="label">L
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Semicolon">
<div class="label">:<br>;
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Quote">
<div class="label">"<br>'
</div>
</div>
- <div class="key wide-3 right small" data-code="Enter">
+ <div class="spacer-fixed"></div>
+ <div class="key wide-2 right small" data-code="Enter">
<div class="label">Enter<br>&crarr;
</div>
</div>
</div>
<div class="keypad-row">
- <div class="modifier wide-4 left small" data-code="ShiftLeft">
+ <div class="modifier wide-3 left small" data-code="ShiftLeft">
<div class="label"><b>&bull;</b><br>Shift
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key single" data-code="KeyZ">
<div class="label">Z
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyX">
<div class="label">X
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyC">
<div class="label">C
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyV">
<div class="label">V
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyB">
<div class="label">B
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyN">
<div class="label">N
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyM">
<div class="label">M
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Comma">
<div class="label">&lt;<br>,
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Period">
<div class="label">&gt;<br>.
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Slash">
<div class="label">?<br>/
</div>
</div>
- <div class="modifier wide-4 right small" data-code="ShiftRight">
+ <div class="spacer-fixed"></div>
+ <div class="modifier wide-3 right small" data-code="ShiftRight">
<div class="label"><b>&bull;</b><br>Shift
</div>
</div>
@@ -1081,26 +1156,32 @@
<div class="label"><b>&bull;</b><br>Ctrl
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="modifier wide-1 left small" data-code="MetaLeft">
<div class="label"><b>&bull;</b><br>Win
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="modifier wide-1 left small" data-code="AltLeft">
<div class="label"><b>&bull;</b><br>Alt
</div>
</div>
- <div class="key wide-5" data-code="Space">
+ <div class="spacer-fixed"></div>
+ <div class="key wide-4" data-code="Space">
<div class="label">
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="modifier wide-1 right small" data-code="AltRight">
<div class="label"><b>&bull;</b><br>Alt
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="modifier wide-1 right small" data-code="MetaRight">
<div class="label"><b>&bull;</b><br>Win
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="modifier wide-1 right small" data-code="ControlRight">
<div class="label"><b>&bull;</b><br>Ctrl
</div>
@@ -1113,10 +1194,12 @@
<div class="label"><b>&bull;</b><br>Pt/Sq
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="ScrollLock">
<div class="label"><img class="inline-lamp hid-keyboard-scroll-led led-gray" src="/share/svg/led-square.svg"><br> ScrLk
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="Pause">
<div class="label">P/Brk
</div>
@@ -1128,10 +1211,12 @@
<div class="label">Ins
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="Home">
<div class="label">Home
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="PageUp">
<div class="label">PgUp
</div>
@@ -1142,10 +1227,12 @@
<div class="label">Del
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="End">
<div class="label">End
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="PageDown">
<div class="label">PgDn
</div>
@@ -1153,22 +1240,30 @@
</div>
<div class="keypad-row"></div>
<div class="keypad-row">
- <div class="empty-key"></div>
+ <div class="empty ">
+ <div class="label">&nbsp;</div>
+ </div>
+ <div class="spacer"></div>
<div class="key " data-code="ArrowUp">
<div class="label">&uarr;
</div>
</div>
- <div class="empty-key"></div>
+ <div class="spacer-fixed"></div>
+ <div class="empty ">
+ <div class="label">&nbsp;</div>
+ </div>
</div>
<div class="keypad-row">
<div class="key " data-code="ArrowLeft">
<div class="label">&larr;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key " data-code="ArrowDown">
<div class="label">&darr;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key " data-code="ArrowRight">
<div class="label">&rarr;
</div>
@@ -1177,15 +1272,20 @@
</div>
<div class="keypad-block">
<div class="keypad-row">
- <div class="empty-key"></div>
+ <div class="empty small">
+ <div class="label">&nbsp;</div>
+ </div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="IntlYen">
<div class="label">Yen
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="IntlBackslash">
<div class="label">N/US
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="Power">
<div class="label">PWR
</div>
@@ -1197,14 +1297,17 @@
<div class="label"><img class="inline-lamp hid-keyboard-num-led led-gray" src="/share/svg/led-square.svg"><br> NmLk
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key " data-code="NumpadDivide">
<div class="label">/
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key " data-code="NumpadMultiply">
<div class="label">*
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key " data-code="NumpadSubtract">
<div class="label">-
</div>
@@ -1215,29 +1318,37 @@
<div class="label">7<br>Home
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="Numpad8">
<div class="label">8<br>&uarr;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="Numpad9">
<div class="label">9<br>PgUp
</div>
</div>
- <div class="empty-key"></div>
+ <div class="spacer-fixed"></div>
+ <div class="empty ">
+ <div class="label">&nbsp;</div>
+ </div>
</div>
<div class="keypad-row">
<div class="key small" data-code="Numpad4">
<div class="label">4<br>&larr;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="Numpad5">
<div class="label">5<br><br>
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="Numpad6">
<div class="label">6<br>&rarr;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key " data-code="NumpadAdd">
<div class="label">+
</div>
@@ -1248,26 +1359,36 @@
<div class="label">1<br>End
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="Numpad2">
<div class="label">2<br>&darr;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="Numpad3">
<div class="label">3<br>PgDn
</div>
</div>
- <div class="empty-key"></div>
+ <div class="spacer-fixed"></div>
+ <div class="empty ">
+ <div class="label">&nbsp;</div>
+ </div>
</div>
<div class="keypad-row">
<div class="key small" data-code="Numpad0">
<div class="label">0<br>Ins
</div>
</div>
- <div class="empty-key"></div>
+ <div class="spacer-fixed"></div>
+ <div class="empty ">
+ <div class="label">&nbsp;</div>
+ </div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="NumpadDecimal">
<div class="label">.<br>Del
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="NumpadEnter">
<div class="label">Ent
</div>
@@ -1278,85 +1399,93 @@
<div class="keypad" id="keyboard-mobile" align="center">
<div class="keypad-block">
<div class="keypad-row">
- <div class="key margin-0 small" data-code="Escape">
+ <div class="key small" data-code="Escape">
<div class="label">Esc
</div>
</div>
- <div class="empty-key" style="width:1px"></div>
- <div class="key wide-0 margin-0 small" data-code="F1">
+ <div class="spacer"></div>
+ <div class="key wide-0 small rounded-left" data-code="F1">
<div class="label">F1
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F2">
+ <div class="key wide-0 small rounded-none" data-code="F2">
<div class="label">F2
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F3">
+ <div class="key wide-0 small rounded-none" data-code="F3">
<div class="label">F3
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F4">
+ <div class="key wide-0 small rounded-right" data-code="F4">
<div class="label">F4
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F5">
+ <div class="spacer-fixed"></div>
+ <div class="key wide-0 small rounded-left" data-code="F5">
<div class="label">F5
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F6">
+ <div class="key wide-0 small rounded-none" data-code="F6">
<div class="label">F6
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F7">
+ <div class="key wide-0 small rounded-none" data-code="F7">
<div class="label">F7
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F8">
+ <div class="key wide-0 small rounded-right" data-code="F8">
<div class="label">F8
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F9">
+ <div class="spacer-fixed"></div>
+ <div class="key wide-0 small rounded-left" data-code="F9">
<div class="label">F9
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F10">
+ <div class="key wide-0 small rounded-none" data-code="F10">
<div class="label">F10
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F11">
+ <div class="key wide-0 small rounded-none" data-code="F11">
<div class="label">F11
</div>
</div>
- <div class="key wide-0 margin-0 small" data-code="F12">
+ <div class="key wide-0 small rounded-right" data-code="F12">
<div class="label">F12
</div>
</div>
- <div class="empty-key" style="width:2px"></div>
- <div class="modifier margin-0 small" data-code="PrintScreen">
+ <div class="spacer-fixed"></div>
+ <div class="modifier small" data-code="PrintScreen">
<div class="label"><b>&bull;</b><br>Pt/Sq
</div>
</div>
- <div class="key margin-0 small" data-code="ScrollLock">
+ <div class="spacer"></div>
+ <div class="key small" data-code="ScrollLock">
<div class="label"><img class="inline-lamp hid-keyboard-scroll-led led-gray" src="/share/svg/led-square.svg"><br> ScrLk
</div>
</div>
- <div class="key margin-0 small" data-code="Pause">
+ <div class="spacer"></div>
+ <div class="key small" data-code="Pause">
<div class="label">P/Brk
</div>
</div>
- <div class="key margin-0 small" data-code="Insert">
+ <div class="spacer"></div>
+ <div class="key small" data-code="Insert">
<div class="label">Ins
</div>
</div>
- <div class="key margin-0 small" data-code="Home">
+ <div class="spacer"></div>
+ <div class="key small" data-code="Home">
<div class="label">Home
</div>
</div>
- <div class="key margin-0 small" data-code="End">
+ <div class="spacer"></div>
+ <div class="key small" data-code="End">
<div class="label">End
</div>
</div>
- <div class="key margin-0 small" data-code="Delete">
+ <div class="spacer"></div>
+ <div class="key small" data-code="Delete">
<div class="label">Del
</div>
</div>
@@ -1366,224 +1495,275 @@
<div class="label">~<br>`
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit1">
<div class="label">!<br>1
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit2">
<div class="label">@<br>2
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit3">
<div class="label">#<br>3
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit4">
<div class="label">$<br>4
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit5">
<div class="label">%<br>5
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit6">
<div class="label">^<br>6
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit7">
<div class="label">&amp;<br>7
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit8">
<div class="label">*<br>8
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit9">
<div class="label">(<br>9
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Digit0">
<div class="label">)<br>0
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Minus">
<div class="label">_<br>-
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Equal">
<div class="label">+<br>=
</div>
</div>
- <div class="key wide-3 right" data-code="Backspace" style="width:101px">
+ <div class="spacer"></div>
+ <div class="key wide-2 right" data-code="Backspace" style="width:101px">
<div class="label">&#8612;
</div>
</div>
</div>
<div class="keypad-row">
- <div class="key wide-2 left" data-code="Tab">
+ <div class="key wide-1 left" data-code="Tab">
<div class="label">&#8676;<br>&#8677;
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyQ">
<div class="label">Q
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyW">
<div class="label">W
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyE">
<div class="label">E
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyR">
<div class="label">R
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyT">
<div class="label">T
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyY">
<div class="label">Y
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyU">
<div class="label">U
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyI">
<div class="label">I
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyO">
<div class="label">O
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyP">
<div class="label">P
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="BracketLeft">
<div class="label">{<br>[
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="BracketRight">
<div class="label">}<br>]
</div>
</div>
- <div class="key wide-2 left" data-code="Backslash" style="width:78px">
+ <div class="spacer"></div>
+ <div class="key wide-1 left" data-code="Backslash" style="width:78px">
<div class="label">|<br>&bsol;
</div>
</div>
</div>
<div class="keypad-row">
- <div class="key wide-3 left small" data-code="CapsLock">
+ <div class="key wide-2 left small" data-code="CapsLock">
<div class="label"><img class="inline-lamp hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"><br> Caps Lock
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyA">
<div class="label">A
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyS">
<div class="label">S
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyD">
<div class="label">D
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyF">
<div class="label">F
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyG">
<div class="label">G
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyH">
<div class="label">H
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyJ">
<div class="label">J
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyK">
<div class="label">K
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyL">
<div class="label">L
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Semicolon">
<div class="label">:<br>;
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Quote">
<div class="label">`<br>'
</div>
</div>
- <div class="key wide-4 right small" data-code="Enter" style="width:116px">
+ <div class="spacer"></div>
+ <div class="key wide-3 right small" data-code="Enter" style="width:116px">
<div class="label">Enter<br>&crarr;
</div>
</div>
</div>
<div class="keypad-row">
- <div class="modifier wide-4 left small" data-code="ShiftLeft">
+ <div class="modifier wide-3 left small" data-code="ShiftLeft">
<div class="label"><b>&bull;</b><br>Shift
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyZ">
<div class="label">Z
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyX">
<div class="label">X
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyC">
<div class="label">C
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyV">
<div class="label">V
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyB">
<div class="label">B
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyN">
<div class="label">N
</div>
</div>
+ <div class="spacer"></div>
<div class="key single" data-code="KeyM">
<div class="label">M
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Comma">
- <div class="label">lt;<br>,
+ <div class="label">&lt;<br>,
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Period">
<div class="label">&gt;<br>.
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Slash">
<div class="label">?<br>/
</div>
</div>
+ <div class="spacer"></div>
<div class="key small" data-code="PageUp">
<div class="label">PgUp
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key " data-code="ArrowUp">
<div class="label">&uarr;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key small" data-code="PageDown">
<div class="label">PgDn
</div>
@@ -1594,42 +1774,52 @@
<div class="label"><b>&bull;</b><br>Ctrl
</div>
</div>
+ <div class="spacer"></div>
<div class="modifier wide-1 left small" data-code="MetaLeft">
<div class="label"><b>&bull;</b><br>Win
</div>
</div>
+ <div class="spacer"></div>
<div class="modifier wide-1 left small" data-code="AltLeft">
<div class="label"><b>&bull;</b><br>Alt
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="Space" style="width:190px">
<div class="label">
</div>
</div>
+ <div class="spacer"></div>
<div class="modifier right small" data-code="AltRight">
<div class="label"><b>&bull;</b><br>Alt
</div>
</div>
+ <div class="spacer"></div>
<div class="modifier right small" data-code="MetaRight">
<div class="label"><b>&bull;</b><br>Win
</div>
</div>
+ <div class="spacer"></div>
<div class="modifier right small" data-code="ShiftRight">
<div class="label"><b>&bull;</b><br>Shift
</div>
</div>
+ <div class="spacer"></div>
<div class="modifier right small" data-code="ControlRight">
<div class="label"><b>&bull;</b><br>Ctrl
</div>
</div>
+ <div class="spacer"></div>
<div class="key " data-code="ArrowLeft">
<div class="label">&larr;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key " data-code="ArrowDown">
<div class="label">&darr;
</div>
</div>
+ <div class="spacer-fixed"></div>
<div class="key " data-code="ArrowRight">
<div class="label">&rarr;
</div>
diff --git a/web/kvm/window-keyboard.pug b/web/kvm/window-keyboard.pug
index 7346e88c..2a1191f0 100644
--- a/web/kvm/window-keyboard.pug
+++ b/web/kvm/window-keyboard.pug
@@ -1,16 +1,29 @@
-mixin key(code, classes="", width=0)
+mixin key(spacer, code, classes="", width=0)
div(data-code=code, class=`key ${classes}`, style=(width ? `width:${width}px` : ""))
div(class="label")
block
+ if spacer == 1
+ div(class="spacer")
+ else if spacer == 2
+ div(class="spacer-fixed")
-mixin modifier(code, classes="", width=0)
+mixin modifier(spacer, code, classes="", width=0)
div(data-code=code class=`modifier ${classes}` style=(width ? `width:${width}px` : ""))
div(class="label")
| #[b &bull;]#[br]
block
+ if spacer == 1
+ div(class="spacer")
+ else if spacer == 2
+ div(class="spacer-fixed")
-mixin empty_key(width=0)
- div(class="empty-key" style=(width ? `width:${width}px` : ""))
+mixin empty(spacer, classes="", width=0)
+ div(class=`empty ${classes}` style=(width ? `width:${width}px` : ""))
+ div(class="label") &nbsp;
+ if spacer == 1
+ div(class="spacer")
+ else if spacer == 2
+ div(class="spacer-fixed")
mixin lamp(cls)
img(class=`inline-lamp ${cls} led-gray` src=`${svg_dir}/led-square.svg`)
@@ -23,173 +36,181 @@ div(id="keyboard-window" class="window")
div(id="keyboard-desktop" class="keypad" align="center")
div(class="keypad-block")
div(class="keypad-row")
- +key("Escape", "small") Esc
- +empty_key(24)
+ +key(2, "Escape", "small") Esc
+ +empty(1, "", 24)
each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"]
- +key(key, "small") #{key}
+ +key((key != "F12" ? 1 : 0), key, "small") #{key}
if key == "F4" || key == "F8"
- +empty_key(10)
+ +empty(1, "", 10)
hr
div(class="keypad-row")
- +key("Backquote") ~#[br]`
+ +key(1, "Backquote") ~#[br]`
each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
- +key(`Digit${index + 1}`) #{key}#[br]#{index + 1}
- +key("Digit0") )#[br]0
- +key("Minus") _#[br]-
- +key("Equal") +#[br]=
- +key("Backspace", "wide-2 right") &#8612;
+ +key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1}
+ +key(1, "Digit0") )#[br]0
+ +key(1, "Minus") _#[br]-
+ +key(2, "Equal") +#[br]=
+ +key(0, "Backspace", "wide-1 right") &#8612;
div(class="keypad-row")
- +key("Tab", "wide-2 left") &#8676;#[br]&#8677;
+ +key(2, "Tab", "wide-1 left") &#8676;#[br]&#8677;
each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
- +key(`Key${key}`, "single") #{key}
- +key("BracketLeft") {#[br][
- +key("BracketRight") }#[br]]
- +key("Backslash") |#[br]&bsol;
+ +key(1, `Key${key}`, "single") #{key}
+ +key(1, "BracketLeft") {#[br][
+ +key(1, "BracketRight") }#[br]]
+ +key(0, "Backslash") |#[br]&bsol;
div(class="keypad-row")
- +key("CapsLock", "wide-3 left small")
+ +key(2, "CapsLock", "wide-2 left small")
+lamp("hid-keyboard-caps-led")
| #[br] Caps Lock
each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
- +key(`Key${key}`, "single") #{key}
- +key("Semicolon") :#[br];
- +key("Quote") "#[br]'
- +key("Enter", "wide-3 right small") Enter#[br]&crarr;
+ +key(1, `Key${key}`, "single") #{key}
+ +key(1, "Semicolon") :#[br];
+ +key(2, "Quote") "#[br]'
+ +key(0, "Enter", "wide-2 right small") Enter#[br]&crarr;
div(class="keypad-row")
- +modifier("ShiftLeft", "wide-4 left small") Shift
+ +modifier(2, "ShiftLeft", "wide-3 left small") Shift
each key in ["Z", "X", "C", "V", "B", "N", "M"]
- +key(`Key${key}`, "single") #{key}
- +key("Comma") &lt;#[br],
- +key("Period") &gt;#[br].
- +key("Slash") ?#[br]/
- +modifier("ShiftRight", "wide-4 right small") Shift
- div(class="keypad-row")
- +modifier("ControlLeft", "wide-1 left small") Ctrl
- +modifier("MetaLeft", "wide-1 left small") Win
- +modifier("AltLeft", "wide-1 left small") Alt
- +key("Space", "wide-5")
- +modifier("AltRight", "wide-1 right small") Alt
- +modifier("MetaRight", "wide-1 right small") Win
- +modifier("ControlRight", "wide-1 right small") Ctrl
+ +key(1, `Key${key}`, "single") #{key}
+ +key(1, "Comma") &lt;#[br],
+ +key(1, "Period") &gt;#[br].
+ +key(2, "Slash") ?#[br]/
+ +modifier(0, "ShiftRight", "wide-3 right small") Shift
+ div(class="keypad-row")
+ +modifier(2, "ControlLeft", "wide-1 left small") Ctrl
+ +modifier(2, "MetaLeft", "wide-1 left small") Win
+ +modifier(2, "AltLeft", "wide-1 left small") Alt
+ +key(2, "Space", "wide-4")
+ +modifier(2, "AltRight", "wide-1 right small") Alt
+ +modifier(2, "MetaRight", "wide-1 right small") Win
+ +modifier(0, "ControlRight", "wide-1 right small") Ctrl
div(class="keypad-block")
div(class="keypad-row")
- +modifier("PrintScreen", "small") Pt/Sq
- +key("ScrollLock", "small")
+ +modifier(2, "PrintScreen", "small") Pt/Sq
+ +key(2, "ScrollLock", "small")
+lamp("hid-keyboard-scroll-led")
| #[br] ScrLk
- +key("Pause", "small") P/Brk
+ +key(0, "Pause", "small") P/Brk
hr
div(class="keypad-row")
- +key("Insert", "small") Ins
- +key("Home", "small") Home
- +key("PageUp", "small") PgUp
+ +key(2, "Insert", "small") Ins
+ +key(2, "Home", "small") Home
+ +key(0, "PageUp", "small") PgUp
div(class="keypad-row")
- +key("Delete", "small") Del
- +key("End", "small") End
- +key("PageDown", "small") PgDn
+ +key(2, "Delete", "small") Del
+ +key(2, "End", "small") End
+ +key(0, "PageDown", "small") PgDn
div(class="keypad-row")
div(class="keypad-row")
- +empty_key()
- +key("ArrowUp") &uarr;
- +empty_key()
+ +empty(1, "")
+ +key(2, "ArrowUp") &uarr;
+ +empty(0, "")
div(class="keypad-row")
- +key("ArrowLeft") &larr;
- +key("ArrowDown") &darr;
- +key("ArrowRight") &rarr;
+ +key(2, "ArrowLeft") &larr;
+ +key(2, "ArrowDown") &darr;
+ +key(0, "ArrowRight") &rarr;
div(class="keypad-block")
div(class="keypad-row")
- +empty_key()
- +key("IntlYen", "small") Yen
- +key("IntlBackslash", "small") N/US
- +key("Power", "small") PWR
+ +empty(2, "small")
+ +key(2, "IntlYen", "small") Yen
+ +key(2, "IntlBackslash", "small") N/US
+ +key(0, "Power", "small") PWR
hr
div(class="keypad-row")
- +key("NumLock", "small")
+ +key(2, "NumLock", "small")
+lamp("hid-keyboard-num-led")
| #[br] NmLk
- +key("NumpadDivide") /
- +key("NumpadMultiply") *
- +key("NumpadSubtract") -
- div(class="keypad-row")
- +key("Numpad7", "small") 7#[br]Home
- +key("Numpad8", "small") 8#[br]&uarr;
- +key("Numpad9", "small") 9#[br]PgUp
- +empty_key()
- div(class="keypad-row")
- +key("Numpad4", "small") 4#[br]&larr;
- +key("Numpad5", "small") 5#[br]#[br]
- +key("Numpad6", "small") 6#[br]&rarr;
- +key("NumpadAdd") +
- div(class="keypad-row")
- +key("Numpad1", "small") 1#[br]End
- +key("Numpad2", "small") 2#[br]&darr;
- +key("Numpad3", "small") 3#[br]PgDn
- +empty_key()
- div(class="keypad-row")
- +key("Numpad0", "small") 0#[br]Ins
- +empty_key()
- +key("NumpadDecimal", "small") .#[br]Del
- +key("NumpadEnter", "small") Ent
+ +key(2, "NumpadDivide") /
+ +key(2, "NumpadMultiply") *
+ +key(0, "NumpadSubtract") -
+ div(class="keypad-row")
+ +key(2, "Numpad7", "small") 7#[br]Home
+ +key(2, "Numpad8", "small") 8#[br]&uarr;
+ +key(2, "Numpad9", "small") 9#[br]PgUp
+ +empty(0, "")
+ div(class="keypad-row")
+ +key(2, "Numpad4", "small") 4#[br]&larr;
+ +key(2, "Numpad5", "small") 5#[br]#[br]
+ +key(2, "Numpad6", "small") 6#[br]&rarr;
+ +key(0, "NumpadAdd") +
+ div(class="keypad-row")
+ +key(2, "Numpad1", "small") 1#[br]End
+ +key(2, "Numpad2", "small") 2#[br]&darr;
+ +key(2, "Numpad3", "small") 3#[br]PgDn
+ +empty(0, "")
+ div(class="keypad-row")
+ +key(2, "Numpad0", "small") 0#[br]Ins
+ +empty(2, "")
+ +key(2, "NumpadDecimal", "small") .#[br]Del
+ +key(0, "NumpadEnter", "small") Ent
div(id="keyboard-mobile" class="keypad" align="center")
div(class="keypad-block")
div(class="keypad-row")
- +key("Escape", "margin-0 small") Esc
- +empty_key(1)
- each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"]
- +key(key, "wide-0 margin-0 small") #{key}
- +empty_key(2)
- +modifier("PrintScreen", "margin-0 small") Pt/Sq
- +key("ScrollLock", "margin-0 small")
+ +key(1, "Escape", "small") Esc
+ +key(0, "F1", "wide-0 small rounded-left") F1
+ +key(0, "F2", "wide-0 small rounded-none") F2
+ +key(0, "F3", "wide-0 small rounded-none") F3
+ +key(2, "F4", "wide-0 small rounded-right") F4
+ +key(0, "F5", "wide-0 small rounded-left") F5
+ +key(0, "F6", "wide-0 small rounded-none") F6
+ +key(0, "F7", "wide-0 small rounded-none") F7
+ +key(2, "F8", "wide-0 small rounded-right") F8
+ +key(0, "F9", "wide-0 small rounded-left") F9
+ +key(0, "F10", "wide-0 small rounded-none") F10
+ +key(0, "F11", "wide-0 small rounded-none") F11
+ +key(2, "F12", "wide-0 small rounded-right") F12
+ +modifier(1, "PrintScreen", "small") Pt/Sq
+ +key(1, "ScrollLock", "small")
+lamp("hid-keyboard-scroll-led")
| #[br] ScrLk
- +key("Pause", "margin-0 small") P/Brk
- +key("Insert", "margin-0 small") Ins
- +key("Home", "margin-0 small") Home
- +key("End", "margin-0 small") End
- +key("Delete", "margin-0 small") Del
+ +key(1, "Pause", "small") P/Brk
+ +key(1, "Insert", "small") Ins
+ +key(1, "Home", "small") Home
+ +key(1, "End", "small") End
+ +key(0, "Delete", "small") Del
div(class="keypad-row")
- +key("Backquote") ~#[br]`
+ +key(1, "Backquote") ~#[br]`
each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
- +key(`Digit${index + 1}`) #{key}#[br]#{index + 1}
- +key("Digit0") )#[br]0
- +key("Minus") _#[br]-
- +key("Equal") +#[br]=
- +key("Backspace", "wide-3 right", 101) &#8612;
+ +key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1}
+ +key(1, "Digit0") )#[br]0
+ +key(1, "Minus") _#[br]-
+ +key(1, "Equal") +#[br]=
+ +key(0, "Backspace", "wide-2 right", 101) &#8612;
div(class="keypad-row")
- +key("Tab", "wide-2 left") &#8676;<br>&#8677;
+ +key(1, "Tab", "wide-1 left") &#8676;<br>&#8677;
each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
- +key(`Key${key}`, "single") #{key}
- +key("BracketLeft") {#[br][
- +key("BracketRight") }#[br]]
- +key("Backslash", "wide-2 left", 78) |#[br]&bsol;
+ +key(1, `Key${key}`, "single") #{key}
+ +key(1, "BracketLeft") {#[br][
+ +key(1, "BracketRight") }#[br]]
+ +key(0, "Backslash", "wide-1 left", 78) |#[br]&bsol;
div(class="keypad-row")
- +key("CapsLock", "wide-3 left small")
+ +key(1, "CapsLock", "wide-2 left small")
+lamp("hid-keyboard-caps-led")
| #[br] Caps Lock
each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
- +key(`Key${key}`, "single") #{key}
- +key("Semicolon") :#[br];
- +key("Quote") `#[br]'
- +key("Enter", "wide-4 right small", 116) Enter#[br]&crarr;
+ +key(1, `Key${key}`, "single") #{key}
+ +key(1, "Semicolon") :#[br];
+ +key(1, "Quote") `#[br]'
+ +key(0, "Enter", "wide-3 right small", 116) Enter#[br]&crarr;
div(class="keypad-row")
- +modifier("ShiftLeft", "wide-4 left small") Shift
+ +modifier(1, "ShiftLeft", "wide-3 left small") Shift
each key in ["Z", "X", "C", "V", "B", "N", "M"]
- +key(`Key${key}`, "single") #{key}
- +key("Comma") lt;#[br],
- +key("Period") &gt;#[br].
- +key("Slash") ?#[br]/
- +key("PageUp", "small") PgUp
- +key("ArrowUp") &uarr;
- +key("PageDown", "small") PgDn
- div(class="keypad-row")
- +modifier("ControlLeft", "wide-1 left small") Ctrl
- +modifier("MetaLeft", "wide-1 left small") Win
- +modifier("AltLeft", "wide-1 left small") Alt
- +key("Space", "", 190)
- +modifier("AltRight", "right small") Alt
- +modifier("MetaRight", "right small") Win
- +modifier("ShiftRight", "right small") Shift
- +modifier("ControlRight", "right small") Ctrl
- +key("ArrowLeft") &larr;
- +key("ArrowDown") &darr;
- +key("ArrowRight") &rarr;
+ +key(1, `Key${key}`, "single") #{key}
+ +key(1, "Comma") &lt;#[br],
+ +key(1, "Period") &gt;#[br].
+ +key(1, "Slash") ?#[br]/
+ +key(2, "PageUp", "small") PgUp
+ +key(2, "ArrowUp") &uarr;
+ +key(0, "PageDown", "small") PgDn
+ div(class="keypad-row")
+ +modifier(1, "ControlLeft", "wide-1 left small") Ctrl
+ +modifier(1, "MetaLeft", "wide-1 left small") Win
+ +modifier(1, "AltLeft", "wide-1 left small") Alt
+ +key(1, "Space", "", 190)
+ +modifier(1, "AltRight", "right small") Alt
+ +modifier(1, "MetaRight", "right small") Win
+ +modifier(1, "ShiftRight", "right small") Shift
+ +modifier(1, "ControlRight", "right small") Ctrl
+ +key(2, "ArrowLeft") &larr;
+ +key(2, "ArrowDown") &darr;
+ +key(0, "ArrowRight") &rarr;
diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug
index ad88d8af..afafd765 100644
--- a/web/kvm/window-stream.pug
+++ b/web/kvm/window-stream.pug
@@ -21,17 +21,17 @@ div(id="stream-window" class="window window-resizable")
div(id="stream-mouse-buttons" class="keypad" align="center")
div(class="keypad-block")
div(class="keypad-row")
- div(data-code="left" class="key wide-4 left small") #[span Mouse#[br]Left]
- div(data-code="left" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold]
- div(class="empty-key" style="width:10px")
- div(data-code="middle" class="key wide-2 left small") #[span Mouse#[br]Middle]
- div(data-code="middle" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold]
- div(class="empty-key" style="width:10px")
- div(data-code="right" class="modifier wide-2 right small") #[span #[b &bull;]#[br]Hold &rarr;]
- div(data-code="right" class="key wide-4 right small") #[span Mouse#[br]Right]
- div(class="keypad-row" style="display:none")
- div(data-code="up" class="key wide-4 left small") #[span Mouse#[br]Up/Back]
- div(data-code="up" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold]
- div(class="empty-key" style="width:10px")
- div(data-code="down" class="modifier wide-2 right small") #[span #[b &bull;]#[br]Hold &rarr;]
- div(data-code="down" class="key wide-4 right small") #[span Mouse#[br]Down/Fw]
+ div(data-code="left" class="key wide-3 left rounded-left")
+ div(class="label") Left
+ div(data-code="left" class="modifier left small rounded-right")
+ div(class="label") #[b &bull;]#[br]Hold
+ div(class="empty" style="width:15px")
+ div(data-code="middle" class="key wide-1 left rounded-left")
+ div(class="label") Mid
+ div(data-code="middle" class="modifier left small rounded-right")
+ div(class="label") #[b &bull;]#[br]Hold
+ div(class="empty" style="width:15px")
+ div(data-code="right" class="modifier right small rounded-left")
+ div(class="label") #[b &bull;]#[br]Hold
+ div(data-code="right" class="key wide-3 right rounded-right")
+ div(class="label") Right
diff --git a/web/share/css/keypad.css b/web/share/css/keypad.css
index 52a4afaf..61d56ada 100644
--- a/web/share/css/keypad.css
+++ b/web/share/css/keypad.css
@@ -33,6 +33,8 @@ div.keypad div.keypad-block:not(:first-child) {
}
div.keypad div.keypad-row {
+ display: flex;
+ flex-wrap: wrap;
white-space: nowrap;
height: 40px;
margin-bottom: 5px;
@@ -41,12 +43,18 @@ div.keypad div.keypad-row:last-child {
margin-bottom: 0;
}
+div.keypad div.keypad-row div.spacer {
+ margin: 2px;
+ flex-grow: 1;
+}
+div.keypad div.keypad-row div.spacer-fixed {
+ margin: 3px;
+}
+
div.keypad div.key,
div.keypad div.modifier,
-div.keypad div.empty-key {
+div.keypad div.empty {
box-sizing: border-box;
- display: inline-block;
- margin-right: 5px;
padding: 0;
width: 40px;
}
@@ -68,6 +76,15 @@ div.keypad div.modifier:hover {
color: var(--cs-key-hovered-fg);
background-color: var(--cs-key-hovered-bg);
}
+div.keypad div.rounded-left {
+ border-radius: 6px 0px 0px 6px !important;
+}
+div.keypad div.rounded-right {
+ border-radius: 0px 6px 6px 0px !important;
+}
+div.keypad div.rounded-none {
+ border-radius: 0px !important;
+}
div.keypad div.pressed {
box-shadow: none;
color: var(--cs-key-pressed-fg) !important;
@@ -79,29 +96,24 @@ div.keypad div.holded {
background-color: var(--cs-key-holded-bg) !important;
}
div.keypad div.key:last-child,
-div.keypad div.empty-key:last-child,
+div.keypad div.empty:last-child,
div.keypad div.modifier:last-child {
margin-right: 0;
}
-div.keypad div.margin-0 {
- margin-right: 0px;
-}
div.keypad div.wide-0 {
- width: 26px;
+ width: 28px;
}
div.keypad div.wide-1 {
width: 61px;
}
div.keypad div.wide-2 {
- width: 64px;
-}
-div.keypad div.wide-3 {
width: 77px;
}
-div.keypad div.wide-4 {
+div.keypad div.wide-3 {
width: 102px;
}
-div.keypad div.wide-5 {
+div.keypad div.wide-4 {
+ flex-grow: 1;
width: 288px;
}
div.keypad div.left {
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 19:58:54 +0000