Change Local Radar precipitation page styling

server/scripts/modules/radar.mjs

@@ -119,7 +119,7 @@ class Radar extends WeatherDisplay {
 	}
 
 	createRadarLayer(frame) {
-		const tileUrl = `${this.radarHost}${frame.path}/256/{z}/{x}/{y}/4/1_1.png`;
+		const tileUrl = `${this.radarHost}${frame.path}/256/{z}/{x}/{y}/4/1_0.png`;
 		const layer = window.L.tileLayer(tileUrl, {
 			tileSize: 256,
 			opacity: 0,

server/styles/scss/_radar.scss

@@ -34,68 +34,70 @@
 			@include u.text-shadow();
 			text-align: center;
 
-			.scale>div {
-				display: inline-block;
-			}
-
 			.scale-table {
-				display: table-row;
-				border-collapse: collapse;
+				display: flex;
+				justify-content: center;
+				gap: 7px;
+
+				.item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					width: 25px;
+					gap: 2px;
+				}
 
 				.box {
-					display: table-cell;
+					display: block;
 					border: 2px solid black;
-					width: 17px;
-					height: 24px;
-					padding: 0
+					width: 100%;
+					height: 22px;
+					padding: 0;
 				}
 
 				.box-1 {
-					background-color: rgb(49, 210, 22);
+					background-color: rgb(73, 190, 246);
 				}
 
 				.box-2 {
-					background-color: rgb(28, 138, 18);
+					background-color: rgb(49, 210, 22);
 				}
 
 				.box-3 {
-					background-color: rgb(20, 90, 15);
+					background-color: rgb(241, 228, 88);
 				}
 
 				.box-4 {
-					background-color: rgb(10, 40, 10);
+					background-color: rgb(224, 142, 47);
 				}
 
 				.box-5 {
-					background-color: rgb(196, 179, 70);
+					background-color: rgb(196, 42, 42);
 				}
 
 				.box-6 {
-					background-color: rgb(190, 72, 19);
+					background-color: rgb(145, 59, 184);
 				}
 
-				.box-7 {
-					background-color: rgb(171, 14, 14);
-				}
-
-				.box-8 {
-					background-color: rgb(115, 31, 4);
+				.label {
+					font-family: 'Star4000 Small';
+					font-size: 10pt;
+					line-height: 1;
+					white-space: nowrap;
 				}
 			}
 
 			.scale {
-				.text {
-					position: relative;
-					top: -5px;
-				}
+				margin-top: -2px;
 			}
 
 			.time {
 				position: relative;
 				font-weight: normal;
-				top: -14px;
+				top: -20px;
 				font-family: 'Star4000 Small';
-				font-size: 24pt;
+				font-size: 18pt;
+				left: 130px;
 			}
 		}
 	}