Revert "style.css: Make it more concise"

This reverts commit ff7e33a9c443fd49a67664d01e50655cc1dc58d3.

Broke too much stuff.

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;
 }