:root { --bg: #eee; --color: black; --bevel-dark: darkgray; --bevel-light: lightgray; --link: blue; --input-bg: #ddd; --input-text: white; --btn-bg: #eee; } @media (prefers-color-scheme: dark) { :root { --bg: black; --color: orange; --bevel-dark: #402900; --bevel-light: #805300; --link: #31b0fa; --input-bg: #111; --input-text: #ddd; --btn-bg: #222; } } body { background: var(--bg); color: var(--color); } button[disabled] { opacity: 0.5; } a[href], a[href]:visited, button.link { border: none; color: var(--link); background: none; cursor: pointer; text-decoration: none; } table { border-collapse: collapse; } th, td { border-left: dotted 1pt; border-right: dotted 1pt; border-bottom: dotted 1pt; padding: 2pt 4pt; } tr:first-child > th { border-top: dotted 1pt; } th, tr:last-child > td { border-bottom: solid 1pt; } .flat > * { margin-left: 1ex; } .flat > *:first-child { margin-left: 0; } .green { color: green; } .red { color: red; } @media (prefers-color-scheme: dark) { .red { color: #c00; } } textarea, select, input { background: var(--input-bg); color: var(--input-text); border: solid 1pt; border-color: var(--bevel-light); border-top-color: var(--bevel-dark); border-left-color: var(--bevel-dark); margin: 1pt; &:focus { outline: solid 1pt var(--color); } } button, input[type=button], input[type=submit], ::file-selector-button { background: var(--btn-bg); color: var(--color); border: solid 2pt; border-color: var(--bevel-dark); border-top-color: var(--bevel-light); border-left-color: var(--bevel-light); &:hover { background: var(--bevel-dark); } &:active { background: var(--bevel-dark); border-color: var(--bevel-light); } } header { display: flex; align-items: center; border-bottom: 2pt solid; margin: 0 0 1em 0; padding: 1ex; justify-content: space-between; } #logo > img { vertical-align: middle; } header .utils > * { margin-left: 1ex; } .error { display: flex; position: relative; background: rgba(255,0,0,0.2); border: 1pt solid red; justify-content: space-between; align-items: center; } .error .btn-close, .error .code { background: #600; color: white; font-weight: bold; border: none; align-self: stretch; padding: 1ex 1em; } .error .code { order: 1; display: flex; align-items: center; text-align: center; } .error .message { order: 2; padding: 1ex 2em; } .error .btn-close { order: 3; } .sheets { display: flex; align-items: stretch; } .sheets > div { margin: 0 1ex; border: 1pt solid; border-radius: 6pt; } .sheets .title { text-align: center; font-weight: bold; font-size: large; padding: 2pt 6pt; background: rgba(127,127,127,0.5); } .sheets .section { padding: 2pt 6pt 2pt 6pt; font-weight: bold; border-top: 1px dotted; } .sheets section { margin: 2pt 6pt 6pt 6pt; } .sheets > *:last-child > table:last-child > tr:last-child > td { border-bottom: none; } .notif { display: inline-block; position: relative; } .notif > div:first-child { position: absolute; min-width: 100%; height: 100%; background: white; opacity: 75%; text-align: center; } .links > * { margin-left: 1ex; } .links > *:first-child { margin-left: 0; } @media (prefers-color-scheme: dark) { .notif > div:first-child { background: black; } } .copy { font-size: small; }