diff options
| author | Devaev Maxim <[email protected]> | 2018-07-17 05:18:14 +0300 |
|---|---|---|
| committer | Devaev Maxim <[email protected]> | 2018-07-17 05:18:14 +0300 |
| commit | 3b12fd6d21343a32fc79e228c0988116811a8e67 (patch) | |
| tree | 59bf68656c12524fdf0ba44d8e9cc951657998ef /kvmd | |
| parent | 1c4a6b0debd627cc141b3c6ca3269506f1cfe967 (diff) | |
grouped buttons and icons
Diffstat (limited to 'kvmd')
| -rw-r--r-- | kvmd/web/css/main.css | 15 | ||||
| -rw-r--r-- | kvmd/web/index.html | 35 |
2 files changed, 36 insertions, 14 deletions
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css index 1817ecaf..00f5f08b 100644 --- a/kvmd/web/css/main.css +++ b/kvmd/web/css/main.css @@ -7,6 +7,9 @@ img#logo { height: 24px; -webkit-filter: invert(0.7); filter: invert(0.7); + vertical-align: middle; + margin-right: 10px; + padding: 13px 15px; } div.centered { position: absolute; @@ -51,22 +54,25 @@ ul#ctl p { padding: 15px 16px; } ul#ctl img { - margin: 0px; - padding: 11px 11px; - height: 24px; + vertical-align: middle; + margin-right: 10px; + height: 20px; } ul#ctl a.ctl-item { - display: block; + display: inline-block; + vertical-align: middle; color: #c3c3c3; text-align: center; padding: 15px 16px; text-decoration: none; + height: 20px; } div.ctl-dropdown { position: relative; display: inline-block; } div.ctl-dropdown-content { + white-space:nowrap; border: 1px solid #17191d; border-radius: 0 0 8px 8px; display: none; @@ -89,7 +95,6 @@ div.ctl-dropdown-content button { background-color: #282b30; display: block; width: 100%; - white-space:nowrap; height: 30px; font-size: 16px; text-align: left; diff --git a/kvmd/web/index.html b/kvmd/web/index.html index 37912d70..4812f105 100644 --- a/kvmd/web/index.html +++ b/kvmd/web/index.html @@ -21,16 +21,28 @@ <body> <ul id="ctl"> <li class="ctl-left"><img id="logo" src="svg/logo.svg" alt="π-kvm" /></li> - <li class="ctl-right"><img id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" /></li> - <li class="ctl-right"><img id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" /></li> - <li class="ctl-right"><img id="stream-led" class="led-off" src="svg/stream-led.svg" /></li> - <li class="ctl-right"><img id="msd-led" class="led-off" src="svg/msd-led.svg" /></li> - <li class="ctl-right"><img id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" /></li> - <li class="ctl-right-sep"><img id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" /></li> <li class="ctl-right-sep"> <div class="ctl-dropdown"> - <a class="ctl-item" href="#">ATX Buttons↴</a> + <a class="ctl-item" href="#"> + <img id="stream-led" class="led-off" src="svg/stream-led.svg" /> + <img id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" /> + <img id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" /> + System ↴ + </a> + <div class="ctl-dropdown-content"> + <button id="stream-reset-button" onclick="stream.clickResetButton(this);"href="#">Reset stream</button> + </div> + </div> + </li> + + <li class="ctl-right-sep"> + <div class="ctl-dropdown"> + <a class="ctl-item" href="#"> + <img id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" /> + <img id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" /> + ATX ↴ + </a> <div class="ctl-dropdown-content"> <button id="atx-power-button" onclick="atx.clickButton(this);" href="#">Click Power <sup><i>short</i></sup></button> <button id="atx-power-button-long" onclick="atx.clickButton(this);" href="#">Click Power <sup><i>long</i></sup></button> @@ -42,9 +54,14 @@ <li class="ctl-right-sep"> <div class="ctl-dropdown"> - <a class="ctl-item" href="#">Tools ↴</a> + <a class="ctl-item" href="#"> + <img id="msd-led" class="led-off" src="svg/msd-led.svg" /> + Mass Storage ↴ + </a> <div class="ctl-dropdown-content"> - <button id="stream-reset-button" onclick="stream.clickResetButton(this);"href="#">Reset stream</button> + О, привет!<br> + К сожалению, я пока не реализовал эту функцию,<br> + но ты можешь полюбоваться на эту великолепную менюшку :3 </div> </div> </li> |