cosmetic changes

html/ui/style.css

@@ -1,5 +1,30 @@
+:root {
+    --bg: #eee;
+    --color: black;
+    --bevel-dark:  darkgray;
+    --bevel-light: lightgray;
+    --link: blue;
+    --input-bg: #ddd;
+    --input-text: white;
+    --btn-bg: #eee;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: black;
+    --color: orange;
+    --bevel-dark:  #402900;
+    --bevel-light: #805300;
+    --link: #31b0fa;
+    --input-bg: #111;
+    --input-text: #ddd;
+    --btn-bg: #222;
+  }
+}
+
 body {
-    background: white;
+    background: var(--bg);
+    color: var(--color);
 }
 
 button[disabled] {
@@ -8,7 +33,7 @@ button[disabled] {
 
 a[href], a[href]:visited, button.link {
     border: none;
-    color: blue;
+    color: var(--link);
     background: none;
     cursor: pointer;
     text-decoration: none;
@@ -37,30 +62,38 @@ th, tr:last-child > td {
 .red   { color: red; }
 
 @media (prefers-color-scheme: dark) {
-  body {
-    background: black;
-    color: orange;
-  }
-  button, input[type=submit] {
-    background: #333;
-    color: #eee;
-  }
-  a[href], a[href]:visited, button.link {
-    border: none;
-    color: #31b0fa;
-  }
-
   .red { color: #c00; }
+}
 
-  textarea, input[type=text] {
-    background: #111;
-    color: #ddd;
-    border: dotted 1pt;
-    border-top-color:    #805300;
-    border-left-color:   #805300;
-    border-bottom-color: orange;
-    border-right-color:  orange;
+textarea, select, input {
+    background: var(--input-bg);
+    color: var(--input-text);
+    border: solid 1pt;
+    border-color:  var(--bevel-light);
+    border-top-color:  var(--bevel-dark);
+    border-left-color: var(--bevel-dark);
+    margin: 1pt;
+
+    &:focus {
+      outline: solid 1pt var(--color);
+    }
   }
+
+button, input[type=button], input[type=submit], ::file-selector-button {
+    background: var(--btn-bg);
+    color: var(--color);
+    border: solid 2pt;
+    border-color:  var(--bevel-dark);
+    border-top-color:  var(--bevel-light);
+    border-left-color: var(--bevel-light);
+
+    &:hover {
+      background: var(--bevel-dark);
+    }
+    &:active {
+      background: var(--bevel-dark);
+      border-color: var(--bevel-light);
+    }
 }
 
 header {