diff --git a/FLO_webWallet_mainnet.html b/FLO_webWallet_mainnet.html index 0b7d898..38804fd 100644 --- a/FLO_webWallet_mainnet.html +++ b/FLO_webWallet_mainnet.html @@ -1,2165 +1,2306 @@ + -FLO web wallet - - - - + #sendData #dispBal #dispBalInt { + font-size: 3em; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + } + + #sendData #dispBal #dispBalFloat { + font-size: 1em; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + } + + #sendData #dispBal h5:last-of-type { + opacity: 0.8; + font-weight: normal; + } + + #bottom-nav { + overflow: hidden; + position: fixed; + height: 54px; + -ms-flex-line-pack: center; + align-content: center; + text-align: center; + left: 0; + right: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + bottom: 0; + z-index: 4; + background: var(--body-color); + border-top: 1px solid var(--sec-color); + } + + #bottom-nav #indicator { + display: none; + } + + #bottom-nav .icons { + opacity: 0.8; + position: relative; + width: 100%; + z-index: 2; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + -ms-grid-column-align: center; + justify-self: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding: 0.4em; + cursor: pointer; + } + + #bottom-nav .icons svg { + fill: var(--bw); + height: 1.1em; + margin: 0 0 4px 0; + stroke: none; + } + + #bottom-nav .icons h6 { + margin: 0; + font-weight: normal; + } + + #bottom-nav .icons span { + display: none; + } + + .activeButton { + opacity: 1 !important; + color: var(--accent-color) !important; + } + + .activeButton svg { + fill: var(--accent-color) !important; + } + + .reveal { + width: 16em !important; + } + + .reveal span { + opacity: 1 !important; + } + + #overlay2 { + position: absolute; + opacity: 0; + pointer-events: none; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.2); + z-index: 3; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + } + + .show { + opacity: 1 !important; + pointer-events: all !important; + } + + .hide { + opacity: 0; + pointer-events: none; + } + + #menu { + display: none; + } + + #addrGen card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 1em 0; + border: solid 1px var(--sec-color); + border-radius: 0.25em; + } + + #addrGen card h5 { + margin: 0.5em 0 1em 0; + font-weight: normal; + } + + #addrGen card h4 { + font-weight: normal; + } + + #addrGen card div { + position: relative; + display: flexbox; + padding: 1em; + word-break: break-all; + width: 100%; + } + + #addrGen card div:nth-of-type(1) { + border-bottom: 1px solid var(--sec-color); + } + + #addrGen card svg { + cursor: pointer; + position: absolute; + right: 0; + top: 0; + padding: 0.6em; + height: 2.5em; + width: 2.5em; + margin: 0.8em; + fill: var(--bw); + opacity: 0.5; + border-radius: 2em; + -webkit-transition: 0.2s ease background; + transition: 0.2s ease background; + } + + #addrGen card svg:hover { + background: var(--sec-color); + opacity: 1; + } + + input[type=number]::-webkit-inner-spin-button, + input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; + } + + input[type=number] { + -moz-appearance: textfield; + } + + .innerPage { + position: fixed; + overflow-y: auto; + display: -ms-grid; + display: grid; + top: 0; + bottom: 0; + left: 0; + right: 0; + -ms-flex-line-pack: start; + align-content: flex-start; + z-index: 2; + background: var(--body-color); + } + + .title-bar { + top: 0; + 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); + } + + .title-bar svg { + display: flexbox; + height: 3em; + width: 3em; + padding: 0.9em; + fill: var(--bw) !important; + cursor: pointer; + -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; + width: calc(100% - 8em); + font-weight: bold; + line-height: 1.5em; + } + + .title-bar h5 { + margin: 0; + font-weight: normal; + } + + .title-bar h3 { + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + #dispMsg trans-container { + position: absolute; + overflow-y: auto; + width: 100%; + bottom: 0; + top: 65px; + padding: 0.25em 0 5em 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; + background: var(--back-color); + scroll-behavior: smooth; + } + + #dispMsg trans-container transaction-card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + width: calc(100% - 1em); + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 0.25em 0.5em; + border-radius: 0.25em; + background: var(--body-color); + } + + #dispMsg trans-container transaction-card svg { + display: flexbox; + -ms-flex-item-align: center; + align-self: center; + margin-right: 0.5em; + height: 1em; + width: 1em; + fill: var(--accent-color); + } + + #dispMsg trans-container transaction-card div { + display: flexbox; + width: 100%; + line-height: 1.4em; + padding: 1em; + overflow-wrap: break-word; + word-wrap: break-word; + } + + #dispMsg trans-container transaction-card div:nth-of-type(1) { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-line-pack: center; + align-content: center; + opacity: 0.8; + font-size: 0.9em; + padding-bottom: 0.5em; + } + + #dispMsg trans-container transaction-card div:nth-of-type(2) { + padding-top: 0.5em; + } + + #dispMsg trans-container transaction-card div:nth-of-type(3) { + text-align: right; + font-size: 0.8em; + opacity: 0.8; + } + + loading { + position: absolute; + display: -ms-grid; + display: grid; + height: calc(100% - 1.6em); + width: calc(100% - 1.1em); + place-items: center; + z-index: 10; + } + + loading svg { + position: relative; + height: 2.5em; + width: 2.5em; + } + + loading .p1 { + fill: none; + } + + loading .p2 { + fill: var(--accent-color); + } + + #addNewAddress, + #scrollToTop { + position: fixed; + cursor: pointer; + width: 3.5em; + height: 3.5em; + right: 0; + margin: 1em; + padding: 1.2em; + border-radius: 50%; + -webkit-box-shadow: 0.1em 0.2em 0.3em rgba(0, 0, 0, 0.4); + box-shadow: 0.1em 0.2em 0.3em rgba(0, 0, 0, 0.4); + -webkit-transition: right 0.2s ease, bottom 0.2s ease, opacity 0.2s ease; + transition: right 0.2s ease, bottom 0.2s ease, opacity 0.2s ease; + z-index: 2; + background: var(--accent-color); + fill: #fff; + } + + #addNewAddress { + bottom: 54px; + } + + #scrollToTop { + opacity: 0; + pointer-events: none; + } + + #edit-container, + #add-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 4; + background: rgba(0, 0, 0, 0.2); + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + } + + #add, + #edit { + position: absolute; + bottom: 0; + width: 100vw; + height: auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-transform: translateY(1em); + transform: translateY(1em); + padding: 1em; + background: var(--body-color); + -webkit-transition: -webkit-transform 0.2s ease; + transition: -webkit-transform 0.2s ease; + transition: transform 0.2s ease; + transition: transform 0.2s ease, -webkit-transform 0.2s ease; + } + + #add button, + #edit button { + border: none; + width: auto; + margin: 0.5em 0 !important; + } + + #add button:last-of-type, + #edit button:last-of-type { + margin-left: 1em !important; + } + + #add h4, + #edit h4 { + margin: 1em 0; + opacity: 0.8; + } + + #add .input, + #edit .input { + margin: 1em 0 !important; + width: 100% !important; + } + + #edit-container #edit #loadingSvg { + top: 0; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + opacity: 0.6; + fill: var(--bw); + position: absolute; + right: 0; + height: 2em; + width: 2em; + padding: 0.5em; + margin: 1.7em 1em 1em 1.5em; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + z-index: 2; + border-radius: 2em; + cursor: pointer; + } + + #edit-container #edit #loadingSvg:hover { + background: var(--sec-color); + } + + #edit-container #edit div:first-of-type { + position: relative; + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-line-pack: center; + align-content: center; + margin-bottom: 1em; + } + + #edit-container #edit div:first-of-type button { + display: flexbox; + white-space: nowrap; + margin-left: 0 !important; + -ms-flex-item-align: center; + align-self: center; + } + + #edit-container #edit div:first-of-type h4 { + padding: 0; + -ms-flex-item-align: center; + align-self: center; + display: flexbox; + text-align: right; + } + + #edit-container #edit h4 { + padding-right: 2em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + #edit-container #edit button:nth-of-type(2) { + margin-left: auto !important; + } + + #edit-container #edit h3, + #edit-container #edit h4, + #edit-container #edit h5 { + display: flexbox; + width: 100%; + } + + #add-container #add button:first-of-type { + margin-left: auto !important; + } + + #monitor-list { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; + padding-bottom: 5em; + } + + #monitor-list monitor { + height: auto; + border-radius: 0.25em; + border: 1px solid var(--sec-color); + margin: 0.5em 0; + -ms-flex-item-align: start; + align-self: flex-start; + width: 100%; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + #monitor-list monitor div { + padding: 1em; + overflow-wrap: break-word; + word-wrap: break-word; + } + + #monitor-list monitor div:nth-of-type(1) { + padding: 1em 4em 1em 0.8em; + font-size: 1.2em; + font-weight: bold; + } + + #monitor-list monitor div:nth-of-type(2) { + font-size: 0.8em; + padding-top: 0; + opacity: 0.8; + } + + #monitor-list monitor div:nth-of-type(3) { + position: absolute; + top: 0; + height: 100%; + width: 100%; + z-index: 1; + } + + #monitor-list monitor svg { + top: 0; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + opacity: 0.6; + fill: var(--bw); + position: absolute; + right: 0; + height: 2em; + width: 2em; + padding: 0.5em; + margin: 0.5em; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + z-index: 2; + border-radius: 2em; + } + + #monitor-list monitor svg:hover { + background: var(--sec-color); + } + + #monitor-list monitor badge { + position: absolute; + pointer-events: none; + color: #fff; + background: var(--accent-color); + border-radius: 2em; + padding: 0.5em; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + bottom: 0; + right: 0; + margin: 0.5em; + line-height: 0; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + #monitor-list monitor badge::after { + content: ""; + display: block; + padding-bottom: 100%; + } + + #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%; + -ms-flex-item-align: center; + align-self: center; + } + + #settings-page h5 { + margin: 0; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + font-weight: normal; + opacity: 0.9; + } + + #settings-page div { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + padding: 1em 0; + -ms-flex-line-pack: center; + align-content: center; + } + + #settings-page .row { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } + + #settings-page .row span { + font-size: 0.8em; + } + + #settings-page .border-card { + color: inherit; + text-decoration: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.5em 0; + width: auto; + } + + #settings-page .border-card svg { + fill: var(--accent-color); + display: flexbox; + height: 2em; + -ms-flex-item-align: center; + align-self: center; + margin: 0.5em; + } + + .slide-up { + opacity: 1; + -webkit-transform: none !important; + transform: none !important; + pointer-events: all; + } + + .switch { + display: flexbox; + width: 2em; + -ms-flex-line-pack: center; + align-content: center; + position: relative; + height: 1.5em; + z-index: 1; + margin-right: 1em; + -ms-flex-item-align: center; + align-self: center; + -webkit-tap-highlight-color: transparent; + } + + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 3em; + background-color: var(--sec-color); + -webkit-transition: .4s; + transition: .4s; + } + + .slider:before { + position: absolute; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + content: ""; + height: 1.6em; + width: 1.6em; + background-color: white; + -webkit-transform: translateY(-1px); + transform: translateY(-1px); + -webkit-transition: .4s; + transition: .4s; + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24); + } + + input:checked+.slider { + background-color: var(--accent-color); + } + + input:checked+.slider:before { + -webkit-transform: translate(1.4em, -1px); + transform: translate(1.4em, -1px); + } + + .slider.round { + border-radius: 2em; + } + + .slider.round:before { + border-radius: 50%; + } + + .page { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: absolute; + overflow-y: auto; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + padding: 0 1em; + } + + #transaction-complete { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + -ms-flex-line-pack: center; + align-content: center; + } + + #transaction-complete h3 { + text-align: center; + width: 100%; + } + + #transaction-complete svg { + -ms-grid-column-align: center; + justify-self: center; + fill: green; + width: 20vw; + } + + #transaction-complete button { + position: absolute; + bottom: 0; + } + + #enterPrivKey { + width: 100%; + position: absolute; + overflow-y: auto; + display: -ms-grid; + display: grid; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 1em; + top: 49px; + } + + #enterPrivKey .input { + width: 100% !important; + margin: 1em 0 !important; + } + + #enterPrivKey h4 { + margin: 0.5em 0; + } + + #noInternet { + pointer-events: none; + opacity: 0; + position: fixed; + top: 0; + left: 0; + right: 0; + padding: 1em; + z-index: 11; + background: khaki; + color: #000; + } + + .spin { + -webkit-animation: spin 1s infinite ease; + animation: spin 1s infinite ease; + } + + @-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } + } + + @keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } + } + + .highlight { + -webkit-animation: highlightElement 0.6s ease forwards; + animation: highlightElement 0.6s ease forwards; + } + + @-webkit-keyframes highlightElement { + 0% { + opacity: 0; + background: var(--accent-color); + } + + 100% { + opacity: 1; + background: transparent; + } + } + + @keyframes highlightElement { + 0% { + opacity: 0; + background: var(--accent-color); + } + + 100% { + opacity: 1; + background: transparent; + } + } + + .fade { + -webkit-animation: fade 0.2s ease forwards; + animation: fade 0.2s ease forwards; + } + + @-webkit-keyframes fade { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + @keyframes fade { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + @media screen and (min-width: 768px) { + #enterPrivKey { + border: 1px solid var(--sec-color); + width: 400px; + padding: 2em; + left: 50%; + margin: 2em 0; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + } + + #enterPrivKey .title-bar { + position: relative; + border: none; + } + + #enterPrivKey button { + margin: 0.5em 0 0.5em auto !important; + } + + #transaction-complete svg { + width: 8em; + } + + #transaction-complete button { + position: relative; + bottom: auto; + } + + .innerPage { + position: absolute; + overflow-y: auto; + padding: 0 1em; + top: 0; + bottom: 0; + width: 100%; + } + + #settings-page h4 { + text-align: left; + } + + #settings-page div { + padding: 0.5em 0; + -ms-flex-line-pack: center; + align-content: center; + } + + #settings-page #deleteDB button { + margin-left: 0 !important; + margin-right: auto !important; + width: auto; + } + + #monitor-list { + padding-bottom: 6em; + } + + #monitor-list monitor { + -ms-flex-item-align: auto; + align-self: auto; + width: 16em; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 0.5em; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + + #monitor-list monitor div:first-of-type { + padding: 1.5em 2em 1.5em 0.8em; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } + + #monitor-list monitor div:nth-of-type(2) { + padding: 1em 4em 1em 1em; + } + + #monitor-list monitor svg { + top: auto; + bottom: 0; + opacity: 0; + } + + #monitor-list monitor svg:hover { + opacity: 1 !important; + } + + #monitor-list monitor badge { + top: 0; + bottom: auto; + } + + #monitor-list monitor:hover svg { + opacity: 0.6; + } + + #add-container, + #edit-container { + display: -ms-grid; + display: grid; + place-content: center; + } + + #add, + #edit { + padding: 1em 2em; + -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16); + box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16); + border-radius: 0.25em; + position: relative; + width: 400px !important; + } + + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: transparent; + } + + ::-webkit-scrollbar-thumb { + background: var(--sec-color); + opacity: 0.4; + border-radius: 1em; + } + + ::-webkit-scrollbar-thumb:hover { + background: #555; + } + + ::-webkit-scrollbar-corner { + background: transparent; + } + + .input:hover label, + .text-area:hover label { + opacity: 0.8; + } + + card { + margin: 1em !important; + } + + body { + background-color: var(--back-color) !important; + display: -ms-grid; + display: grid; + place-items: center !important; + } + + button, + .input, + .text-area { + margin: 1em !important; + } + + #main-card { + margin: 0 !important; + position: relative; + width: 80vw !important; + height: 90vh !important; + border-radius: 0.25em; + overflow: hidden; + -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16); + box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16); + background: var(--body-color); + -webkit-transition: width 0.2s ease, height 0.2s ease; + transition: width 0.2s ease, height 0.2s ease; + } + + #main-card #bottom-nav { + display: -ms-grid; + display: grid; + border-top: none; + opacity: 1 !important; + pointer-events: all !important; + position: absolute !important; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + top: 0; + width: 64px; + text-align: left !important; + height: 100%; + background: var(--sidenav-color); + -webkit-transition: width 0.2s ease; + transition: width 0.2s ease; + } + + #main-card #bottom-nav #indicator { + position: absolute; + display: inline-block; + left: 0; + width: 4px; + height: 2em; + background: var(--accent-color); + border-radius: 0 4px 4px 0; + -webkit-transition: -webkit-transform 0.2s ease; + transition: -webkit-transform 0.2s ease; + transition: transform 0.2s ease; + transition: transform 0.2s ease, -webkit-transform 0.2s ease; + } + + #main-card #bottom-nav #menu { + position: absolute; + top: 0; + display: inline-block !important; + opacity: 0.8; + } + + #main-card #bottom-nav #settingsBtn { + position: absolute; + bottom: 0; + } + + #main-card #bottom-nav .icons { + padding: 1.2em; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-line-pack: center; + align-content: center; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + white-space: nowrap; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + } + + #main-card #bottom-nav .icons h6 { + display: none; + } + + #main-card #bottom-nav .icons span { + opacity: 0; + display: inline-block; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + margin-left: 1em; + line-height: 1.2em; + } + + #main-card #bottom-nav .icons svg { + height: 1.2em; + display: flexbox; + -ms-flex-item-align: center !important; + align-self: center !important; + margin: 0; + } + + #main-card #bottom-nav .icons:hover { + opacity: 1; + } + + #main-card .right { + top: 64px; + left: 64px; + right: 0; + bottom: 0; + } + + #header { + opacity: 1 !important; + pointer-events: all !important; + z-index: 2; + width: calc(100% - 64px); + left: 64px !important; + height: 64px !important; + } + + #overlay { + display: -ms-grid; + display: grid; + place-content: center; + } + + #overlay #popup { + padding: 1em 2em; + -webkit-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16); + box-shadow: 0 1em 2em rgba(0, 0, 0, 0.16); + border-radius: 0.25em; + width: 400px !important; + position: relative; + } + + .input, + button { + width: auto !important; + } + + #sendData #sdleft { + width: 40%; + padding: 0 0.5em; + } + + #sendData #sdright { + opacity: 0.6; + width: 60%; + display: flexbox; + -ms-flex-item-align: start; + align-self: flex-start; + } + + #sendData #sdright .input, + #sendData #sdright button, + #sendData #sdright .text-area { + width: 100% !important; + margin: 0.5em !important; + } + } + + @media screen and (min-width: 1280px) { + #main-card { + width: 60vw !important; + height: 80vh !important; + } + } + + @media screen and (min-width: 1600px) { + #main-card { + width: 50vw !important; + } + } + + @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { + #main-card { + width: 80vw !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: 80vw !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) { + body { + font-size: 12px !important; + } + + #bottom-nav { + height: 48px; + } + + trans-container { + top: 48px !important; + } + + #header { + height: 4em; + } + + .right { + bottom: 48px !important; + } + } + + /*# sourceMappingURL=main.css.map */ + - -
-
- There seems to be a problem connecting to the internet. -
-
-
-
+
-
- - - -
Monitor
- Monitor FLO data -
- -
- - - - - - -
Send
- Send FLO data -
-
- - - - - - - -
Generate
- Generate address -
-
- - Settings - - - - - -
Settings
- Settings -
-
-
- Copied -
-
-
-
-

