cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-06 23:09:08 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

style: tweaks to lower thirds (#785)

Browse Source
This commit is contained in:
Carlos Valente
2024-02-19 21:29:55 +01:00
committed by GitHub
parent 5a397c6da7
commit c1e2700c38
1 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/viewers/lower-thirds/LowerThird.scss
+17 -4
View File
@@ -7,40 +7,50 @@
position: absolute; position: absolute;
display: block; display: block;
top: 75vh; top: 75vh;
line-height: normal;
animation-fill-mode: both; animation-fill-mode: both;
animation-timing-function: ease-out; animation-timing-function: ease-out;
&--pre { &--pre {
animation-name: in; animation-name: in;
animation-play-state: paused; animation-play-state: paused;
.data-top { .data-top {
animation-play-state: paused; animation-play-state: paused;
animation-name: top-in; animation-name: top-in;
} }
.data-lower { .data-lower {
animation-play-state: paused; animation-play-state: paused;
animation-name: bottom-in; animation-name: bottom-in;
} }
} }
&--in { &--in {
animation-name: in; animation-name: in;
animation-play-state: running; animation-play-state: running;
.data-top { .data-top {
animation-play-state: running; animation-play-state: running;
animation-name: top-in; animation-name: top-in;
} }
.data-bottom { .data-bottom {
animation-play-state: running; animation-play-state: running;
animation-name: bottom-in; animation-name: bottom-in;
} }
} }
&--out { &--out {
animation-name: out; animation-name: out;
animation-play-state: running; animation-play-state: running;
.data-top { .data-top {
animation-play-state: running; animation-play-state: running;
animation-name: top-out; animation-name: top-out;
} }
.data-bottom { .data-bottom {
animation-play-state: running; animation-play-state: running;
animation-name: bottom-out; animation-name: bottom-out;
@@ -51,22 +61,24 @@
width: 100%; width: 100%;
height: var(--bottomThird-line-height-override, 0.5vh); height: var(--bottomThird-line-height-override, 0.5vh);
} }
.clip { .clip {
overflow: hidden; overflow: hidden;
} }
.data-bottom, .data-bottom,
.data-top { .data-top {
padding-left: 3vw; padding: 0 3vw;
padding-right: 3vw; font-family: var(--lowerThird-font-family-override, 'Lato');
font-family: var(--lowerThird-font-family-override, 'Arial');
text-align: var(--lowerThird-text-align-override, left); text-align: var(--lowerThird-text-align-override, left);
white-space: nowrap; white-space: nowrap;
} }
.data-top { .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); font-style: var(--lowerThird-top-font-style-override, normal);
} }
.data-bottom { .data-bottom {
font-weight: var(--lowerThird-bottom-font-weight-override, normal); font-weight: var(--lowerThird-bottom-font-weight-override, normal);
font-style: var(--lowerThird-bottom-font-style-override, normal); font-style: var(--lowerThird-bottom-font-style-override, normal);
@@ -74,6 +86,7 @@
} }
} }
@keyframes in { @keyframes in {
0% { 0% {
transform: translateX(-100%); transform: translateX(-100%);