@getontime/cli
Version:
Time keeping for live events
2 lines (1 loc) • 4.17 kB
CSS
@charset "UTF-8";.studio__clock{margin:auto;--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)}.studio__clock .clock-container{position:relative;width:max-content;display:flex;flex-direction:column;justify-content:space-between;min-height:var(--full-size);padding:10vh}.studio__clock .time{display:grid;place-content:center;color:#ed3333;font-size:var(--timer-font-size)}.studio__clock .time--small{position:relative;display:block;text-align:center}.studio__clock .tick{background:#400;width:1rem;height:1rem;border-radius:99px;position:absolute;top:50%;left:50%}.studio__clock .tick--active{background:#ed3333}.studio__clock .ampm,.studio__clock .on-air{margin:0 auto;text-align:center;padding:.125em .25em;line-height:1em;border-radius:3px;font-weight:600;letter-spacing:.05em;font-size:var(--small-font-size)}.studio__clock .ampm{color:#ed3333}.studio__clock .on-air{opacity:0}.studio__clock .on-air--active{background:#ed3333;color:#f6f6f6;opacity:1}@media screen and (max-width: 800px){.studio__clock{--full-size: min(75vh, 75vw)}}@media (min-width: 800px) and (max-width: 1440px){.studio__clock{padding-block:2.5vh;margin-block:0}}.studio__clock--small{margin:0}.studio__timers{display:flex;flex-direction:column;gap:min(2vh,16px);margin-block:auto;font-size:clamp(15px,1.5vw,28px)}.studio__timers .card{background-color:var(--card-background-color-override, rgba(255, 255, 255, .05));padding:min(2vh,8px) clamp(16px,2vw,24px);border-radius:8px;display:flex;flex-direction:column;gap:1rem}.studio__timers .card__row{display:flex;justify-content:space-between;align-items:center}.studio__timers .label{font-size:clamp(12px,1.25vw,20px);color:var(--label-color-override, rgba(255, 255, 255, .25));text-transform:uppercase}.studio__timers .label:after{content:""}.studio__timers .runtime-timer{font-size:clamp(15px,1.5vw,28px);line-height:1}.studio__timers .event-timer{opacity:1;text-align:center;line-height:1;letter-spacing:.05em;font-size:clamp(24px,2.5vw,48px);color:var(--timer-color-override, var(--phase-color))}.studio__timers .event-timer--paused{opacity:.6;transition:.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:clamp(15px,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:blink 1s step-start infinite}@keyframes blink{0%{opacity:100%}50%{opacity:20%}}.fourtyfive{transform:rotate(45deg)}.mirror{transform:rotate(180deg)}.studio{margin:0;box-sizing:border-box;overflow:hidden;width:100%;height:100vh;display:flex;flex-direction:column;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));padding:min(2vh,16px) clamp(16px,2vw,24px);font-size:clamp(15px,1.5vw,28px)}.studio .studio-contents{flex:1;display:grid;grid-template-columns:1fr 1fr;place-content:center}.studio .studio-contents--onecol{height:100%;grid-template-columns:1fr;place-content:center}.studio .project-header{grid-area:header;font-size:clamp(24px,2.5vw,48px);font-weight:600;display:flex;gap:1rem}.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{margin-top:min(2vh,16px);gap:min(2vh,16px)}}@media screen and (max-width: 1300px){.studio .studio-contents{display:flex;flex-direction:column;justify-content:start}.studio .studio-contents--onecol{justify-content:center}}