diff --git a/css/main.css b/css/main.css
index 304efc9..09c06a3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -6,11 +6,11 @@
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- font-family: 'Roboto', sans-serif;
+ font-family: "Roboto", sans-serif;
}
body {
- --primary-color: #1565C0;
+ --primary-color: #1565c0;
--text: 17, 17, 17;
--text-light: 100, 100, 100;
--foreground: 255, 255, 255;
@@ -22,8 +22,8 @@ body {
background-size: cover;
}
-body[data-theme='dark'] {
- --primary-color: #2196F3;
+body[data-theme=dark] {
+ --primary-color: #2196f3;
--text: 218, 218, 218;
--text-light: 170, 170, 170;
--foreground: 20, 20, 20;
@@ -43,10 +43,10 @@ input[type=text]::-ms-reveal {
height: 0;
}
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
display: none;
}
@@ -75,7 +75,6 @@ button {
padding: 0.6rem 1rem;
color: var(--primary-color);
-ms-flex-item-align: center;
- -ms-grid-row-align: center;
align-self: center;
}
@@ -99,13 +98,11 @@ h3 {
}
.grid {
- display: -ms-grid;
display: grid;
}
.grid-2 {
- -ms-grid-columns: auto auto;
- grid-template-columns: auto auto;
+ grid-template-columns: auto auto;
gap: 1em;
}
@@ -125,7 +122,7 @@ h3 {
}
.other-font {
- font-family: 'Barlow', sans-serif;
+ font-family: "Barlow", sans-serif;
}
.uppercase {
@@ -141,11 +138,9 @@ h3 {
cursor: pointer;
z-index: 1;
}
-
-.toggle input[type='checkbox'] {
+.toggle input[type=checkbox] {
display: none;
}
-
.toggle .switch {
overflow: hidden;
display: -webkit-inline-box;
@@ -162,7 +157,6 @@ h3 {
border-radius: 0.5rem;
position: relative;
}
-
.toggle .circle {
border-radius: 0.5rem;
-webkit-transition: -webkit-transform 0.3s;
@@ -176,16 +170,13 @@ h3 {
height: 1.2rem;
width: 1.2rem;
}
-
.toggle .circle:first-of-type {
margin-bottom: 0.4rem;
}
-
.toggle .circle line {
stroke: rgba(var(--text), 0.8);
stroke-width: 6;
}
-
.toggle input:checked ~ .switch .circle {
-webkit-transform: translateY(-1.7rem);
transform: translateY(-1.7rem);
@@ -194,35 +185,27 @@ h3 {
section {
position: relative;
}
-
section .dark-background {
- display: -ms-grid;
display: grid;
- -ms-grid-rows: auto 1fr;
- grid-template-rows: auto 1fr;
+ grid-template-rows: auto 1fr;
}
-ul[type='circle'] {
+ul[type=circle] {
padding: 1.5rem 2.5rem;
list-style: circle;
}
-
-ul[type='circle'] li {
+ul[type=circle] li {
margin-bottom: 1rem;
}
-
-ul[type='circle'] li:last-of-type {
+ul[type=circle] li:last-of-type {
margin-bottom: 0;
}
-
ul {
list-style: none;
}
-
ul .balance {
margin-bottom: 2rem;
}
-
ul .balance:last-of-type {
margin-bottom: 0;
}
@@ -231,7 +214,8 @@ ul .balance:last-of-type {
padding: 1.5rem 0;
}
-.margin, .page {
+.margin,
+.page {
margin: 0 1.5rem;
}
@@ -245,24 +229,20 @@ ul .balance:last-of-type {
background: rgba(var(--text), 0.06);
margin: 1.5rem 0;
}
-
.card h4 {
margin-bottom: 0.4rem;
font-weight: 400;
text-transform: capitalize;
}
-
.card h2 {
margin-bottom: 1.5rem;
}
.transaction-container {
- display: -ms-grid;
display: grid;
margin-top: 1.5rem;
gap: 1.5rem;
- -ms-grid-columns: (minmax(20rem, 1fr))[auto-fit];
- grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.label {
@@ -274,11 +254,9 @@ ul .balance:last-of-type {
margin-top: 1.5rem;
font-weight: 400;
}
-
.label:first-of-type {
margin-top: 0;
}
-
.label + h4:not(.address) {
text-transform: capitalize;
}
@@ -301,11 +279,9 @@ ul .balance:last-of-type {
align-items: center;
cursor: pointer;
}
-
#logo h4 {
font-weight: 400;
}
-
#logo #main_logo {
height: 1.2rem;
width: 1.2rem;
@@ -318,10 +294,8 @@ ul .balance:last-of-type {
}
#first_section {
- display: -ms-grid;
display: grid;
- -ms-grid-rows: 1fr auto;
- grid-template-rows: 1fr auto;
+ grid-template-rows: 1fr auto;
min-height: calc(100vh - 8rem);
}
@@ -340,7 +314,6 @@ header.grid-2 {
background: rgba(var(--foreground), 1);
padding: 1.5rem 8vw;
}
-
#search_page header {
-webkit-box-align: center;
-ms-flex-align: center;
@@ -350,7 +323,6 @@ header.grid-2 {
justify-content: space-between;
margin-top: 2rem;
}
-
#search_page header .icon {
margin: 0;
cursor: pointer;
@@ -358,24 +330,20 @@ header.grid-2 {
width: 2.2rem;
padding: 0.6rem;
}
-
#search_page h1 {
font-weight: 500;
font-size: 3rem;
}
-
#search_page .input {
-webkit-animation: fade 0.4s;
animation: fade 0.4s;
}
-
#search_page .input input:valid ~ #suggestions {
opacity: 1;
pointer-events: all;
-webkit-transform: none;
transform: none;
}
-
#search_page #suggestions {
opacity: 0;
pointer-events: none;
@@ -395,17 +363,14 @@ header.grid-2 {
overflow-y: auto;
margin-top: 0.5rem;
}
-
#search_page #suggestions:empty {
padding: 0;
}
-
#search_page .suggestion {
padding: 0.6rem 1.5rem 0.6rem 3rem;
opacity: 0.8;
cursor: pointer;
}
-
#search_page .suggestion:hover, #search_page .suggestion:focus {
opacity: 1;
}
@@ -420,7 +385,6 @@ header.grid-2 {
-ms-flex-direction: column;
flex-direction: column;
}
-
#main_search h2 {
margin-top: 2rem;
-ms-flex-item-align: start;
@@ -429,14 +393,12 @@ header.grid-2 {
letter-spacing: 0.1em;
font-weight: 600;
}
-
#main_search h4 {
line-height: 1.4em;
margin-top: 2rem;
font-weight: 400;
color: rgba(var(--text-light), 1);
}
-
#main_search label {
position: relative;
}
@@ -444,10 +406,8 @@ header.grid-2 {
.input {
border-radius: 0.2rem;
position: relative;
- display: -ms-grid;
display: grid;
- -ms-grid-columns: auto 1fr;
- grid-template-columns: auto 1fr;
+ grid-template-columns: auto 1fr;
z-index: 1;
width: 100%;
margin: 1.5rem 0;
@@ -458,7 +418,6 @@ header.grid-2 {
gap: 1em;
background: var(--background);
}
-
.input input {
border: none;
width: 100%;
@@ -480,16 +439,13 @@ header.grid-2 {
}
.copy-row {
- display: -ms-grid;
display: grid;
- -ms-grid-columns: 1fr auto;
- grid-template-columns: 1fr auto;
+ grid-template-columns: 1fr auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
}
-
.copy-row .icon {
cursor: pointer;
}
@@ -536,7 +492,6 @@ header.grid-2 {
transform: none;
}
}
-
@-webkit-keyframes flyInRight {
from {
opacity: 0;
@@ -549,7 +504,6 @@ header.grid-2 {
transform: none;
}
}
-
@keyframes flyInRight {
from {
opacity: 0;
@@ -562,7 +516,6 @@ header.grid-2 {
transform: none;
}
}
-
@-webkit-keyframes flyOutLeft {
from {
opacity: 1;
@@ -575,7 +528,6 @@ header.grid-2 {
transform: translateX(-0.5rem);
}
}
-
@keyframes flyOutLeft {
from {
opacity: 1;
@@ -588,7 +540,6 @@ header.grid-2 {
transform: translateX(-0.5rem);
}
}
-
@-webkit-keyframes flyOutRight {
from {
opacity: 1;
@@ -601,7 +552,6 @@ header.grid-2 {
transform: translateX(0.5rem);
}
}
-
@keyframes flyOutRight {
from {
opacity: 1;
@@ -614,7 +564,6 @@ header.grid-2 {
transform: translateX(0.5rem);
}
}
-
.fly-in-from-left {
-webkit-animation: flyInLeft 0.2s forwards;
animation: flyInLeft 0.2s forwards;
@@ -637,14 +586,11 @@ header.grid-2 {
#highlights {
padding: 1.5rem 0;
- display: -ms-grid;
display: grid;
- -ms-grid-columns: 1fr 1fr;
- grid-template-columns: 1fr 1fr;
- grid-template-areas: 'token token' 'total wallet' 'contract contract';
+ grid-template-columns: 1fr 1fr;
+ grid-template-areas: "token token" "total wallet" "contract contract";
gap: 1.5rem;
}
-
#highlights .highlight-item {
opacity: 0;
display: -webkit-box;
@@ -657,11 +603,9 @@ header.grid-2 {
padding: 1.5rem;
border-left: 0.1rem solid rgba(var(--text), 0.2);
}
-
#highlights .highlight-item .label {
margin-top: auto;
}
-
#highlights .highlight-item h1 {
font-size: 2rem;
letter-spacing: 0.1rem;
@@ -669,44 +613,28 @@ header.grid-2 {
text-transform: uppercase;
overflow-wrap: break-word;
}
-
#highlights .highlight-item:first-of-type {
text-transform: uppercase;
}
-
#highlights .highlight-item:nth-of-type(2) {
text-transform: capitalize;
}
-
#highlights .highlight-item:first-of-type {
- -ms-grid-row: 1;
- -ms-grid-column: 1;
- -ms-grid-column-span: 2;
grid-area: token;
-webkit-animation: flyInLeft 0.4s 0.2s forwards;
animation: flyInLeft 0.4s 0.2s forwards;
}
-
#highlights .highlight-item:nth-of-type(2) {
- -ms-grid-row: 2;
- -ms-grid-column: 1;
grid-area: total;
-webkit-animation: flyInLeft 0.4s 0.4s forwards;
animation: flyInLeft 0.4s 0.4s forwards;
}
-
#highlights .highlight-item:nth-of-type(3) {
- -ms-grid-row: 2;
- -ms-grid-column: 2;
grid-area: wallet;
-webkit-animation: flyInLeft 0.4s 0.6s forwards;
animation: flyInLeft 0.4s 0.6s forwards;
}
-
#highlights .highlight-item:last-of-type {
- -ms-grid-row: 3;
- -ms-grid-column: 1;
- -ms-grid-column-span: 2;
grid-area: contract;
-webkit-animation: flyInLeft 0.4s 0.8s forwards;
animation: flyInLeft 0.4s 0.8s forwards;
@@ -716,11 +644,9 @@ header.grid-2 {
#latest_blocks_section {
background: rgba(var(--foreground), 1);
}
-
#latest_transaction_section header,
#latest_blocks_section header {
- -ms-grid-columns: 1fr auto;
- grid-template-columns: 1fr auto;
+ grid-template-columns: 1fr auto;
background: inherit;
z-index: 2;
}
@@ -728,7 +654,6 @@ header.grid-2 {
#main_header {
height: 8rem;
}
-
#main_header > .flex:first-of-type {
margin-top: 1.5rem;
}
@@ -739,27 +664,22 @@ header.grid-2 {
-ms-flex-align: center;
align-items: center;
}
-
#page_header h3 {
font-weight: 500;
text-transform: capitalize;
}
-
#page_header .icon {
height: 1.8rem;
width: 1.8rem;
cursor: pointer;
}
-
#page_header .icon:first-of-type {
margin-right: 1rem;
padding: 0.4rem 0.4rem 0.4rem 0;
}
-
#page_header .icon:nth-of-type(2) {
padding: 0.4rem 0 0.4rem 0.4rem;
}
-
#page_header #secondary_search_btn {
margin-left: auto;
}
@@ -767,12 +687,10 @@ header.grid-2 {
.page {
padding: 0 0 1rem 0;
}
-
.page h3.heading {
text-transform: capitalize;
font-weight: 500;
}
-
.page > h3.heading {
margin-top: 2rem;
}
@@ -784,11 +702,9 @@ p {
}
.balance-card {
- display: -ms-inline-grid;
display: inline-grid;
- -ms-grid-columns: auto auto;
- grid-template-columns: auto auto;
- grid-template-areas: 'labl logo' 'balance logo' 'address address';
+ grid-template-columns: auto auto;
+ grid-template-areas: "labl logo" "balance logo" "address address";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='fill:none; stroke: %23ffffff08'%3E%3Ccircle cx='3.5' cy='3.5' r='2.12'/%3E%3Ccircle cx='5' cy='10' r='1'/%3E%3Ccircle cx='8.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='6' cy='33' r='2'/%3E%3Ccircle cx='14' cy='29' r='1'/%3E%3Ccircle cx='9.5' cy='22.5' r='1.5'/%3E%3Ccircle cx='29.5' cy='17.5' r='4.5'/%3E%3Ccircle cx='22' cy='8' r='1'/%3E%3Ccircle cx='15.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='27.5' cy='30.5' r='0.5'/%3E%3Ccircle cx='18.5' cy='35.5' r='2.5'/%3E%3Ccircle cx='32' cy='36' r='1'/%3E%3Ccircle cx='35' cy='25' r='1'/%3E%3Ccircle cx='23' cy='21' r='2'/%3E%3Ccircle cx='36.5' cy='1.5' r='0.5'/%3E%3Ccircle cx='30.5' cy='3.5' r='1.5'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"), linear-gradient(135deg, #4d20a7, #21106e);
background-size: cover;
color: white;
@@ -796,11 +712,7 @@ p {
padding: 2rem 1.5rem;
margin-bottom: 1rem;
}
-
.balance-card .flo-logo {
- -ms-grid-row: 1;
- -ms-grid-row-span: 2;
- -ms-grid-column: 2;
grid-area: logo;
fill: white;
height: 1.5rem;
@@ -808,44 +720,34 @@ p {
opacity: 0.8;
justify-self: flex-end;
}
-
-.balance-card h3, .balance-card h4 {
+.balance-card h3,
+.balance-card h4 {
display: inline-block;
width: auto;
}
-
.balance-card h3 {
- -ms-grid-row: 2;
- -ms-grid-column: 1;
grid-area: balance;
font-weight: 400;
opacity: 0.8;
}
-
.balance-card h4 {
font-weight: 400;
}
-
.balance-card p {
font-size: 0.8rem;
- -ms-grid-row: 3;
- -ms-grid-column: 1;
- -ms-grid-column-span: 2;
grid-area: address;
opacity: 0.8;
letter-spacing: 0.1em;
margin-top: 3rem;
}
-
.balance-card .label {
- -ms-grid-row: 1;
- -ms-grid-column: 1;
grid-area: labl;
color: white;
opacity: 0.7;
}
-.choice, .status {
+.choice,
+.status {
padding: 0.5rem 0.8rem;
border-radius: 2rem;
display: -webkit-inline-box;
@@ -869,7 +771,6 @@ p {
.choice {
border: solid 1px rgba(var(--text), 0.2);
}
-
.choice:last-of-type {
margin-bottom: 0;
}
@@ -877,13 +778,16 @@ p {
.status {
font-size: 0.8rem;
}
-
.status.closed {
background: rgba(var(--foreground), 1);
border: solid 1px rgba(var(--text), 0.2);
}
-.address, .token, .hash, .contract, .block-height {
+.address,
+.token,
+.hash,
+.contract,
+.block-height {
cursor: pointer;
color: var(--primary-color);
}
@@ -894,7 +798,6 @@ p {
}
.tabs {
- position: -webkit-sticky;
position: sticky;
top: 0;
padding: 1rem 0 1rem 0;
@@ -905,7 +808,6 @@ p {
display: flex;
overflow-x: auto;
}
-
.tabs .tab {
cursor: pointer;
opacity: 0.6;
@@ -914,15 +816,12 @@ p {
white-space: nowrap;
font-size: 1.1rem;
}
-
.tabs .tab:last-of-type {
margin-right: 0;
}
-
.tabs .tab.active {
opacity: 1;
}
-
.tabs .line {
position: absolute;
height: 0.12rem;
@@ -936,12 +835,10 @@ p {
}
.contract-choice {
- display: -ms-grid;
display: grid;
gap: 0.5rem 1rem;
margin-bottom: 2rem;
}
-
.contract-choice:last-of-type {
margin-bottom: 0;
}
@@ -971,40 +868,29 @@ p {
transform: none;
}
}
-
.transaction {
- display: -ms-grid;
display: grid;
gap: 2rem 1rem;
padding: 2rem;
border-radius: 0.5rem;
- -ms-grid-columns: min-content 1fr;
- grid-template-columns: -webkit-min-content 1fr;
- grid-template-columns: min-content 1fr;
- -ms-grid-rows: auto 1fr;
- grid-template-rows: auto 1fr;
+ grid-template-columns: -webkit-min-content 1fr;
+ grid-template-columns: min-content 1fr;
+ grid-template-rows: auto 1fr;
background: rgba(var(--text), 0.06);
- grid-template-areas: '. .' 'info info';
+ grid-template-areas: ". ." "info info";
}
-
.transaction .contract-info {
- -ms-grid-row: 2;
- -ms-grid-column: 1;
- -ms-grid-column-span: 2;
grid-area: info;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
-
.transaction h4 {
font-weight: 500;
}
-
.transaction > .icon:first-of-type {
stroke-width: 4;
- -ms-grid-column-align: center;
- justify-self: center;
+ justify-self: center;
height: 3rem;
width: 3rem;
padding: 0.8rem;
@@ -1013,7 +899,6 @@ p {
}
#loader_page {
- display: -ms-grid;
display: grid;
place-content: center;
height: 100vh;
@@ -1023,15 +908,13 @@ p {
z-index: 10;
background: rgba(var(--foreground), 1);
}
-
#loader_page h4 {
margin-top: 1.5rem;
font-weight: 500;
}
#loader {
- -ms-grid-column-align: center;
- justify-self: center;
+ justify-self: center;
height: 2.5rem;
width: 2.5rem;
-webkit-transform-origin: center;
@@ -1064,17 +947,17 @@ p {
transform: rotate(360deg);
}
}
-
-#all_blocks_page, #top_blocks_container, #token_balance_container {
- display: -ms-grid;
+#all_blocks_page,
+#top_blocks_container,
+#token_balance_container {
display: grid;
gap: 1rem;
- -ms-grid-columns: (minmax(12rem, 1fr))[auto-fill];
- grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
margin-top: 1rem;
}
-
-#all_blocks_page .card, #top_blocks_container .card, #token_balance_container .card {
+#all_blocks_page .card,
+#top_blocks_container .card,
+#token_balance_container .card {
margin: 0;
}
@@ -1082,148 +965,143 @@ p {
margin-top: 1.5rem;
}
+#error_page {
+ padding: 1.5rem 0;
+}
+
@media only screen and (min-width: 640px) {
- .margin, .page {
+ .margin,
+.page {
margin: 0 4vw;
}
+
.input {
width: 60% !important;
}
+
section header h1 {
font-size: 2rem;
}
+
#main_search h1 {
font-size: 6rem;
text-align: center;
}
+
#highlights {
gap: 2rem;
- -ms-grid-columns: (auto)[2];
- grid-template-columns: repeat(2, auto);
- grid-template-areas: 'token total' ' wallet contract';
+ grid-template-columns: repeat(2, auto);
+ grid-template-areas: "token total" " wallet contract";
}
#highlights .highlight-item h1 {
font-size: 2.5rem;
}
#highlights .highlight-item:first-of-type {
- -ms-grid-row: 1;
- -ms-grid-column: 1;
grid-area: token;
}
#highlights .highlight-item:nth-of-type(2) {
- -ms-grid-row: 1;
- -ms-grid-column: 2;
grid-area: total;
}
#highlights .highlight-item:nth-of-type(3) {
- -ms-grid-row: 2;
- -ms-grid-column: 1;
grid-area: wallet;
}
#highlights .highlight-item:last-of-type {
- -ms-grid-row: 2;
- -ms-grid-column: 2;
grid-area: contract;
}
+
#page_header {
padding: 1.5rem 0;
}
+
#transaction_page {
- display: -ms-grid;
display: grid;
gap: 0 1.5rem;
- -ms-grid-columns: 40% 60%;
- grid-template-columns: 40% 60%;
- grid-template-areas: 'header header' '. .';
+ grid-template-columns: 40% 60%;
+ grid-template-areas: "header header" ". .";
}
#transaction_page .head {
- -ms-grid-row: 1;
- -ms-grid-column: 1;
- -ms-grid-column-span: 2;
grid-area: header;
}
+
.contract-choice {
- -ms-grid-columns: 2fr 1fr 1fr;
- grid-template-columns: 2fr 1fr 1fr;
+ grid-template-columns: 2fr 1fr 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
-
@media only screen and (min-width: 1280px) {
- .margin, .page {
+ .margin,
+.page {
margin: 0 12vw;
}
+
.input {
width: 50% !important;
}
+
#highlights {
- -ms-grid-columns: (auto)[4];
- grid-template-columns: repeat(4, auto);
- grid-template-areas: 'token total wallet contract';
+ grid-template-columns: repeat(4, auto);
+ grid-template-areas: "token total wallet contract";
}
#highlights .highlight-item:first-of-type {
- -ms-grid-row: 1;
- -ms-grid-column: 1;
grid-area: token;
}
#highlights .highlight-item:nth-of-type(2) {
- -ms-grid-row: 1;
- -ms-grid-column: 2;
grid-area: total;
}
#highlights .highlight-item:nth-of-type(3) {
- -ms-grid-row: 1;
- -ms-grid-column: 3;
grid-area: wallet;
}
#highlights .highlight-item:last-of-type {
- -ms-grid-row: 1;
- -ms-grid-column: 4;
grid-area: contract;
}
}
-
@media only screen and (min-width: 1920px) {
body {
font-size: 24px;
}
- .margin, .page {
+
+ .margin,
+.page {
margin: 0 16vw;
}
+
#search_page {
padding: 1.5rem 12vw;
}
+
.input {
width: 40% !important;
}
}
-
@media only screen and (min-width: 2048px) {
body {
font-size: 24px;
}
- .margin, .page {
+
+ .margin,
+.page {
margin: 0 26vw;
}
+
#search_page {
padding: 1.5rem 24vw;
}
+
#first_section {
min-height: auto;
}
+
.input {
width: 30% !important;
}
}
-
@media only screen and (max-width: 320px) {
body {
font-size: 14px;
}
}
-
@media (hover: hover) {
button {
-webkit-transition: background-color 0.3s;
@@ -1233,9 +1111,11 @@ p {
background: var(--primary-color);
color: rgba(var(--foreground), 1);
}
+
.hover {
cursor: pointer;
}
+
.tab {
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
@@ -1243,5 +1123,4 @@ p {
.tab:hover {
opacity: 1;
}
-}
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
deleted file mode 100644
index 4454f1b..0000000
--- a/css/main.css.map
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "version": 3,
- "mappings": "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",
- "sources": [
- "main.scss"
- ],
- "names": [],
- "file": "main.css"
-}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
new file mode 100644
index 0000000..5099f93
--- /dev/null
+++ b/css/main.min.css
@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap";*,::before,::after{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}body{--primary-color: #1565c0;--text: 17, 17, 17;--text-light: 100, 100, 100;--foreground: 255, 255, 255;--background: #e8e8e8;--dark-shade: #dadada;font-size:16px;color:rgba(var(--text), 1);background:rgba(var(--foreground), 1);background-size:cover}body[data-theme=dark]{--primary-color: #2196f3;--text: 218, 218, 218;--text-light: 170, 170, 170;--foreground: 20, 20, 20;--background: #0a0a0a;--dark-shade: #1a1a1a}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=number]{-moz-appearance:textfield}input:invalid{outline:none;-webkit-box-shadow:none;box-shadow:none}::-moz-focus-inner{border:none}button{border:none;border-radius:.2em;text-transform:uppercase;font-weight:500;letter-spacing:.06em;background:none;cursor:pointer;padding:.6rem 1rem;color:var(--primary-color);-ms-flex-item-align:center;align-self:center}h1{font-size:4rem}h2{font-size:2rem;font-weight:500}h3{font-size:1.5rem}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.breakable{word-break:break-word;font-weight:500;letter-spacing:.06rem}.other-font{font-family:"Barlow",sans-serif}.uppercase{text-transform:uppercase !important}.capitalise{text-transform:capitalize !important}.toggle{position:relative;cursor:pointer;z-index:1}.toggle input[type=checkbox]{display:none}.toggle .switch{overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;justify-items:center;padding:.2rem;min-height:1.6rem;max-height:1.6rem;border-radius:.5rem;position:relative}.toggle .circle{border-radius:.5rem;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;fill:rgba(var(--text), 0.8);overflow:visible;stroke-linecap:round;stroke-linejoin:round;height:1.2rem;width:1.2rem}.toggle .circle:first-of-type{margin-bottom:.4rem}.toggle .circle line{stroke:rgba(var(--text), 0.8);stroke-width:6}.toggle input:checked~.switch .circle{-webkit-transform:translateY(-1.7rem);transform:translateY(-1.7rem)}section{position:relative}section .dark-background{display:grid;grid-template-rows:auto 1fr}ul[type=circle]{padding:1.5rem 2.5rem;list-style:circle}ul[type=circle] li{margin-bottom:1rem}ul[type=circle] li:last-of-type{margin-bottom:0}ul{list-style:none}ul .balance{margin-bottom:2rem}ul .balance:last-of-type{margin-bottom:0}.top-bottom-padding{padding:1.5rem 0}.margin,.page{margin:0 1.5rem}.margin-left-auto{margin-left:auto}.card{padding:2rem 1.5rem;border-radius:.5rem;background:rgba(var(--text), 0.06);margin:1.5rem 0}.card h4{margin-bottom:.4rem;font-weight:400;text-transform:capitalize}.card h2{margin-bottom:1.5rem}.transaction-container{display:grid;margin-top:1.5rem;gap:1.5rem;grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr))}.label{text-transform:capitalize;font-size:.8rem;margin-bottom:.3rem;line-height:1.4em;color:rgba(var(--text-light), 1);margin-top:1.5rem;font-weight:400}.label:first-of-type{margin-top:0}.label+h4:not(.address){text-transform:capitalize}.header{justify-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#logo{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;letter-spacing:.1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}#logo h4{font-weight:400}#logo #main_logo{height:1.2rem;width:1.2rem;margin-right:.2rem;fill:rgba(var(--text), 1)}#homepage{padding-top:0}#first_section{display:grid;grid-template-rows:1fr auto;min-height:calc(100vh - 8rem)}header.grid-2{margin-top:2rem}#search_page{position:fixed;left:0;right:0;top:0;bottom:0;z-index:20;margin:0;background:rgba(var(--foreground), 1);padding:1.5rem 8vw}#search_page header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:2rem}#search_page header .icon{margin:0;cursor:pointer;height:2.2rem;width:2.2rem;padding:.6rem}#search_page h1{font-weight:500;font-size:3rem}#search_page .input{-webkit-animation:fade .4s;animation:fade .4s}#search_page .input input:valid~#suggestions{opacity:1;pointer-events:all;-webkit-transform:none;transform:none}#search_page #suggestions{opacity:0;pointer-events:none;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem);-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:transform .3s,opacity .3s;transition:transform .3s,opacity .3s,-webkit-transform .3s;position:absolute;top:100%;width:100%;background:var(--background);border-radius:.5rem;padding:.5rem 0;max-height:30vh;overflow-y:auto;margin-top:.5rem}#search_page #suggestions:empty{padding:0}#search_page .suggestion{padding:.6rem 1.5rem .6rem 3rem;opacity:.8;cursor:pointer}#search_page .suggestion:hover,#search_page .suggestion:focus{opacity:1}#main_search{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#main_search h2{margin-top:2rem;-ms-flex-item-align:start;align-self:flex-start;font-size:4rem;letter-spacing:.1em;font-weight:600}#main_search h4{line-height:1.4em;margin-top:2rem;font-weight:400;color:rgba(var(--text-light), 1)}#main_search label{position:relative}.input{border-radius:.2rem;position:relative;display:grid;grid-template-columns:auto 1fr;z-index:1;width:100%;margin:1.5rem 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.8rem;gap:1em;background:var(--background)}.input input{border:none;width:100%;background:transparent;outline:none;font-size:1rem;color:rgba(var(--text), 1)}.icon{height:1rem;overflow:visible;width:1rem;fill:none;stroke:rgba(var(--text), 1);stroke-linecap:round;stroke-linejoin:round;stroke-width:6}.copy-row{display:grid;grid-template-columns:1fr auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem}.copy-row .icon{cursor:pointer}#textCopied{padding:1rem;border-radius:2rem;background:rgba(var(--text), 0.2);color:rgba(var(--text), 1);position:fixed;bottom:0;pointer-events:none;margin:2rem 0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:.3s opacity ease;transition:.3s opacity ease;z-index:20}@-webkit-keyframes flyInLeft{from{opacity:0;-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes flyInLeft{from{opacity:0;-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes flyInRight{from{opacity:0;-webkit-transform:translateX(0.5rem);transform:translateX(0.5rem)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes flyInRight{from{opacity:0;-webkit-transform:translateX(0.5rem);transform:translateX(0.5rem)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes flyOutLeft{from{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}}@keyframes flyOutLeft{from{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}}@-webkit-keyframes flyOutRight{from{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;-webkit-transform:translateX(0.5rem);transform:translateX(0.5rem)}}@keyframes flyOutRight{from{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;-webkit-transform:translateX(0.5rem);transform:translateX(0.5rem)}}.fly-in-from-left{-webkit-animation:flyInLeft .2s forwards;animation:flyInLeft .2s forwards}.fly-in-from-right{-webkit-animation:flyInRight .2s forwards;animation:flyInRight .2s forwards}.fly-out-to-left{-webkit-animation:flyOutLeft .2s forwards;animation:flyOutLeft .2s forwards}.fly-out-to-right{-webkit-animation:flyOutRight .2s forwards;animation:flyOutRight .2s forwards}#highlights{padding:1.5rem 0;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"token token" "total wallet" "contract contract";gap:1.5rem}#highlights .highlight-item{opacity:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:1.5rem;border-left:.1rem solid rgba(var(--text), 0.2)}#highlights .highlight-item .label{margin-top:auto}#highlights .highlight-item h1{font-size:2rem;letter-spacing:.1rem;font-weight:500;text-transform:uppercase;overflow-wrap:break-word}#highlights .highlight-item:first-of-type{text-transform:uppercase}#highlights .highlight-item:nth-of-type(2){text-transform:capitalize}#highlights .highlight-item:first-of-type{grid-area:token;-webkit-animation:flyInLeft .4s .2s forwards;animation:flyInLeft .4s .2s forwards}#highlights .highlight-item:nth-of-type(2){grid-area:total;-webkit-animation:flyInLeft .4s .4s forwards;animation:flyInLeft .4s .4s forwards}#highlights .highlight-item:nth-of-type(3){grid-area:wallet;-webkit-animation:flyInLeft .4s .6s forwards;animation:flyInLeft .4s .6s forwards}#highlights .highlight-item:last-of-type{grid-area:contract;-webkit-animation:flyInLeft .4s .8s forwards;animation:flyInLeft .4s .8s forwards}#latest_transaction_section,#latest_blocks_section{background:rgba(var(--foreground), 1)}#latest_transaction_section header,#latest_blocks_section header{grid-template-columns:1fr auto;background:inherit;z-index:2}#main_header{height:8rem}#main_header>.flex:first-of-type{margin-top:1.5rem}#page_header{padding:1rem 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#page_header h3{font-weight:500;text-transform:capitalize}#page_header .icon{height:1.8rem;width:1.8rem;cursor:pointer}#page_header .icon:first-of-type{margin-right:1rem;padding:.4rem .4rem .4rem 0}#page_header .icon:nth-of-type(2){padding:.4rem 0 .4rem .4rem}#page_header #secondary_search_btn{margin-left:auto}.page{padding:0 0 1rem 0}.page h3.heading{text-transform:capitalize;font-weight:500}.page>h3.heading{margin-top:2rem}p{overflow-wrap:break-word;line-height:1.6em;text-transform:capitalize}.balance-card{display:inline-grid;grid-template-columns:auto auto;grid-template-areas:"labl logo" "balance logo" "address address";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='fill:none; stroke: %23ffffff08'%3E%3Ccircle cx='3.5' cy='3.5' r='2.12'/%3E%3Ccircle cx='5' cy='10' r='1'/%3E%3Ccircle cx='8.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='6' cy='33' r='2'/%3E%3Ccircle cx='14' cy='29' r='1'/%3E%3Ccircle cx='9.5' cy='22.5' r='1.5'/%3E%3Ccircle cx='29.5' cy='17.5' r='4.5'/%3E%3Ccircle cx='22' cy='8' r='1'/%3E%3Ccircle cx='15.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='27.5' cy='30.5' r='0.5'/%3E%3Ccircle cx='18.5' cy='35.5' r='2.5'/%3E%3Ccircle cx='32' cy='36' r='1'/%3E%3Ccircle cx='35' cy='25' r='1'/%3E%3Ccircle cx='23' cy='21' r='2'/%3E%3Ccircle cx='36.5' cy='1.5' r='0.5'/%3E%3Ccircle cx='30.5' cy='3.5' r='1.5'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"),linear-gradient(135deg, #4d20a7, #21106e);background-size:cover;color:#fff;border-radius:.5rem;padding:2rem 1.5rem;margin-bottom:1rem}.balance-card .flo-logo{grid-area:logo;fill:#fff;height:1.5rem;width:1.5rem;opacity:.8;justify-self:flex-end}.balance-card h3,.balance-card h4{display:inline-block;width:auto}.balance-card h3{grid-area:balance;font-weight:400;opacity:.8}.balance-card h4{font-weight:400}.balance-card p{font-size:.8rem;grid-area:address;opacity:.8;letter-spacing:.1em;margin-top:3rem}.balance-card .label{grid-area:labl;color:#fff;opacity:.7}.choice,.status{padding:.5rem .8rem;border-radius:2rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:.5rem;text-transform:capitalize}.choice-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.choice{border:solid 1px rgba(var(--text), 0.2)}.choice:last-of-type{margin-bottom:0}.status{font-size:.8rem}.status.closed{background:rgba(var(--foreground), 1);border:solid 1px rgba(var(--text), 0.2)}.address,.token,.hash,.contract,.block-height{cursor:pointer;color:var(--primary-color)}.address{text-transform:none !important;word-break:break-all}.tabs{position:sticky;top:0;padding:1rem 0 1rem 0;background:rgba(var(--foreground), 1);z-index:2;display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto}.tabs .tab{cursor:pointer;opacity:.6;margin-right:1.5rem;-webkit-tap-highlight-color:transparent;white-space:nowrap;font-size:1.1rem}.tabs .tab:last-of-type{margin-right:0}.tabs .tab.active{opacity:1}.tabs .line{position:absolute;height:.12rem;background:rgba(var(--text), 1);width:1px;bottom:0;-webkit-transition:width .4s,-webkit-transform .4s;transition:width .4s,-webkit-transform .4s;transition:transform .4s,width .4s;transition:transform .4s,width .4s,-webkit-transform .4s}.contract-choice{display:grid;gap:.5rem 1rem;margin-bottom:2rem}.contract-choice:last-of-type{margin-bottom:0}@-webkit-keyframes fade{from{opacity:0;-webkit-transform:translateY(1rem);transform:translateY(1rem)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fade{from{opacity:0;-webkit-transform:translateY(1rem);transform:translateY(1rem)}to{opacity:1;-webkit-transform:none;transform:none}}.transaction{display:grid;gap:2rem 1rem;padding:2rem;border-radius:.5rem;grid-template-columns:-webkit-min-content 1fr;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr;background:rgba(var(--text), 0.06);grid-template-areas:". ." "info info"}.transaction .contract-info{grid-area:info;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.transaction h4{font-weight:500}.transaction>.icon:first-of-type{stroke-width:4;justify-self:center;height:3rem;width:3rem;padding:.8rem;border-radius:1rem;background:rgba(var(--foreground), 1)}#loader_page{display:grid;place-content:center;height:100vh;width:100vw;text-align:center;position:fixed;z-index:10;background:rgba(var(--foreground), 1)}#loader_page h4{margin-top:1.5rem;font-weight:500}#loader{justify-self:center;height:2.5rem;width:2.5rem;-webkit-transform-origin:center;transform-origin:center;stroke-dashoffset:200;stroke-dasharray:200;-webkit-animation:load 2s infinite linear;animation:load 2s infinite linear;stroke:var(--primary-color)}@-webkit-keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-200;-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-200;-webkit-transform:rotate(360deg);transform:rotate(360deg)}}#all_blocks_page,#top_blocks_container,#token_balance_container{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));margin-top:1rem}#all_blocks_page .card,#top_blocks_container .card,#token_balance_container .card{margin:0}#token_balance_container{margin-top:1.5rem}#error_page{padding:1.5rem 0}@media only screen and (min-width: 640px){.margin,.page{margin:0 4vw}.input{width:60% !important}section header h1{font-size:2rem}#main_search h1{font-size:6rem;text-align:center}#highlights{gap:2rem;grid-template-columns:repeat(2, auto);grid-template-areas:"token total" " wallet contract"}#highlights .highlight-item h1{font-size:2.5rem}#highlights .highlight-item:first-of-type{grid-area:token}#highlights .highlight-item:nth-of-type(2){grid-area:total}#highlights .highlight-item:nth-of-type(3){grid-area:wallet}#highlights .highlight-item:last-of-type{grid-area:contract}#page_header{padding:1.5rem 0}#transaction_page{display:grid;gap:0 1.5rem;grid-template-columns:40% 60%;grid-template-areas:"header header" ". ."}#transaction_page .head{grid-area:header}.contract-choice{grid-template-columns:2fr 1fr 1fr;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}@media only screen and (min-width: 1280px){.margin,.page{margin:0 12vw}.input{width:50% !important}#highlights{grid-template-columns:repeat(4, auto);grid-template-areas:"token total wallet contract"}#highlights .highlight-item:first-of-type{grid-area:token}#highlights .highlight-item:nth-of-type(2){grid-area:total}#highlights .highlight-item:nth-of-type(3){grid-area:wallet}#highlights .highlight-item:last-of-type{grid-area:contract}}@media only screen and (min-width: 1920px){body{font-size:24px}.margin,.page{margin:0 16vw}#search_page{padding:1.5rem 12vw}.input{width:40% !important}}@media only screen and (min-width: 2048px){body{font-size:24px}.margin,.page{margin:0 26vw}#search_page{padding:1.5rem 24vw}#first_section{min-height:auto}.input{width:30% !important}}@media only screen and (max-width: 320px){body{font-size:14px}}@media(hover: hover){button{-webkit-transition:background-color .3s;transition:background-color .3s}button:hover{background:var(--primary-color);color:rgba(var(--foreground), 1)}.hover{cursor:pointer}.tab{-webkit-transition:opacity .3s;transition:opacity .3s}.tab:hover{opacity:1}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 871ee51..894d829 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,870 +1,899 @@
-@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap");
*,
::before,
-::after{
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- font-family: 'Roboto', sans-serif;
-}
-body{
- --primary-color: #1565C0;
- --text: 17, 17, 17;
- --text-light: 100, 100, 100;
- --foreground: 255, 255, 255;
- --background: #e8e8e8;
- --dark-shade: #dadada;
- font-size: 16px;
- color: rgba(var(--text), 1);
- background: rgba(var(--foreground), 1);
- background-size: cover;
+::after {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
}
-body[data-theme='dark']{
- --primary-color: #2196F3;
- --text: 218, 218, 218;
- --text-light: 170, 170, 170;
- --foreground: 20, 20, 20;
- --background: #0a0a0a;
- --dark-shade: #1a1a1a;
+body {
+ --primary-color: #1565c0;
+ --text: 17, 17, 17;
+ --text-light: 100, 100, 100;
+ --foreground: 255, 255, 255;
+ --background: #e8e8e8;
+ --dark-shade: #dadada;
+ font-size: 16px;
+ color: rgba(var(--text), 1);
+ background: rgba(var(--foreground), 1);
+ background-size: cover;
+}
+body[data-theme="dark"] {
+ --primary-color: #2196f3;
+ --text: 218, 218, 218;
+ --text-light: 170, 170, 170;
+ --foreground: 20, 20, 20;
+ --background: #0a0a0a;
+ --dark-shade: #1a1a1a;
+}
+input[type="text"]::-ms-clear {
+ display: none;
+ width: 0;
+ height: 0;
+}
+input[type="text"]::-ms-reveal {
+ display: none;
+ width: 0;
+ height: 0;
}
-input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
-input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration { display: none; }
-input[type=number] {
- -moz-appearance:textfield;
+input[type="search"]::-webkit-search-results-decoration {
+ display: none;
}
-input:invalid{
- outline: none;
- box-shadow: none;
+input[type="number"] {
+ -moz-appearance: textfield;
}
-::-moz-focus-inner{
- border: none;
+input:invalid {
+ outline: none;
+ box-shadow: none;
}
-button{
- border: none;
- border-radius: 0.2em;
- text-transform: uppercase;
- font-weight: 500;
- letter-spacing: 0.06em;
- background: none;
- cursor: pointer;
- padding: 0.6rem 1rem;
- color: var(--primary-color);
- align-self: center;
+::-moz-focus-inner {
+ border: none;
}
-h1{
- font-size: 4rem;
+button {
+ border: none;
+ border-radius: 0.2em;
+ text-transform: uppercase;
+ font-weight: 500;
+ letter-spacing: 0.06em;
+ background: none;
+ cursor: pointer;
+ padding: 0.6rem 1rem;
+ color: var(--primary-color);
+ align-self: center;
}
-h2{
- font-size: 2rem;
- font-weight: 500;
+h1 {
+ font-size: 4rem;
}
-h3{
- font-size: 1.5rem;
+h2 {
+ font-size: 2rem;
+ font-weight: 500;
}
-.flex{
- display: flex;
+h3 {
+ font-size: 1.5rem;
}
-.grid{
- display: grid;
+.flex {
+ display: flex;
}
-.grid-2{
- grid-template-columns: auto auto;
- gap: 1em;
+.grid {
+ display: grid;
}
-.hide{
- opacity: 0;
- pointer-events: none;
+.grid-2 {
+ grid-template-columns: auto auto;
+ gap: 1em;
}
-.hide-completely{
- display: none !important;
+.hide {
+ opacity: 0;
+ pointer-events: none;
}
-.breakable{
- word-break: break-word;
- font-weight: 500;
- letter-spacing: 0.06rem;
+.hide-completely {
+ display: none !important;
}
-.other-font{
- font-family: 'Barlow', sans-serif;
+.breakable {
+ word-break: break-word;
+ font-weight: 500;
+ letter-spacing: 0.06rem;
}
-.uppercase{
- text-transform: uppercase !important;
+.other-font {
+ font-family: "Barlow", sans-serif;
}
-.capitalise{
- text-transform: capitalize !important;
+.uppercase {
+ text-transform: uppercase !important;
}
-.toggle{
- position: relative;
- cursor: pointer;
- z-index: 1;
- input[type='checkbox']{
- display: none;
- }
- .switch{
- overflow: hidden;
- display: inline-flex;
- flex-direction: column;
- justify-items: center;
- padding: 0.2rem;
- min-height: 1.6rem;
- max-height: 1.6rem;
- border-radius: 0.5rem;
- position: relative;
- }
- .circle{
- border-radius: 0.5rem;
- transition: transform 0.3s;
- &:first-of-type{
- margin-bottom: 0.4rem;
- }
- fill: rgba(var(--text), 0.8);
- overflow: visible;
- stroke-linecap: round;
- stroke-linejoin: round;
- height: 1.2rem;
- width: 1.2rem;
- line{
- stroke: rgba(var(--text), 0.8);
- stroke-width: 6;
- }
- }
- input:checked ~ .switch .circle{
- transform: translateY(-1.7rem);
- }
+.capitalise {
+ text-transform: capitalize !important;
}
-section{
- position: relative;
- .dark-background{
- display: grid;
- grid-template-rows: auto 1fr;
- }
-}
-ul{
- &[type='circle']{
- padding: 1.5rem 2.5rem;
- list-style: circle;
- li{
- margin-bottom: 1rem;
- &:last-of-type{
- margin-bottom: 0;
- }
- }
- }
- &{
- list-style: none;
- .balance{
- margin-bottom: 2rem;
- &:last-of-type{
- margin-bottom: 0;
- }
- }
- }
-}
-.top-bottom-padding{
- padding: 1.5rem 0;
-}
-.margin, .page{
- margin: 0 1.5rem;
-}
-.margin-left-auto{
- margin-left: auto;
-}
-.card{
- padding: 2rem 1.5rem;
- border-radius: 0.5rem;
- background: rgba(var(--text), 0.06);
- margin: 1.5rem 0;
- h4{
- margin-bottom: 0.4rem;
- font-weight: 400;
- text-transform: capitalize;
- }
- h2{
- margin-bottom: 1.5rem;
- }
-}
-.transaction-container{
- display: grid;
- margin-top: 1.5rem;
- gap: 1.5rem;
- grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-}
-.label{
- text-transform: capitalize;
- font-size: 0.8rem;
- margin-bottom: 0.3rem;
- line-height: 1.4em;
- color: rgba(var(--text-light), 1);
- margin-top: 1.5rem;
- font-weight: 400;
- &:first-of-type{
- margin-top: 0;
- }
- &+h4:not(.address){
- text-transform: capitalize;
- }
-}
-.header{
- justify-items: center;
- flex-direction: column;
-}
-#logo{
+.toggle {
+ position: relative;
+ cursor: pointer;
+ z-index: 1;
+ input[type="checkbox"] {
+ display: none;
+ }
+ .switch {
+ overflow: hidden;
display: inline-flex;
- letter-spacing: 0.1em;
- align-items: center;
- cursor: pointer;
- h4{
- font-weight: 400;
- }
- #main_logo{
- height: 1.2rem;
- width: 1.2rem;
- margin-right: 0.2rem;
- fill: rgba(var(--text), 1);
- }
-}
-#homepage{
- padding-top: 0;
-}
-#first_section{
- display: grid;
- grid-template-rows: 1fr auto;
- min-height: calc(100vh - 8rem);
-}
-header.grid-2{
- margin-top: 2rem;
-}
-#search_page{
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: 20;
- margin: 0;
- background: rgba(var(--foreground), 1);
- padding: 1.5rem 8vw;
- header{
- align-items: center;
- justify-content: space-between;
- margin-top: 2rem;
- .icon{
- margin: 0;
- cursor: pointer;
- height: 2.2rem;
- width: 2.2rem;
- padding: 0.6rem;
- }
- }
- h1{
- font-weight: 500;
- font-size: 3rem;
- }
- .input{
- animation: fade 0.4s;
- input:valid ~ #suggestions{
- opacity: 1;
- pointer-events: all;
- transform: none;
- }
- }
- #suggestions{
- opacity: 0;
- pointer-events: none;
- transform: translateY(-0.5rem);
- transition: transform 0.3s, opacity 0.3s;
- position: absolute;
- top: 100%;
- width: 100%;
- background: var(--background);
- border-radius: 0.5rem;
- padding: 0.5rem 0;
- max-height: 30vh;
- overflow-y: auto;
- &:empty{
- padding: 0;
- }
- margin-top: 0.5rem;
- }
- .suggestion{
- padding: 0.6rem 1.5rem 0.6rem 3rem;
- opacity: 0.8;
- cursor: pointer;
- &:hover, &:focus{
- opacity: 1;
- }
- }
-}
-#main_search{
- position: relative;
- display: flex;
flex-direction: column;
- h2{
- margin-top: 2rem;
- align-self: flex-start;
- font-size: 4rem;
- letter-spacing: 0.1em;
- font-weight: 600;
- }
- h4{
- line-height: 1.4em;
- margin-top: 2rem;
- font-weight: 400;
- color: rgba(var(--text-light), 1);
- }
- label{
- position: relative;
- }
-}
-.input{
- border-radius: 0.2rem;
+ justify-items: center;
+ padding: 0.2rem;
+ min-height: 1.6rem;
+ max-height: 1.6rem;
+ border-radius: 0.5rem;
position: relative;
- display: grid;
- grid-template-columns: auto 1fr;
- z-index: 1;
- width: 100%;
- margin: 1.5rem 0;
- align-items: center;
- padding: 0.8rem;
- gap: 1em;
- background: var(--background);
- input{
- border: none;
- width: 100%;
- background: transparent;
- outline: none;
- font-size: 1rem;
- color: rgba(var(--text), 1);
+ }
+ .circle {
+ border-radius: 0.5rem;
+ transition: transform 0.3s;
+ &:first-of-type {
+ margin-bottom: 0.4rem;
}
-}
-.icon{
- height: 1rem;
+ fill: rgba(var(--text), 0.8);
overflow: visible;
- width: 1rem;
- fill: none;
- stroke: rgba(var(--text), 1);
stroke-linecap: round;
stroke-linejoin: round;
- stroke-width: 6;
+ height: 1.2rem;
+ width: 1.2rem;
+ line {
+ stroke: rgba(var(--text), 0.8);
+ stroke-width: 6;
+ }
+ }
+ input:checked ~ .switch .circle {
+ transform: translateY(-1.7rem);
+ }
}
-.copy-row{
+section {
+ position: relative;
+ .dark-background {
display: grid;
- grid-template-columns: 1fr auto;
+ grid-template-rows: auto 1fr;
+ }
+}
+ul {
+ &[type="circle"] {
+ padding: 1.5rem 2.5rem;
+ list-style: circle;
+ li {
+ margin-bottom: 1rem;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+ }
+ & {
+ list-style: none;
+ .balance {
+ margin-bottom: 2rem;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+.top-bottom-padding {
+ padding: 1.5rem 0;
+}
+.margin,
+.page {
+ margin: 0 1.5rem;
+}
+.margin-left-auto {
+ margin-left: auto;
+}
+.card {
+ padding: 2rem 1.5rem;
+ border-radius: 0.5rem;
+ background: rgba(var(--text), 0.06);
+ margin: 1.5rem 0;
+ h4 {
+ margin-bottom: 0.4rem;
+ font-weight: 400;
+ text-transform: capitalize;
+ }
+ h2 {
+ margin-bottom: 1.5rem;
+ }
+}
+.transaction-container {
+ display: grid;
+ margin-top: 1.5rem;
+ gap: 1.5rem;
+ grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+.label {
+ text-transform: capitalize;
+ font-size: 0.8rem;
+ margin-bottom: 0.3rem;
+ line-height: 1.4em;
+ color: rgba(var(--text-light), 1);
+ margin-top: 1.5rem;
+ font-weight: 400;
+ &:first-of-type {
+ margin-top: 0;
+ }
+ & + h4:not(.address) {
+ text-transform: capitalize;
+ }
+}
+.header {
+ justify-items: center;
+ flex-direction: column;
+}
+#logo {
+ display: inline-flex;
+ letter-spacing: 0.1em;
+ align-items: center;
+ cursor: pointer;
+ h4 {
+ font-weight: 400;
+ }
+ #main_logo {
+ height: 1.2rem;
+ width: 1.2rem;
+ margin-right: 0.2rem;
+ fill: rgba(var(--text), 1);
+ }
+}
+#homepage {
+ padding-top: 0;
+}
+#first_section {
+ display: grid;
+ grid-template-rows: 1fr auto;
+ min-height: calc(100vh - 8rem);
+}
+header.grid-2 {
+ margin-top: 2rem;
+}
+#search_page {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: 20;
+ margin: 0;
+ background: rgba(var(--foreground), 1);
+ padding: 1.5rem 8vw;
+ header {
align-items: center;
- gap: 0.5rem;
- .icon{
- cursor: pointer;
+ justify-content: space-between;
+ margin-top: 2rem;
+ .icon {
+ margin: 0;
+ cursor: pointer;
+ height: 2.2rem;
+ width: 2.2rem;
+ padding: 0.6rem;
}
-}
-#textCopied{
- padding: 1rem;
- border-radius: 2rem;
- background: rgba(var(--text), 0.2);
- color: rgba(var(--text), 1);
- position: fixed;
- bottom: 0;
+ }
+ h1 {
+ font-weight: 500;
+ font-size: 3rem;
+ }
+ .input {
+ animation: fade 0.4s;
+ input:valid ~ #suggestions {
+ opacity: 1;
+ pointer-events: all;
+ transform: none;
+ }
+ }
+ #suggestions {
+ opacity: 0;
pointer-events: none;
- margin: 2rem 0;
- left: 50%;
- transform: translateX(-50%);
- transition: 0.3s opacity ease;
- z-index: 20;
-}
-@keyframes flyInLeft{
- from{
- opacity: 0;
- transform: translateX(-0.5rem);
+ transform: translateY(-0.5rem);
+ transition: transform 0.3s, opacity 0.3s;
+ position: absolute;
+ top: 100%;
+ width: 100%;
+ background: var(--background);
+ border-radius: 0.5rem;
+ padding: 0.5rem 0;
+ max-height: 30vh;
+ overflow-y: auto;
+ &:empty {
+ padding: 0;
}
- to{
- opacity: 1;
- transform: none;
+ margin-top: 0.5rem;
+ }
+ .suggestion {
+ padding: 0.6rem 1.5rem 0.6rem 3rem;
+ opacity: 0.8;
+ cursor: pointer;
+ &:hover,
+ &:focus {
+ opacity: 1;
}
+ }
}
-@keyframes flyInRight{
- from{
- opacity: 0;
- transform: translateX(0.5rem);
+#main_search {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ h2 {
+ margin-top: 2rem;
+ align-self: flex-start;
+ font-size: 4rem;
+ letter-spacing: 0.1em;
+ font-weight: 600;
+ }
+ h4 {
+ line-height: 1.4em;
+ margin-top: 2rem;
+ font-weight: 400;
+ color: rgba(var(--text-light), 1);
+ }
+ label {
+ position: relative;
+ }
+}
+.input {
+ border-radius: 0.2rem;
+ position: relative;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ z-index: 1;
+ width: 100%;
+ margin: 1.5rem 0;
+ align-items: center;
+ padding: 0.8rem;
+ gap: 1em;
+ background: var(--background);
+ input {
+ border: none;
+ width: 100%;
+ background: transparent;
+ outline: none;
+ font-size: 1rem;
+ color: rgba(var(--text), 1);
+ }
+}
+.icon {
+ height: 1rem;
+ overflow: visible;
+ width: 1rem;
+ fill: none;
+ stroke: rgba(var(--text), 1);
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 6;
+}
+.copy-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ gap: 0.5rem;
+ .icon {
+ cursor: pointer;
+ }
+}
+#textCopied {
+ padding: 1rem;
+ border-radius: 2rem;
+ background: rgba(var(--text), 0.2);
+ color: rgba(var(--text), 1);
+ position: fixed;
+ bottom: 0;
+ pointer-events: none;
+ margin: 2rem 0;
+ left: 50%;
+ transform: translateX(-50%);
+ transition: 0.3s opacity ease;
+ z-index: 20;
+}
+@keyframes flyInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-0.5rem);
+ }
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+@keyframes flyInRight {
+ from {
+ opacity: 0;
+ transform: translateX(0.5rem);
+ }
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+@keyframes flyOutLeft {
+ from {
+ opacity: 1;
+ transform: none;
+ }
+ to {
+ opacity: 0;
+ transform: translateX(-0.5rem);
+ }
+}
+@keyframes flyOutRight {
+ from {
+ opacity: 1;
+ transform: none;
+ }
+ to {
+ opacity: 0;
+ transform: translateX(0.5rem);
+ }
+}
+.fly-in-from-left {
+ animation: flyInLeft 0.2s forwards;
+}
+.fly-in-from-right {
+ animation: flyInRight 0.2s forwards;
+}
+.fly-out-to-left {
+ animation: flyOutLeft 0.2s forwards;
+}
+.fly-out-to-right {
+ animation: flyOutRight 0.2s forwards;
+}
+#highlights {
+ padding: 1.5rem 0;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-areas:
+ "token token"
+ "total wallet"
+ "contract contract";
+ gap: 1.5rem;
+ .highlight-item {
+ opacity: 0;
+ display: flex;
+ flex-direction: column;
+ padding: 1.5rem;
+ border-left: 0.1rem solid rgba(var(--text), 0.2);
+ .label {
+ margin-top: auto;
}
- to{
- opacity: 1;
- transform: none;
+ h1 {
+ font-size: 2rem;
+ letter-spacing: 0.1rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ overflow-wrap: break-word;
}
-}
-@keyframes flyOutLeft{
- from{
- opacity: 1;
- transform: none;
+ &:first-of-type {
+ text-transform: uppercase;
}
- to{
- opacity: 0;
- transform: translateX(-0.5rem);
+ &:nth-of-type(2) {
+ text-transform: capitalize;
}
-}
-@keyframes flyOutRight{
- from{
- opacity: 1;
- transform: none;
+ &:first-of-type {
+ grid-area: token;
+ animation: flyInLeft 0.4s 0.2s forwards;
}
- to{
- opacity: 0;
- transform: translateX(0.5rem);
+ &:nth-of-type(2) {
+ grid-area: total;
+ animation: flyInLeft 0.4s 0.4s forwards;
}
-}
-.fly-in-from-left{
- animation: flyInLeft 0.2s forwards;
-}
-.fly-in-from-right{
- animation: flyInRight 0.2s forwards;
-}
-.fly-out-to-left{
- animation: flyOutLeft 0.2s forwards;
-}
-.fly-out-to-right{
- animation: flyOutRight 0.2s forwards;
-}
-#highlights{
- padding: 1.5rem 0;
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-areas: 'token token'
- 'total wallet'
- 'contract contract';
- gap: 1.5rem;
- .highlight-item{
- opacity: 0;
- display: flex;
- flex-direction: column;
- padding: 1.5rem;
- border-left: 0.1rem solid rgba(var(--text), 0.2);
- .label{
- margin-top: auto;
- }
- h1{
- font-size: 2rem;
- letter-spacing: 0.1rem;
- font-weight: 500;
- text-transform: uppercase;
- overflow-wrap: break-word;
- }
- &:first-of-type{
- text-transform: uppercase;
- }
- &:nth-of-type(2){
- text-transform: capitalize;
- }
- &:first-of-type{
- grid-area: token;
- animation: flyInLeft 0.4s 0.2s forwards;
- }
- &:nth-of-type(2){
- grid-area: total;
- animation: flyInLeft 0.4s 0.4s forwards;
- }
- &:nth-of-type(3){
- grid-area: wallet;
- animation: flyInLeft 0.4s 0.6s forwards;
- }
- &:last-of-type{
- grid-area: contract;
- animation: flyInLeft 0.4s 0.8s forwards;
- }
+ &:nth-of-type(3) {
+ grid-area: wallet;
+ animation: flyInLeft 0.4s 0.6s forwards;
}
+ &:last-of-type {
+ grid-area: contract;
+ animation: flyInLeft 0.4s 0.8s forwards;
+ }
+ }
}
#latest_transaction_section,
-#latest_blocks_section{
- background: rgba(var(--foreground), 1);
- header{
- grid-template-columns: 1fr auto;
- background: inherit;
- z-index: 2;
- }
-}
-#main_header{
- & > .flex:first-of-type{
- margin-top: 1.5rem;
- }
- height: 8rem;
-}
-#page_header{
- padding: 1rem 0;
- align-items: center;
- h3{
- font-weight: 500;
- text-transform: capitalize;
- }
- .icon{
- height: 1.8rem;
- width: 1.8rem;
- cursor: pointer;
- }
- .icon:first-of-type{
- margin-right: 1rem;
- padding: 0.4rem 0.4rem 0.4rem 0;
- }
- .icon:nth-of-type(2){
- padding: 0.4rem 0 0.4rem 0.4rem;
- }
- #secondary_search_btn{
- margin-left: auto;
- }
-}
-.page{
- padding: 0 0 1rem 0;
- h3.heading{
- text-transform: capitalize;
- font-weight: 500;
- }
- & > h3.heading{
- margin-top: 2rem;
- }
-}
-p{
- overflow-wrap: break-word;
- line-height: 1.6em;
- text-transform: capitalize;
-}
-.balance-card{
- display: inline-grid;
- grid-template-columns: auto auto;
- grid-template-areas: 'labl logo'
- 'balance logo'
- 'address address';
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='fill:none; stroke: %23ffffff08'%3E%3Ccircle cx='3.5' cy='3.5' r='2.12'/%3E%3Ccircle cx='5' cy='10' r='1'/%3E%3Ccircle cx='8.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='6' cy='33' r='2'/%3E%3Ccircle cx='14' cy='29' r='1'/%3E%3Ccircle cx='9.5' cy='22.5' r='1.5'/%3E%3Ccircle cx='29.5' cy='17.5' r='4.5'/%3E%3Ccircle cx='22' cy='8' r='1'/%3E%3Ccircle cx='15.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='27.5' cy='30.5' r='0.5'/%3E%3Ccircle cx='18.5' cy='35.5' r='2.5'/%3E%3Ccircle cx='32' cy='36' r='1'/%3E%3Ccircle cx='35' cy='25' r='1'/%3E%3Ccircle cx='23' cy='21' r='2'/%3E%3Ccircle cx='36.5' cy='1.5' r='0.5'/%3E%3Ccircle cx='30.5' cy='3.5' r='1.5'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"),
- linear-gradient(135deg, rgb(77, 32, 167),rgb(33, 16, 110));
- background-size: cover;
- color: white;
- border-radius: 0.5rem;
- padding: 2rem 1.5rem;
- margin-bottom: 1rem;
- .flo-logo{
- grid-area: logo;
- fill: white;
- height: 1.5rem;
- width: 1.5rem;
- opacity: 0.8;
- justify-self: flex-end;
- }
- h3,h4{
- display: inline-block;
- width: auto;
- }
- h3{
- grid-area: balance;
- font-weight: 400;
- opacity: 0.8;
- }
- h4{
- font-weight: 400;
- }
- p{
- font-size: 0.8rem;
- grid-area: address;
- opacity: 0.8;
- letter-spacing: 0.1em;
- margin-top: 3rem;
- }
- .label{
- grid-area: labl;
- color: white;
- opacity: 0.7;
- }
-}
-.choice,.status{
- padding: 0.5rem 0.8rem;
- border-radius: 2rem;
- display: inline-flex;
- align-items: center;
- margin-bottom: 0.5rem;
- text-transform: capitalize;
-}
-.choice-container{
- display: flex;
- flex-wrap: wrap;
-}
-.choice{
- border: solid 1px rgba(var(--text), 0.2);
- &:last-of-type{
- margin-bottom: 0;
- }
-}
-.status{
- font-size: 0.8rem;
- &.closed{
- background: rgba(var(--foreground), 1);
- border: solid 1px rgba(var(--text), 0.2);
- }
-}
-.address, .token, .hash, .contract, .block-height{
- cursor: pointer;
- color: var(--primary-color);
-}
-.address{
- text-transform: none !important;
- word-break: break-all;
-}
-.tabs{
- position: sticky;
- top: 0;
- padding: 1rem 0 1rem 0;
- background: rgba(var(--foreground), 1);
+#latest_blocks_section {
+ background: rgba(var(--foreground), 1);
+ header {
+ grid-template-columns: 1fr auto;
+ background: inherit;
z-index: 2;
- display: flex;
- overflow-x: auto;
- .tab{
- cursor: pointer;
- opacity: 0.6;
- margin-right: 1.5rem;
- -webkit-tap-highlight-color: transparent;
- white-space: nowrap;
- font-size: 1.1rem;
- &:last-of-type{
- margin-right: 0;
- }
- &.active{
- opacity: 1;
- }
- }
- .line{
- position: absolute;
- height: 0.12rem;
- background: rgba(var(--text), 1);
- width: 1px;
- bottom: 0;
- transition: transform 0.4s, width 0.4s;
- }
+ }
}
-.contract-choice{
- display: grid;
- gap: 0.5rem 1rem;
- margin-bottom: 2rem;
- &:last-of-type{
- margin-bottom: 0;
- }
-}
-@keyframes fade{
- from{
- opacity: 0;
- transform: translateY(1rem);
- }
- to{
- opacity: 1;
- transform: none;
- }
-}
-.transaction{
- display: grid;
- gap: 2rem 1rem;
- padding: 2rem;
- border-radius: 0.5rem;
- grid-template-columns: min-content 1fr;
- grid-template-rows: auto 1fr;
- background: rgba(var(--text), 0.06);
- grid-template-areas: '. .'
- 'info info';
- .contract-info{
- grid-area: info;
- align-items: flex-start;
- }
- h4{
- font-weight: 500;
- }
- & > .icon:first-of-type{
- stroke-width: 4;
- justify-self: center;
- height: 3rem;
- width: 3rem;
- padding: 0.8rem;
- border-radius: 1rem;
- background: rgba(var(--foreground), 1);
- }
-}
-#loader_page{
- display: grid;
- place-content: center;
- height: 100vh;
- width: 100vw;
- text-align: center;
- position: fixed;
- z-index: 10;
- background: rgba(var(--foreground), 1);
- h4{
- margin-top: 1.5rem;
- font-weight: 500;
- }
-}
-#loader{
- justify-self: center;
- height: 2.5rem;
- width: 2.5rem;
- transform-origin: center;
- stroke-dashoffset: 200;
- stroke-dasharray: 200;
- animation: load 2s infinite linear;
- stroke: var(--primary-color);
-}
-@keyframes load{
- 50%{
- stroke-dashoffset: 0;
- }
- 100%{
- stroke-dashoffset: -200;
- transform: rotate(360deg);
- }
-
-}
-#all_blocks_page, #top_blocks_container, #token_balance_container{
- display: grid;
- gap: 1rem;
- grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
- margin-top: 1rem;
- .card{
- margin: 0;
- }
-}
-#token_balance_container{
+#main_header {
+ & > .flex:first-of-type {
margin-top: 1.5rem;
+ }
+ height: 8rem;
}
-@media only screen and (min-width: 640px){
- .margin, .page{
- margin: 0 4vw;
- }
- .input{
- width: 60% !important;
- }
- section{
- header{
- h1{
- font-size: 2rem;
- }
- }
- }
- #main_search{
- h1{
- font-size: 6rem;
- text-align: center;
- }
- }
- #highlights{
- gap: 2rem;
- grid-template-columns: repeat(2, auto);
- grid-template-areas: 'token total' ' wallet contract';
- .highlight-item{
- h1{
- font-size: 2.5rem;
- }
- &:first-of-type{
- grid-area: token;
- }
- &:nth-of-type(2){
- grid-area: total;
- }
- &:nth-of-type(3){
- grid-area: wallet;
- }
- &:last-of-type{
- grid-area: contract;
- }
- }
- }
- #page_header{
- padding: 1.5rem 0;
- }
- #transaction_page{
- display: grid;
- gap: 0 1.5rem;
- grid-template-columns: 40% 60%;
- grid-template-areas: 'header header'
- '. .';
- .head{
- grid-area: header;
- }
- }
- .contract-choice{
- grid-template-columns: 2fr 1fr 1fr;
- align-items: center;
- }
+#page_header {
+ padding: 1rem 0;
+ align-items: center;
+ h3 {
+ font-weight: 500;
+ text-transform: capitalize;
+ }
+ .icon {
+ height: 1.8rem;
+ width: 1.8rem;
+ cursor: pointer;
+ }
+ .icon:first-of-type {
+ margin-right: 1rem;
+ padding: 0.4rem 0.4rem 0.4rem 0;
+ }
+ .icon:nth-of-type(2) {
+ padding: 0.4rem 0 0.4rem 0.4rem;
+ }
+ #secondary_search_btn {
+ margin-left: auto;
+ }
}
-@media only screen and (min-width: 1280px){
- .margin, .page{
- margin: 0 12vw;
- }
- .input{
- width: 50% !important;
- }
- #highlights{
- grid-template-columns: repeat(4, auto);
- grid-template-areas: 'token total wallet contract';
- .highlight-item{
- &:first-of-type{
- grid-area: token;
- }
- &:nth-of-type(2){
- grid-area: total;
- }
- &:nth-of-type(3){
- grid-area: wallet;
- }
- &:last-of-type{
- grid-area: contract;
- }
- }
- }
-
+.page {
+ padding: 0 0 1rem 0;
+ h3.heading {
+ text-transform: capitalize;
+ font-weight: 500;
+ }
+ & > h3.heading {
+ margin-top: 2rem;
+ }
}
-@media only screen and (min-width: 1920px){
- body{
- font-size: 24px;
- }
- .margin, .page{
- margin: 0 16vw;
- }
- #search_page{
- padding: 1.5rem 12vw;
- }
- .input{
- width: 40% !important;
- }
+p {
+ overflow-wrap: break-word;
+ line-height: 1.6em;
+ text-transform: capitalize;
}
-@media only screen and (min-width: 2048px){
- body{
- font-size: 24px;
- }
- .margin, .page{
- margin: 0 26vw;
- }
- #search_page{
- padding: 1.5rem 24vw;
- }
- #first_section{
- min-height: auto;
- }
- .input{
- width: 30% !important;
- }
+.balance-card {
+ display: inline-grid;
+ grid-template-columns: auto auto;
+ grid-template-areas:
+ "labl logo"
+ "balance logo"
+ "address address";
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='fill:none; stroke: %23ffffff08'%3E%3Ccircle cx='3.5' cy='3.5' r='2.12'/%3E%3Ccircle cx='5' cy='10' r='1'/%3E%3Ccircle cx='8.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='6' cy='33' r='2'/%3E%3Ccircle cx='14' cy='29' r='1'/%3E%3Ccircle cx='9.5' cy='22.5' r='1.5'/%3E%3Ccircle cx='29.5' cy='17.5' r='4.5'/%3E%3Ccircle cx='22' cy='8' r='1'/%3E%3Ccircle cx='15.5' cy='12.5' r='2.5'/%3E%3Ccircle cx='27.5' cy='30.5' r='0.5'/%3E%3Ccircle cx='18.5' cy='35.5' r='2.5'/%3E%3Ccircle cx='32' cy='36' r='1'/%3E%3Ccircle cx='35' cy='25' r='1'/%3E%3Ccircle cx='23' cy='21' r='2'/%3E%3Ccircle cx='36.5' cy='1.5' r='0.5'/%3E%3Ccircle cx='30.5' cy='3.5' r='1.5'/%3E%3Ccircle cx='34.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"),
+ linear-gradient(135deg, rgb(77, 32, 167), rgb(33, 16, 110));
+ background-size: cover;
+ color: white;
+ border-radius: 0.5rem;
+ padding: 2rem 1.5rem;
+ margin-bottom: 1rem;
+ .flo-logo {
+ grid-area: logo;
+ fill: white;
+ height: 1.5rem;
+ width: 1.5rem;
+ opacity: 0.8;
+ justify-self: flex-end;
+ }
+ h3,
+ h4 {
+ display: inline-block;
+ width: auto;
+ }
+ h3 {
+ grid-area: balance;
+ font-weight: 400;
+ opacity: 0.8;
+ }
+ h4 {
+ font-weight: 400;
+ }
+ p {
+ font-size: 0.8rem;
+ grid-area: address;
+ opacity: 0.8;
+ letter-spacing: 0.1em;
+ margin-top: 3rem;
+ }
+ .label {
+ grid-area: labl;
+ color: white;
+ opacity: 0.7;
+ }
}
-@media only screen and (max-width: 320px){
- body{
- font-size: 14px;
- }
+.choice,
+.status {
+ padding: 0.5rem 0.8rem;
+ border-radius: 2rem;
+ display: inline-flex;
+ align-items: center;
+ margin-bottom: 0.5rem;
+ text-transform: capitalize;
}
-@media (hover:hover){
- button{
- transition: background-color 0.3s;
- &:hover{
- background: var(--primary-color);
- color: rgba(var(--foreground), 1)
- }
- }
- .hover{
- cursor: pointer;
- }
- .tab{
- transition: opacity 0.3s;
- &:hover{
- opacity: 1;
- }
- }
+.choice-container {
+ display: flex;
+ flex-wrap: wrap;
+}
+.choice {
+ border: solid 1px rgba(var(--text), 0.2);
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+}
+.status {
+ font-size: 0.8rem;
+ &.closed {
+ background: rgba(var(--foreground), 1);
+ border: solid 1px rgba(var(--text), 0.2);
+ }
+}
+.address,
+.token,
+.hash,
+.contract,
+.block-height {
+ cursor: pointer;
+ color: var(--primary-color);
+}
+.address {
+ text-transform: none !important;
+ word-break: break-all;
+}
+.tabs {
+ position: sticky;
+ top: 0;
+ padding: 1rem 0 1rem 0;
+ background: rgba(var(--foreground), 1);
+ z-index: 2;
+ display: flex;
+ overflow-x: auto;
+ .tab {
+ cursor: pointer;
+ opacity: 0.6;
+ margin-right: 1.5rem;
+ -webkit-tap-highlight-color: transparent;
+ white-space: nowrap;
+ font-size: 1.1rem;
+ &:last-of-type {
+ margin-right: 0;
+ }
+ &.active {
+ opacity: 1;
+ }
+ }
+ .line {
+ position: absolute;
+ height: 0.12rem;
+ background: rgba(var(--text), 1);
+ width: 1px;
+ bottom: 0;
+ transition: transform 0.4s, width 0.4s;
+ }
+}
+.contract-choice {
+ display: grid;
+ gap: 0.5rem 1rem;
+ margin-bottom: 2rem;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+}
+@keyframes fade {
+ from {
+ opacity: 0;
+ transform: translateY(1rem);
+ }
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+.transaction {
+ display: grid;
+ gap: 2rem 1rem;
+ padding: 2rem;
+ border-radius: 0.5rem;
+ grid-template-columns: min-content 1fr;
+ grid-template-rows: auto 1fr;
+ background: rgba(var(--text), 0.06);
+ grid-template-areas:
+ ". ."
+ "info info";
+ .contract-info {
+ grid-area: info;
+ align-items: flex-start;
+ }
+ h4 {
+ font-weight: 500;
+ }
+ & > .icon:first-of-type {
+ stroke-width: 4;
+ justify-self: center;
+ height: 3rem;
+ width: 3rem;
+ padding: 0.8rem;
+ border-radius: 1rem;
+ background: rgba(var(--foreground), 1);
+ }
+}
+#loader_page {
+ display: grid;
+ place-content: center;
+ height: 100vh;
+ width: 100vw;
+ text-align: center;
+ position: fixed;
+ z-index: 10;
+ background: rgba(var(--foreground), 1);
+ h4 {
+ margin-top: 1.5rem;
+ font-weight: 500;
+ }
+}
+#loader {
+ justify-self: center;
+ height: 2.5rem;
+ width: 2.5rem;
+ transform-origin: center;
+ stroke-dashoffset: 200;
+ stroke-dasharray: 200;
+ animation: load 2s infinite linear;
+ stroke: var(--primary-color);
+}
+@keyframes load {
+ 50% {
+ stroke-dashoffset: 0;
+ }
+ 100% {
+ stroke-dashoffset: -200;
+ transform: rotate(360deg);
+ }
+}
+#all_blocks_page,
+#top_blocks_container,
+#token_balance_container {
+ display: grid;
+ gap: 1rem;
+ grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+ margin-top: 1rem;
+ .card {
+ margin: 0;
+ }
+}
+#token_balance_container {
+ margin-top: 1.5rem;
+}
+#error_page {
+ padding: 1.5rem 0;
+}
+@media only screen and (min-width: 640px) {
+ .margin,
+ .page {
+ margin: 0 4vw;
+ }
+ .input {
+ width: 60% !important;
+ }
+ section {
+ header {
+ h1 {
+ font-size: 2rem;
+ }
+ }
+ }
+ #main_search {
+ h1 {
+ font-size: 6rem;
+ text-align: center;
+ }
+ }
+ #highlights {
+ gap: 2rem;
+ grid-template-columns: repeat(2, auto);
+ grid-template-areas: "token total" " wallet contract";
+ .highlight-item {
+ h1 {
+ font-size: 2.5rem;
+ }
+ &:first-of-type {
+ grid-area: token;
+ }
+ &:nth-of-type(2) {
+ grid-area: total;
+ }
+ &:nth-of-type(3) {
+ grid-area: wallet;
+ }
+ &:last-of-type {
+ grid-area: contract;
+ }
+ }
+ }
+ #page_header {
+ padding: 1.5rem 0;
+ }
+ #transaction_page {
+ display: grid;
+ gap: 0 1.5rem;
+ grid-template-columns: 40% 60%;
+ grid-template-areas:
+ "header header"
+ ". .";
+ .head {
+ grid-area: header;
+ }
+ }
+ .contract-choice {
+ grid-template-columns: 2fr 1fr 1fr;
+ align-items: center;
+ }
+}
+@media only screen and (min-width: 1280px) {
+ .margin,
+ .page {
+ margin: 0 12vw;
+ }
+ .input {
+ width: 50% !important;
+ }
+ #highlights {
+ grid-template-columns: repeat(4, auto);
+ grid-template-areas: "token total wallet contract";
+ .highlight-item {
+ &:first-of-type {
+ grid-area: token;
+ }
+ &:nth-of-type(2) {
+ grid-area: total;
+ }
+ &:nth-of-type(3) {
+ grid-area: wallet;
+ }
+ &:last-of-type {
+ grid-area: contract;
+ }
+ }
+ }
+}
+@media only screen and (min-width: 1920px) {
+ body {
+ font-size: 24px;
+ }
+ .margin,
+ .page {
+ margin: 0 16vw;
+ }
+ #search_page {
+ padding: 1.5rem 12vw;
+ }
+ .input {
+ width: 40% !important;
+ }
+}
+@media only screen and (min-width: 2048px) {
+ body {
+ font-size: 24px;
+ }
+ .margin,
+ .page {
+ margin: 0 26vw;
+ }
+ #search_page {
+ padding: 1.5rem 24vw;
+ }
+ #first_section {
+ min-height: auto;
+ }
+ .input {
+ width: 30% !important;
+ }
+}
+@media only screen and (max-width: 320px) {
+ body {
+ font-size: 14px;
+ }
+}
+@media (hover: hover) {
+ button {
+ transition: background-color 0.3s;
+ &:hover {
+ background: var(--primary-color);
+ color: rgba(var(--foreground), 1);
+ }
+ }
+ .hover {
+ cursor: pointer;
+ }
+ .tab {
+ transition: opacity 0.3s;
+ &:hover {
+ opacity: 1;
+ }
+ }
}
diff --git a/index.html b/index.html
index 21aeb38..9191ea1 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
FLO Scout
-
+
@@ -259,7 +259,7 @@
page.classList.add("page");
page.id = "transaction_page";
// todo : This is a temporary fix. Fix this on the Database and API level
- if(type =='smartContractPays' || type ==' smartContractPays'){
+ if (type == 'smartContractPays' || type == ' smartContractPays') {
name = ''
}
page.innerHTML = `
@@ -315,6 +315,16 @@
page.id = "all_blocks_page";
return page;
},
+ errorPage(reason) {
+ const page = document.createElement('section')
+ page.classList.add('page')
+ page.id = 'error_page'
+ page.innerHTML = `
+ Not found!
+ ${reason}
+ `
+ return page
+ },
addrBalanceCard(address, balance, token) {
let card = document.createElement('li')
card.classList.add('balance')
@@ -558,7 +568,7 @@
winningChoice,
committeeAddress
} = obj,
- card = document.createElement("div");
+ card = document.createElement("div");
card.classList.add("transaction", "contract-trigger");
card.id = hash;
card.innerHTML = `