diff options
| author | Devaev Maxim <[email protected]> | 2018-07-25 10:34:44 +0300 |
|---|---|---|
| committer | Devaev Maxim <[email protected]> | 2018-07-25 10:34:44 +0300 |
| commit | 922e303c7045e2b1da8116611e53efb8e8d77e08 (patch) | |
| tree | 68d98aa1504a69d548a431073a9763f2a67fbb56 /kvmd/web/css/keyboard.css | |
| parent | 22c060956e37a9cb1733a3e7f808048779a5a72a (diff) | |
virtual keyboard prototype
Diffstat (limited to 'kvmd/web/css/keyboard.css')
| -rw-r--r-- | kvmd/web/css/keyboard.css | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/kvmd/web/css/keyboard.css b/kvmd/web/css/keyboard.css new file mode 100644 index 00000000..e1af292f --- /dev/null +++ b/kvmd/web/css/keyboard.css @@ -0,0 +1,92 @@ +div#keyboard { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + zoom: 0.8; +} + +div#keyboard div.keyboard-block { + padding-right: 15px; + display: table-cell; +} +div#keyboard div.keyboard-block:last-child { + padding-right: 0; +} + +div#keyboard div.keyboard-row { + white-space: nowrap; + height: 40px; + margin-bottom: 5px; +} +div#keyboard div.keyboard-row:last-child { + margin-bottom: 0; +} + +div#keyboard div.key, div.empty-key { + box-sizing: border-box; + display: inline-block; + margin-right: 5px; + padding: 0; + width: 40px; + height: 40px; +} +div#keyboard div.key { + font-size: 0.9em; + text-align: center; + vertical-align: top; + box-shadow: var(--micro-shadow); + border: var(--grey-border); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + color: var(--fg-color-normal); + background-color: var(--bg-color-gray); + cursor: pointer; +} +div#keyboard div.key:hover { + color: var(--fg-color-intensive); + background-color: var(--bg-color-ctl); +} +div#keyboard div.key:active { + box-shadow: none; + color: var(--fg-color-selected); + background-color: var(--bg-color-dark); +} +div#keyboard div.key:last-child, div.empty-key:last-child { + margin-right: 0; +} +div#keyboard div.wide-1 { + width: 61px; +} +div#keyboard div.wide-2 { + width: 64px; +} +div#keyboard div.wide-3 { + width: 77px; +} +div#keyboard div.wide-4 { + width: 102px; +} +div#keyboard div.wide-5 { + width: 288px; +} +div#keyboard div.left { + text-align: left !important; + padding-left: 6px !important; +} +div#keyboard div.right { + text-align: right !important; + padding-right: 6px !important; +} +div#keyboard div.small { + font-size: 0.7em; +} + +div#keyboard div.key p { + margin: 0; + position: relative; + top: 50%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + transform: translateY(-50%); +} |