pretty stream stub

kvmd/web/css/stream.css

@@ -7,13 +7,30 @@ img#stream-image {
 }
 
 img.stream-image-active {
-	cursor: crosshair;
 	-webkit-filter: none;
 	filter: none;
 }
 
 img.stream-image-inactive {
-	cursor: wait;
+	-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
-	-webkit-filter: grayscale(100%) brightness(75%);
+	filter: grayscale(100%) brightness(75%) sepia(75%);
-	filter: grayscale(100%) brightness(75%);
+}
+
+div#stream-box {
+	position: relative;
+	display: inline-block;
+}
+div.stream-box-active: {
+	cursor: crosshair;
+}
+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);
 }

kvmd/web/index.html

@@ -205,7 +205,9 @@
 
 	<div id="stream-window" class="window" style="z-index: 1" tabindex="0">
 		<div class="window-header"><div class="window-grab">Stream</div></div>
-		<img id="stream-image" class="stream-image-inactive" alt="Loading..."/>
+		<div id="stream-box" class="stream-box-inactive">
+			<img id="stream-image" class="stream-image-inactive" src="png/blank-stream.png" />
+		</div>
 	</div>
 
 	<div id="keyboard-window" class="window" tabindex="0">

kvmd/web/js/mouse.js

@@ -4,12 +4,12 @@ var mouse = new function() {
 	var __sent_pos = {x: 0, y:0};
 
 	this.init = function() {
-		el_stream_image = $("stream-image");
+		el_stream_box = $("stream-box");
-		el_stream_image.onmousedown = (event) => __buttonHandler(event, true);
+		el_stream_box.onmousedown = (event) => __buttonHandler(event, true);
-		el_stream_image.onmouseup = (event) => __buttonHandler(event, false);
+		el_stream_box.onmouseup = (event) => __buttonHandler(event, false);
-		el_stream_image.oncontextmenu = (event) => event.preventDefault();
+		el_stream_box.oncontextmenu = (event) => event.preventDefault();
-		el_stream_image.onmousemove = __moveHandler;
+		el_stream_box.onmousemove = __moveHandler;
-		el_stream_image.onwheel = (event) => __wheelHandler(event);
+		el_stream_box.onwheel = (event) => __wheelHandler(event);
 		setInterval(__sendMove, 100);
 	};
 

kvmd/web/js/stream.js

@@ -11,12 +11,14 @@ var stream = new function() {
 					tools.info("Refreshing stream ...");
 					__prev_state = false;
 					$("stream-image").className = "stream-image-inactive";
+					$("stream-box").className = "stream-box-inactive";
 					$("stream-led").className = "led-off";
 					$("stream-reset-button").disabled = true;
 				} else if (!__prev_state) {
 					__refreshImage();
 					__prev_state = true;
 					$("stream-image").className = "stream-image-active";
+					$("stream-box").className = "stream-box-active";
 					$("stream-led").className = "led-on";
 					$("stream-reset-button").disabled = false;
 				}