@getontime/cli/client/assets/Timer-B-ppSpoz.css

Time keeping for live events

.blink{animation:1s step-start infinite blink}@keyframes blink{0%{opacity:1}50%{opacity:.2}}.fourtyfive{transform:rotate(45deg)}.mirror{transform:rotate(180deg)}.stage-timer{box-sizing:border-box;width:100%;height:100vh;font-family:var(--font-family-override,"Open Sans", "Segoe UI", sans-serif);background:var(--timer-bg,var(--background-color-override,#101010));color:var(--color-override,rgba(255,255,255,.8));flex-direction:column;gap:min(2vh,16px);margin:0;padding:min(2vh,16px) max(16px,min(2vw,24px));transition:opacity .5s ease-in-out;display:flex;overflow:hidden}.stage-timer--finished{outline:clamp(4px, 1vw, 16px) solid var(--timer-overtime-color-override,#fa5656);outline-offset:calc(clamp(4px, 1vw, 16px) * -1);transition:all .5s}.stage-timer .blackout{z-index:0;opacity:0;background-color:#000;transition:opacity .5s;position:absolute;top:0;bottom:0;left:0;right:0}.stage-timer .blackout--active{z-index:101;opacity:1}.stage-timer .clock-container{margin-left:auto;font-weight:600;transition:opacity .5s}.stage-timer .clock-container .label{color:var(--label-color-override,rgba(255,255,255,.25));text-transform:uppercase;font-size:max(12px,min(1.25vw,20px))}.stage-timer .clock-container .clock{color:var(--secondary-color-override,rgba(255,255,255,.45));letter-spacing:.05em;font-size:max(24px,min(2.5vw,48px));line-height:.95em}.stage-timer .clock-container--hidden{opacity:0}.stage-timer .event{background-color:var(--card-background-color-override,rgba(255,255,255,.05));border-radius:4px;padding:min(2vh,8px) max(16px,min(2vw,24px))}.stage-timer .event.now{grid-area:now}.stage-timer .event.next{grid-area:next}.stage-timer .timer-container{flex-direction:column;flex:1;justify-content:center;width:100%;display:flex;overflow:hidden}.stage-timer .timer-container .end-message{text-align:center;color:var(--timer-overtime-color-override,#fa5656);max-height:100%;padding:0;font-size:11.5vw;font-weight:600}.stage-timer .timer-container .timer{opacity:1;font-family:var(--timer-font,var(--font-family-override,"Open Sans", "Segoe UI", sans-serif));color:var(--timer-colour,var(--timer-color-override,#f6f6f6));text-align:center;letter-spacing:.05em;font-weight:600;line-height:.9em;transition-property:font-size;transition-duration:.5s}.stage-timer .timer-container .timer--paused{opacity:.6;transition:all .5s}.stage-timer .timer-container .timer--finished{color:var(--timer-overtime-color-override,#fa5656)}.stage-timer .timer-container .timer[data-phase=warning]{color:var(--timer-colour,var(--timer-warning-color-override))}.stage-timer .timer-container .timer[data-phase=danger]{color:var(--timer-colour,var(--timer-danger-color-override))}.stage-timer .timer-container .timer[data-type=none]{opacity:0;transition:all 1s}.stage-timer .secondary{white-space:nowrap;text-align:center;height:auto;max-height:100%;color:var(--external-color-override,rgba(255,255,255,.85));letter-spacing:.5px;border-top:1px solid color-mix(in srgb, var(--external-color-override,rgba(255,255,255,.85)) 10%, transparent);margin-top:.125em;padding-top:.125em;padding-bottom:.125em;font-weight:600;line-height:1;transition-property:opacity,height;transition-duration:.5s}.stage-timer .secondary--hidden{opacity:0;height:0}.stage-timer .progress-container{opacity:1;width:100%;margin:0 auto;transition:all .5s}.stage-timer .progress-container--paused{opacity:.6;transition:all .5s}.stage-timer .message-overlay{background:var(--background-color-override,#101010);opacity:0;padding:2vw;transition:opacity .5s;position:fixed;top:0;bottom:0;left:0;right:0}.stage-timer .message-overlay--active{z-index:100;opacity:1}.stage-timer .message{width:100%;height:100%;color:var(--color-override,rgba(255,255,255,.8));text-align:center;place-content:center;font-weight:600;display:grid}.stage-timer .logo{max-width:min(200px,20vw);position:absolute;top:min(2vh,16px);left:max(16px,min(2vw,24px))}@media screen and (max-width:768px){.stage-timer .logo img{height:min(50px,10vh)}}