style tweaks

client/src/common/input/EditableTimer.module.css

@@ -13,7 +13,7 @@
 }
 
 .delayedEditable {
-  border: 1px solid #ecc94b;
+  border: 1px solid #d69e2e88;
 }
 
 .delayValue {
@@ -22,5 +22,6 @@
   padding: 0.3em 0;
   text-align: center;
   align-self: flex-start;
-  background-color: #d69e2e;
+  border: 1px solid #d69e2e88;
+  background-color: #d69e2e22;
 }

client/src/common/input/TimeInput.jsx

@@ -7,7 +7,7 @@ const inputProps = {
   fontWeight: 400,
   backgroundColor: 'rgba(0,0,0,0.05)',
   color: '#fff',
-  border: '1px solid #ecc94b',
+  border: '1px solid #ecc94b55',
   borderRadius: '4px',
   placeholder: '-',
   textAlign: 'center',
@@ -44,7 +44,7 @@ export default function TimeInput(props) {
         <EditablePreview />
         <EditableInput type='number' min='0' max='60' />
       </Editable>
-      <span className={style.label}>{'(min)'}</span>
+      <span className={style.label}>{'minutes'}</span>
     </div>
   );
 }

client/src/common/input/TimeInput.module.css

@@ -6,5 +6,4 @@
 .label {
   padding-left: 0.8em;
   align-self: center;
-  font-weight: 600;
 }

client/src/features/editors/list/Block.module.css

@@ -24,11 +24,12 @@
 .actionOverlay {
   display: flex;
   flex-direction: row;
+  padding-top: 0.2em;
   gap: 0.5em;
   align-content: center;
-  align-self: center;
+  align-self: flex-start;
 
-  opacity: 0.8;
+  opacity: 0.4;
   transition: linear 0.1s;
 }
 
@@ -67,12 +68,12 @@
   background-color: rgba(255, 255, 255, 0.36);
   background: linear-gradient(
     180deg,
-    #ff5b7e 0%,
+    #4bffabcc 0%,
-    #ff7597 05%,
+    #227c52aa 09%,
-    #ff759733 06%,
+    #4bffab11 10%,
-    #ff759733 94%,
+    #4bffab11 89%,
-    #ff7597 95%,
+    #227c52aa 90%,
-    #ff5b7e 100%
+    #4bffabcc 100%
   );
 }
 
@@ -106,8 +107,8 @@
   /* background: linear-gradient(0deg, #6b46c1 20%, #805ad5 21%); */
   background: linear-gradient(
     0deg,
-    rgba(107, 70, 193, 1) 0%,
+    rgba(107, 70, 193, 0.4) 0%,
-    rgba(128, 90, 213, 1) 20%,
+    rgba(128, 90, 213, 0.4) 20%,
     rgba(107, 70, 193, 0.15) 21%
   );
 
@@ -120,20 +121,10 @@
   /* background: linear-gradient(180deg, #d69e2e 20%, #ecc94b 21%); */
   background: linear-gradient(
     180deg,
-    rgba(214, 158, 46, 1) 0%,
+    rgba(214, 158, 46, 0.4) 0%,
-    rgba(236, 201, 75, 1) 20%,
+    rgba(236, 201, 75, 0.4) 20%,
     rgba(214, 158, 46, 0.07) 21%
   );
 
   justify-content: space-between;
 }
-
-/* .delayValue {
-  color: #ffa;
-  font-weight: 600;
-  border-radius: 4px;
-  padding: 0.2em;
-  text-align: center;
-  width: 6em;
-  border: 1px solid rgba(255,255,255,0.05);
-} */

client/src/features/viewers/PreviewContainer.jsx

@@ -1,23 +1,26 @@
 import styles from './PreviewContainer.module.css';
-import IFrameLoader from './IFrameLoader';
+import IFrameLoader from './iframes/IFrameLoader';
 
 export default function PreviewContainer() {
   return (
     <div className={styles.previewContainer}>
       <div className={styles.previewItem}>
-        <IFrameLoader title='Default Presenter' src='http://localhost:3000/' />
+        <IFrameLoader
+          title='Default Presenter'
+          src='http://localhost:3000/speaker'
+        />
         <div className={styles.label}>Default Presenter</div>
       </div>
       <div className={styles.previewItem}>
-        <IFrameLoader title='Audience' src='http://localhost:3000/' />
+        <IFrameLoader title='Audience' src='http://localhost:3000/public' />
         <div className={styles.label}>Audience</div>
       </div>
       <div className={styles.previewItem}>
-        <IFrameLoader title='Stage Manager' src='http://localhost:3000/' />
+        <IFrameLoader title='Stage Manager' src='http://localhost:3000/sm' />
         <div className={styles.label}>Stage Manager</div>
       </div>
       <div className={styles.previewItem}>
-        <IFrameLoader title='Lower third' src='http://localhost:3000/' />
+        <IFrameLoader title='Lower third' src='http://localhost:3000/lower' />
         <div className={styles.label}>Lower third</div>
       </div>
     </div>

client/src/features/viewers/backstage/StageManager.module.css

@@ -125,7 +125,7 @@
 
 .entryStart,
 .entryEnd {
-font-size: 1.5vw;
+  font-size: 1.5vw;
 }
 
 .entryTitle {
@@ -152,7 +152,7 @@ font-size: 1.5vw;
   color: #fff;
   line-height: 7vh;
   background-color: rgba(255, 255, 255, 0.09);
-  border-bottom: 3px solid #ff7597aa;
+  border-bottom: 0.5vh solid #ff7597aa;
 }
 
 /* =================== OVERLAY ===================*/