UNPKG

@getontime/cli

Version:

Time keeping for live events

2 lines (1 loc) 2.27 kB
.blink{animation:1s step-start infinite blink}@keyframes blink{0%{opacity:1}50%{opacity:.2}}.fourtyfive{transform:rotate(45deg)}.mirror{transform:rotate(180deg)}.pip-timer{box-sizing:border-box;color:rgba(255,255,255,.8);background:#101010;flex-direction:column;gap:min(2vh,16px);width:100%;height:100vh;margin:0;padding:0;font-family:Open Sans,Segoe UI,sans-serif;transition:opacity .5s ease-in-out;display:flex;overflow:hidden}.pip-timer--finished{outline-offset:calc(clamp(4px, 1vw, 16px) * -1);outline:max(4px,min(1vw,16px)) solid #fa5656;transition:all .5s}.pip-timer .timer-container{flex-direction:column;flex:1;justify-content:center;width:100%;display:flex;overflow:hidden}.pip-timer .timer-container .timer{opacity:1;color:var(--timer-colour,#f6f6f6);text-align:center;letter-spacing:.05em;font-family:Open Sans,Segoe UI,sans-serif;font-weight:600;line-height:.9em;transition-property:font-size;transition-duration:.5s}.pip-timer .timer-container .timer--paused{opacity:.6;transition:all .5s}.pip-timer .timer-container .timer--finished{color:var(--timer-overtime-color-override,#fa5656)}.pip-timer .timer-container .timer[data-phase=warning]{color:var(--timer-colour,var(--timer-warning-color-override))}.pip-timer .timer-container .timer[data-phase=danger]{color:var(--timer-colour,var(--timer-danger-color-override))}.pip-timer .timer-container .timer[data-type=none]{opacity:0;transition:all 1s}.pip-timer .secondary{white-space:nowrap;text-align:center;color:rgba(255,255,255,.85);letter-spacing:.5px;border-top:1px solid rgba(255,255,255,.086);height:auto;max-height:100%;margin-top:.125em;padding-top:.125em;padding-bottom:.125em;font-weight:600;line-height:1;transition-property:opacity,height;transition-duration:.5s}.pip-timer .secondary--hidden{opacity:0;height:0}.pip-timer .progress-container{opacity:1;width:100%;margin:0 auto;transition:all .5s}.pip-timer .progress-container--paused{opacity:.6;transition:all .5s}.pip-timer .message-overlay{opacity:0;background:#101010;padding:2vw;transition:opacity .5s;position:fixed;top:0;bottom:0;left:0;right:0}.pip-timer .message-overlay--active{z-index:100;opacity:1}.pip-timer .message{color:rgba(255,255,255,.8);text-align:center;place-content:center;width:100%;height:100%;font-weight:600;display:grid}