atem styling updates

plugins/atem/styles.css

@@ -36,6 +36,10 @@ h3 {
   background: radial-gradient(circle, rgba(255, 240, 0, 1) 0%, rgba(250, 169, 9, 1) 100%);
 }
 
+.atem-gray {
+  color: rgb(150, 150, 150);
+}
+
 .source-label {
   display: flex;
   align-items: center;
@@ -53,14 +57,31 @@ h3 {
   display: flex;
   flex-direction: column;
   width: fit-content;
+  padding: 5px;
+}
+
+.fade-to-black .source-wrapper {
+  display: flex;
+  width: fit-content;
+  padding: 5px;
 }
 
 .dsk-rate,
 .ftb-rate {
   display: flex;
   justify-content: center;
+  flex-direction: column;
 }
+
+.ftb-rate {
+  width: 50px;
+}
+
 .dsk-rate-label,
 .ftb-rate-label {
   color: rgb(235, 110, 0);
+  background-color: black;
+  border-radius: 3px;
+  padding: 2px;
+  text-align: center;
 }

plugins/atem/template.ejs

@@ -6,9 +6,9 @@
 
 <% Object.entries(data.video.mixEffects).forEach(([meIndex, state])=>{ %>
     <div class="mixeffect_wrapper" id="me-<%= meIndex %>">
-        <h1>ME<%= Number(meIndex) + 1 %></h1>
+        <h1 class="atem-gray">ME<%= Number(meIndex) + 1 %></h1>
         <div class="program">
-            <h3>Program</h3>
+            <h3 class="atem-gray">Program</h3>
             <div class="source-wrapper">
                 <% Object.entries(data.inputs).forEach(([inputId, state])=>{ %>
                     <div id="me-<%= meIndex %>-program-input-<%= inputId %>" class="atem-input">
@@ -19,7 +19,7 @@
         </div>
 
         <div class="preview">
-            <h3>Preview</h3>
+            <h3 class="atem-gray">Preview</h3>
             <div class="source-wrapper">
                 <% Object.entries(data.inputs).forEach(([inputId, state])=>{ %>
                     <div id="me-<%= meIndex %>-preview-input-<%= inputId %>" class="atem-input">
@@ -29,7 +29,7 @@
             </div>
         </div>
 
-        <div class="next-transition">
+        <!-- <div class="next-transition">
             <h3>Next Transition</h3>
             <div class="source-wrapper"></div>
         </div>
@@ -37,12 +37,13 @@
         <div class="transition-style">
             <h3>Transition Style</h3>
             <div class="source-wrapper"></div>
-        </div>
+        </div> -->
 
         <div class="fade-to-black">
-            <h3>Fade to Black</h3>
+            <h3 class="atem-gray">Fade to Black</h3>
             <div class="source-wrapper">
                 <div class="ftb-rate">
+                    <div class="atem-gray" style="text-align: center">Rate</div>
                     <div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">1:00</div>
                 </div>
                 <div id="me-<%= meIndex %>-ftb" class="atem-input">
@@ -62,16 +63,17 @@
 <% if (data.video.downstreamKeyers) { %>
     <% Object.entries(data.video.downstreamKeyers).forEach(([dskIndex, state])=>{ %>
         <div class="dsk">
-            <h3>DSK<%= Number(dskIndex) + 1 %></h3>
+            <h3 class="atem-gray">DSK<%= Number(dskIndex) + 1 %></h3>
             <div class="source-wrapper">
                 <div id="dsk-<%= dskIndex %>-tie" class="atem-input">
                     <div class="source-label">TIE</div>
                 </div>
                 <div class="dsk-rate">
+                    <div class="atem-gray" style="text-align: center">Rate</div>
                     <div id="dsk-<%= dskIndex %>-rate" class="dsk-rate-label">1:00</div>
                 </div>
                 <div id="dsk-<%= dskIndex %>-onair" class="atem-input">
-                    <div class="source-label">ON AIR</div>
+                    <div class="source-label" style="flex-direction: column;"><div>ON</div> <div>AIR</div></div>
                 </div>
 
                 <div id="dsk-<%= dskIndex %>-auto" class="atem-input">