Style overlays

2 files changed, 111 insertions, 62 deletions

diff --git a/web/source/custom.css b/web/source/custom.css
index 8652983..d05fc34 100644
--- a/web/source/custom.css
+++ b/web/source/custom.css
@@ -12,32 +12,12 @@ body {
     border-top: 1px solid #232200;
 }
 
-#node-overlay, #edge-overlay {
-    position: absolute;
-    top: 10%;
-    left: 35%;
-    width: 30%;
-    min-width:500px;
-    padding: 10px;
-    background-color: white;
-    border: 1px solid black;
-    border-radius: 10px;
-}
-
-.hidden {
-    visibility:hidden;
-}
-
-.smallin {
-    width: 3rem;
-}
-
 #sidebar {
     width: 20%;
     float:right;
     color: white;
     background-color: black;
-    box-shadow: -1px -2px 3px #111;
+    box-shadow: 0px 0px 20px #111;
 }
 
 #sidebar > * {
@@ -50,6 +30,10 @@ body {
     display: inline-block;
 }
 
+#sidebar button, #sidebar input {
+    height: 3rem;
+}
+
 #sidebar *:nth-child(odd) {
     background-color: #111;
 }
@@ -80,22 +64,19 @@ body {
     text-align: center;
 }
 
-#sidebar button {
-    border-bottom: none;
-    border-left: none;
-    border-right: none;
+button {
+    border: none;
     color: white;
-    height: 3rem;
+    background-color:black;
     font-size: 1.2rem;
     margin:0;
     padding:0;
 }
 
-#sidebar input[type="number"] {
-    border-bottom: none;
-    border-left: none;
-    border-right: none;
-    height: 3rem;
+input[type="number"] {
+    background-color: #333;
+    color: white;
+    border: none;
     text-align: center;
     font-size: 1.2rem;
 }
@@ -139,13 +120,79 @@ body {
     padding-bottom: 0.75rem;
 }
 
-.file-action .custom-file {
-    width: 50% !important;
-    float: left;
+.dialog {
+    position: absolute;
+    top: 10%;
+    left: 25%;
+    width: 30%;
+    min-width:500px;
+    padding: 10px;
+    background-color: black;
+    color: white;
+    box-shadow: 0px 0px 10px #111;
+}
+
+.dialog > div {
+    height: 3rem;
 }
 
-.file-action button {
-    width: 50% !important;
-    float: right;
-    border: none;
+.hidden {
+    visibility:hidden;
+}
+
+.dialog > div {
+  width: 100%;
+}
+
+.dialog button {
+    padding: 0.75rem;
+    font-size: 1.5rem;
+}
+
+.dialog button.cancel {
+    background-color: #a23a30;
+}
+
+.dialog button.save {
+    background-color: #0ea92f;
+}
+
+.label-input {
+  display: inline-flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.label-input > * {
+  flex: auto;
+  transition: width 0.7s ease-out;
+}
+
+.label-input label {
+  display: inline-block;
+  background-color: #333;
+  font-size: 1.5rem;
+  padding: 0.75rem;
+}
+
+.label-input input {
+  display: inline-block;
+  color: white;
+  background-color: #111;
+  font-size: 1.5rem;
+  padding: 0.75rem;
+  border: none;
+  min-width: 0px;
+}
+
+.label-input span {
+  display: inline-block;
+  font-size: 1.5rem;
+  padding: 0.75rem;
+  background-color: #222;
+}
+
+.label-input button {
+    font-size: 1.5rem;
+    padding: 0.75rem;
 }
diff --git a/web/source/index.html b/web/source/index.html
index 1460c98..ee99f46 100644
--- a/web/source/index.html
+++ b/web/source/index.html
@@ -27,36 +27,38 @@
                 <span>Load</span>
             </label>
         </div>
-        <div id="edge-overlay" class="hidden">
+        <div id="edge-overlay" class="hidden dialog">
             <h2><span id="edge-operation"></span> edge</h2>
-            <p>
+            <div class="label-input">
                 <label for="prob">Probability:</label>
-                <input id="prob" class="smallin" type="number" min="0.0" max="100">%
-            </p>
-            <p>
-                <input type="button" id="edge-save" value="Save">
-                <input type="button" id="edge-cancel" value="Cancel">
-            </p>
+                <input id="prob" type="number" min="0.0" max="100">
+                <span>%</span>
+            </div>
+            <div class="label-input">
+                <button class="save" id="edge-save">Save</button>
+                <button class="cancel" id="edge-cancel">Cancel</button>
+            </div>
         </div>
-        <div id="node-overlay" class="hidden">
+        <div id="node-overlay" class="hidden dialog">
             <h2><span id="node-operation"></span> node</h2>
-            <p>
+            <div class="label-input">
                 <label for="pitch">Pitch:</label>
                 <select id="pitch"></select>
-            </p>
-            <p>
-                <label for="octave">Octave (as a number)</label>
-                <input class="smallin" id="octave" type="number" step="1">
-            </p>
-            <p>
-                <label>Duration (e. g. 1/4):</label>
-                <input min="0" class="smallin" id="numerator" type="number" step="1"> /
-                <input min="0" class="smallin" id="denominator" type="number" step="1">
-            </p>
-            <p>
-                <input type="button" id="node-save" value="Save">
-                <input type="button" id="node-cancel" value="Cancel">
-            </p>
+            </div>
+            <div class="label-input">
+                <label for="octave">Octave:</label>
+                <input id="octave" type="number" step="1">
+            </div>
+            <div class="label-input">
+                <label>Duration:</label>
+                <input min="0" id="numerator" type="number" step="1">
+                <span>/</span>
+                <input min="0" id="denominator" type="number" step="1">
+            </div>
+            <div class="label-input">
+                <button class="save" id="node-save">Save</button>
+                <button class="cancel" id="node-cancel">Cancel</button>
+            </div>
         </div>
     </body>
 </html>