mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-10 09:53:48 +00:00
Carlos Valente
1849b4d39f
* chore: migrate eslint to oxlint * chore: migrate prettier to oxfmt * chore: migrate typescript * chore: toThrow should have a expected value * chore: cast test value as Day * chore: small title fix * chore: mocks should be hoisted * chore: incorrect async useage * chore: test should be inside description * chore: test sohuld include an expeced * chore: oxfmt --------- Co-authored-by: alex-Arc <omnivox@LAPTOP-RC5SNBVV.localdomain>
135 lines
2.9 KiB
SCSS
135 lines
2.9 KiB
SCSS
@use '../../../theme/viewerDefs' as *;
|
|
|
|
/* The styles in this file are a stripped down version of the timer */
|
|
.pip-timer {
|
|
margin: 0;
|
|
padding: 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;
|
|
|
|
font-family: $viewer-font-family;
|
|
background: $viewer-background-color;
|
|
color: $viewer-color;
|
|
gap: $view-element-gap;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&--finished {
|
|
outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
|
|
outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
|
|
transition: $viewer-transition-time;
|
|
}
|
|
|
|
/* =================== MAIN ===================*/
|
|
|
|
.timer-container {
|
|
flex: 1;
|
|
align-content: center;
|
|
justify-self: center;
|
|
align-self: center;
|
|
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
.timer {
|
|
opacity: 1;
|
|
font-family: $viewer-font-family;
|
|
color: var(--timer-colour, $ui-white);
|
|
line-height: 0.9em;
|
|
text-align: center;
|
|
letter-spacing: 0.05em;
|
|
font-weight: 600;
|
|
|
|
transition-property: font-size;
|
|
transition-duration: $viewer-transition-time;
|
|
|
|
&--paused {
|
|
opacity: $viewer-opacity-disabled;
|
|
transition: $viewer-transition-time;
|
|
}
|
|
|
|
// use a class instead of a phase, to allow suppressing overtime style
|
|
&--finished {
|
|
color: var(--timer-overtime-color-override, $timer-finished-color);
|
|
}
|
|
|
|
&[data-phase='warning'] {
|
|
color: var(--timer-colour, var(--timer-warning-color-override));
|
|
}
|
|
&[data-phase='danger'] {
|
|
color: var(--timer-colour, var(--timer-danger-color-override));
|
|
}
|
|
&[data-type='none'] {
|
|
transition: 1s;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.secondary {
|
|
white-space: nowrap;
|
|
max-height: 100%;
|
|
height: auto;
|
|
|
|
margin-top: 0.125em;
|
|
padding-block: 0.125em;
|
|
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: $external-color;
|
|
letter-spacing: 0.5px;
|
|
line-height: 1;
|
|
transition-property: opacity, height;
|
|
transition-duration: $viewer-transition-time;
|
|
border-top: 1px solid color-mix(in srgb, $external-color 10%, transparent);
|
|
|
|
&--hidden {
|
|
opacity: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
.progress-container {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
opacity: 1;
|
|
transition: $viewer-transition-time;
|
|
|
|
&--paused {
|
|
opacity: $viewer-opacity-disabled;
|
|
transition: $viewer-transition-time;
|
|
}
|
|
}
|
|
|
|
/* =================== OVERLAY ===================*/
|
|
|
|
.message-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
padding: 2vw;
|
|
background: $viewer-background-color;
|
|
opacity: 0;
|
|
transition: opacity $viewer-transition-time;
|
|
|
|
&--active {
|
|
z-index: $zindex-floating;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.message {
|
|
display: grid;
|
|
place-content: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
color: $viewer-color;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
}
|