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 */