@getontime/cli
Version:
Time keeping for live events
2 lines (1 loc) • 3.95 kB
CSS
.blink{animation:blink 1s step-start infinite}@keyframes blink{0%{opacity:100%}50%{opacity:20%}}.fourtyfive{transform:rotate(45deg)}.mirror{transform:rotate(180deg)}.stage-timer{margin:0;box-sizing:border-box;overflow:hidden;width:100%;height:100vh;transition:opacity .5s ease-in-out;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));gap:min(2vh,16px);padding:min(2vh,16px) clamp(16px,2vw,24px);display:flex;flex-direction:column}.stage-timer--finished{outline:clamp(4px,1vw,16px) solid var(--timer-overtime-color-override, #FA5656);outline-offset:calc(clamp(4px,1vw,16px)*-1);transition:.5s}.stage-timer .blackout{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background-color:#000;opacity:0;transition:opacity .5s}.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{font-size:clamp(12px,1.25vw,20px);color:var(--label-color-override, rgba(255, 255, 255, .25));text-transform:uppercase}.stage-timer .clock-container .clock{font-size:clamp(24px,2.5vw,48px);color:var(--secondary-color-override, rgba(255, 255, 255, .45));letter-spacing:.05em;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));padding:min(2vh,8px) clamp(16px,2vw,24px);border-radius:4px}.stage-timer .event.now{grid-area:now}.stage-timer .event.next{grid-area:next}.stage-timer .timer-container{flex:1;align-content:center;justify-self:center;align-self:center;width:100%;overflow:hidden}.stage-timer .timer-container .end-message{text-align:center;font-size:11.5vw;font-weight:600;color:var(--timer-overtime-color-override, #FA5656);padding:0;max-height:100%}.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));line-height:.9em;text-align:center;letter-spacing:.05em;font-weight:600;transition-property:font-size;transition-duration:.5s}.stage-timer .timer-container .timer--paused{opacity:.6;transition:.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]{transition:1s;opacity:0}.stage-timer .secondary{white-space:nowrap;max-height:100%;height:auto;margin-top:.125em;padding-block:.125em;font-weight:600;text-align:center;color:var(--external-color-override, rgba(255, 255, 255, .85));letter-spacing:.5px;line-height:1;transition-property:opacity,height;transition-duration:.5s;border-top:1px solid color-mix(in srgb,var(--external-color-override, rgba(255, 255, 255, .85)) 10%,transparent)}.stage-timer .secondary--hidden{opacity:0;height:0}.stage-timer .progress-container{width:100%;margin:0 auto;opacity:1;transition:.5s}.stage-timer .progress-container--paused{opacity:.6;transition:.5s}.stage-timer .message-overlay{position:fixed;top:0;right:0;bottom:0;left:0;padding:2vw;background:var(--background-color-override, #101010);opacity:0;transition:opacity .5s}.stage-timer .message-overlay--active{z-index:100;opacity:1}.stage-timer .message{display:grid;place-content:center;height:100%;width:100%;color:var(--color-override, rgba(255, 255, 255, .8));text-align:center;font-weight:600}.stage-timer .logo{position:absolute;top:min(2vh,16px);left:clamp(16px,2vw,24px);max-width:min(200px,20vw)}@media screen and (max-width: 768px){.stage-timer .logo img{height:min(50px,10vh)}}