@getontime/cli/client/assets/Studio-C83URNpi.css

Time keeping for live events

@keyframes blink{0%{opacity:1}50%{opacity:.2}}.studio__clock{--full-size:min(75vh, 45vw);--half-size:calc(var(--full-size) / 2);--smaller-half-size:calc(var(--half-size) - 2rem);--timer-font-size:calc(var(--half-size) / 2.5);--small-font-size:calc(var(--half-size) / 10);margin:auto}.studio__clock .clock-container{width:max-content;min-height:var(--full-size);flex-direction:column;justify-content:space-between;padding:10vh;display:flex;position:relative}.studio__clock .time{color:#ed3333;font-size:var(--timer-font-size);place-content:center;display:grid}.studio__clock .time--small{text-align:center;display:block;position:relative}.studio__clock .tick{background:#400;border-radius:99px;width:1rem;height:1rem;margin-top:-.5rem;margin-left:-.5rem;position:absolute;top:50%;left:50%}.studio__clock .tick--active{background:#ed3333}.studio__clock .ampm,.studio__clock .on-air{text-align:center;letter-spacing:.05em;font-weight:600;line-height:1em;font-size:var(--small-font-size);border-radius:3px;margin:0 auto;padding:.125em .25em}.studio__clock .ampm{color:#ed3333}.studio__clock .on-air{opacity:0}.studio__clock .on-air--active{color:#f6f6f6;opacity:1;background:#ed3333}@media screen and (max-width:800px){.studio__clock{--full-size:min(75vh, 75vw)}}@media (min-width:800px) and (max-width:1440px){.studio__clock{margin-top:0;margin-bottom:0;padding-top:2.5vh;padding-bottom:2.5vh}}.studio__clock--small{margin:0}.studio__timers{flex-direction:column;gap:min(2vh,16px);margin-top:auto;margin-bottom:auto;font-size:max(15px,min(1.5vw,28px));display:flex}.studio__timers .card{background-color:var(--card-background-color-override,rgba(255,255,255,.05));border-radius:8px;flex-direction:column;gap:1rem;padding:min(2vh,8px) max(16px,min(2vw,24px));display:flex}.studio__timers .card__row{justify-content:space-between;align-items:center;display:flex}.studio__timers .label{color:var(--label-color-override,rgba(255,255,255,.25));text-transform:uppercase;font-size:max(12px,min(1.25vw,20px))}.studio__timers .label:after{content:"​"}.studio__timers .runtime-timer{font-size:max(15px,min(1.5vw,28px));line-height:1}.studio__timers .event-timer{opacity:1;text-align:center;letter-spacing:.05em;color:var(--timer-color-override,var(--phase-color));font-size:max(24px,min(2.5vw,48px));line-height:1}.studio__timers .event-timer--paused{opacity:.6;transition:all .5s}.studio__timers .event-timer--finished{color:var(--timer-overtime-color-override,#fa5656)}.studio__timers .event-timer[data-phase=warning]{color:var(--timer-warning-color-override,var(--phase-color))}.studio__timers .event-timer[data-phase=danger]{color:var(--timer-danger-color-override,var(--phase-color))}.studio__timers .over{color:#f57c13}.studio__timers .under{color:#55b469}.studio__timers .muted{color:#8a8a8a}.studio__timers .extra{font-size:max(15px,min(1.5vw,28px));line-height:1}.studio__timers .title{margin-bottom:.25em}.studio__timers .right{text-align:right}.studio__timers .center{text-align:center}@media screen and (max-width:1300px){.studio__timers{margin:0}}.blink{animation:1s step-start infinite blink}.fourtyfive{transform:rotate(45deg)}.mirror{transform:rotate(180deg)}.studio{box-sizing:border-box;width:100%;height:100vh;font-family:var(--font-family-override,"Open Sans", "Segoe UI", sans-serif);background:var(--background-color-override,#000);color:var(--color-override,rgba(255,255,255,.8));flex-direction:column;margin:0;padding:min(2vh,16px) max(16px,min(2vw,24px));font-size:max(15px,min(1.5vw,28px));display:flex;overflow:hidden}.studio .studio-contents{flex:1;grid-template-columns:1fr 1fr;place-content:center;display:grid}.studio .studio-contents--onecol{grid-template-columns:1fr;place-content:center;height:100%}.studio .project-header{grid-area:header;align-items:center;gap:1rem;font-size:max(24px,min(2.5vw,48px));font-weight:600;display:flex}.studio .project-header__brand{align-items:center;gap:1rem;min-width:0;display:flex}.studio .project-header__brand--without-logo{align-self:baseline}.studio .logo{max-width:min(200px,20vw)}.studio .title{line-height:1.1em}@media screen and (max-width:800px){.studio .logo img{height:min(50px,10vh)}.studio .studio-contents{gap:min(2vh,16px);margin-top:min(2vh,16px)}}@media screen and (max-width:1300px){.studio .studio-contents{flex-direction:column;justify-content:start;display:flex}.studio .studio-contents--onecol{justify-content:center}}