GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-29 00:51:53 +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
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-light: #484b51;
--bg-color-dark: #17191d; --bg-color-dark: #17191d;
--bg-color-ctl: #202225; --bg-color-ctl: #202225;
--bg-color-hovered: #1a1c1f;
--bg-color-selected: #171717; --bg-color-selected: #171717;
--bg-color-progress: #171717; --bg-color-progress: #171717;
@@ -43,6 +44,7 @@ div.centered {
} }
ul#ctl { ul#ctl {
user-select: none;
box-shadow: var(--small-shadow); box-shadow: var(--small-shadow);
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@@ -65,6 +67,7 @@ ul#ctl img {
height: 20px; height: 20px;
} }
ul#ctl li a.ctl-item { ul#ctl li a.ctl-item {
pointer-events: none;
border-left: var(--black-border); border-left: var(--black-border);
display: inline-block; display: inline-block;
color: var(--fg-color-normal); color: var(--fg-color-normal);
@@ -76,24 +79,38 @@ ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-selected); background-color: var(--bg-color-selected);
} }
div.ctl-dropdown { div.ctl-dropdown {
outline: none;
cursor: pointer;
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
div.ctl-dropdown-content { div.ctl-dropdown-content {
user-select: text;
cursor: default;
white-space: nowrap; white-space: nowrap;
border: var(--dark-border); border: var(--dark-border);
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
display: none;
position: absolute; position: absolute;
background-color: var(--bg-color-ctl); background-color: var(--bg-color-ctl);
min-width: 180px; min-width: 180px;
box-shadow: var(--big-shadow); box-shadow: var(--big-shadow);
z-index: 9; z-index: 9;
visibility: hidden;
transition: visibility 0.5s;
opacity: 0;
} }
div.ctl-dropdown:hover .ctl-dropdown-content { div.ctl-dropdown:focus {
display: block; 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); background-color: var(--bg-color-selected);
} }
div.ctl-dropdown-content button { div.ctl-dropdown-content button {
@@ -158,6 +175,7 @@ div.ctl-dropdown-content-text {
} }
div#stream-box { div#stream-box {
pointer-events: none;
border: var(--dark-border); border: var(--dark-border);
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
@@ -226,6 +244,7 @@ div#msd-menu {
} }
table#msd-info { table#msd-info {
user-select: text;
border-spacing: 5px; border-spacing: 5px;
margin: 0 10px 0 10px; margin: 0 10px 0 10px;
font-size: 12px; 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-left"><img id="logo" src="svg/logo.svg" alt="&pi;-kvm" /></li>
<li class="ctl-right"> <li class="ctl-right">
<div class="ctl-dropdown"> <div class="ctl-dropdown" tabindex="0">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#">
<img id="stream-led" class="led-off" src="svg/stream-led.svg" /> <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-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" />
@@ -37,7 +37,7 @@
</li> </li>
<li class="ctl-right"> <li class="ctl-right">
<div class="ctl-dropdown"> <div class="ctl-dropdown" tabindex="0">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#">
<img id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" /> <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" /> <img id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" />
@@ -53,7 +53,7 @@
</li> </li>
<li class="ctl-right"> <li class="ctl-right">
<div class="ctl-dropdown"> <div class="ctl-dropdown" tabindex="0">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#">
<img id="msd-led" class="led-off" src="svg/msd-led.svg" /> <img id="msd-led" class="led-off" src="svg/msd-led.svg" />
Mass Storage &#8628; Mass Storage &#8628;