CSS fixes.

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index 0e702c26e49f640168419e1db98e725333ca9ac8..179aef578a584306af14a35f7a450fd7758f6d2e 100644 (file)
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -384,58 +384,82 @@
                .flex {
                        display: flex;
                }
-               .flex.h-top {
-                       align-items: flex-start;
+               .flex.x-top,
+               .flex.x-mid,
+               .flex.x-bottom,
+               .flex.x-stretch,
+               .flex.x-left,
+               .flex.x-center,
+               .flex.x-right,
+               .flex.x-full {
                        flex-direction: row;
                        justify-content: center;
                }
-               .flex.h-mid {
+               .flex.x-top {
+                       align-items: flex-start;
+               }
+               .flex.x-mid {
                        align-items: center;
-                       flex-direction: row;
-                       justify-content: center;
                }
-               .flex.h-bottom {
+               .flex.x-bottom {
                        align-items: flex-end;
-                       flex-direction: row;
-                       justify-content: center;
                }
-               .flex.h-stretch {
+               .flex.x-stretch {
                        align-items: stretch;
-                       flex-direction: row;
-                       justify-content: center;
                }
-               .flex.h-left {
+               .flex.x-stretch > * {
+                       height: 100%;
+               }
+               .flex.x-left {
                        justify-content: flex-start;
                }
-               .flex.h-center {
+               .flex.x-center {
                        justify-content: center;
                }
-               .flex.h-right {
+               .flex.x-right {
                        justify-content: flex-end;
                }
-               .flex.h-full {
+               .flex.x-full {
                        width: 100%;
                }
-               .flex.v-left {
-                       align-items: flex-start;
+               .flex.y-left,
+               .flex.y-center,
+               .flex.y-right,
+               .flex.y-stretch,
+               .flex.y-top,
+               .flex.y-mid,
+               .flex.y-bottom,
+               .flex.full {
                        flex-direction: column;
                        justify-content: center;
                }
-               .flex.v-center {
+               .flex.y-left {
+                       align-items: flex-start;
+               }
+               .flex.y-center {
                        align-items: center;
-                       flex-direction: column;
-                       justify-content: center;
                }
-               .flex.v-right {
+               .flex.y-right {
                        align-items: flex-end;
-                       flex-direction: column;
-                       justify-content: center;
                }
-               .flex.v-stretch {
+               .flex.y-stretch {
                        align-items: stretch;
-                       flex-direction: column;
+               }
+               .flex.y-stretch * {
+                       width: 100%;
+               }
+               .flex.y-top {
+                       justify-content: flex-start;
+               }
+               .flex.y-mid {
                        justify-content: center;
                }
+               .flex.y-bottom {
+                       justify-content: flex-end;
+               }
+               .flex.y-full {
+                       height: 100%;
+               }
                .grid-x {
                        display: grid;
                        grid-template-columns: repeat(12, 1fr);
@@ -598,12 +622,12 @@
                <!-- New Wallet Form -->
 
                <dialog id="wallet-new">
-                       <div class="flex v-stretch">
-                               <div id="wallet-new-name" class="flex h-left h-mid">
+                       <div class="flex y-stretch">
+                               <div id="wallet-new-name" class="flex x-left x-mid">
                                        <label for="wallet-new-name-input">Name</label>
                                        <input id="wallet-new-name-input" name="wallet-new-name" autocomplete="off" minlength="1" maxlength="80" pattern="[^_].*" placeholder="My Wallet" required />
                                </div>
-                               <div id="wallet-new-algorithm" class="flex h-left h-mid h-full">
+                               <div id="wallet-new-algorithm" class="flex x-left x-mid">
                                        <label for="wallet-new-algorithm-select">Algorithm</label>
                                        <select id="wallet-new-algorithm-select" name="wallet-new-algorithm" autocomplete="off" onchange="updateWalletForm('#wallet-new')" required>
                                                <option disabled selected value>Choose...</option>
@@ -611,11 +635,11 @@
                                                <option value="blake2b">BLAKE2b</option>
                                        </select>
                                </div>
-                               <div id="wallet-new-salt" class="flex h-left h-mid h-full hide">
+                               <div id="wallet-new-salt" class="flex x-left x-mid hide">
                                        <label for="wallet-new-salt-input">Salt</label>
                                        <input id="wallet-new-salt-input" name="wallet-new-salt" type="password" autocomplete="off" placeholder="Optional" />
                                </div>
-                               <div id="wallet-new-password" class="flex h-mid h-full">
+                               <div id="wallet-new-password" class="flex x-left x-mid">
                                        <label for="wallet-new-password-input">Lock</label>
                                        <input id="wallet-new-password-input" name="wallet-new-password" type="password" autocomplete="off" placeholder="Password" required />
                                </div>