-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.css
1 lines (1 loc) · 6.15 KB
/
main.css
1
#analog-clock{position:relative}.layout--wide #analog-clock{height:100%}.layout--high #analog-clock,.layout--square #analog-clock{width:100%}#analog-clock>svg{shape-rendering:geometricPrecision;height:100%;max-height:90vh}.layout--high #analog-clock>svg,.layout--square #analog-clock>svg{width:100%}#analog-clock>svg .tick{stroke:#000;stroke-width:.1;transition:stroke-width .5s .5s,transform .5s .5s}#analog-clock>svg .tick.major{stroke-width:.5;transition:stroke-width 1s .5s,transform .5s .5s}#analog-clock>svg .timeLeft{fill:#ff6161;opacity:1;transition:opacity 0ms}.state--ready #analog-clock>svg .timeLeft{opacity:0;transition:opacity 0ms .5s}#analog-clock>svg .originalTime{fill:#ffcece;transition:opacity .5s;opacity:1}.state--running #analog-clock>svg .originalTime{opacity:0}#analog-clock>svg .originalTime .negative{fill:none;stroke:#fff;transform:rotate(-90deg);transition:stroke-dashoffset .5s 0ms}#analog-clock>svg .originalTime.intermediate .negative{transition:stroke-dashoffset .2s 0ms}#analog-clock>svg .originalTime.zooming .negative{transition:stroke-dashoffset .5s .5s}#analog-clock>svg .inner-negative,#analog-clock>svg .overshoot-indicator{fill:#fff}#analog-clock>svg .middleDot{fill:#000}#analog-clock>svg text{text-anchor:middle;font-size:7px;font-variant-numeric:proportional-nums;user-select:none;cursor:default}#analog-clock>svg text.interactive{cursor:pointer;-webkit-tap-highlight-color:transparent}#analog-clock>svg .tick,#analog-clock>svg text{opacity:0}.state--ready #analog-clock>svg .tick,.state--ready #analog-clock>svg text{animation:appear .5s 1s forwards}.state--ready #analog-clock>svg .tick.fade,.state--ready #analog-clock>svg text.fade{animation:fade .5s forwards}.state--paused #analog-clock>svg .tick,.state--paused #analog-clock>svg text,.state--running #analog-clock>svg .tick,.state--running #analog-clock>svg text{animation:appear .5s forwards}.state--paused #analog-clock>svg .tick.fade,.state--paused #analog-clock>svg text.fade,.state--running #analog-clock>svg .tick.fade,.state--running #analog-clock>svg text.fade{animation:fade .5s forwards}.initial #analog-clock>svg .tick,.initial #analog-clock>svg text{animation-duration:1ms;animation-delay:0ms}#analog-clock>svg .overshoot-indicator.fade{animation:fade .5s .5s forwards}#analog-clock>svg .interactive-segment{fill:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}#analog-clock>svg .disabled-click-overlay{fill:transparent}#analog-clock>svg .end-animation{fill:none;transform:rotate(-90deg)}button#expand{position:absolute;top:25%;left:50%;transform:translateX(-50%)}#digital-clock form{background-color:#fff;border-radius:4vmin;position:relative;white-space:nowrap;width:8ch;transition:width 1s;min-height:1.4em;font-weight:601}#digital-clock .colon-prefix:before{content:":";position:absolute}#digital-clock input{z-index:1;border-radius:4vmin;border-color:#d3d3d3;transition:border-color .5s;-webkit-appearance:none;position:absolute;width:100%;font:inherit;color:inherit;text-align:right;box-shadow:none}#digital-clock input::-webkit-calendar-picker-indicator{display:none}#digital-clock input:focus{outline:none;box-shadow:inset 0 .4vmin .4vmin #d3d3d3}#digital-clock input:disabled{background-color:#fff;-webkit-text-fill-color:inherit;opacity:1}#digital-clock .ghost{color:#d3d3d3;border-color:transparent;cursor:default;transition:opacity .5s 1s}#digital-clock .ghost .invisible{opacity:0;transition-delay:0s}#digital-clock .ghost,#digital-clock input{border-width:1px;border-style:solid;background-color:transparent;vertical-align:top;position:absolute;top:0;right:0;padding:0 .3ch;margin:0;line-height:1.4em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}#digital-clock input::-webkit-list-button{order:-1}.state--paused #digital-clock,.state--running #digital-clock{transition-delay:.5s}.state--paused #digital-clock .ghost,.state--running #digital-clock .ghost{opacity:0;transition-delay:0s}.state--paused #digital-clock input,.state--running #digital-clock input{border-color:transparent}.layout--square.state--running #digital-clock input{border-color:#d3d3d3}.state--paused #digital-clock input{animation:blink 1s ease-out infinite alternate}@keyframes blink{0%{opacity:1}to{opacity:.2}}@keyframes flash{0%{background-color:#fff}to{background-color:#ffcece}}@keyframes appear{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:1}to{opacity:0}}#controls{white-space:nowrap}button{display:inline-flex;justify-content:center;align-items:center;font-size:3vmin;line-height:100%;width:2em;height:2em;min-height:32px;min-width:32px;padding:0;margin:.2em;border-radius:4vmin;border:1px solid transparent;background-color:#fff;opacity:.2;transition:opacity 1s;transition:border-color .5s;outline:none;-webkit-tap-highlight-color:transparent}button:not(:disabled){cursor:pointer;opacity:1;border-color:#d3d3d3}button:not(:disabled):focus,button:not(:disabled):hover{box-shadow:inset 0 .4vmin .4vmin #d3d3d3}button:not(:disabled):active{box-shadow:inset 0 .8vmin .8vmin #d3d3d3}button:not(:disabled):active path{fill:#b00}.layout--square button{border-color:#d3d3d3}.state--paused button#pause path,.state--running button#run path{fill:#ff6161}.state--paused button#pause#pause,.state--running button#run#pause{animation:blink 1s ease-out infinite alternate}.click-on-disabled-flash button#reset{animation:flash .2s 2 alternate}button::-moz-focus-inner{border:0}button .icon{height:50%;width:50%}body{width:100%;height:100vh;margin:0;position:fixed;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-variant-numeric:lining-nums}*{box-sizing:border-box}.layout{display:flex;justify-content:center;align-items:center;height:100%;font-size:7vmin}.layout #analog-clock,.layout #digital-clock{padding:5vmin}.layout .controls-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:9ch}.layout--high{flex-direction:column}.layout--square .controls-container{position:absolute}.layout--square .controls-container>*{position:absolute;left:50%;padding:0}.layout--square .controls-container #digital-clock{top:50%;transform:translate(-50%,-50%)}.layout--square .controls-container #controls{top:5vmin;transform:translateX(-50%)}.layout--wide #controls{position:absolute;top:15vmin}