GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-13 01:30:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

grouped buttons and icons

Browse Source
This commit is contained in:
Devaev Maxim 2018-07-17 05:18:14 +03:00
parent 1c4a6b0deb
commit 3b12fd6d21
2 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
kvmd/web/css/main.css
View File

@ -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;

35
kvmd/web/index.html
View File

@ -21,16 +21,28 @@
<body>
<ul id="ctl">
<li class="ctl-left"><img id="logo" src="svg/logo.svg" alt="&pi;-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&#8628;</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 &#8628;
</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 &#8628;
</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 &#8628;</a>
<a class="ctl-item" href="#">
<img id="msd-led" class="led-off" src="svg/msd-led.svg" />
Mass Storage &#8628;
</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>