timer.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,textarea,input{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,textarea,input{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}svg{height:1em;width:1em;pointer-events:none;top:-0.125em;position:relative;vertical-align:middle;transform:scale(1.5)}:focus{outline:none}html{background:#cb2c2c;width:100%;height:100%;outline:none}body{width:100%;height:100%;overflow:hidden;-webkit-user-select:none;color:#fff;font-family:"Exo",sans-serif}.page{position:absolute;left:0;right:0;top:0;bottom:0;z-index:100}#setup{display:flex;flex-direction:column;justify-content:space-around;padding:.5em}#setup input{background:rgba(255,255,255,.2);color:#fff;text-align:center;border-radius:2px}#setup input::placeholder{color:#fff;opacity:.5}#setup button{background:rgba(0,0,0,0);border:none;font-size:1rem;color:#fff;cursor:pointer}#setup button:hover{background:rgba(255,255,255,.2)}#setup input,#setup button{-webkit-app-region:no-drag !important}#timer{visibility:hidden;display:flex;flex-direction:column;justify-content:space-around;padding:.5em;text-align:center}#timer #timeleft{font-variant-numeric:diagonal-fractions;font-weight:bold;font-size:2em;font-variant-numeric:tabular-nums;text-shadow:.1em .1em 0 rgba(0,0,0,.4);position:relative;cursor:pointer}#timer #timeleft:after{content:"| |";position:absolute;right:0;top:0;left:0;bottom:0;text-align:center;background:rgba(203,44,44,.8);font-weight:900;opacity:0}#timer #timeleft:hover:after{opacity:1}#timer #timeleft:active:after{transform:translateY(2px)}#timer #timeleft.paused:after{opacity:1;background:rgba(203,44,44,.6)}#timer #timeleft.paused:hover:after{content:"▶"}#timer.flash{background:#fff;color:#cb2c2c}#drag{width:20px;height:20px;bottom:0;right:0;position:absolute;background:rgba(0,0,0,.2);-webkit-app-region:drag;z-index:9999999999999 !important;cursor:grab}#back{width:20px;height:20px;top:0;right:0;position:absolute;cursor:pointer;font-weight:600;font-size:21px;display:none;opacity:.25}#back:hover{opacity:1;background:rgba(0,0,0,.2)}#back:active:after{transform:translateY(2px)}body:hover #back{display:block}