refactoring

17 files changed, 142 insertions, 140 deletions

diff --git a/web/css/about.css b/web/css/about.css
index 0db2e467..906f4167 100644
--- a/web/css/about.css
+++ b/web/css/about.css
@@ -4,10 +4,7 @@ div#about {
 	user-select: text;
 }
 
-div#about
-td#about-version-kvmd,
-td#about-version-python,
-td#about-version-platform {
+div#about td.version {
 	font-weight: bold;
 }
 
diff --git a/web/css/keyboard.css b/web/css/keyboard.css
index ce7468d0..cb42f2fa 100644
--- a/web/css/keyboard.css
+++ b/web/css/keyboard.css
@@ -105,3 +105,21 @@ div#keyboard-desktop {
 div#keyboard-mobile {
 	display: none;
 }
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	/* iPad */
+	div.keyboard {
+		zoom: 1.28 !important;
+	}
+
+	div.keyboard div.key:hover, div.modifier:hover {
+		color: var(--fg-color-normal);
+		background-color: var(--bg-color-gray);
+	}
+
+	div#keyboard-desktop {
+		display: none !important;
+	}
+	div#keyboard-mobile {
+		display: block !important;
+	}
+}
diff --git a/web/css/leds.css b/web/css/leds.css
index ba8559b3..fe23a434 100644
--- a/web/css/leds.css
+++ b/web/css/leds.css
@@ -21,49 +21,43 @@
 	--led-spin-fast: spin 2s linear infinite;
 }
 
