From c1e2700c38195020b5871dfeaa0827fd564906c3 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Mon, 19 Feb 2024 21:29:55 +0100
Subject: [PATCH] style: tweaks to lower thirds (#785)

---
 .../viewers/lower-thirds/LowerThird.scss      | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/features/viewers/lower-thirds/LowerThird.scss b/apps/client/src/features/viewers/lower-thirds/LowerThird.scss
index a98d19f9a..603206d18 100644
--- a/apps/client/src/features/viewers/lower-thirds/LowerThird.scss
+++ b/apps/client/src/features/viewers/lower-thirds/LowerThird.scss
@@ -7,40 +7,50 @@
     position: absolute;
     display: block;
     top: 75vh;
+    line-height: normal;
+
     animation-fill-mode: both;
     animation-timing-function: ease-out;
 
     &--pre {
       animation-name: in;
       animation-play-state: paused;
+
       .data-top {
         animation-play-state: paused;
         animation-name: top-in;
       }
+
       .data-lower {
         animation-play-state: paused;
         animation-name: bottom-in;
       }
     }
+
     &--in {
       animation-name: in;
       animation-play-state: running;
+
       .data-top {
         animation-play-state: running;
         animation-name: top-in;
       }
+
       .data-bottom {
         animation-play-state: running;
         animation-name: bottom-in;
       }
     }
+
     &--out {
       animation-name: out;
       animation-play-state: running;
+
       .data-top {
         animation-play-state: running;
         animation-name: top-out;
       }
+
       .data-bottom {
         animation-play-state: running;
         animation-name: bottom-out;
@@ -51,22 +61,24 @@
       width: 100%;
       height: var(--bottomThird-line-height-override, 0.5vh);
     }
+
     .clip {
       overflow: hidden;
     }
+
     .data-bottom,
     .data-top {
-      padding-left: 3vw;
-      padding-right: 3vw;
-      font-family: var(--lowerThird-font-family-override, 'Arial');
+      padding: 0 3vw;
+      font-family: var(--lowerThird-font-family-override, 'Lato');
       text-align: var(--lowerThird-text-align-override, left);
       white-space: nowrap;
     }
 
     .data-top {
-      font-weight: var(--lowerThird-top-font-weight-override, bold);
+      font-weight: var(--lowerThird-top-font-weight-override, 600);
       font-style: var(--lowerThird-top-font-style-override, normal);
     }
+
     .data-bottom {
       font-weight: var(--lowerThird-bottom-font-weight-override, normal);
       font-style: var(--lowerThird-bottom-font-style-override, normal);
@@ -74,6 +86,7 @@
   }
 }
 
+
 @keyframes in {
   0% {
     transform: translateX(-100%);