Vertical centering of busy image

htdocs/css/general.css

@@ -8,14 +8,10 @@
     src: url('../fonts/DroidSans.ttf') format("truetype");
 }
 
-.digital {
-    font-family: "Digital Sans EF Medium", sans-serif;
-}
-
 :root {
     --default-amount-color: #a5b3c0;
     --default-font-color: #c2c2c2;
-    --default-font-size: 2vw;
+    --default-font-size: 2.5vw;
     --default-header-color: #64aa82;
     --link-color: #436055;
     --link-font-size: 1.8vw;
@@ -23,6 +19,9 @@
     font-size: var(--default-font-size);
     background-color: black;
     color: var(--default-font-color);
+}
+
+html * {
     font-family: "DroidSans", sans-serif;
 }
 
@@ -41,25 +40,6 @@ body {
     height: 100vh;
 }
 
-h1 {
-    color: var(--default-header-color);
-    font-size: 3vw;
-    margin: 0;
-    padding-bottom: 5px;
-}
-
-h2 {
-    font-size: 3vw;
-    margin: 0;
-    padding: 0;
-}
-
-h3 {
-    font-size: 2vw;
-    padding: 0;
-    margin: 0;
-}
-
 a {
     font-size: var(--link-font-size);
 }
@@ -76,17 +56,92 @@ a:active {
     color: var(--link-color);
 }
 
+button {
+    background-color: #515151;
+    border: 1px solid #506b58;
+    color: white;
+    padding: 5px 15px;
+    margin: 0;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    cursor: pointer;
+    font-size: var(--default-font-size);
+    max-font-size: 18px;
+}
+
+button:hover {
+    background-color: #858595;
+}
+
 div {
     margin: 0;
     padding: 0;
+}  
+
+h1 {
+    color: var(--default-header-color);
+    font-size: 3vw;
+    margin: 0 0 5px;
+    padding: 0;
+}
+
+h2 {
+    font-size: 3vw;
+    margin: 0;
+    padding: 0;
 }
 
-p {
+h3 {
+    font-size: 2vw;
+    padding: 0;
     margin: 0;
+}
+
+input {
+    font-family: 'localFixed', monospace;
+    border: 1px solid #3b4b3d;
+    padding: 5px;
+    margin: 0;
+    background: rgba(64, 142, 62, 0.04);
+    color: var(--default-font-color);
+    font-size: var(--default-font-size);
+    max-font-size: 18px;
+}
+
+p {
+    margin: 0 0 5px;
     padding: 0;
     font-size: var(--default-font-size);
 }
 
+select {
+    border: 1px solid #3b4b3d;
+    outline: 1px;
+    background: rgba(64, 142, 62, 0.04);
+    color: var(--default-font-color);
+    padding: 5px 15px;
+    height: 33px;
+    font-size: var(--default-font-size);
+    -webkit-appearance: none;
+    -webkit-user-select: none;
+}
+
+select option {
+    background: #222222;
+    color: var(--default-font-color);
+    font-size: var(--default-font-size);
+}
+
+textarea {
+    font-family: monospace;
+    border: 1px solid #3b4b3d;
+    padding: 5px;
+    background: rgba(64, 142, 62, 0.04);
+    color: var(--default-font-color);
+    font-size: var(--default-font-size);
+}
+        
 .app-header {
     font-family: "Digital Sans EF Medium", sans-serif;
     color: var(--default-header-color);
@@ -98,6 +153,16 @@ p {
     padding-bottom: 5px;
 }
 
+.amount {
+    font-family: monospace;
+    font-size: var(--default-font-size);
+}
+
+.address {
+    font-family: monospace;
+    font-size: var(--default-font-size);
+}
+
 .box {
     margin-top: 0;
     margin-right: 10px;
@@ -108,6 +173,10 @@ p {
     border: 1px solid #484745;
 }
 
+.digital {
+    font-family: "Digital Sans EF Medium", sans-serif;
+}
+
 .hidden-element {
     display: none;
 }

htdocs/index.html

@@ -114,10 +114,10 @@
     </div>
     <div class="hidden-element" id="unlock_window">
       <div class="box">
-        <h1>Enter Password</h1>
+        <h1>Unlock</h1>
         <p>Enter wallet password and click 'Unlock' to continue.</p>
-        <input type="password" id="ID_WalletUnlockPwd" style="width: 100%"/><br/><br/>
-        <button id="ID_UnlockWalletButton">Unlock</button>
+        <input type="password" id="ID_WalletUnlockPwd" style="width: 100%"/><br>
+        <button style="margin-top: 5px;" id="ID_UnlockWalletButton">Unlock</button>
       </div>
     </div>
     <div class="hidden-element" id="wallet_created_window">
@@ -152,10 +152,8 @@
           <h1>Connecting</h1>
           <p>Waiting to establish connection to Sia</p>
         </div>
-        <div class="box" style="flex-grow: 1;">
-          <div style="height: inherit;">
-            <img style="display: block; opacity: 0.35; max-width: 181px; max-height: 103px; margin-left: auto; margin-right: auto; border-radius: 10px;" src="./images/startup.gif">
-          </div>
+        <div class="box" style="flex-grow: 1; display: flex; align-items: center;">
+          <img style="display: block; margin-left: auto; margin-right: auto; opacity: 0.35; width: 181px; height: 103px; border-radius: 10px;" src="./images/startup.gif">
         </div>
       </div>
     </div>