Unify range slider look with css

Make panel elements placement less fickle

htdocs/index.wrx

@@ -82,9 +82,9 @@
 					<div class="openwebrx-button" onclick="demodulator_analog_replace('usb');">USB</div>
 					<div class="openwebrx-button" onclick="demodulator_analog_replace('cw');">CW</div>
 
-					<span>Volume:</span>
+					<div>Volume:
 					<input id="openwebrx-panel-volume" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
-
+					</div>
 					<div id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute()">Mute</div>
 
 				</div>

htdocs/openwebrx.css

@@ -33,6 +33,118 @@ input
 	vertical-align:middle;
 }
 
+input[type=range]
+{
+	-webkit-appearance: none;
+	margin: 10px 0;
+	width: 100%;
+}
+input[type=range]:focus
+{
+	outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track
+{
+	width: 100%;
+	height: 7px;
+	cursor: pointer;
+	animate: 0.2s;
+	box-shadow: 0px 0px 0px #000000;
+	background: #B6B6B6;
+	border-radius: 11px;
+	border: 1px solid #8A8A8A;
+}
+
+input[type=range]::-webkit-slider-thumb
+{
+	box-shadow: 1px 1px 1px #828282;
+	border: 1px solid #8A8A8A;
+	height: 24px;
+	width: 7px;
+	border-radius: 0px;
+	background: #FFFFFF;
+	cursor: pointer;
+	-webkit-appearance: none;
+	margin-top: -9.5px;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track
+{
+	background: #B6B6B6;
+}
+
+input[type=range]::-moz-range-track
+{
+	width: 100%;
+	height: 7px;
+	cursor: pointer;
+	animate: 0.2s;
+	box-shadow: 0px 0px 0px #000000;
+	background: #B6B6B6;
+	border-radius: 11px;
+	border: 1px solid #8A8A8A;
+}
+
+input[type=range]::-moz-range-thumb
+{
+	box-shadow: 1px 1px 1px #828282;
+	border: 1px solid #8A8A8A;
+	height: 24px;
+	width: 7px;
+	border-radius: 0px;
+	background: #FFFFFF;
+	cursor: pointer;
+}
+
+input[type=range]::-ms-track
+{
+	width: 100%;
+	height: 7px;
+	cursor: pointer;
+	animate: 0.2s;
+	background: transparent;
+	border-color: transparent;
+	color: transparent;
+}
+
+input[type=range]::-ms-fill-lower
+ {
+	background: #B6B6B6;
+	border: 1px solid #8A8A8A;
+	border-radius: 22px;
+	box-shadow: 0px 0px 0px #000000;
+}
+
+input[type=range]::-ms-fill-upper
+{
+	background: #B6B6B6;
+	border: 1px solid #8A8A8A;
+	border-radius: 22px;
+	box-shadow: 0px 0px 0px #000000;
+}
+
+input[type=range]::-ms-thumb
+{
+	box-shadow: 1px 1px 1px #828282;
+	border: 1px solid #8A8A8A;
+	height: 24px;
+	width: 7px;
+	border-radius: 0px;
+	background: #FFFFFF;
+	cursor: pointer;
+}
+
+input[type=range]:focus::-ms-fill-lower
+{
+	background: #B6B6B6;
+}
+
+input[type=range]:focus::-ms-fill-upper
+{
+	background: #B6B6B6;
+}
+
 #webrx-top-container
 {
 	position: relative;
@@ -544,6 +656,10 @@ input
 	font-weight: bold;
 }
 
+#openwebrx-panel-receiver
+{
+	width:110px;
+}
 
 #openwebrx-mute-on
 {
@@ -554,3 +670,8 @@ input
 {
 	color: white;
 }
+
+#openwebrx-panel-volume
+{
+	width:70%;
+}

htdocs/openwebrx.js

@@ -1838,13 +1838,14 @@ function place_panels()
 			if (c.dataset.panelPos=="left") { left_col.push(c); }
 			else if(c.dataset.panelPos=="right") { right_col.push(c); }
 			c.style.width=newSize[0]+"px";
-			c.style.height=newSize[1]+"px";
+			//c.style.height=newSize[1]+"px";
 			if(!c.openwebrxPanelTransparent) c.style.margin=panel_margin.toString()+"px";
 			else c.style.marginLeft=panel_margin.toString()+"px";
 			c.openwebrxPanelWidth=parseInt(newSize[0]);			
 			c.openwebrxPanelHeight=parseInt(newSize[1]);
 		}
 	}
+
 	y=hoffset; //was y=0 before hoffset
 	while(left_col.length>0)
 	{