diff options
Diffstat (limited to 'static')
-rw-r--r-- | static/style.css | 104 |
1 files changed, 69 insertions, 35 deletions
diff --git a/static/style.css b/static/style.css index 3dbe22e..765f37a 100644 --- a/static/style.css +++ b/static/style.css @@ -1,6 +1,8 @@ /* Base styles and variables */ html { font-family: sans-serif; + background-color: var(--background-color); + color: var(--text-color); --background-color: hsl(0, 0%, 100%); --text-color: hsl(0, 0%, 0%); --link-color: hsl(320, 50%, 36%); @@ -10,12 +12,10 @@ html { --text-decoration-color: hsl(0, 0%, 72%); --darker-box-background-color: hsl(0, 0%, 92%); --lighter-box-background-color: hsl(0, 0%, 95%); - --primary-color: var(--link-color); + --primary-color: hsl(320, 50%, 36%); --primary-color-contrast: hsl(320, 0%, 100%); --danger-color: hsl(0, 50%, 36%); --danger-color-contrast: hsl(0, 0%, 100%); - background-color: var(--background-color); - color: var(--text-color); } /* Dark mode overrides */ @@ -59,7 +59,10 @@ html, code, pre { padding: 3px 0; cursor: pointer; } -.toggle-table-off:checked + table > tbody, .toggle-table-on + table > tbody { +.toggle-table-off:checked + table > tbody { + display: none; +} +.toggle-table-on + table > tbody { display: none; } .toggle-table-on:checked + table > tbody { @@ -68,25 +71,31 @@ html, code, pre { /* Footer styles */ footer { - margin: 1rem auto; + margin-top: 1rem; + margin-left: auto; + margin-right: auto; + display: block; padding: 0 5px; width: fit-content; text-align: center; color: var(--light-text-color); } -footer a { +footer a:link, footer a:visited { color: inherit; } /* Padding containers */ -.padding-wrapper, .padding { +.padding-wrapper { margin: 1rem auto; max-width: 60rem; padding: 0 5px; } +.padding { + padding: 0 5px; +} /* Link styles */ -a { +a:link, a:visited { text-decoration-color: var(--text-decoration-color); color: var(--link-color); } @@ -97,6 +106,8 @@ a { border-radius: 2px; padding: 2px; } + +/* Readme word breaks to avoid overfull hboxes */ #readme { word-break: break-word; } @@ -104,7 +115,7 @@ a { /* Table styles */ table { border: var(--lighter-border-color) solid 1px; - border-spacing: 0; + border-spacing: 0px; border-collapse: collapse; } table.wide { @@ -117,21 +128,24 @@ td, th { .pad { padding: 3px 5px; } -th, thead, tfoot, tr.title-row > th, th.title-row { +th, thead, tfoot { background-color: var(--lighter-box-background-color); } th[scope=row] { text-align: left; } +tr.title-row > th, th.title-row, .title-row { + background-color: var(--lighter-box-background-color); +} td > pre { margin: 0; } -#readme > *:first-child { - margin-top: 0; -} #readme > *:last-child { margin-bottom: 0; } +#readme > *:first-child { + margin-top: 0; +} /* Table misc and scrolling */ .commit-id { @@ -145,11 +159,13 @@ td > pre { .chunk-unchanged { color: grey; } -.chunk-addition, @media (prefers-color-scheme: dark) .chunk-addition { +.chunk-addition { background-color: green; } -.chunk-addition@media (prefers-color-scheme: dark) { - background-color: lime; +@media (prefers-color-scheme: dark) { + .chunk-addition { + background-color: lime; + } } .chunk-deletion { background-color: red; @@ -158,7 +174,8 @@ td > pre { background-color: yellow; } pre.chunk { - margin: 0; + margin-top: 0; + margin-bottom: 0; } .centering { text-align: center; @@ -211,55 +228,72 @@ pre.chunk { } /* Form elements */ -textarea, input[type=text], input[type=password] { +textarea { box-sizing: border-box; background-color: var(--lighter-box-background-color); + resize: vertical; +} +textarea, +input[type=text], +input[type=password] { font-family: sans-serif; font-size: smaller; + background-color: var(--lighter-box-background-color); color: var(--text-color); border: none; padding: 0.3rem; width: 100%; + box-sizing: border-box; } td.tdinput, th.tdinput { padding: 0; } -td.tdinput textarea, td.tdinput input[type=text], td.tdinput input[type=password], -th.tdinput textarea, th.tdinput input[type=text], th.tdinput input[type=password] { +td.tdinput textarea, +td.tdinput input[type=text], +td.tdinput input[type=password], +th.tdinput textarea, +th.tdinput input[type=text], +th.tdinput input[type=password] { background-color: transparent; } /* Button styles */ -.btn-primary, .btn-danger, .btn-white, .btn-normal, -input[type=file]::file-selector-button { - border: var(--lighter-border-color) 1px solid; - font-weight: bold; - display: inline-block; - width: auto; - min-width: fit-content; - border-radius: 0; - padding: .1rem .75rem; - font-size: 0.9rem; - transition: background .1s linear; - cursor: pointer; -} .btn-primary { background: var(--primary-color); color: var(--primary-color-contrast); + border: var(--lighter-border-color) 1px solid; + font-weight: bold; } .btn-danger { background: var(--danger-color); color: var(--danger-color-contrast); + border: var(--lighter-border-color) 1px solid; + font-weight: bold; } .btn-white { background: var(--primary-color-contrast); color: var(--primary-color); + border: var(--lighter-border-color) 1px solid; } -.btn-normal, input[type=file]::file-selector-button { +.btn-normal, +input[type=file]::file-selector-button { background: var(--lighter-box-background-color); + border: var(--lighter-border-color) 1px solid !important; color: var(--light-text-color); } -a.btn { +.btn, .btn-white, .btn-danger, .btn-normal, .btn-primary, +input[type=submit], +input[type=file]::file-selector-button { + display: inline-block; + width: auto; + min-width: fit-content; + border-radius: 0; + padding: .1rem .75rem; + font-size: 0.9rem; + transition: background .1s linear; + cursor: pointer; +} +a.btn, a.btn-white, a.btn-danger, a.btn-normal, a.btn-primary { text-decoration: none; } |