menu by click

1 files changed, 23 insertions, 4 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;