html { color: #bdc7b8; font: calc(0.40rem + 1vmin) monospace; overflow-y: scroll; background-color: #241e1e; } body { margin-right: auto; margin-left: auto; min-width: 33rem; max-width: 53rem; } @media only screen and (max-width: 53rem) { body { margin: 0 2rem; } } a { color:#6CF; text-shadow: 1px 1px 0px #000c; } a.no-shadow { text-shadow: initial; } a:hover, a:active, a:visited { color: #b5bd68; } .nav-links a { margin: 0 1em; } .flash { color: rgb(173, 74, 8); font-weight: bold; text-align: center; border: 1px dashed rgb(173, 74, 8); border-radius: 0.5em; margin-bottom: 2em; padding: 1em; } h1, h2, h3, h4, h5 { font-size:calc(0.40rem + 1vmin); margin: initial; padding: initial; text-transform: uppercase; text-shadow: 2px 2px 0px #0007; } main { border: 1px dashed #bdc7b8; padding: 1rem; margin-bottom: 2em; display: flex; flex-direction: column; align-items: center; } .full-margin { width: 100%; margin: 3rem 0; } .half-margin { width: 100%; margin: 1.5rem 0; } .third-margin { width: 100%; margin: 1rem 0; } .row { display: flex; align-items: center; justify-content: space-around; width: 100%; } .center { align-items: center; } .wrap { flex-wrap: wrap; } .row.grid-large > div { flex: 1 1 20em; } .row.grid-small > div { flex: 0 0 8em; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-space-between { justify-content: space-between; } .justify-center { justify-content: center; } form { display: flex; flex-direction: column; align-items: flex-start; margin: 0; } pre.wrap { white-space: normal; } label.align { min-width: 10em; } input, textarea, select, label { margin: 0.5em; } input, select, textarea { outline: 0; padding: 0.25em 0.5em; color: #bdc7b8; background-color: #bdc7b805; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* re-generate the following line from the source image with: echo "background-image: url(data:image/png;base64,$(cat capsulflask/static/dropdown-handle.png | base64 -w 0));" */ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA9hAAAPYQGoP6dpAAACfElEQVRYw+2WSWgVQRCGp3tmHmLEuKEEL3owguJBjBcD8eJJiCABT4IrOQiKC6jnoJ6CYBDiQkTxiQiC4nKIntR4E70JUQQ9KahIUAg6m1/FntBvXpYZE6PCFPxUTc90/dW19HuOU0op/4K8GnzcOMN8s8BCsbVZO8hCO1AzQN6EugJa7QCWguvgMB/4f5B8DeqO73vb0JEdwBetVYPnud3Yl0yU003egep3XbclCEInG8C3OE6cMIwc3/e383yXDWuniViDI5J2rXVTFEXpq9gO4Gu6GgSB43neOsyHbNwFpkK+AHWeU3dD3hDHsf06sQO4DZ6lUYVh6CilpEvPgTNpxxYgVmA15i3KuldObZGL8QQ8Hw2geWXbW9RWMECkv8JLEgmiQvQHeLyGw+YCMWwC98hkm5Q1Fdcd8d0POuD8LA8qE/kic+otYHQafM9zgjB8jXkIPGBzMN58o/aAExxkXiblP8ANsJ/9Q+mitr/gxSeUNOHVNBMjfUFJOM0KzJviACJvDPI5QgzOZsnJpKiLYLdNXpcBy1kF1WVOXKnZgDPKU8U8Ct6b5WWgh3q32yk38h2cAichr3upJmmmYyaQmiC4SJiW8AVmJ5Bs9DG+q2SCMjIMjkPcMx6HytHRUtPTYK69TnM6dPcHKSPNtTiK6kZsyNS7OpF/lXOsZEL6qO18u7Zpn2TXeJZe2gn5/cl8qwKzvRF12dR7InkDdkD+NI9fnTcAHD4yd8Wg9EBWzNpL+SYveaEMWJlYjqoyDBuSpGYyBmSEIX9XxJ/6zTt+CeoC2GwaTmrdCfnHor7UFH5oZqN6zd2+D/Lhv/FXbj1oKf/UllLKfy0/ATtM/c/kKrmhAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: bottom 0.65em right 0.8em; background-size: 0.5em; padding-right: 2em; } input[type=text], input[type=number], textarea { font: calc(0.40rem + 1vmin) monospace; border: 1px solid #777e73; outline: 0; } input[type=text], textarea { min-width: 20em; } input[type=text].expand, textarea.expand { width: 100%; } textarea { height: 6em; } input[type=checkbox] { margin: 0; } input[type=submit], select { font: calc(0.40rem + 1vmin) monospace; border: 1px solid #777e73; border-radius: 0.5em; } input[type=submit], select { cursor: pointer; } input[type=submit].form-submit-link { border: none; background-color: initial; color: #6CF; padding: 0; margin: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } input[type=image].submit { background-color: #0000; } ul li { margin: 0.5em 0; } hr { width: 100%; } table{ border-collapse: collapse; } thead { background: #bdc7b812; } td, th { font: calc(0.40rem + 1vmin) monospace; padding: 0.1em 1em; } table.small td, table.small th { font: calc(0.35rem + 0.83vmin) monospace; padding: 0.1em 1em; } table.small td.metrics { padding: 0; } td.metrics img { margin-left: -20px; margin-right: -20px; margin-top: -5px; margin-bottom: -5px; } th { border-right: 4px solid #241e1e; text-align: left; } td { border-bottom: 2px dotted #777e7355; } .invalidated { text-decoration: line-through; } .waiting-pulse { animation: waiting-pulse 1s ease-in-out 0s infinite forwards alternate; } @keyframes waiting-pulse { from { color: rgba(221, 169, 56, 0.8); } to { color: rgba(221, 169, 56, 0.2); } } div.metric { display: flex; align-items: last baseline; flex-direction: column; margin: 0.7em; } .code { display: inline-block; padding: 0.5em 1.2em; border-radius: 0.5em; border: 1px solid #777e73; background: #bdc7b810; } .break-word { word-break: break-word; } .dim { color: #777e73bb; } footer, p { text-align: left; } footer { margin: 2rem 0; } .bigtext { display: inline-block; position: relative; top: 0.17rem; font-size: 1.8em; } .smalltext { font-size: 0.8em; }