1 line
17 KiB
CSS
1 line
17 KiB
CSS
@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}} |