Add new address to monitoring list

-
- - -
-
- - -
- - -
-
-
-
-

Edit display card

- - Copy FLO address - - -
- - - - - - - -

-
-
- - -
- - - -
-
-
-
- - Add new address to monitor - - -
-
-
- - Go back to monitoring page - - -

- - Refresh transactions - - -
- +
+ + + +
Monitor
+ Monitor FLO data +
- - - - -
- -
-
-
- - - - - - -
Available balance
- 0 - -
To send FLO data, make sure you have enough balance.
-
-
- - - -
+
+ + + + + + +
Send
+ Send FLO data +
+
+ + + + + + + +
Generate
+ Generate address +
+
+ + Settings + + + + + +
Settings
+ Settings +
+
+
+
+ Copied +
+
+
+
+

Add new address to monitoring list

+
+ +
-
-
- - -
-
- - -
-
- - -
- +
+ +
+ +
-
-
- - Go back to monitoring page - - -

Send

 -
-
-
- - -
- -
+
+
+
+

Edit display card

+ + Copy FLO address + + +
+ + + + + + + +

-
- +
+ + +
+ + + +
+
+
+
+ + Add new address to monitor + + +
+
+
+ + Go back to monitoring page + + + +

+
+ + + Refresh transactions + + +
+ + + + + + +
+ +
+
+
+ - - + + - -

