refactoring

11 files changed, 222 insertions, 229 deletions

diff --git a/web/css/about.css b/web/css/kvm/about.css
index 46cf382a..46cf382a 100644
--- a/web/css/about.css
+++ b/web/css/kvm/about.css
diff --git a/web/css/hid.css b/web/css/kvm/hid.css
index 8c420fe9..8c420fe9 100644
--- a/web/css/hid.css
+++ b/web/css/kvm/hid.css
diff --git a/web/css/keyboard.css b/web/css/kvm/keyboard.css
index cb42f2fa..5d9b5df3 100644
--- a/web/css/keyboard.css
+++ b/web/css/kvm/keyboard.css
@@ -40,7 +40,7 @@ div.keyboard div.key, div.modifier {
 }
 div.keyboard div.key:hover, div.modifier:hover {
 	color: var(--fg-color-intensive);
-	background-color: var(--bg-color-ctl);
+	background-color: var(--bg-color-menu);
 }
 div.keyboard div.pressed {
 	box-shadow: none;
@@ -99,6 +99,27 @@ div.keyboard b {
 	color: var(--bg-color-intensive);
 }
 
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	div#keyboard-window {
+		visibility: visible !important;
+		padding-top: 9px !important;
+		padding-bottom: 30px !important;
+		border-bottom: 0 !important;
+		border-left: 0 !important;
+		border-right: 0 !important;
+		border-radius: 0 !important;
+		top: unset !important;
+		bottom: 0 !important;
+		width: 100% !important;
+		left: 50% !important;
+		-webkit-transform: translateX(-50%) !important;
+		transform: translateX(-50%) !important;
+	}
+	div#keyboard-window-header {
+		display: none !important
+	}
+}
+
 div#keyboard-desktop {
 	display: block;
 }
diff --git a/web/css/msd.css b/web/css/kvm/msd.css
index 46636f03..de22d6e5 100644
--- a/web/css/msd.css
+++ b/web/css/kvm/msd.css
@@ -1,12 +1,8 @@
 div#msd-menu {
 	width: 450px;
 }
-div#msd-menu
-div#msd-not-in-operate,
-div#msd-current-image-broken,
-div#msd-another-another-user-uploads,
-input#msd-select-new-image-file,
-div#msd-new-image {
+
+div.msd-message, input.msd-message {
 	display: none;
 }
 
diff --git a/web/css/kvm/stream.css b/web/css/kvm/stream.css
new file mode 100644
index 00000000..4cdb7fe4
--- /dev/null
+++ b/web/css/kvm/stream.css
@@ -0,0 +1,90 @@
+div#stream-info {
+	display: none;
+}
+
+img#stream-image {
+	width: 640px;
+	height: 480px;
+	display: block;
+	background-color: black;
+}
+
+img.stream-image-active {
+	-webkit-filter: none;
+	filter: none;
+}
+
+img.stream-image-inactive {
+	-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
+	filter: grayscale(100%) brightness(75%) sepia(75%);
+}
+
+div#stream-box {
+	position: relative;
+	display: inline-block;
+	border: var(--border-dark-thin);
+}
+div.stream-box-inactive::after {
+	cursor: wait;
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: inline-block;
+	background: radial-gradient(transparent 20%, black);
+}
+div.stream-box-mouse-enabled {
+	cursor: url("../../svg/stream-mouse-cursor.svg"), pointer;
+}
+
+div.stream-slider-box {
+	margin-top: 5px;
+	display: flex;
+}
+
+table#stream-auto-resize-box {
+	width: 100%;
+	border-collapse: collapse;
+}
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	@supports (-webkit-appearance: none) {
+		table#stream-auto-resize-box {
+			margin: 20px 0 20px 0 !important;
+		}
+	}
+}
+
+div#stream-mouse-buttons {
+	display: none;
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	div#stream-window {
+		padding-top: 3px !important;
+		border-top: 0 !important;
+		border-radius: 0 0 8px 8px !important;
+		top: 50px !important;
+		left: 50% !important;
+		-webkit-transform: translateX(-50%) !important;
+		transform: translateX(-50%) !important;
+	}
+	div#stream-window-header {
+		display: none !important;
+	}
+	div#stream-info {
+		display: block !important;
+		margin: 0;
+		padding: 0;
+		padding-bottom: 3px;
+		font-size: 0.8em;
+		color: var(--fg-color-dark);
+	}
+	div#stream-mouse-buttons {
+		display: block !important;
+	}
+}
diff --git a/web/css/main.css b/web/css/main.css
index f35d3ff4..e4396e1f 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -83,6 +83,12 @@ select:active {
 	background-image: url("../svg/select-arrow-intensive.svg") !important;
 }
 
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	button, select {
+		height: 45px !important;
+	}
+}
+
 .row50 {
 	display: inline-block;
 	width: 50%;
@@ -105,98 +111,7 @@ img.svg-gray {
 	vertical-align: middle;
 }
 
-img#logo {
-	padding-left: 16px;
-}
-
-ul#ctl {
-	box-shadow: var(--shadow-small);
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-	background-color: var(--bg-color-ctl);
-	position: fixed;
-	top: 0;
-	width: 100%;
-	height: 50px;
-	z-index: 2147483646;
-}
-ul#ctl li.ctl-logo {
-	line-height: 50px;
-	margin-top: -2px;
-	float: left;
-}
-ul#ctl li.ctl-right-actions {
-	float: right;
-}
-ul#ctl img {
-	vertical-align: middle;
-	margin-right: 10px;
-	height: 20px;
-}
-ul#ctl li a.ctl-item {
-	line-height: 50px;
-	outline: none;
-	cursor: pointer;
-	border-left: var(--border-black-thin);
-	display: inline-block;
-	color: var(--fg-color-normal);
-	padding-left: 16px;
-	padding-right: 16px;
-	text-decoration: none;
-}
-ul#ctl li a.ctl-item:hover:not(.active) {
-	background-color: var(--bg-color-hovered);
-}
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-	/* iPad 8 */
-	ul#ctl li a.ctl-item:hover:not(.active) {
-		background-color: var(--bg-color-ctl) !important;
-	}
-}
-ul#ctl li a.ctl-item-selected {
-	box-shadow: 0 5px 0 var(--border-color-intensive) inset;
-	background-color: var(--bg-color-selected) !important;
-}
-div.ctl-dropdown-content {
-	visibility: hidden;
-	overflow: hidden;
-	white-space: nowrap;
-	border: var(--border-intensive-2px);
-	border-top: var(--border-dark-thin);
-	border-radius: 0 0 8px 8px;
-	position: absolute;
-	background-color: var(--bg-color-ctl);
-	min-width: 180px;
-	box-shadow: var(--shadow-big);
-	z-index: 2147483645;
-}
-div.ctl-dropdown-content button, select {
-	text-align: left;
-	padding: 0 16px;
-}
-div.ctl-dropdown-content div.buttons-row {
-	margin: 0;
-	padding: 0;
-	font-size: 0;
-}
-div.ctl-dropdown-content hr {
-	margin: 0;
-	display: block;
-	height: 0px;
-	padding: 0;
-	border: none;
-	border-top: var(--border-dark-thin);
-}
-div.ctl-dropdown-content-buttons {
-	background-color: var(--bg-color-normal);
-}
-div.ctl-dropdown-content-text {
-	margin: 10px 15px 10px 15px;
-	font-size: 14px;
-}
-
-ul#footer {
+ul.footer {
 	list-style-type: none;
 	bottom: 0;
 	position: fixed;
@@ -206,15 +121,15 @@ ul#footer {
 	color: var(--fg-color-inactive);
 	z-index: -10;
 }
