style for go live

Author: KSemenenko

src/PrompterOne.Shared/GoLive/Components/GoLiveCameraPreviewCard.razor.css

@@ -14,19 +14,22 @@
     background: #050508;
 }
 
-.gl-monitor-preview .gl-monitor-feed {
+::deep .gl-monitor-feed {
     aspect-ratio: 16 / 9;
-}
-
-.gl-preview-feed {
     position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     overflow: hidden;
-    background:
-        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 32%),
-        #050508;
+    background: #050508;
+}
+
+::deep .gl-preview-video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+    object-position: center;
+    background: #050508;
 }
 
 .gl-preview-overlay {
@@ -50,17 +53,6 @@
     backdrop-filter: blur(10px);
 }
 
-.gl-preview-video {
-    width: 100%;
-    height: 100%;
-    display: block;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    object-position: center;
-    background: #050508;
-}
-
 .gl-air-dot-wrap {
     position: absolute;
     top: 7px;

src/PrompterOne.Shared/GoLive/Components/GoLiveProgramFeedCard.razor

@@ -3,12 +3,11 @@
 
 <section class="gl-program-monitor-shell"
          data-live-state="@LiveState">
-    <div class="gl-monitor-label-top gl-label-canvas">
-        <span>@Title</span>
-    </div>
-
     <div class="gl-monitor gl-monitor-program"
          data-testid="@UiTestIds.GoLive.ProgramCard">
+        <div class="gl-monitor-label-top gl-label-canvas">
+            <span>@Title</span>
+        </div>
         <GoLiveCameraSurface Camera="@Camera"
                              ContainerClass="gl-monitor-feed"
                              ContainerDomId="@UiDomIds.GoLive.ProgramStage"

src/PrompterOne.Shared/GoLive/Components/GoLiveProgramFeedCard.razor.css

@@ -8,18 +8,19 @@
 }
 
 .gl-monitor-label-top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 0 4px;
-    font-size: 10px;
-    font-weight: 700;
-    letter-spacing: 1.2px;
+    position: absolute;
+    top: 10px;
+    left: 12px;
+    z-index: 5;
+    pointer-events: none;
+    font-size: 9px;
+    font-weight: 800;
+    letter-spacing: 2px;
+    text-transform: uppercase;
 }
 
 .gl-label-canvas {
-    color: rgba(196, 160, 96, .6);
+    color: rgba(196, 160, 96, .35);
 }
 
 .gl-monitor {
@@ -40,26 +41,20 @@
     box-shadow: 0 0 40px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--gold-06);
 }
 
-.gl-monitor-feed {
-    position: relative;
+::deep .gl-monitor-feed {
     flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    position: relative;
     min-height: 0;
-    aspect-ratio: 16 / 9;
     overflow: hidden;
-    background:
-        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 32%),
-        #050508;
+    background: #050508;
 }
 
-.gl-program-video {
+::deep .gl-program-video {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     display: block;
-    max-width: 100%;
-    max-height: 100%;
     object-fit: contain;
     object-position: center;
     background: #050508;
@@ -91,13 +86,13 @@
 }
 
 .gl-preview-empty {
+    position: absolute;
+    inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 10px;
-    width: 100%;
-    height: 100%;
     padding: 24px;
     color: rgba(255, 255, 255, .16);
     text-align: center;

src/PrompterOne.Shared/GoLive/Components/GoLiveSourcesCard.razor.css

@@ -94,7 +94,7 @@
     cursor: pointer;
 }
 
-.gl-cam-thumb {
+::deep .gl-cam-thumb {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 9;
@@ -109,7 +109,9 @@
     background: rgba(255, 255, 255, .04);
 }
 
-.gl-source-feed {
+::deep .gl-source-feed {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     display: block;

src/PrompterOne.Shared/Learn/Pages/LearnPage.razor.cs

@@ -9,7 +9,7 @@ namespace PrompterOne.Shared.Pages;
 
 public partial class LearnPage : IAsyncDisposable
 {
-    private const int DefaultContextWordCount = 2;
+    private const int DefaultContextWordCount = 3;
     private const string EndOfScriptPhrase = "End of script.";
     private const string LoadLearnMessage = "Unable to load RSVP rehearsal right now.";
     private const string LoadLearnOperation = "Learn load";

src/PrompterOne.Shared/wwwroot/design/modules/30-rsvp.css

@@ -101,24 +101,24 @@
     display: flex;
     align-items: baseline;
     gap: 14px;
-    font-size: clamp(30px, 2.4vw, 35px);
+    font-size: clamp(26px, 2vw, 30px);
     font-weight: 400;
-    color: rgba(232,213,176,.4);
+    color: rgba(232,213,176,.35);
     line-height: 1;
     white-space: nowrap;
-    overflow: visible;
+    overflow: clip;
     flex: 1 1 0;
     min-width: 0;
     pointer-events: none;
     z-index: 0;
 }
 .rsvp-ctx-left {
     justify-content: flex-end;
-    padding-right: 24px;
+    padding-right: 60px;
 }
 .rsvp-ctx-right {
     justify-content: flex-start;
-    padding-left: 24px;
+    padding-left: 60px;
 }
 
 .rsvp-focus-shell {