mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-12 02:43:50 +00:00
Claude
5e6debcce0
The Stage Timer and PiP Timer views relied on `align-content: center` to vertically center the timer digits inside `.timer-container`, which is a plain block element. Aligning children of a block container via `align-content` only works in Chromium 123+ (Firefox 125+, Safari 17.4+). Embedded browsers such as vMix Browser Input (CEF V115) and other older CEF/Chromium-based production tools ignore the property, so the digits fall back to the top of the container while every other element renders correctly. Make `.timer-container` a real flex column and center with `justify-content: center`, which is universally supported and matches the centering approach used elsewhere in the codebase. The removed `justify-self`/`align-self` were no-ops on a full-width flex item. Fixes #2126 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014T6ENZ3r6JXZb1fpYw2oNY
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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: 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;
|
|
}
|
|
}
|