diff options
| -rw-r--r-- | static/style.css | 337 |
1 files changed, 337 insertions, 0 deletions
diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..b37098e --- /dev/null +++ b/static/style.css @@ -0,0 +1,337 @@ +/* + * TODO: Remove all uses of !important. These are obviously bad practice, but + * it's not always trivial to get the precedence right. + */ + +:root { + --theme: #0062cc; + --theme-contrast: #ffffff; + --primary-fg: black; + --border: rgb(180, 180, 180); + --greyedout: rgb(180, 180, 180); + --boxbg: rgb(235, 235, 235); + --boxfg: #000000; + --rowbg-even: #ffffff; + --rowbg-odd: #fcfcfc; + --danger: #d32535; + --danger-contrast: #ffffff; + --anchor-underline-color: lightgray; +} + +.greyedout { + color: var(--greyedout) !important; +} + +html { + font-family: system-ui, sans-serif; + line-height: 1.2; + border-color: var(--theme); + color: var(--primary-fg); + background-color: white; +} + +body { + margin: 0; + padding: 0; + min-height: 100vh; +} + +main, body > section { + padding-left: 1rem; + padding-right: 1rem; + margin: 1rem auto; + max-width: 60rem; +} + +hr { + background-color: black; + border-width: 0; + height: 1px; +} + +a { + color: var(--theme); + text-decoration: underline; + text-decoration-color: var(--anchor-underline-color); +} + +#site-title { + text-decoration: none; +} + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; +} + +nav ul > li { + display: inline-block; +} + +nav ul > li:not(:last-child)::after { + content:"\2000" +} + +h2, h3, h4, h5, h6 { + margin-top: 1.2rem; +} + +header { + position: -webkit-sticky; + position: sticky; + top: 0; + left: 0; + color: white; + background-color: var(--theme); + z-index: 1000; + width: 100%; +} + +header a { + text-decoration: none; +} + +footer { + padding-left: 1rem; + padding-right: 1rem; +} + +footer p { + margin-top: 0rem; + margin-bottom: 1ex; +} + +.header-content { + padding-left: 1em; + padding-right: 1em; + max-width: 60rem; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; +} + +header img { + vertical-align: middle; + max-height: 40px; +} + +header a { + color: white; +} + +header h1 { + font-size: 25px; +} + +table { + margin-top: 0.4em; + margin-bottom: 0.4em; + border-collapse: collapse; + border: 2px solid var(--border); + font-size: 90%; +} + +table.wide { + width: 100%; +} + +th[scope~="row"] { + width: 6em; + text-align: right; +} + +th[scope~="col"] { + /* text-align: left; */ +} + +td { + border: 1px solid; + text-align: left; + height: 1.25rem; + border: 1px solid var(--border); + padding: 3px 5px; +} + +table.fat td { + padding: 6px 5px; +} + +td.th-like, th { + background-color: var(--boxbg) !important; + border: 1px solid var(--border); + font-weight: bold; + padding: 3px 5px; +} + +th.min, td.min { + width: 0; + min-width: fit-content; + white-space: nowrap; +} + +tr:nth-child(even) td { + background-color: var(--rowbg-even); +} + +tr:nth-child(odd) td { + background-color: var(--rowbg-odd); +} + +.btn-primary, input[type=submit]:not(.btn-danger) { + background: var(--theme); + color: var(--theme-contrast); + border: var(--border) 1px solid; + font-weight: bold; +} + +.btn-danger { + background: var(--danger); + color: var(--danger-contrast); + border: var(--border) 1px solid; + font-weight: bold; +} + +.btn-normal, input[type=file]::file-selector-button { + background: var(--boxbg); + border: var(--border) 1px solid !important; + color: var(--boxfg); +} + +.btn, input[type=submit], input[type=file]::file-selector-button { + display: inline-block; + /* width: 100%; */ + width: auto; + min-width: fit-content; + border-radius: 0; + padding: .1rem .75rem; + font-size: 0.9rem; + transition: background .1s linear; + /* border: none; */ + cursor: pointer; +} + +a.btn { + text-decoration: none; +} + +div.formgroup + div.formgroup { + margin-top: 1rem; +} + +textarea { + box-sizing: border-box; + background-color: var(--boxbg); + resize: vertical; +} +textarea, input[type=text] { + font-family: sans-serif; + font-size: smaller; + background-color: var(--boxbg); + border: none; + padding: 0.3rem; + width: 100%; + box-sizing: border-box; +} +td.tdinput { + padding: 0rem !important; +} +td.tdinput textarea, td.tdinput input[type=text] { + background-color: transparent !important; +} + +.multicols { + display: flex; + flex-direction: row; + flex-wrap: none; + gap: 1rem; + @media(max-width: 40rem) { + flex-wrap: wrap; + gap: 0rem; + } + align-items: stretch; +} + +.multicols div { + min-width: 15em; + width: 100%; + margin-left: auto; + margin-right: auto; +} + +.flex-justify { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + border: none; +} + +.button-row { + display: flex; + gap: 0.2rem; + justify-content: start; + align-items: center; + margin-right: 1rem; +} + +pre { + background-color: rgb(240, 240, 240); + padding: 0.3rem; + overflow-x: scroll; +} + +.flags, .filename { + font-family: monospace; +} + +article.work-text { + max-width: 40em; + margin-right: auto; + white-space: pre-wrap; + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + +form.dialogue { + background-color: var(--boxbg); + border: 2px solid var(--border); + font-size: 90%; + border-collapse: collapse; + padding: 0rem 0.5rem; + max-width: 20rem; +} + +table#flashes { + margin-bottom: 0rem; +} + +#main-actions { + margin-top: 1.5rem; +} + +section { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.inline { + display: inline-block; +} + +.flex-children-top { + display: flex; + gap: 1rem; + align-items: top; +} +.flex-children-top > * { + vertical-align: top; + display: block; + flex: none; +} + +.just-margin-top { + margin-top: 1rem; +} |