@getontime/cli/client/assets/Countdown-BYXg70ir.css

Time keeping for live events

.countdown{margin:0;box-sizing:border-box;overflow:hidden;width:100%;height:100vh;font-family:var(--font-family-override, "Open Sans", "Segoe UI", sans-serif);background:var(--background-color-override, #101010);color:var(--color-override, rgba(255, 255, 255, .8));display:flex;flex-direction:column;gap:min(2vh,16px);padding:min(2vh,16px) clamp(16px,2vw,24px);font-size:clamp(15px,1.5vw,28px)}.countdown .project-header{font-size:clamp(24px,2.5vw,48px);font-weight:600;display:flex;gap:1rem}.countdown .logo{max-width:min(200px,20vw)}.countdown .title{line-height:1.1em}.countdown .clock-container{margin-left:auto;font-weight:600}.countdown .clock-container .label{font-size:clamp(12px,1.25vw,20px);color:var(--label-color-override, rgba(255, 255, 255, .25));text-transform:uppercase}.countdown .clock-container .time{font-size:clamp(24px,2.5vw,48px);color:var(--secondary-color-override, rgba(255, 255, 255, .45));letter-spacing:.05em;line-height:.95em}.countdown .fab-container{position:fixed;bottom:1.5rem;bottom:calc(1.5rem + env(safe-area-inset-bottom));right:clamp(16px,2vw,24px);display:flex;justify-content:end;gap:2rem;transition-property:opacity;transition-duration:.3s}.countdown .fab-container--hidden{opacity:0;pointer-events:none}.countdown .empty-container{text-align:center;display:flex;flex-direction:column;align-items:center}.countdown .empty-container button{margin-top:2rem}.countdown .list-container{display:flex;flex-direction:column;overflow-y:auto;padding-bottom:60vh}.countdown .sub{margin:2px;flex:1;display:grid;grid-template-columns:1rem 1fr auto;grid-template-areas:"binder schedule  status" "binder title     timer" "binder secondary secondary";column-gap:1rem;background-color:var(--card-background-color-override, rgba(255, 255, 255, .05));padding-right:1rem;border-radius:4px}.countdown .sub:hover .sub__label{color:#f6f6f6}.countdown .sub--selected{background:#2b5abc}.countdown .sub--live{background-color:#087a27}.countdown .sub--armed{background-color:#151515}.countdown .sub__binder{background:var(--user-color, var(--card-background-color-override, rgba(255, 255, 255, .05)));grid-area:binder}.countdown .sub__schedule{grid-area:schedule;padding-top:.5rem;display:flex;gap:.25em;font-size:clamp(12px,1.25vw,20px);color:var(--label-color-override, rgba(255, 255, 255, .25))}.countdown .sub__schedule--delayed{color:#e69056}.countdown .sub__schedule--strike{text-decoration:line-through}.countdown .sub__schedule--over{color:#f57c13}.countdown .sub__schedule--under{color:#55b469}.countdown .sub__title{grid-area:title;padding-bottom:.5rem;font-size:clamp(18px,2.25vw,42px);line-height:1.1em}.countdown .sub__secondary{grid-area:secondary;padding-bottom:.5rem;font-size:clamp(15px,1.5vw,28px);line-height:1.1em;white-space:pre-line}.countdown .sub__status{grid-area:status;padding-top:.5rem;font-size:clamp(12px,1.25vw,20px);text-align:right;text-transform:uppercase}.countdown .sub__label{grid-area:status;padding-top:.5rem;font-size:clamp(12px,1.25vw,20px);color:var(--label-color-override, rgba(255, 255, 255, .25));text-align:right}.countdown .sub__timer{grid-area:timer;font-size:clamp(24px,2.5vw,48px);line-height:1.1em;font-weight:600;text-align:right}.countdown .subdued{opacity:.6}.blink{animation:blink 1s step-start infinite}@keyframes blink{0%{opacity:100%}50%{opacity:20%}}.fourtyfive{transform:rotate(45deg)}.mirror{transform:rotate(180deg)}.single-container{margin-top:7.5vh;display:flex;flex-direction:column;gap:5rem}.event__title{background-color:var(--card-background-color-override, rgba(255, 255, 255, .05));padding:min(2vh,8px) clamp(16px,2vw,24px);border-radius:4px;font-size:clamp(40px,4.5vw,80px);line-height:1.1;text-align:center;border-left:.25em solid;border-color:var(--card-background-color-override, rgba(255, 255, 255, .05))}.event__title .secondary{text-align:left;font-size:clamp(18px,2.25vw,42px)}.event__title .sub__schedule{color:inherit;font-size:clamp(15px,1.5vw,28px)}.event__status{color:var(--secondary-color-override, rgba(255, 255, 255, .45));font-size:clamp(24px,2.5vw,48px);font-weight:600;text-transform:uppercase}.event__timer{color:var(--timer-color-override, rgba(255, 255, 255, .8));font-size:15vw;line-height:.9em;text-align:center;letter-spacing:.05em;font-weight:600}