UI: Style text inputs

web/app/src/assets/base.css

@@ -23,8 +23,9 @@
   --color-button: #bbb;
   --color-button-background: #555;
 
-  --border-width: 2px;
+  --border-color: #555;
   --border-radius: 4px;
+  --border-width: 2px;
 
   --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --font-family-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro","Fira Mono", "Droid Sans Mono", "Courier New", monospace;
@@ -309,10 +310,26 @@ dl dd:empty {
   margin-left: var(--spacer-sm)
 }
 
+input[type="text"] {
+  appearance: none;
+  background-color: var(--color-background);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--border-color);
+  box-sizing: border-box;
+  display: block;
+  padding: var(--spacer-sm);
+  width: 100%;
+  outline: none;
+  transition: border-color var(--transition-speed) ease-in-out
+}
+
+input[type="text"]:focus {
+  border-color: var(--color-accent);
+}
+
 select {
   background-color: var(--color-button-background);
   border-radius: var(--border-radius);
-  /* border: none; */
   border: calc(var(--border-width) / 2) solid var(--color-button-background);
   display: inline-flex;
   font-size: var(--font-size-sm);

web/app/src/views/FirstTimeWizardView.vue

@@ -470,11 +470,6 @@ body.is-first-time-wizard #app {
   margin-left: auto;
 }
 
-input.path-input {
-  width: 100%;
-  height: 2rem;
-}
-
 .setup-container {
   --color-check-failed: var(--color-status-failed);
   --color-check-ok: var(--color-status-completed);