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/color.css

@@ -0,0 +1,9 @@
+:root {
+  --cl-bg: #111;
+  --cl-fg: #eee;
+  --cl-el: #333;
+  --cl-hl: #222;
+
+  background: var(--cl-bg);
+  color: var(--cl-fg); 
+}

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

static/style/mlfe.css

@@ -0,0 +1,42 @@
+/* MLFE: Marginless FlexEverything (A CSS Reset for Layout) */
+:root {
+  font-family: sans-serif;
+  line-height: 1;
+  user-select: none; 
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0px;
+  margin: 0px;
+  user-select: inherit;
+  color: inherit;
+  overflow: hidden;
+  flex-shrink: 0;
+  font-family: inherit; /* + */
+  fonz-size: 1rem; /* + */
+}
+
+/* Change from normal: Body and label added as flex container */
+div, ul, ol, nav, body, label {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+h1 { font-size: calc(1rem + calc(1rem / 1))}
+h2 { font-size: calc(1rem + calc(1rem / 2))}
+h3 { font-size: calc(1rem + calc(1rem / 3))}
+h4 { font-size: calc(1rem + calc(1rem / 4))}
+h5 { font-size: calc(1rem + calc(1rem / 5))}
+h6 { font-size: calc(1rem + calc(1rem / 6))}
+
+ul, ol {
+  gap: 0.5rem;
+  padding-left: 1rem;
+}
+
+/* Fix text getting cut off unpredictably */
+h1, h2, h3, h4, h5, h6, pre, p, label, legend {
+  overflow: visible;
+}

static/style/style.css

@@ -1,74 +1,50 @@
-ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background-color: #333;
-}
+@import url("mlfe.css");
+@import url("color.css");
+@import url("component.css");
 
-li {
-   float: left;
-}
-
-li a {
-   display: block;
-   color: white;
-   background-color: #333;
-   text-align: center;
-   padding: 14px 16px;
-   text-decoration: none;
-}
-
-/* Change the link color to #111 (black) on hover */
-li a:hover {
-   background-color: #111;
-}
-
-
-* {
-  background-color: black;
-  color: white;
+:root {
   font-family: monospace;
+  font-size: 16px;
 }
 
-
-.counter {
-    display: flex;
-}
-
-.worker-list {
-    display: flex;
-    gap: 5px;
-    flex-wrap: wrap;
+body {
+  padding: 0.5rem;
+  gap: 0.5rem;
 }
 
 .counter-image {
-    image-rendering: pixelated;
-    image-rendering: -moz-crisp-edges;
-    image-rendering: crisp-edges;
-    flex-grow: 200;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  flex-grow: 1;
 }
 
-.worker table{
-    border: 1px solid white;
-    border-collapse: collapse;
-    border-spacing: 5px;
+.counter {
+  flex-flow: row nowrap;
+  align-items: end;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 
-.worker td{
-    border: 1px solid white;
+.workers {
+  flex-flow: row wrap;
 }
 
-.worker tr{
-    border: 1px solid white;
+.workers > * {
+  gap: 0.5rem;
+  border: 1px solid var(--fg);
 }
 
-.task-list table{
-    border: 1px solid white;
-    border-collapse: collapse;
-    border-spacing: 5px;
+.log > p {
+  padding: 0.25rem 0;
+  user-select: text;
 }
 
-.task-list tr{
-    border: 1px solid white;
-}
+.log > p:hover {
+  background: var(--cl-hl);
+}
+
+nav > :first-child {
+  font-size: 2rem;
+  font-weight: bold;
+}