update transition layout

plugins/atem/styles.css

@@ -22,11 +22,6 @@ h3 {
   width: fit-content;
 }
 
-.empty {
-  border-color: transparent;
-  background-color: transparent;
-}
-
 .atem-red {
   background: rgb(255, 130, 131);
   background: radial-gradient(circle, rgba(255, 130, 131, 1) 0%, rgba(255, 41, 40, 1) 100%);
@@ -53,12 +48,34 @@ h3 {
   height: 100%;
 }
 
+.transition-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .tbar-progress {
   width: 100%;
   height: 40px;
   accent-color: limegreen;
 }
 
+.tbar-container {
+  display: flex;
+  flex-direction: column-reverse;
+  background-color: #1f1f1f;
+  border: 4px solid;
+  border-color: #1a1a1a;
+  border-radius: 6px;
+  width: 20px;
+  height: auto;
+}
+
+.tbar-div {
+  width: 100%;
+  background-color: limegreen;
+  overflow: hidden;
+}
+
 .dsk .source-wrapper {
   display: flex;
   flex-direction: column;
@@ -66,6 +83,11 @@ h3 {
   padding: 5px;
 }
 
+.fade-to-black-container {
+  display: flex;
+  align-items: flex-end;
+}
+
 .fade-to-black .source-wrapper {
   display: flex;
   width: fit-content;
@@ -95,6 +117,15 @@ h3 {
   text-align: center;
 }
 
+.clear {
+  border-color: transparent;
+  background-color: transparent;
+}
+
 .hide {
   display: none;
 }
+
+.no-wrap {
+  flex-wrap: nowrap;
+}