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

menu by click

Browse Source
This commit is contained in:
Devaev Maxim 2018-07-22 05:30:55 +03:00
parent 1f55c63f89
commit 08f51b882d
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@
--bg-color-light: #484b51;
--bg-color-dark: #17191d;
--bg-color-ctl: #202225;
--bg-color-hovered: #1a1c1f;
--bg-color-selected: #171717;
--bg-color-progress: #171717;
@ -43,6 +44,7 @@ div.centered {
}
ul#ctl {
user-select: none;
box-shadow: var(--small-shadow);
list-style-type: none;
margin: 0;
@ -65,6 +67,7 @@ ul#ctl img {
height: 20px;
}
ul#ctl li a.ctl-item {
pointer-events: none;
border-left: var(--black-border);
display: inline-block;
color: var(--fg-color-normal);
@ -76,24 +79,38 @@ ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-selected);
}
div.ctl-dropdown {
outline: none;
cursor: pointer;
position: relative;
display: inline-block;
}
div.ctl-dropdown-content {
user-select: text;
cursor: default;
white-space: nowrap;
border: var(--dark-border);
border-radius: 0 0 8px 8px;
display: none;
position: absolute;
background-color: var(--bg-color-ctl);
min-width: 180px;
box-shadow: var(--big-shadow);
z-index: 9;
visibility: hidden;
transition: visibility 0.5s;
opacity: 0;
}
div.ctl-dropdown:hover .ctl-dropdown-content {
display: block;
div.ctl-dropdown:focus {
pointer-events: none;
}
div.ctl-dropdown:hover .ctl-item {
div.ctl-dropdown:focus div.ctl-dropdown-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
div.ctl-dropdown:hover a.ctl-item {
background-color: var(--bg-color-hovered);
}
div.ctl-dropdown:focus a.ctl-item {
background-color: var(--bg-color-selected);
}
div.ctl-dropdown-content button {
@ -158,6 +175,7 @@ div.ctl-dropdown-content-text {
}
div#stream-box {
pointer-events: none;
border: var(--dark-border);
border-radius: 8px;
box-sizing: border-box;
@ -226,6 +244,7 @@ div#msd-menu {
}
table#msd-info {
user-select: text;
border-spacing: 5px;
margin: 0 10px 0 10px;
font-size: 12px;

6
kvmd/web/index.html
View File

@ -23,7 +23,7 @@
<li class="ctl-left"><img id="logo" src="svg/logo.svg" alt="&pi;-kvm" /></li>
<li class="ctl-right">
<div class="ctl-dropdown">
<div class="ctl-dropdown" tabindex="0">
<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" />
@ -37,7 +37,7 @@
</li>
<li class="ctl-right">
<div class="ctl-dropdown">
<div class="ctl-dropdown" tabindex="0">
<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" />
@ -53,7 +53,7 @@
</li>
<li class="ctl-right">
<div class="ctl-dropdown">
<div class="ctl-dropdown" tabindex="0">
<a class="ctl-item" href="#">
<img id="msd-led" class="led-off" src="svg/msd-led.svg" />
Mass Storage &#8628;