-img.led-on {
-	-webkit-filter: var(--led-filter-green);
-	filter: var(--led-filter-green);
-}
-
-img.led-off {
+img.led-gray {
 	-webkit-filter: var(--led-filter-gray);
 	filter: var(--led-filter-gray);
 }
 
-img.led-hdd-busy {
-	-webkit-filter: var(--led-filter-red);
-	filter: var(--led-filter-red);
+img.led-green {
+	-webkit-filter: var(--led-filter-green);
+	filter: var(--led-filter-green);
 }
 
-img.led-msd-writing,
-img.led-hid-pak-typing {
-	-webkit-filter: var(--led-filter-yellow);
-	filter: var(--led-filter-yellow);
-	-webkit-animation: var(--led-spin-fast);
-	animation: var(--led-spin-fast);
+img.led-red {
+	-webkit-filter: var(--led-filter-red);
+	filter: var(--led-filter-red);
 }
 
-img.led-link-connecting {
+img.led-yellow {
 	-webkit-filter: var(--led-filter-yellow);
 	filter: var(--led-filter-yellow);
 }
 
-img.led-fan-on {
+img.led-green-rotating-medium {
 	-webkit-filter: var(--led-filter-green);
 	filter: var(--led-filter-green);
 	-webkit-animation: var(--led-spin-medium);
 	animation: var(--led-spin-medium);
 }
 
-img.led-fan-slow {
+img.led-yellow-rotating-slow {
 	-webkit-filter: var(--led-filter-yellow);
 	filter: var(--led-filter-yellow);
 	-webkit-animation: var(--led-spin-slow);
 	animation: var(--led-spin-slow);
 }
 
-img.led-fan-fail {
-	-webkit-filter: var(--led-filter-red);
-	filter: var(--led-filter-red);
+img.led-yellow-rotating-fast {
+	-webkit-filter: var(--led-filter-yellow);
+	filter: var(--led-filter-yellow);
+	-webkit-animation: var(--led-spin-fast);
+	animation: var(--led-spin-fast);
 }
diff --git a/web/css/main.css b/web/css/main.css
index 41730777..3979363b 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -15,6 +15,7 @@ a {
 	color: var(--fg-color-normal);
 }
 @media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	/* If we have a mouse cursor */
 	a:hover {
 		text-decoration: underline;
 	}
@@ -38,6 +39,7 @@ button, select {
 	cursor: pointer;
 }
 @media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	/* If we have a mouse cursor */
 	button:enabled:hover, select:enabled:hover {
 		color: var(--fg-color-intensive);
 		background-color: var(--bg-color-dark) !important;
@@ -50,6 +52,7 @@ button, select {
 	}
 }
 @media (hover: none) {
+	/* If we DON'T have a mouse cursor */
 	button:active, select:active {
 		color: var(--fg-color-intensive);
 		background-color: var(--bg-color-dark);
@@ -142,6 +145,12 @@ ul#ctl li a.ctl-item {
 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;
diff --git a/web/css/mobile.css b/web/css/mobile.css
index 1e5df8fd..eeaaf0e6 100644
--- a/web/css/mobile.css
+++ b/web/css/mobile.css
@@ -4,26 +4,6 @@
 */
 
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-	div.window {
-		padding-top: 45px !important;
-	}
-	div.window-header {
-		height: 35px !important;
-	}
-	div.window-grab {
-		height: 35px !important;
-	}
-	button.window-button-close {
-		height: 40px !important;
-	}
-
-	ul#ctl li a.ctl-item:hover:not(.active) {
-		background-color: var(--bg-color-ctl) !important;
-	}
-
-	div.keyboard {
-		zoom: 1.28 !important;
-	}
 	div#keyboard-window {
 		visibility: visible !important;
 		padding-top: 9px !important;
@@ -42,16 +22,6 @@
 	div#keyboard-window-header {
 		display: none !important
 	}
-	div.keyboard div.key:hover, div.modifier:hover {
-		color: var(--fg-color-normal);
-		background-color: var(--bg-color-gray);
-	}
-	div#keyboard-desktop {
-		display: none !important;
-	}
-	div#keyboard-mobile {
-		display: block !important;
-	}
 
 	div#stream-window {
 		padding-top: 3px !important;
@@ -83,11 +53,7 @@
 		height: 45px !important;
 	}
 
-	div.modal-buttons button {
-		height: 50px !important;
-	}
-
-	@supports (-webkit-appearance:none) {
+	@supports (-webkit-appearance: none) {
 		input[type=range].slider {
 			margin: 20px 0 20px 0 !important;
 		}
diff --git a/web/css/modals.css b/web/css/modals.css
index 4d49815e..955795bb 100644
--- a/web/css/modals.css
+++ b/web/css/modals.css
@@ -10,7 +10,7 @@ div.modal {
 	z-index: 2147483647;
 }
 
-div.modal-window {
+div.modal div.modal-window {
 	display: table;
 	outline: none;
 	margin: 15% auto;
@@ -22,31 +22,36 @@ div.modal-window {
 	background-color: var(--bg-color-light);
 	padding: 0;
 }
-div.modal-window:focus {
+div.modal div.modal-window:focus {
 	border: var(--border-intensive-2px) !important;
 }
 
-
-div.modal-header {
+div.modal div.modal-window div.modal-header {
 	text-align: center;
 	font-weight: bold;
 	padding: 3px 9px 3px 9px;
 	border-bottom: var(--border-normal-thin);
 }
 
-div.modal-content {
+div.modal div.modal-window div.modal-content {
 	max-width: 500px;
 	max-height: 500px;
 	padding: 16px 9px 16px 9px;
 }
 
-div.modal-buttons {
+div.modal div.modal-window div.modal-buttons {
 	border-top: var(--border-dark-thin);
 	margin: 0;
 	padding: 0;
 	font-size: 0;
 }
 
-div.modal-buttons button {
+div.modal div.modal-window div.modal-buttons button {
 	height: 40px;
 }
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	/* iPad vertical */
+	div.modal-buttons button {
+		height: 50px !important;
+	}
+}
diff --git a/web/css/msd.css b/web/css/msd.css
index 91c6a280..46636f03 100644
--- a/web/css/msd.css
+++ b/web/css/msd.css
@@ -18,36 +18,9 @@ table.msd-info {
 	margin: 0 10px 0 10px;
 	font-size: 12px;
 }
-table.msd-info
-td#msd-status,
-td#msd-current-image-name,
-td#msd-current-image-size,
-td#msd-storage-size,
-td#msd-new-image-name,
-td#msd-new-image-size {
+
+table.msd-info td.msd-info-value {
 	font-weight: bold;
 	max-width: 310px;
 	overflow: hidden;
 }
-
-div#msd-progress {
-	background-color: var(--bg-color-selected);
-	height: 1.5em;
-	width: 100%;
-	position: relative;
-}
-div#msd-progress:before {
-	color: var(--fg-color-intensive);
-	content: attr(data-label);
-	font-size: 0.8em;
-	position: absolute;
-	text-align: center;
-	top: 4px;
-	left: 0;
-	right: 0;
-}
-div#msd-progress span#msd-progress-value {
-	background-color: var(--bg-color-intensive);
-	display: inline-block;
-	height: 100%;
-}
diff --git a/web/css/progress.css b/web/css/progress.css
new file mode 100644
index 00000000..37eeb380
--- /dev/null
+++ b/web/css/progress.css
@@ -0,0 +1,23 @@
+div.progress {
+	background-color: var(--bg-color-selected);
+	height: 1.5em;
+	width: 100%;
+	position: relative;
+}
+
+div.progress:before {
+	color: var(--fg-color-intensive);
+	content: attr(data-label);
+	font-size: 0.8em;
+	position: absolute;
+	text-align: center;
+	top: 4px;
+	left: 0;
+	right: 0;
+}
+
+div.progress span.progress-value {
+	background-color: var(--bg-color-intensive);
+	display: inline-block;
+	height: 100%;
+}
diff --git a/web/css/windows.css b/web/css/windows.css
index 5c183f07..56f06106 100644
--- a/web/css/windows.css
+++ b/web/css/windows.css
@@ -15,7 +15,7 @@ div.window:focus {
 	border: var(--border-intensive-2px) !important;
 }
 
-div.window-header {
+div.window div.window-header {
 	overflow: hidden;
 	top: 0;
 	left: 0;
@@ -28,7 +28,7 @@ div.window-header {
 	border-bottom: var(--border-normal-thin);
 }
 
-div.window-grab {
+div.window div.window-header div.window-grab {
 	overflow: hidden;
 	top: 0;
 	left: 0;
@@ -39,13 +39,13 @@ div.window-grab {
 	padding: 3px 0 2px 20px;
 }
 
-div.window-header-grabbed {
+div.window div.window-header-grabbed {
 	color: var(--fg-color-intensive);
 	background-color: var(--bg-color-intensive);
 	border-bottom: var(--border-intensive-thin);
 }
 
-button.window-button-close {
+div.window div.window-header button.window-button-close {
 	position: absolute;
 	top: -2px;
 	right: -6px;
@@ -55,3 +55,19 @@ button.window-button-close {
 	color: var(--fg-color-inactive);
 	display: inline-block;
 }
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	/* iPad */
+	div.window {
+		padding-top: 45px !important;
+	}
+	div.window div.window-header {
+		height: 35px !important;
+	}
+	div.window div.window-header div.window-grab {
+		height: 35px !important;
+	}
+	div.window div.window-header  button.window-button-close {
+		height: 40px !important;
+	}
+}
diff --git a/web/index.html b/web/index.html
index 3bba9878..86b64f3b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -16,6 +16,7 @@
 	<link rel="stylesheet" href="css/leds.css">
 	<link rel="stylesheet" href="css/sliders.css">
 	<link rel="stylesheet" href="css/switches.css">
+	<link rel="stylesheet" href="css/progress.css">
 	<link rel="stylesheet" href="css/stream.css">
 	<link rel="stylesheet" href="css/hid.css">
 	<link rel="stylesheet" href="css/msd.css">
@@ -62,10 +63,10 @@
 		<li class="ctl-right-actions">
 			<div class="ctl-dropdown">
 				<a class="ctl-item" href="#">
-					<img data-dont-hide-menu id="link-led" class="led-off" src="svg/link-led.svg" />
-					<img data-dont-hide-menu id="stream-led" class="led-off" src="svg/stream-led.svg" />
-					<img data-dont-hide-menu id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" />
-					<img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" />
+					<img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" />
+					<img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" />
+					<img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="svg/hid-keyboard-led.svg" />
+					<img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" />
 					System &#8628;
 				</a>
 				<div data-dont-hide-menu class="ctl-dropdown-content">
@@ -118,8 +119,8 @@
 		<li class="ctl-right-actions">
 			<div class="ctl-dropdown">
 				<a class="ctl-item" href="#">
-					<img data-dont-hide-menu id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" />
-					<img data-dont-hide-menu id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" />
+					<img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" />
+					<img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" />
 					ATX &#8628;
 				</a>
 				<div class="ctl-dropdown-content ctl-dropdown-content-buttons">
@@ -134,7 +135,7 @@
 		<li class="ctl-right-actions">
 			<div class="ctl-dropdown">
 				<a class="ctl-item" href="#">
-					<img data-dont-hide-menu id="msd-led" class="led-off" src="svg/msd-led.svg" />
+					<img data-dont-hide-menu id="msd-led" class="led-gray" src="svg/msd-led.svg" />
 					Mass Storage &#8628;
 				</a>
 				<div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content">
@@ -177,7 +178,7 @@
 					<table class="msd-info">
 						<tr>
 							<td>Status: </td>
-							<td id="msd-status"></td>
+							<td id="msd-status" class="msd-info-value"></td>
 						</tr>
 					</table>
 					<hr>
@@ -185,15 +186,15 @@
 					<table class="msd-info">
 						<tr>
 							<td>Current image:</td>
-							<td id="msd-current-image-name"></td>
+							<td id="msd-current-image-name" class="msd-info-value"></td>
 						</tr>
 						<tr>
 							<td>Image size:</td>
-							<td id="msd-current-image-size"></td>
+							<td id="msd-current-image-size" class="msd-info-value"></td>
 						</tr>
 						<tr>
 							<td>Storage size:</td>
-							<td id="msd-storage-size"></td>
+							<td id="msd-storage-size" class="msd-info-value"></td>
 						</tr>
 					</table>
 					<hr>
@@ -210,17 +211,17 @@
 						<table class="msd-info">
 							<tr>
 								<td>New name:</td>
-								<td id="msd-new-image-name"></td>
+								<td id="msd-new-image-name" class="msd-info-value"></td>
 							</tr>
 							<tr>
 								<td>Upload size:</td>
-								<td id="msd-new-image-size"></td>
+								<td id="msd-new-image-size" class="msd-info-value"></td>
 							</tr>
 						</table>
 						<hr>
 						<div class="ctl-dropdown-content-text">
-							<div id="msd-progress">
-								<span id="msd-progress-value"></span>
+							<div id="msd-progress" class="progress">
+								<span id="msd-progress-value" class="progress-value"></span>
 							</div>
 						</div>
 						<hr>
@@ -237,7 +238,7 @@
 		<li class="ctl-right-actions">
 			<div class="ctl-dropdown">
 				<a class="ctl-item" href="#">
-					<img data-dont-hide-menu id="hid-pak-led" class="led-off" src="svg/gear-led.svg" />
+					<img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" />
 					Shortcuts &#8628;
 				</a>
 				<div data-dont-hide-menu class="ctl-dropdown-content">
@@ -537,15 +538,15 @@
 			<table>
 				<tr>
 					<td>Kvmd:</td>
-					<td id="about-version-kvmd"></td>
+					<td id="about-version-kvmd" class="version"></td>
 				</tr>
 				<tr>
 					<td>Python:</td>
-					<td id="about-version-python"></td>
+					<td id="about-version-python" class="version"></td>
 				</tr>
 				<tr>
 					<td>Platform:</td>
-					<td id="about-version-platform"></td>
+					<td id="about-version-platform" class="version"></td>
 				</tr>
 			</table>
 			<p>
diff --git a/web/js/atx.js b/web/js/atx.js
index f4b4811a..b75b901b 100644
--- a/web/js/atx.js
+++ b/web/js/atx.js
@@ -28,13 +28,13 @@ function Atx() {
 
 	self.setState = function(state) {
 		__setButtonsBusy(state.busy);
-		$("atx-power-led").className = (state.leds.power ? "led-on" : "led-off");
-		$("atx-hdd-led").className = (state.leds.hdd ? "led-hdd-busy" : "led-off");
+		$("atx-power-led").className = (state.leds.power ? "led-green" : "led-gray");
+		$("atx-hdd-led").className = (state.leds.hdd ? "led-red" : "led-gray");
 	};
 
 	self.clearState = function() {
-		$("atx-power-led").className = "led-off";
-		$("atx-hdd-led").className = "led-off";
+		$("atx-power-led").className = "led-gray";
+		$("atx-hdd-led").className = "led-gray";
 	};
 
 	var __clickButton = function(button, timeout, confirm_msg) {
diff --git a/web/js/hid.js b/web/js/hid.js
index 27c53966..77bb865b 100644
--- a/web/js/hid.js
+++ b/web/js/hid.js
@@ -153,7 +153,7 @@ function Hid() {
 				if (ok) {
 					$("hid-pak-text").disabled = true;
 					$("hid-pak-button").disabled = true;
-					$("hid-pak-led").className = "led-hid-pak-typing";
+					$("hid-pak-led").className = "led-yellow-rotating-fast";
 					$("hid-pak-led").title = "Autotyping...";
 
 					tools.debug("Paste-as-keys:", text);
@@ -168,7 +168,7 @@ function Hid() {
 								$("hid-pak-text").value = "";
 								$("hid-pak-text").disabled = false;
 								$("hid-pak-button").disabled = false;
-								$("hid-pak-led").className = "led-off";
+								$("hid-pak-led").className = "led-gray";
 								$("hid-pak-led").title = "";
 							}
 						});
diff --git a/web/js/keyboard.js b/web/js/keyboard.js
index b8c4797b..42e92ecd 100644
--- a/web/js/keyboard.js
+++ b/web/js/keyboard.js
@@ -71,10 +71,10 @@ function Keyboard() {
 
 	var __updateLeds = function() {
 		if (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window"))) {
-			$("hid-keyboard-led").className = "led-on";
+			$("hid-keyboard-led").className = "led-green";
 			$("hid-keyboard-led").title = "Keyboard captured";
 		} else {
-			$("hid-keyboard-led").className = "led-off";
+			$("hid-keyboard-led").className = "led-gray";
 			$("hid-keyboard-led").title = "Keyboard free";
 		}
 	};
diff --git a/web/js/mouse.js b/web/js/mouse.js
index d1c45118..460e2945 100644
--- a/web/js/mouse.js
+++ b/web/js/mouse.js
@@ -55,10 +55,10 @@ function Mouse() {
 
 	var __updateLeds = function() {
 		if (__ws && __stream_hovered) {
-			$("hid-mouse-led").className = "led-on";
+			$("hid-mouse-led").className = "led-green";
 			$("hid-mouse-led").title = "Mouse tracked";
 		} else {
-			$("hid-mouse-led").className = "led-off";
+			$("hid-mouse-led").className = "led-gray";
 			$("hid-mouse-led").title = "Mouse free";
 		}
 	};
diff --git a/web/js/msd.js b/web/js/msd.js
index 9adb7495..bbc86370 100644
--- a/web/js/msd.js
+++ b/web/js/msd.js
@@ -103,18 +103,18 @@ function Msd() {
 	var __applyState = function() {
 		if (__state.connected_to === "server") {
 			$("msd-another-another-user-uploads").style.display = "none";
-			$("msd-led").className = "led-on";
+			$("msd-led").className = "led-green";
 			$("msd-status").innerHTML = $("msd-led").title = "Connected to Server";
 			$("msd-another-another-user-uploads").style.display = "none";
 		} else if (__state.busy) {
 			if (!__upload_http) {
 				$("msd-another-another-user-uploads").style.display = "block";
 			}
-			$("msd-led").className = "led-msd-writing";
+			$("msd-led").className = "led-yellow-rotating-fast";
 			$("msd-status").innerHTML = $("msd-led").title = "Uploading new image";
 		} else {
 			$("msd-another-another-user-uploads").style.display = "none";
-			$("msd-led").className = "led-off";
+			$("msd-led").className = "led-gray";
 			if (__state.in_operate) {
 				$("msd-status").innerHTML = $("msd-led").title = "Connected to KVM";
 			} else {
diff --git a/web/js/session.js b/web/js/session.js
index 3169c8c1..19df05cc 100644
--- a/web/js/session.js
+++ b/web/js/session.js
@@ -33,12 +33,12 @@ function Session(atx, hid, msd) {
 	};
 
 	var __startPoller = function() {
-		$("link-led").className = "led-link-connecting";
+		$("link-led").className = "led-yellow";
 		$("link-led").title = "Connecting...";
 		var http = tools.makeRequest("GET", "/wsauth", function() {
 			if (http.readyState === 4) {
 				if (http.status === 200) {
-					__ws = new WebSocket((location.protocol == "https:" ? "wss" : "ws") + "://" + location.host + "/kvmd/ws");
+					__ws = new WebSocket((location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/kvmd/ws");
 					__ws.onopen = __wsOpenHandler;
 					__ws.onmessage = __wsMessageHandler;
 					__ws.onerror = __wsErrorHandler;
@@ -51,7 +51,7 @@ function Session(atx, hid, msd) {
 	};
 
 	var __wsOpenHandler = function(event) {
-		$("link-led").className = "led-on";
+		$("link-led").className = "led-green";
 		$("link-led").title = "Connected";
 		tools.debug("WebSocket opened:", event);
 		atx.loadInitialState();
@@ -85,7 +85,7 @@ function Session(atx, hid, msd) {
 	};
 
 	var __wsCloseHandler = function(event) {
-		$("link-led").className = "led-off";
+		$("link-led").className = "led-gray";
 		tools.debug("WebSocket closed:", event);
 		if (__ping_timer) {
 			clearInterval(__ping_timer);
@@ -95,7 +95,7 @@ function Session(atx, hid, msd) {
 		atx.clearState();
 		__ws = null;
 		setTimeout(function() {
-			$("link-led").className = "led-link-connecting";
+			$("link-led").className = "led-yellow";
 			setTimeout(__startPoller, 500);
 		}, 500);
 	};
diff --git a/web/js/stream.js b/web/js/stream.js
index 10388ca1..fe054e47 100644
--- a/web/js/stream.js
+++ b/web/js/stream.js
@@ -46,7 +46,7 @@ function Stream() {
 					tools.info("Refreshing stream ...");
 					$("stream-image").className = "stream-image-inactive";
 					$("stream-box").classList.add("stream-box-inactive");
-					$("stream-led").className = "led-off";
+					$("stream-led").className = "led-gray";
 					$("stream-led").title = "Stream inactive";
 					$("stream-screenshot-button").disabled = true;
 					$("stream-quality-slider").disabled = true;
@@ -56,7 +56,7 @@ function Stream() {
 					__prev_state = false;
 
 				} else if (http.status === 200) {
-					if ($("stream-quality-slider").value != response.source.quality && !__quality_timer) {
+					if ($("stream-quality-slider").value !== response.source.quality && !__quality_timer) {
 						$("stream-quality-slider").value = response.source.quality;
 						$("stream-quality-value").innerHTML = response.source.quality + "%";
 					}
@@ -88,7 +88,7 @@ function Stream() {
 						$("stream-image").src = "/streamer/stream?t=" + new Date().getTime();
 						$("stream-image").className = "stream-image-active";
 						$("stream-box").classList.remove("stream-box-inactive");
-						$("stream-led").className = "led-on";
+						$("stream-led").className = "led-green";
 						$("stream-led").title = "Stream is active";
 						$("stream-screenshot-button").disabled = false;
 						$("stream-quality-slider").disabled = false;