testing mouse buttons for touch interface

3 files changed, 30 insertions, 13 deletions

diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index d8477ed5..8290ef42 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -14,8 +14,10 @@ a {
 	text-decoration: underline dotted;
 	color: var(--fg-color-normal);
 }
-a:hover {
-	text-decoration: underline;
+@media (hover: hover) {
+	a:hover {
+		text-decoration: underline;
+	}
 }
 
 hr {
@@ -35,17 +37,25 @@ button, select {
 	outline: none;
 	cursor: pointer;
 }
-button:enabled:hover, select:enabled:hover {
-	color: var(--fg-color-intensive);
-	background-color: var(--bg-color-dark) !important;
+@media (hover: hover) {
+	button:enabled:hover, select:enabled:hover {
+		color: var(--fg-color-intensive);
+		background-color: var(--bg-color-dark) !important;
+	}
+	button:active, select:active {
+		color: var(--fg-color-selected) !important;
+	}
+}
+@media (hover: none) {
+	button:active, select:active {
+		color: var(--fg-color-intensive);
+		background-color: var(--bg-color-dark);
+	}
 }
 button:disabled, select:disabled {
 	color: var(--fg-color-inactive);
 	cursor: default;
 }
-button:active, select:active {
-	color: var(--fg-color-selected) !important;
-}
 
 select {
 	-webkit-appearance: button;
diff --git a/kvmd/web/css/mobile.css b/kvmd/web/css/mobile.css
index a298865f..0675b6c9 100644
--- a/kvmd/web/css/mobile.css
+++ b/kvmd/web/css/mobile.css
@@ -3,7 +3,7 @@
 	https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
 */
 
-@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 	div.window {
 		padding-top: 45px !important;
 	}
@@ -25,16 +25,16 @@
 		color: var(--fg-color-normal);
 		background-color: var(--bg-color-gray);
 	}
+
+	div#stream-mouse-buttons {
+		display: block !important;
+	}
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
 	button, select {
 		height: 45px !important;
 	}
-	button:enabled:hover, select:enabled:hover {
-		color: var(--fg-color-normal) !important;
-		background-color: var(--bg-color-normal) !important;
-	}
 
 	div.modal-buttons button {
 		height: 50px !important;
diff --git a/kvmd/web/css/stream.css b/kvmd/web/css/stream.css
index 01fd3cc4..dc510a62 100644
--- a/kvmd/web/css/stream.css
+++ b/kvmd/web/css/stream.css
@@ -100,3 +100,10 @@ div.stream-params div#stream-size-slider-box input[type=range]::-moz-range-thumb
 	border-radius: 25px;
 	background: var(--bg-color-intensive);
 }
+
+div#stream-mouse-buttons {
+	display: none;
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}