add color gradient to meters

plugins/x32/styles.css

@@ -133,3 +133,24 @@ input[type='range']::-webkit-slider-runnable-track {
   font-size: 20px;
   vertical-align: middle;
 }
+
+.meter {
+  height: 3px;
+  background: linear-gradient(
+    90deg,
+    rgba(19, 126, 30, 1) 0%,
+    rgba(255, 238, 30, 1) 85%,
+    rgba(255, 0, 0, 1) 100%
+  );
+}
+
+/* need to find a way to match the color of this with the table row */
+.meter-cover {
+  height: 100%;
+  background-color: rgb(22, 23, 25);
+  float: right;
+}
+
+table.cv-table tr:nth-child(odd) td div.meter div.meter-cover {
+  background-color: #292929;
+}

plugins/x32/template.ejs

@@ -36,8 +36,10 @@
     <td><div class="fader-mute mute-<%=data.channelMutes[i]%>">M</div></td>
     <td><%= formatAsDB(data.channelFadersDB[i]) %></td>
     <td>
-      <% let style = `style=height:3px;background-color:green;width:${data.meters[i] + 90}%`; %>
-      <div <%= style %>></div>
+      <% let style = `style=width:${Math.abs(data.meters[i] - 10)}%`; %>
+      <div class="meter">
+        <div class="meter-cover" <%= style %>></div>
+      </div>
       <input
         type="range"
         min="0"