diff --git a/webui.dev/index.html b/webui.dev/index.html
index 830de3f..e5008c8 100644
--- a/webui.dev/index.html
+++ b/webui.dev/index.html
@@ -55,8 +55,13 @@
diff --git a/webui.dev/style.css b/webui.dev/style.css
index 8280def..10d6d22 100644
--- a/webui.dev/style.css
+++ b/webui.dev/style.css
@@ -524,10 +524,6 @@ div.toolbar {
flex-direction: row;
}
-div.toolbar * {
- margin-right: 1em;
-}
-
div.display {
border: 1px solid #666;
box-shadow: 0 0 6px 0 #aaa;
@@ -598,6 +594,36 @@ div.display {
vertical-align: middle;
}
+label.input-with-icons {
+ border: 1px solid #ccc;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+label.input-with-icons input {
+ border: 0;
+ padding: .6em;
+ flex-grow: 1;
+}
+
+label.input-with-icons svg {
+ font-size: 1.5em;
+}
+
+label.input-with-icons button {
+ border: 0;
+ background-color: transparent;
+ padding-top: 0;
+ padding-bottom: 0;
+ box-shadow: none;
+ transition: color .3s ease;
+}
+
+label.input-with-icons button:disabled {
+ display: none;
+}
+
@media screen and (width <= 600px) {
fieldset {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -653,6 +679,16 @@ div.display {
background-color: #222;
}
+ label.input-with-icons {
+ border: 1px solid #666;
+ background-color: #383838;
+ }
+
+ input {
+ background-color: #383838;
+ color: white;
+ }
+
button,
input[type="submit"] {
border: 1px solid #666;