cosmetic changes

html/ui/app.css

@@ -20,14 +20,10 @@
     border-radius: 1ex;
     cursor: pointer;
   }
-  & > .selected {
-    color: blue;
-  }
 }
 
-@media (prefers-color-scheme: dark) {
-  .downloads > .selected,
-  .view-links > .selected {
-    color: #31b0fa;
+.downloads, .view-links {
+  & > .selected {
+    color: var(--link);
   }
 }

html/ui/index.html

@@ -74,7 +74,7 @@
 </template>
 
 <template v-else>
-  <div style="float:right;"><input type="text" placeholder="Filter" v-model="viewFilter"/></div>
+  <div style="float:right;"><input type="search" placeholder="Filter" v-model="viewFilter"/></div>
   <p class="view-links"><span v-for="v in views" @click="view = v" :class="{selected: view.type==v.type && view.name==v.name}">{{v.title}}</span></p>
 
   <h2 v-if="view">{{view.title}}</h2>
@@ -112,9 +112,9 @@
         <template v-for="k,i in state.Store.KeyNames">{{i?", ":""}}<code @click="forms.delKey.name=k">{{k}}</code></template>.</p>
   </form>
 
-<template v-if="state.HostTemplates && state.HostTemplates.length">
+<template v-if="any(state.HostTemplates) || any(hostsFromTemplate)">
   <h3>Hosts from template</h3>
-  <form @submit="hostFromTemplateAdd" action="">
+  <form @submit="hostFromTemplateAdd" action="" v-if="any(state.HostTemplates)">
       <p>Add a host from template instance:</p>
       <input type="text" v-model="forms.hostFromTemplate.name" required placeholder="Name" />
       <select v-model="forms.hostFromTemplate.Template" required>
@@ -123,7 +123,7 @@
       <input type="text" v-model="forms.hostFromTemplate.IP" required placeholder="IP" />
       <input type="submit" value="add instance" />
   </form>
-  <form @submit="hostFromTemplateDel" action="">
+  <form @submit="hostFromTemplateDel" action="" v-if="any(hostsFromTemplate)">
       <p>Remove a host from template instance:</p>
       <select v-model="forms.hostFromTemplateDel" required>
         <option v-for="h in hostsFromTemplate" :value="h.Name">{{h.Name}}</option>

html/ui/js/app.js

@@ -79,11 +79,14 @@ createApp({
             return undefined;
         },
         hostsFromTemplate() {
-            return (this.state.Hosts||[]).filter((h) => h.Template)
+            return (this.state.Hosts||[]).filter((h) => h.Template);
         },
     },
 
     methods: {
+        any(array) {
+            return array && array.length != 0;
+        },
         copyText(text) {
             event.preventDefault()
             window.navigator.clipboard.writeText(text)

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 {