menu by click

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="&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;