willpower232/TOTPBTF3

View on GitHub
public_html/css/app.css

Summary

Maintainability
Test Coverage
header img{max-height:2rem}.breadcrumbs{display:flex;position:relative}.breadcrumbs.overflowed{justify-content:flex-end;overflow:hidden}.breadcrumbs.overflowed:after{bottom:0;content:"";left:0;position:absolute;top:0;width:5%}.breadcrumbs a{margin:0;text-decoration:none}.breadcrumbs a:before{content:"/";margin:0 .7rem;text-decoration:none}.breadcrumbs a:first-child:before{margin-left:0}.folderlist{list-style:none;margin-left:-.5%;padding:0}.folderlist li{margin:.5%;width:99%}.folderlist a{align-items:center;display:flex;height:60px;justify-content:center;padding:5px;position:relative;text-decoration:none}.folderlist img{display:inline-block;max-height:60px;max-width:100%}.folderlist .replaced-image{line-height:60px}label{display:block;font-weight:700;line-height:1em}input:not([type=checkbox]){background:none;box-sizing:border-box;height:3rem;padding:0 1rem;width:100%}.fieldwrapper{position:relative}.fieldwrapper input:first-child{margin-top:2em}.fieldwrapper input+label{margin:0;position:absolute;top:.5em;transition:all .3s}.fieldwrapper input:placeholder-shown+label{left:1rem;top:3em}.toggle{border-radius:10px;cursor:pointer;display:block;height:10px;position:relative;width:40px}.toggle input{display:none}.toggle .helper{border-radius:20px;height:20px;left:-5px;margin:0;position:absolute;top:-5px;transition:all .5s;width:20px}.toggle input:checked+.helper{left:calc(100% - 12px)}ul{padding-left:1em}.buttons{justify-self:end;margin-top:auto}.folderlist+.buttons,form .buttons{margin-top:2rem}.button,button{box-sizing:border-box;cursor:pointer;height:3rem;text-align:center;width:100%}a.button{display:block;line-height:3rem;text-decoration:none}dt{font-weight:700;margin-top:2rem}.a-code-header{align-items:center;display:flex;flex-direction:row-reverse;justify-content:space-between}.a-code-header>*{margin:0}.a-code-header img{max-height:60px;max-width:30%}.a-code-header h1{line-height:60px}.a-code-header h1:only-child{flex-grow:1}.text-center{text-align:center}.code-and-timer{position:relative}.a-code{font-family:monospace,monospace;font-size:16vw;letter-spacing:.2em;text-indent:.15em}@media (min-width:500px){.a-code{font-size:5rem}}.a-timer{--progress:0;opacity:0;transition:opacity .4s}.a-timer.show{opacity:1}.js-copy{opacity:0;transition:all .4s}.js-copy.enabled{opacity:1}.export{margin-top:2rem}.export svg{display:block;max-width:100%;margin:0 auto}.breadcrumbs.overflowed:after{background:linear-gradient(90deg,#333 0,transparent)}.folderlist a{background:#444}input:not([type=checkbox]){border:1px solid #909090}input:not([type=checkbox]).is-invalid{border-color:#d00000}.toggle,.toggle .helper{background:#d0d0d0}.toggle .helper{box-shadow:0 0 10px #515151}.toggle input:checked+.helper{background:#005900}.toggle input[disabled]+.helper{background:#000}.invalid-feedback strong{color:#d00000}.button,button{background:#444;border:1px solid #909090}.button.button-primary,button.button-primary{background:#515151}.button.button-secondary,button.button-secondary{background:#000059}.button.button-bad,button.button-bad{background:#590000}.button.button-good,button.button-good{background:#005900}.code-and-timer{margin-top:2rem}.a-timer{height:3rem;margin:4rem auto;position:relative;width:2.0001rem}.a-timer:after,.a-timer:before{content:"";left:5%;position:absolute;right:5%;z-index:1}.a-timer:before{background:#d0d0d0;bottom:50%;height:calc((100 - var(--progress))*0.5%)}.a-timer:after{background:#515151;bottom:0;height:calc(var(--progress)*0.5%)}.a-timer .timer svg{height:100%;position:absolute;width:100%;z-index:2}.js-copy.success{background-color:#005900}.js-copy.failure{background-color:#590000}