readd coloring to resource chart bars

web/templates/resource-chart.go.tmpl

@@ -13,15 +13,13 @@
 				margin: 0;
 				width: 100%;
 				height: fit-content;
-				padding: 10px 10px 10px 10px;
+				padding: 10px;
 				border-radius: 5px;
 			}
 			progress {
 				width: 100%;
 				border: 0;
 				height: 1em;
-				-webkit-appearance: none;
-				-moz-appearance: none;
 				appearance: none;
 			}
 			#caption {
@@ -30,14 +28,23 @@
 				display: flex;
 				flex-direction: column;
 			}
+			progress::-moz-progress-bar { 
+				background: #{{.ColorHex}}; 
+			}
+			progress::-webkit-progress-bar { 
+				background: var(--main-text-color); 
+			}
+			progress::-webkit-progress-value { 
+				background: #{{.ColorHex}}; 
+			}
 		</style>
 		<div id="container">
-			<progress value="{{.Used}}" max="{{.Max}}"></progress>
-			<p id="caption">
+			<progress value="{{.Used}}" max="{{.Max}}" id="resource"></progress>
+			<label id="caption" for="resource">
 				<span>{{.Name}}</span>
 				<span>{{printf "%g" .Avail}} {{.Prefix}}{{.Unit}} Avaliable</span>
-			</p>
+			</label>
 		</div>
 	</template>
 </resource-chart>
-{{end}}-
+{{end}}