diff options
| -rw-r--r-- | kvmd/web/css/main.css | 27 | ||||
| -rw-r--r-- | kvmd/web/index.html | 6 |
2 files changed, 26 insertions, 7 deletions
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css index 21935380..11efcd25 100644 --- a/kvmd/web/css/main.css +++ b/kvmd/web/css/main.css @@ -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: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:hover .ctl-item { +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; diff --git a/kvmd/web/index.html b/kvmd/web/index.html index d9d953fb..5a8f0d70 100644 --- a/kvmd/web/index.html +++ b/kvmd/web/index.html @@ -23,7 +23,7 @@ <li class="ctl-left"><img id="logo" src="svg/logo.svg" alt="π-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 ↴ |