Massive style changes

wwwroot/css/base.css

@@ -1,3 +1,9 @@
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--f3-bg); }
+::-webkit-scrollbar-thumb:hover { background: var(--f3-border); }
+* { scrollbar-width: thin; scrollbar-color: var(--f3-bg) transparent; }
+
 * {
   margin: 0;
   padding: 0;
@@ -12,38 +18,41 @@ body {
   flex-direction: column;
 }
 
-body, input, select, button, textarea {
-  font-family: monospace;
-  font-size: 1em;
-  line-height: 1.5;
+body, button, input, select, textarea {
+  font-family: var(--font);
   color: var(--text);
 }
 
-input {
-  min-width: 0;
+body {
+  font-size: var(--font-size);
 }
 
-input, textarea, select {
-  padding: var(--s2);
-}
-
-h1, h2, h3, h4, h5 {
+button, input, select, textarea, h1, h2, h3, h4, h5 {
   font-size: 1em;
 }
 
-textarea, p {
+h1, h2, h3, h4, h5 {
+  color: var(--text-accent);
+}
+
+body, button, input, select, textarea, p {
   line-height: 1.5;
 }
 
-button, select, input, textarea {
+button, input, select, textarea {
   border: var(--border-width) solid var(--f3-border);
   background: var(--f3-bg);
   outline: none;
+  border-radius: var(--border-radius);
+}
+
+input, select, textarea {
+  padding: var(--input-padding);
 }
 
 button {
   line-height: 1.25;
-  padding: var(--s2) var(--s3);
+  padding: var(--button-padding);
 }
 
 button:not(:disabled) {
@@ -58,6 +67,10 @@ button:disabled {
   opacity: var(--semi-transparent);
 }
 
+input {
+  min-width: 0;
+}
+
 textarea {
   height: 12em;
   min-height: 12em;