cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-11 10:23:54 +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;
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%);