From 9d1e46d6ca9d09f834952314a537b0e6ca539ba0 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Tue, 22 Oct 2019 15:36:07 +0530 Subject: [PATCH] Update FLO_webWallet_mainnet.html --- FLO_webWallet_mainnet.html | 346 +++++++++++++++++++++---------------- 1 file changed, 198 insertions(+), 148 deletions(-) diff --git a/FLO_webWallet_mainnet.html b/FLO_webWallet_mainnet.html index 842304e..0794d41 100644 --- a/FLO_webWallet_mainnet.html +++ b/FLO_webWallet_mainnet.html @@ -1,5 +1,5 @@ - + FLO web wallet @@ -54,6 +54,7 @@ button { cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; + font-size: 0.8em; } button:hover { @@ -279,7 +280,7 @@ button:focus, input:focus, textarea:focus { display: -ms-flexbox; display: flex; width: 80vw; - padding: 1em; + padding: 1em 1.5em; -ms-flex-wrap: wrap; flex-wrap: wrap; background: var(--body-color); @@ -292,13 +293,13 @@ button:focus, input:focus, textarea:focus { #overlay #popup .input { width: 100% !important; - margin: 2em 1em !important; + margin: 2em 0.5em !important; } #overlay #popup button { - width: 6em !important; border: none; - margin: 0 1em !important; + width: auto; + margin: 0 0.5em; } #overlay #popup h4 { @@ -356,7 +357,7 @@ button:focus, input:focus, textarea:focus { display: grid; left: 0; position: absolute; - top: 64px; + top: 0; right: 0; bottom: 54px; } @@ -564,20 +565,68 @@ input[type=number]::-webkit-outer-spin-button { display: grid; top: 0; bottom: 0; - width: 100%; + left: 0; + right: 0; -ms-flex-line-pack: start; align-content: flex-start; - z-index: 3; + z-index: 2; +} + +#dispMsg #title-bar { + position: absolute; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + height: auto; + -ms-flex-line-pack: center; + align-content: center; + background: var(--body-color); + border-bottom: 1px solid var(--sec-color); +} + +#dispMsg #title-bar svg { + display: flexbox; + height: 2em; + width: 2em; + padding: 0.4em; + margin: 0.5em; + fill: var(--bw) !important; + cursor: pointer; + -ms-flex-item-align: center; + align-self: center; + overflow: visible; +} + +#dispMsg #title-bar span { + padding: 0.5em; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + text-overflow: ellipsis; + font-weight: bold; + line-height: 1.5em; +} + +#dispMsg #title-bar h5 { + margin: 0; + font-weight: normal; +} + +#dispMsg #title-bar h3 { + margin: 0; } #dispMsg trans-container { position: absolute; overflow-y: auto; - width: 100%; right: 0; left: 0; padding: 0.5em 0; - top: 64px; + top: 65px; bottom: 0; display: -webkit-box; display: -ms-flexbox; @@ -595,10 +644,9 @@ input[type=number]::-webkit-outer-spin-button { display: flex; position: relative; width: 100%; - padding: 0 1em; - margin: 0.5em 1em; -ms-flex-wrap: wrap; flex-wrap: wrap; + margin: 0.25em 0; border-radius: 0.25em; background: var(--body-color); } @@ -620,20 +668,23 @@ input[type=number]::-webkit-outer-spin-button { align-self: center; width: 100%; line-height: 1.4em; - padding: 1em 0; + padding: 1em; } #dispMsg trans-container transaction-card div:nth-of-type(1) { word-break: break-all; opacity: 0.8; font-size: 0.9em; - border-bottom: 1px solid var(--sec-color); + padding-bottom: 0.5em; } #dispMsg trans-container transaction-card div:nth-of-type(2) { overflow-wrap: break-word; word-wrap: break-word; - word-break: break-all; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + padding-top: 0.5em; } #dispMsg trans-container transaction-card div:nth-of-type(3) { @@ -737,7 +788,7 @@ loading svg .st1 { align-content: center; -webkit-transform: translateY(2em); transform: translateY(2em); - padding: 1em; + padding: 1em 1.5em; background: var(--body-color); border-radius: 0.25em; -webkit-transition: all 0.2s ease; @@ -747,7 +798,7 @@ loading svg .st1 { } #edit-container #edit .input { - margin: 1em; + margin: 1em 0.5em; width: 100% !important; } @@ -807,7 +858,7 @@ loading svg .st1 { align-content: center; -webkit-transform: translateY(2em); transform: translateY(2em); - padding: 1em; + padding: 1em 1.5em; background: var(--body-color); border-radius: 0.25em; -webkit-transition: all 0.2s ease; @@ -817,7 +868,7 @@ loading svg .st1 { } #add-container #add .input { - margin: 1em; + margin: 1em 0.5em; width: 100% !important; } @@ -916,63 +967,25 @@ loading svg .st1 { background: var(--sec-color); } -.title-bar { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - top: 0; - left: 0; - right: 0; - height: auto; - position: fixed; - -ms-flex-line-pack: center; - align-content: center; - background: var(--body-color); -} - -.title-bar svg { - display: flexbox; - width: 2em; - height: 1.2em; - fill: var(--bw) !important; - cursor: pointer; - margin: 0.5em; - -ms-flex-item-align: center; - align-self: center; -} - -.title-bar span { - padding: 0.5em; - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - text-overflow: ellipsis; - font-weight: bold; - line-height: 1.5em; -} - -.title-bar h5 { - margin: 0; - font-weight: normal; -} - -.title-bar h3 { - margin: 0; -} - #settings-page section { width: 100%; border-bottom: 1px solid var(--sec-color); + display: -ms-grid; + display: grid; + padding-bottom: 1em; +} + +#settings-page section:last-of-type { + border: none; } #settings-page h3, #settings-page h4 { display: flexbox; width: 100%; - margin-top: 0.5em; +} + +#settings-page h5 { + margin: 0; } #settings-page div { @@ -993,7 +1006,6 @@ loading svg .st1 { #settings-page .row span { font-size: 0.8em; - opacity: 0.8; } .slide-up { @@ -1213,13 +1225,6 @@ input:checked + .slider:before { } @media screen and (min-width: 768px) { - .title-bar { - position: absolute; - background: transparent; - } - .title-bar svg:last-of-type { - margin-right: 1em; - } .innerPage { position: absolute; overflow-y: auto; @@ -1239,6 +1244,11 @@ input:checked + .slider:before { -ms-flex-line-pack: center; align-content: center; } + #settings-page #deleteDB button { + margin-left: 0 !important; + margin-right: auto !important; + width: auto; + } #monitor-list monitor { -ms-flex-item-align: auto; align-self: auto; @@ -1264,7 +1274,7 @@ input:checked + .slider:before { opacity: 0.6; } #add, #edit { - width: 360px !important; + width: 400px !important; } ::-webkit-scrollbar { width: 8px; @@ -1387,8 +1397,6 @@ input:checked + .slider:before { } #main-card .right { left: 64px; - position: absolute; - top: 64px; right: 0; bottom: 0; } @@ -1434,16 +1442,61 @@ input:checked + .slider:before { } } +@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { + #main-card { + width: 80% !important; + height: 60vh !important; + } + monitor svg { + opacity: 1 !important; + } +} + +@media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) { + #main-card { + width: 80% !important; + height: 70vh !important; + } + monitor svg { + opacity: 1 !important; + } +} + +@media screen and (max-width: 380px) { + button { + font-size: 0.8em; + } +} + @media screen and (max-width: 360px) { transaction-card div { word-break: break-all; } - * { + body { font-size: 12px !important; } + #bottom-nav { + height: 48px; + } + trans-container { + top: 48px !important; + } + .label-active { + -webkit-transform: translateY(-0.6em) !important; + transform: translateY(-0.6em) !important; + font-size: 0.7em !important; + padding: 0 0.4em; + opacity: 1 !important; + background: var(--body-color); + } + #header { + height: 4em; + } + .right { + bottom: 48px; + } } -/*# sourceMappingURL=main.css.map */ - +/*# sourceMappingURL=main.css.map */