Files
ontime/apps/client/src/features/viewers/lower-thirds/LowerLines.scss
T
Carlos Valente de9a7a87fd V2 monorepo (#285)
* refactor(project structure): UI

* refactor(project structure): extract utilities

* refactor(project structure): remove unused

* refactor(project structure): electron

* refactor(project structure): server

refactor: migrate to vitest

refactor: monorepo config

* refactor: extract application menu

* refactor: exit process

* refactor: extract tray menu

* chore: electron build

* Added Seconds in studio clock #282
---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>

---------

Co-authored-by: Fabian Posenau <fabian.p99@gmx.de>
Co-authored-by: Fabian Posenau <fabian@fphome.de>
2023-02-14 22:02:15 +01:00

67 lines
1.3 KiB
SCSS

.lower-third.lines {
margin: 0;
box-sizing: border-box; /* reset */
overflow: hidden;
width: 100%; /* restrict the page width to viewport */
height: 100%;
color: #fffffa;
font-size: 4vh;
.lower-container {
position: absolute;
top: 75vh;
background-color: #0003;
padding: 1vh 1vw 1vh 0;
display: flex;
flex-direction: column;
width: 45vw;
border-radius: 0 8px 8px 0;
}
.message-container {
position: absolute;
bottom: 2vh;
width: 100%;
text-align: center;
background-color: #0003;
.message {
font-size: 3.5vh;
}
}
.title-container,
.subtitle-container {
display: grid;
grid-template-columns: auto max-content;
grid-template-areas: 'decor text';
align-items: center;
position: relative;
margin-bottom: 1vh;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title-decor,
.sub-decor {
grid-area: decor;
height: 4vh;
width: 100%;
background-color: #ff6969;
background: linear-gradient(
90deg,
rgb(255 105 105 / 100%) 0%,
rgb(255 132 132 / 100%) 100%
);
}
.title,
.subtitle {
grid-area: text;
padding-left: 1vw;
justify-self: right;
width: fit-content;
}
}