From 3a68c2ae1001f1207e639925d10d5f88f62d4430 Mon Sep 17 00:00:00 2001
From: Devaev Maxim <mdevaev@gmail.com>
Date: Fri, 7 Sep 2018 00:28:48 +0300
Subject: [PATCH] ios safari fixes

---
 kvmd/web/css/main.css   |  3 +++
 kvmd/web/css/mobile.css |  2 +-
 kvmd/web/css/stream.css | 26 +++++++++-----------------
 kvmd/web/index.html     | 30 ++++++++++++++++--------------
 4 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index 8290ef42..d2d434d7 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -172,6 +172,9 @@ div.ctl-dropdown-content hr {
 	border: none;
 	border-top: var(--dark-border);
 }
+div.ctl-dropdown-content-buttons {
+	background-color: var(--bg-color-normal);
+}
 div.ctl-dropdown-content-text {
 	margin: 10px 15px 10px 15px;
 	font-size: 14px;
diff --git a/kvmd/web/css/mobile.css b/kvmd/web/css/mobile.css
index a672d575..fdec7fc3 100644
--- a/kvmd/web/css/mobile.css
+++ b/kvmd/web/css/mobile.css
@@ -80,7 +80,7 @@
 	}
 
 	@supports (-webkit-appearance:none) {
-		div.stream-params div#stream-size-slider-box input[type=range] {
+		div#stream-size-slider-box input[type=range] {
 			margin: 20px 0 20px 0 !important;
 		}
 	}
diff --git a/kvmd/web/css/stream.css b/kvmd/web/css/stream.css
index dc510a62..84aa0253 100644
--- a/kvmd/web/css/stream.css
+++ b/kvmd/web/css/stream.css
@@ -35,26 +35,18 @@ div.stream-box-mouse-enabled {
 	cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
 }
 
-div.stream-params {
-	-webkit-user-select: text;
-	-moz-user-select: text;
-	user-select: text;
-	font-size: 12px;
-	margin: 5px 15px 5px 15px;
-}
-
-div.stream-params select#stream-resolution-select {
+select#stream-resolution-select {
 	margin: 8px 0 8px 0;
 }
 
-div.stream-params span#stream-size-value {
+span#stream-size-value {
 }
-div.stream-params div#stream-size-slider-box {
+div#stream-size-slider-box {
 	margin-top: 5px;
 	display: flex;
 }
 @supports (-webkit-appearance:none) {
-	div.stream-params div#stream-size-slider-box input[type=range] {
+	div#stream-size-slider-box input[type=range] {
 		cursor: pointer;
 		outline: none;
 		width: 100%;
@@ -65,7 +57,7 @@ div.stream-params div#stream-size-slider-box {
 	}
 }
 @supports not (-webkit-appearance:none) {
-	div.stream-params div#stream-size-slider-box input[type=range] {
+	div#stream-size-slider-box input[type=range] {
 		cursor: pointer;
 		outline: none;
 		width: 100%;
@@ -74,12 +66,12 @@ div.stream-params div#stream-size-slider-box {
 		margin-right: 0;
 	}
 }
-div.stream-params div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track {
+div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track {
 	height: 5px;
 	background: var(--bg-color-light);
 	border-radius: 3px;
 }
-div.stream-params div#stream-size-slider-box input[type=range]::-webkit-slider-thumb {
+div#stream-size-slider-box input[type=range]::-webkit-slider-thumb {
 	border: var(--intensive-border);
 	height: 18px;
 	width: 18px;
@@ -88,12 +80,12 @@ div.stream-params div#stream-size-slider-box input[type=range]::-webkit-slider-t
 	-webkit-appearance: none;
 	margin-top: -7px;
 }
-div.stream-params div#stream-size-slider-box input[type=range]::-moz-range-track {
+div#stream-size-slider-box input[type=range]::-moz-range-track {
 	height: 5px;
 	background: var(--bg-color-light);
 	border-radius: 3px;
 }
