minor epicker dialog restyling

1 files changed, 36 insertions, 27 deletions

diff --git a/src/epicker.html b/src/epicker.html
index 0d51f26..d493aa8 100644
--- a/src/epicker.html
+++ b/src/epicker.html
@@ -19,57 +19,59 @@ ul {
     margin: 0.25em 0 0 0;
 }
 button {
-    margin: 0 0 0 2px;
+    background-color: #ccc;
     border: 1px solid #aaa;
-    padding: 4px 6px;
+    border-radius: 3px;
     box-sizing: border-box;
     box-shadow: none;
-    border-radius: 3px;
-    color: #444;
-    background-color: #ccc;
+    color: #000;
     cursor: pointer;
+    margin: 0 0 0 2px;
+    opacity: 0.7;
+    padding: 4px 6px;
 }
-button:hover {
-    background-color: #eee;
+button:first-of-type {
+    margin-left: 0;
 }
 button:disabled {
     color: #999;
     background-color: #ccc;
 }
+button:not(:disabled):hover {
+    opacity: 1;
+}
 #create:not(:disabled) {
     background-color: #ffdca8;
 }
+aside {
+    background-color: #eee;
+}
 section {
-    border: 1px solid #ccc;
+    border: 0;
     box-sizing: border-box;
     display: inline-block;
-    height: 8em;
     position: relative;
     width: 100%;
 }
-textarea {
+section > textarea {
     background-color: #fff;
-    border: 0;
+    border: 1px solid #ccc;
     box-sizing: border-box;
     font: 11px monospace;
-    height: 100%;
+    height: 6em;
     overflow: hidden;
     padding: 0;
     resize: none;
     width: 100%;
 }
-div {
-    bottom: 1px;
+section > div {
     direction: ltr;
-    opacity: 1;
-    position: absolute;
-    right: 1px;
-}
-textarea:focus + div {
-    opacity: 0.2;
+    margin: 2px 0;
+    text-align: right;
 }
-textarea:focus + div:hover {
-    opacity: 1;
+section > div > span:last-of-type {
+    position: absolute;
+    right: 0;
 }
 ul {
     padding: 0;
@@ -77,8 +79,12 @@ ul {
     text-align: left;
     overflow: hidden;
 }
-body > ul > li {
-    padding-top: 3px;
+aside > ul {
+    height: 12em;
+    overflow-y: auto;
+}
+aside > ul > li:first-of-type {
+    margin-bottom: 0.5em;
 }
 ul > li > span:nth-of-type(1) {
     font-weight: bold;
@@ -101,7 +107,7 @@ ul > li > ul > li {
     direction: ltr;
 }
 ul > li > ul > li:hover {
-    background-color: rgba(255,255,255,1);
+    background-color: white;
 }
 svg {
     position: fixed;
@@ -124,7 +130,6 @@ svg > path + path {
     fill: rgba(255,31,31,0.25);
 }
 aside {
-    background-color: rgba(255,255,255,0.9);
     bottom: 4px;
     padding: 4px;
     display: none;
@@ -147,7 +152,11 @@ body.paused > aside:hover {
 <aside>
 <section>
     <textarea lang="en" dir="ltr" spellcheck="false"></textarea>
-    <div><button id="create" type="button" disabled="disabled">{{create}}</button><button id="pick" type="button">{{pick}}</button><button id="quit" type="button">{{quit}}</button></div>
+    <div><!--
+    --><button id="create" type="button" disabled="disabled">{{create}}</button><!--
+    --><button id="pick" type="button">{{pick}}</button><!--
+    --><button id="quit" type="button">{{quit}}</button><!--
+    --></div>
 </section>
 <ul>
     <li id="netFilters">