html { box-sizing: border-box; font-size: 16px; height: 100%; } *, *:before, *:after { box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: normal; } body { background: #3d3d3d; color: #f1f1f1; display: flex; font-size: 16px; min-height: 100vh; flex-direction: column; font-family: Helvetica, sans-serif, Arial; } a, a:visited { color: #eee; text-decoration: underline; } /* Container */ .container { display: flex; align-items: stretch; flex-direction: column; flex-grow: 2; } .disconnected { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); color: #fff; font-size: 1em; display: flex; justify-content: center; align-items: center; } [hidden] { display: none !important; } main { display: flex; flex-direction: column; align-items: stretch; flex-grow: 2; width: 100%; } main h1 { text-align: center; font-size: 1.6rem; line-height: 3.6rem; } form.login { align-self: center; display: flex; flex-direction: column; } button, a.button { align-self: center; min-width: 200px; background: #ffb843; color: black; padding: 0.5rem; border: none; cursor: pointer; text-decoration: none; border: 1px solid hsl(37.3, 80%, 37%); text-align: center; } pre { margin: 0; padding: 0; } /***************** Header ********************/ #header { display: flex; justify-content: center; width: 100%; background: #292929; align-items: center; } #header a { width: 150px; text-align: center; padding: 1rem; color: #ffb843; } #header a.active { color: #999; text-decoration: none; } #header .seperator { border-right: 1px solid #999; height: 1rem; } /***************** Log ********************/ #logger { margin: 0 2rem; display: flex; flex-direction: column; border: 1px solid #999; padding: 0.5rem; overflow-y: scroll; height: calc(100vh - 160px); background: #0c0c0c; color: #ccc; } #logger div { margin-left: 1rem; text-indent: -1rem; line-height: 1.4rem; margin-bottom: 0.1rem; } #logger span.white { color: rgb(242,242,242); } #logger span.yellow { color: rgb(193,156,0); } #logger span.cyan { color: hsl(206.1, 70.6%, 63.7%); } #logger span.magenta { color: hsl(292.6, 73.7%, 58.3%); } #logger span.red { color: hsl(354.7, 85.8%, 67.6%); } #logger span.green { color: hsl(118, 84%, 46.3%); } #logger span.inverse { color: #0c0c0c; background: white; display: inline-block; } #logger .padder { height: 0.5rem; flex: 0 0 auto; } /***************** Status ********************/ #status { display: flex; flex-direction: column; } #status .split { margin-top: 2rem; align-self: center; width: calc(100% - 4rem); display: flex; max-width: 700px; border: 1px solid #999; border-right: none; } #status .item { flex: 2 1 50%; display: flex; flex-direction: column; border-right: 1px solid #999; padding-bottom: 0.5rem; } #status .item h4 { font-size: 1.2rem; text-align: center; padding: 1rem; border-bottom: 1px solid #999; margin-bottom: 0.5rem; } #status .item p { padding: 0.25rem 1rem; } #status .item p.running { color: hsl(118, 84%, 46.3%); text-align: center; } #status .item p.notrunning { color: hsl(354.7, 85.8%, 67.6%); text-align: center; } #status button { margin-top: 1rem; } #status .status { margin-top: 1rem; align-self: center; padding: 0.5rem; color: #ccc; } /***************** Updater ********************/ #update { display: flex; flex-direction: column; width: calc(100vw - 4rem); align-self: center; max-width: 700px; } #update .actions { margin: 1rem 0; flex-wrap: wrap; display: flex; justify-content: center; } #update .actions .filler { flex-grow: 2; } #update .actions .button.active { background: transparent; color: #ffb843; } @media only screen and (max-device-width: 590px) { #update .actions .filler { flex: 2 1 100%; } #update .actions .button { flex: 2 1 50%; } } #update h4 { text-align: center; padding: 0 1rem 1rem; font-size: 1.2rem; } #update .info { margin-top: 0rem; display: flex; border: 1px solid #999; border-right: none; border-bottom: none; flex-wrap: wrap; } #update .info p { flex: 2 1 50%; border-right: 1px solid #999; border-bottom: 1px solid #999; padding: 0.5rem; } #update .console { font-family: "Lucida Console", Monaco, monospace; margin: 1rem 0 0; display: flex; flex-direction: column; border: 1px solid #999; padding: 0.5rem; overflow-y: scroll; height: calc(100vh - 160px); background: #0c0c0c; color: #ccc; } @media only screen and (min-height: 650px) { #update .console { height: calc(100vh - 300px); } }