-div.stream-params div#stream-size-slider-box input[type=range]::-moz-range-thumb {
+div#stream-size-slider-box input[type=range]::-moz-range-thumb {
 	border: var(--intensive-border);
 	height: 18px;
 	width: 18px;
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index f1f899ef..850691f8 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -65,21 +65,23 @@
 					System &#8628;
 				</a>
 				<div class="ctl-dropdown-content">
-					<button id="show-about-button">&bull; Show about</button>
+					<div class="ctl-dropdown-content-buttons">
+						<button id="show-about-button">&bull; Show about</button>
+						<hr>
+						<button id="show-keyboard-button">&bull; Show keyboard</button>
+						<hr>
+						<button id="show-stream-button">&bull; Show stream</button>
+						<button disabled id="stream-reset-button">&bull; Reset stream</button>
+					</div>
 					<hr>
-					<button id="show-keyboard-button">&bull; Show keyboard</button>
-					<hr>
-					<button id="show-stream-button">&bull; Show stream</button>
-					<button disabled id="stream-reset-button">&bull; Reset stream</button>
-					<hr>
-					<div data-dont-hide-menu class="stream-params">
+					<div data-dont-hide-menu class="ctl-dropdown-content-text">
 						Resolution:
-						<select disabled data-dont-hide-menu id="stream-resolution-select">
+						<select disabled id="stream-resolution-select">
 							<option>640x480</option>
 						</select>
 					</div>
 					<hr>
-					<div data-dont-hide-menu class="stream-params">
+					<div data-dont-hide-menu class="ctl-dropdown-content-text">
 						Stream size: <span id="stream-size-value">100%</span>
 						<div id="stream-size-slider-box">
 							<input id="stream-size-slider" type="range" min="50" max="150" value="100" step="10" />
@@ -96,7 +98,7 @@
 					<img data-dont-hide-menu id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" />
 					ATX &#8628;
 				</a>
-				<div class="ctl-dropdown-content">
+				<div class="ctl-dropdown-content ctl-dropdown-content-buttons">
 					<button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
 					<button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
 					<hr>
@@ -173,7 +175,7 @@
 					<hr>
 
 					<input type="file" id="msd-select-new-image-file" />
-					<div class="buttons-row">
+					<div class="ctl-dropdown-content-buttons buttons-row">
 						<button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
 						<button disabled id="msd-upload-new-image-button" class="row25">Start</button>
 						<button disabled id="msd-abort-uploading-button" class="row25">Abort</button>
@@ -200,7 +202,7 @@
 						<hr>
 					</div>
 
-					<div class="buttons-row">
+					<div class="ctl-dropdown-content-buttons buttons-row">
 						<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">&bull; Switch drive to KVM</button>
 						<button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">&bull; Switch drive to Server</button>
 					</div>
@@ -214,7 +216,7 @@
 					<img data-dont-hide-menu id="pak-led" class="led-off" src="svg/gear-led.svg" />
 					Shortcuts &#8628;
 				</a>
-				<div class="ctl-dropdown-content">
+				<div class="ctl-dropdown-content ctl-dropdown-content-buttons">
 					<button disabled id="pak-button">&bull; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
 					<hr>
 					<button data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
@@ -477,8 +479,8 @@
 					<div data-key="Space" class="key" style="width:190px"></div>
 					<div data-key="AltRight" class="modifier right small"><p><b>&bull;</b><br>Alt</p></div>
 					<div data-key="MetaRight" class="modifier right small"><p><b>&bull;</b><br>Win</p></div>
-					<div data-key="ControlRight" class="modifier right small"><p><b>&bull;</b><br>Ctrl</p></div>
 					<div data-key="ShiftRight" class="modifier right small"><p><b>&bull;</b><br>Shift</p></div>
+					<div data-key="ControlRight" class="modifier right small"><p><b>&bull;</b><br>Ctrl</p></div>
 					<div data-key="ArrowLeft" class="key"><p>&larr;</p></div>
 					<div data-key="ArrowDown" class="key"><p>&darr;</p></div>
 					<div data-key="ArrowRight" class="key"><p>&rarr;</p></div>