-ul#footer li {
+ul.footer li {
 	padding: 0 10px;
 }
-ul#footer li.footer-left {
+ul.footer li.footer-left {
 	float: left;
 }
-ul#footer li.footer-right {
+ul.footer li.footer-right {
 	float: right;
 }
-ul#footer li a {
+ul.footer li a {
 	color: var(--fg-color-inactive);
 }
diff --git a/web/css/menu.css b/web/css/menu.css
new file mode 100644
index 00000000..b70419f9
--- /dev/null
+++ b/web/css/menu.css
@@ -0,0 +1,88 @@
+ul.menu {
+	box-shadow: var(--shadow-small);
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	background-color: var(--bg-color-menu);
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 50px;
+	z-index: 2147483646;
+}
+ul.menu li.menu-logo {
+	line-height: 50px;
+	margin-top: -2px;
+	margin-left: 16px;
+	float: left;
+}
+ul.menu li.menu-right-actions {
+	float: right;
+}
+ul.menu img {
+	vertical-align: middle;
+	margin-right: 10px;
+	height: 20px;
+}
+ul.menu li a.menu-item {
+	line-height: 50px;
+	outline: none;
+	cursor: pointer;
+	border-left: var(--border-black-thin);
+	display: inline-block;
+	color: var(--fg-color-normal);
+	padding-left: 16px;
+	padding-right: 16px;
+	text-decoration: none;
+}
+ul.menu li a.menu-item:hover:not(.active) {
+	background-color: var(--bg-color-hovered);
+}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	/* iPad 8 */
+	ul.menu li a.menu-item:hover:not(.active) {
+		background-color: var(--bg-color-menu) !important;
+	}
+}
+ul.menu li a.menu-item-selected {
+	box-shadow: 0 5px 0 var(--border-color-intensive) inset;
+	background-color: var(--bg-color-selected) !important;
+}
+div.menu-dropdown-content {
+	visibility: hidden;
+	overflow: hidden;
+	white-space: nowrap;
+	border: var(--border-intensive-2px);
+	border-top: var(--border-dark-thin);
+	border-radius: 0 0 8px 8px;
+	position: absolute;
+	background-color: var(--bg-color-menu);
+	min-width: 180px;
+	box-shadow: var(--shadow-big);
+	z-index: 2147483645;
+}
+div.menu-dropdown-content button, select {
+	text-align: left;
+	padding: 0 16px;
+}
+div.menu-dropdown-content div.buttons-row {
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+div.menu-dropdown-content hr {
+	margin: 0;
+	display: block;
+	height: 0px;
+	padding: 0;
+	border: none;
+	border-top: var(--border-dark-thin);
+}
+div.menu-dropdown-content-buttons {
+	background-color: var(--bg-color-normal);
+}
+div.menu-dropdown-content-text {
+	margin: 10px 15px 10px 15px;
+	font-size: 14px;
+}
+
diff --git a/web/css/mobile.css b/web/css/mobile.css
deleted file mode 100644
index eeaaf0e6..00000000
--- a/web/css/mobile.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
-	http://stephen.io/mediaqueries/
-	https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
-*/
-
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-	div#keyboard-window {
-		visibility: visible !important;
-		padding-top: 9px !important;
-		padding-bottom: 30px !important;
-		border-bottom: 0 !important;
-		border-left: 0 !important;
-		border-right: 0 !important;
-		border-radius: 0 !important;
-		top: unset !important;
-		bottom: 0 !important;
-		width: 100% !important;
-		left: 50% !important;
-		-webkit-transform: translateX(-50%) !important;
-		transform: translateX(-50%) !important;
-	}
-	div#keyboard-window-header {
-		display: none !important
-	}
-
-	div#stream-window {
-		padding-top: 3px !important;
-		border-top: 0 !important;
-		border-radius: 0 0 8px 8px !important;
-		top: 50px !important;
-		left: 50% !important;
-		-webkit-transform: translateX(-50%) !important;
-		transform: translateX(-50%) !important;
-	}
-	div#stream-window-header {
-		display: none !important;
-	}
-	div#stream-info {
-		display: block !important;
-		margin: 0;
-		padding: 0;
-		padding-bottom: 3px;
-		font-size: 0.8em;
-		color: var(--fg-color-dark);
-	}
-	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;
-	}
-
-	@supports (-webkit-appearance: none) {
-		input[type=range].slider {
-			margin: 20px 0 20px 0 !important;
-		}
-
-		table#stream-auto-resize-box {
-			margin: 20px 0 20px 0 !important;
-		}
-	}
-}
diff --git a/web/css/sliders.css b/web/css/sliders.css
index 25501137..472734eb 100644
--- a/web/css/sliders.css
+++ b/web/css/sliders.css
@@ -20,6 +20,13 @@
 		margin-right: 0;
 	}
 }
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	@supports (-webkit-appearance: none) {
+		input[type=range].slider {
+			margin: 20px 0 20px 0 !important;
+		}
+	}
+}
 input[type=range].slider:disabled {
 	cursor: default;
 }
