mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-11 10:23:54 +00:00
Carlos Valente
62 lines
1.4 KiB
SCSS
62 lines
1.4 KiB
SCSS
@use '../../../theme/viewerDefs' as *;
|
|
|
|
.minimal-timer {
|
|
margin: 0;
|
|
box-sizing: border-box; /* reset */
|
|
overflow: hidden;
|
|
width: 100%; /* restrict the page width to viewport */
|
|
height: 100vh;
|
|
transition: opacity 0.5s ease-in-out;
|
|
|
|
background: var(--background-color-override, $viewer-background-color);
|
|
color: var(--color-override, $viewer-color);
|
|
display: grid;
|
|
place-content: center;
|
|
|
|
&--finished {
|
|
outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
|
|
outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
|
|
transition: $viewer-transition-time;
|
|
}
|
|
|
|
.timer {
|
|
opacity: 1;
|
|
font-family: var(--font-family-bold-override, $timer-bold-font-family);
|
|
font-size: 20vw;
|
|
position: relative;
|
|
color: var(--timer-color-override, var(--phase-color));
|
|
transition: $viewer-transition-time;
|
|
transition-property: opacity;
|
|
background-color: transparent;
|
|
letter-spacing: 0.05em;
|
|
|
|
&--paused {
|
|
opacity: $viewer-opacity-disabled;
|
|
transition: $viewer-transition-time;
|
|
}
|
|
|
|
&--finished {
|
|
color: $timer-finished-color;
|
|
}
|
|
}
|
|
|
|
/* =================== OVERLAY ===================*/
|
|
|
|
.end-message {
|
|
text-align: center;
|
|
font-size: 12vw;
|
|
line-height: 0.9em;
|
|
font-weight: 600;
|
|
color: $timer-finished-color;
|
|
padding: 0;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: 2vw;
|
|
left: 2vw;
|
|
max-width: min(200px, 20vw);
|
|
max-height: min(100px, 20vh);
|
|
}
|
|
}
|