Transaction successful

-

- -
-
- -

-
-
-
-
-
-

Dark mode

-
- - Automatic
- Dark mode active : 6pm - 6am - - -
-
- Manual
- Dark mode - - -
-
-
-

Clear all local data

-
This will delete all local Web Wallet data like added addresses and locally stored transactions.After clearing local data you may experience slow loading of newly added address, please proceed cautiously!
- -
-
-

About

-
Version 2.7.2
- -
Powered by
- - - - - - - - - - - - - - -
-
+ +
Available balance
+ 0 + +
To send FLO data, make sure you have enough balance.
+
+ + + +
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ + Go back to monitoring page + + + +

Send

+ +
+
+
+ + +
+ +
+
+
+ + + + + + +

Transaction successful

+

+ +
+
+ +

+
+
+
+
+
+

Dark mode

+
+ + Automatic
+ Dark mode active : 6pm - 6am + + +
+
+ Manual
+ Dark mode + + +
+
+
+

Clear all local data

+
This will delete all local Web Wallet data like added addresses and locally stored + transactions.After clearing local data you may experience slow loading of newly added address, + please proceed cautiously!
+ +
+
+

About

+
Version 2.7.2
+ +
Powered by
+ + + + + + + + + + + + + + +
+
+
+ + + + + + + - - - + + \ No newline at end of file