Reworked CSS

- Split into 4 files referenced by the first
- Using MLFE and page-wide color definitions
- Improved consistency and reduced markup complexity
- Hinted more user actions
- Improved visual parsability of tables and logs
- Improved visibility of counter units
- TODO:
  - Add text selection to important fields
  - Improve button placement
  - Reindent templates

static/style/component.css

@@ -0,0 +1,68 @@
+/* Inputs */
+input, select, :is(button, .button) {
+  background: var(--cl-el);
+  border: 1px solid var(--cl-fg);
+  padding: 0.125rem;
+}
+
+:is(button, .button, input[type=submit]) {
+  display: flex;
+  text-align: center;
+  text-decoration: none;
+  align-items: center;
+}
+
+:is(button, .button, input[type=submit]):hover {
+  background-color: var(--cl-hl);
+  cursor: pointer;
+}
+
+/* Forms */
+:is(form, .form) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+  align-self: start;
+}
+
+:is(form, .form) > :is(p, label) {
+  grid-column: 1;
+}
+
+:is(form, .form) > :is(button, .button, input[type=submit]) {
+  grid-column: 1 / 3;
+}
+
+:is(form, .form) > :is(input[type=checkbox], :is(p, label)) {
+  place-self: center start;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+}
+
+th, td {
+  background: var(--cl-el);
+  border: 1px solid var(--cl-fg);
+  padding: 0.25rem;
+}
+
+tr:hover > td {
+  background: var(--cl-hl);
+}
+
+tr:hover[onclick] > td {
+  cursor: pointer;
+}
+
+/* Navigation */
+nav {
+  flex-flow: row nowrap;
+  background: var(--cl-el);
+}
+
+nav > :is(button, .button, input[type=submit]) {
+  border: none;
+  padding: 0.5rem;
+}