mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-16 21:03:29 +00:00
Feat/132 (#198)
This commit is contained in:
Carlos Valente
GitHub
@@ -64,6 +64,7 @@ $subtitle-gray: #aaa;
|
||||
|
||||
//////////////////////////////////// block elements
|
||||
$block-delay-color: #ecc94b;
|
||||
$delay-text: #d69e2e;
|
||||
$block-delay-border: #d69e2e55;
|
||||
$block-block-color: #805ad5;
|
||||
$block-icon-drag: $bg-gray-100;
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
@use 'main' as *;
|
||||
|
||||
// General styling
|
||||
$accent-color: $ontime-pink; // --accent-color-override
|
||||
$delay-color: $delay-text;
|
||||
|
||||
// Main Properties of a viewer
|
||||
$viewer-background-color: $bg-black; // --background-color-override
|
||||
$viewer-color: $title-white; // --color-override
|
||||
$viewer-outdent-bg-color: $bg-gray-1100; // --outdent-background-color-override
|
||||
$viewer-overlay-bg-color: $bg-overlay;
|
||||
|
||||
// Properties related to timer
|
||||
$timer-finished-color: $ontime-pink-variant;
|
||||
|
||||
// View specific - Pip
|
||||
$pip-bg-color: $bg-black-100;
|
||||
$pip-border-color: $bg-black-200;
|
||||
$pip-text-color: $bg-gray-900;
|
||||
$today-item-bg: $bg-gray-700;
|
||||
|
||||
// View specific - Titles
|
||||
$title-color: #ddd;
|
||||
$subtitle-color: #aaa;
|
||||
|
||||
// View specific - Paginator
|
||||
$now-bg-color: #ffffff11;
|
||||
$future-bg-color: #ffffff05;
|
||||
@@ -32,58 +32,57 @@
|
||||
color: $ontime-pink;
|
||||
}
|
||||
|
||||
.infoContainer > div {
|
||||
.info-container > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nextContainer > div,
|
||||
.nowContainer > div {
|
||||
.next-container > div,
|
||||
.now-container > div {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
.nowContainer,
|
||||
.nextContainer,
|
||||
.todayContainer {
|
||||
.now-container,
|
||||
.next-container,
|
||||
.today-container {
|
||||
background-color: $bg-gray-1000;
|
||||
padding: 1vh 2vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clockContainer,
|
||||
.countdownContainer,
|
||||
.publicContainer,
|
||||
.publicContainerHidden {
|
||||
background-color: $bg-gray-1000;
|
||||
.clock-container,
|
||||
.countdown-container,
|
||||
.public-container,
|
||||
.public-container--hidden {
|
||||
padding: 1vh 1vw;
|
||||
}
|
||||
|
||||
.publicContainer {
|
||||
.public-container {
|
||||
opacity: 1;
|
||||
transition: 0.5s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.publicContainerHidden {
|
||||
.public-container--hidden {
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.todayContainer,
|
||||
.infoContainer {
|
||||
.today-container,
|
||||
.info-container {
|
||||
background-color: $bg-gray-1100;
|
||||
padding: 2.5vh 2vw;
|
||||
}
|
||||
|
||||
.infoContainer,
|
||||
.todayContainer,
|
||||
.publicContainer,
|
||||
.publicContainerHidden {
|
||||
.info-container,
|
||||
.today-container,
|
||||
.public-container,
|
||||
.public-container--hidden {
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
.nowContainer,
|
||||
.nextContainer {
|
||||
.now-container,
|
||||
.next-container {
|
||||
margin-left: -1vw;
|
||||
}
|
||||
|
||||
@@ -102,7 +101,7 @@
|
||||
color: $clocks;
|
||||
}
|
||||
|
||||
.infoContainer {
|
||||
.info-container {
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
|
||||
@@ -114,14 +113,14 @@
|
||||
gap: 0.5vw;
|
||||
}
|
||||
|
||||
.infoMessages {
|
||||
.info-messages {
|
||||
grid-area: binf;
|
||||
font-size: 1.5vw;
|
||||
line-height: 2vw;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.clockContainer {
|
||||
.clock-container {
|
||||
grid-area: time;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
@@ -132,17 +131,17 @@
|
||||
padding: 0.5vh 0 0.5vh 1vw;
|
||||
}
|
||||
|
||||
.todayContainer {
|
||||
.today-container {
|
||||
margin-top: 3vh;
|
||||
height: 95%;
|
||||
|
||||
.todayHeaderBlock {
|
||||
.today-header-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5vh;
|
||||
|
||||
.navItem,
|
||||
.navItemSelected {
|
||||
.nav-item,
|
||||
.nav-item--selected {
|
||||
background-color: $bg-gray-700;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
@@ -166,7 +165,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.infoContainer {
|
||||
.info-container {
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: 3vh minmax(0, 1fr);
|
||||
@@ -176,14 +175,14 @@
|
||||
'binf qr';
|
||||
gap: 0.5vw;
|
||||
|
||||
.infoMessages {
|
||||
.info-messages {
|
||||
grid-area: binf;
|
||||
font-size: 1.5vw;
|
||||
line-height: 2vw;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.clockContainer {
|
||||
.clock-container {
|
||||
grid-area: time;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
@use 'main' as *;
|
||||
|
||||
@mixin viewer-container {
|
||||
margin: 0;
|
||||
box-sizing: border-box; /* reset */
|
||||
overflow: hidden;
|
||||
width: 100%; /* restrict the page width to viewport */
|
||||
background: $bg-black;
|
||||
height: 100vh;
|
||||
color: $title-white;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@mixin viewer-event-title {
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
text-decoration: underline $ontime-pink 0.5vh;
|
||||
padding-top: 0.2vh;
|
||||
padding-left: 1vw;
|
||||
}
|
||||
|
||||
@mixin viewer-info-messages {
|
||||
font-size: 1.5vw;
|
||||
line-height: 2vw;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
////////////////////////////// Specifics
|
||||
|
||||
.label {
|
||||
font-size: 1.3vw;
|
||||
color: $ontime-pink;
|
||||
}
|
||||
|
||||
.infoContainer > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nextContainer > div,
|
||||
.nowContainer > div {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
.nowContainer,
|
||||
.nextContainer,
|
||||
.todayContainer {
|
||||
background-color: $bg-gray-1000;
|
||||
padding: 1vh 2vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clockContainer,
|
||||
.countdownContainer,
|
||||
.publicContainer,
|
||||
.publicContainerHidden {
|
||||
padding: 1vh 1vw;
|
||||
}
|
||||
|
||||
.publicContainer {
|
||||
opacity: 1;
|
||||
transition: 0.5s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.publicContainerHidden {
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.todayContainer,
|
||||
.infoContainer {
|
||||
background-color: $bg-gray-1100;
|
||||
padding: 2.5vh 2vw;
|
||||
}
|
||||
|
||||
.infoContainer,
|
||||
.todayContainer,
|
||||
.publicContainer,
|
||||
.publicContainerHidden {
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
.nowContainer,
|
||||
.nextContainer {
|
||||
margin-left: -1vw;
|
||||
}
|
||||
|
||||
.qr {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-area: qr;
|
||||
}
|
||||
|
||||
.clock {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 3vw;
|
||||
line-height: 3vw;
|
||||
text-align: center;
|
||||
letter-spacing: 0.25vw;
|
||||
color: $clocks;
|
||||
}
|
||||
|
||||
.infoContainer {
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: 3vh minmax(0, 1fr);
|
||||
grid-template-columns: 3fr 1fr;
|
||||
grid-template-areas:
|
||||
'titl .'
|
||||
'binf qr';
|
||||
gap: 0.5vw;
|
||||
}
|
||||
|
||||
.infoMessages {
|
||||
grid-area: binf;
|
||||
font-size: 1.5vw;
|
||||
line-height: 2vw;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.clockContainer {
|
||||
grid-area: time;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 3vw;
|
||||
line-height: 3vw;
|
||||
padding: 0.5vh 0 0.5vh 1vw;
|
||||
}
|
||||
|
||||
.todayContainer {
|
||||
margin-top: 3vh;
|
||||
height: 95%;
|
||||
|
||||
.todayHeaderBlock {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5vh;
|
||||
|
||||
.navItem,
|
||||
.navItemSelected {
|
||||
background-color: $bg-gray-700;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
border-radius: 0.35vw;
|
||||
}
|
||||
|
||||
.navItemSelected {
|
||||
background-color: $bg-gray-100;
|
||||
}
|
||||
|
||||
.nav {
|
||||
align-self: center;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
margin-bottom: 2.5vh;
|
||||
}
|
||||
|
||||
.nav > div {
|
||||
margin-left: 0.5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infoContainer {
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: 3vh minmax(0, 1fr);
|
||||
grid-template-columns: 3fr 1fr;
|
||||
grid-template-areas:
|
||||
'titl .'
|
||||
'binf qr';
|
||||
gap: 0.5vw;
|
||||
|
||||
.infoMessages {
|
||||
grid-area: binf;
|
||||
font-size: 1.5vw;
|
||||
line-height: 2vw;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.clockContainer {
|
||||
grid-area: time;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user