diff --git a/web/css/stream.css b/web/css/stream.css
deleted file mode 100644
index b5b9d57c..00000000
--- a/web/css/stream.css
+++ /dev/null
@@ -1,57 +0,0 @@
-div#stream-info {
-	display: none;
-}
-
-img#stream-image {
-	width: 640px;
-	height: 480px;
-	display: block;
-	background-color: var(--bg-color-stream-screen);
-}
-
-img.stream-image-active {
-	-webkit-filter: none;
-	filter: none;
-}
-
-img.stream-image-inactive {
-	-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
-	filter: grayscale(100%) brightness(75%) sepia(75%);
-}
-
-div#stream-box {
-	position: relative;
-	display: inline-block;
-	border: var(--border-dark-thin);
-}
-div.stream-box-inactive::after {
-	cursor: wait;
-	content: "";
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	display: inline-block;
-	background: radial-gradient(transparent 20%, black);
-}
-div.stream-box-mouse-enabled {
-	cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
-}
-
-div.stream-slider-box {
-	margin-top: 5px;
-	display: flex;
-}
-
-table#stream-auto-resize-box {
-	width: 100%;
-	border-collapse: collapse;
-}
-
-div#stream-mouse-buttons {
-	display: none;
-	margin: 0;
-	padding: 0;
-	font-size: 0;
-}
diff --git a/web/css/vars.css b/web/css/vars.css
index 7fd8b3a9..3a92e220 100644
--- a/web/css/vars.css
+++ b/web/css/vars.css
@@ -3,7 +3,7 @@
 	--bg-color-light: #484b51;
 	--bg-color-gray: #3b3e43;
 	--bg-color-dark: #17191d;
-	--bg-color-ctl: #202225;
+	--bg-color-menu: #202225;
 	--bg-color-intensive: #436a8a;
 	--bg-color-hovered: #1a1c1f;
 	--bg-color-selected: #171717;
@@ -14,10 +14,8 @@
 	--fg-color-inactive: #6c7481;
 	--fg-color-selected: var(--fg-color-inactive);
 
-	--bg-color-stream-screen: black;
-
 	--border-color-normal: var(--bg-color-normal);
-	--border-color-gray: var(--bg-color-ctl);
+	--border-color-gray: var(--bg-color-menu);
 	--border-color-dark: var(--bg-color-dark);
 	--border-color-intensive: #5b90bb;
 	--border-color-important: #ff6467;