forked from dan_s/dragonx.is
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3003 lines
53 KiB
3003 lines
53 KiB
:root {
|
|
--col-text: white;
|
|
--col-bg: black;
|
|
--col-red-bg: rgba(255, 0, 0, 0.05);
|
|
--col-red-bg-50: rgba(216, 38, 83, 0.25);
|
|
--col-dark-bg: rgba(28, 19, 19, 0.5);
|
|
--col-btn-bg: rgba(28, 19, 19, 0.8);
|
|
--col-btn-bg: rgba(216, 38, 83, 0.1);
|
|
--col-btn-red: rgb(216, 38, 82);
|
|
--col-btn-text: rgba(255, 255, 255, 0.75);
|
|
--col-red-outline: rgb(216, 38, 82, 0.5);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Satoshi";
|
|
src: url("../img/fonts/Satoshi-Variable.woff2") format("woff2");
|
|
}
|
|
|
|
/* HTML DEFAULTS */
|
|
@media screen {
|
|
.desktop {
|
|
display: none !important;
|
|
}
|
|
.mobile {
|
|
display: flex !important;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
color: var(--col-text);
|
|
font-family: "Satoshi", sans-serif;
|
|
}
|
|
|
|
section {
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
min-height: 100svh;
|
|
padding: 8rem 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 4rem;
|
|
text-align: center;
|
|
}
|
|
h2 {
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
margin: 2rem 0 0 0;
|
|
}
|
|
|
|
section h2 {
|
|
margin: 0;
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.15rem;
|
|
text-align: center;
|
|
}
|
|
h4 {
|
|
text-align: center;
|
|
width: 90%;
|
|
opacity: 75%;
|
|
}
|
|
p {
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
table {
|
|
border-radius: 0.25rem;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
border-collapse: collapse;
|
|
font-size: 1.5rem;
|
|
}
|
|
td {
|
|
backdrop-filter: blur(20px);
|
|
width: 14rem;
|
|
height: 4rem;
|
|
}
|
|
tr:nth-child(odd) {
|
|
background-color: rgb(216, 38, 82, 0.25);
|
|
}
|
|
tr:nth-child(even) {
|
|
background-color: rgb(216, 38, 82, 0.15);
|
|
}
|
|
td:nth-child(odd) {
|
|
text-align: right;
|
|
padding-right: 1rem;
|
|
}
|
|
td:nth-child(even) {
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1180px) {
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
.desktop {
|
|
display: flex !important;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--col-text);
|
|
font-family: "Satoshi", sans-serif;
|
|
}
|
|
|
|
section {
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
min-height: 100svh;
|
|
padding: 0 0 4rem 0;
|
|
margin: 0;
|
|
}
|
|
|
|
section:first-of-type {
|
|
padding: 8rem 0 4rem 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 4rem;
|
|
}
|
|
h2 {
|
|
font-size: 3rem;
|
|
}
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
table {
|
|
border-radius: 0.25rem;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
border-collapse: collapse;
|
|
font-size: 1.5rem;
|
|
}
|
|
td {
|
|
backdrop-filter: blur(20px);
|
|
width: 14rem;
|
|
height: 4rem;
|
|
}
|
|
tr:nth-child(odd) {
|
|
background-color: rgb(216, 38, 82, 0.25);
|
|
}
|
|
tr:nth-child(even) {
|
|
background-color: rgb(216, 38, 82, 0.15);
|
|
}
|
|
td:nth-child(odd) {
|
|
text-align: right;
|
|
padding-right: 1rem;
|
|
}
|
|
td:nth-child(even) {
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
|
|
/* CLASS TEMPLATES */
|
|
@media screen {
|
|
a,
|
|
button,
|
|
.nav-logo a {
|
|
cursor: pointer;
|
|
transition: all ease-in-out 200ms;
|
|
transform: scale(1);
|
|
text-decoration: none;
|
|
}
|
|
.btn:hover,
|
|
button:hover {
|
|
transform: scale(1.05);
|
|
background-color: var(--col-red-outline);
|
|
}
|
|
.nav-logo a:hover {
|
|
transform: scale(1.05);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.btn {
|
|
z-index: 8;
|
|
transition: all ease-in-out 200ms;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 0.75rem;
|
|
border: none;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-btn-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
text-decoration: none !important;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.alt-btn {
|
|
background-color: var(--col-red-bg);
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
}
|
|
.btn a {
|
|
color: var(--col-red-text);
|
|
}
|
|
.btn-icon.btn-icon {
|
|
height: 1rem;
|
|
margin: 0 0.5rem;
|
|
}
|
|
.btn-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
width: 100%;
|
|
}
|
|
|
|
.card-container {
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.card {
|
|
justify-content: start !important;
|
|
flex-direction: column;
|
|
min-width: 20rem;
|
|
max-width: 20rem;
|
|
/* min-height: 20.5rem; */
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-btn-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
padding: 1rem 1rem 0rem 1rem;
|
|
margin: 0.5rem 0.5rem 1rem 0.5rem;
|
|
backdrop-filter: blur(20px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card p {
|
|
margin: 1rem 0 3rem 0;
|
|
}
|
|
|
|
.card img {
|
|
min-width: 7rem;
|
|
max-width: 70%;
|
|
max-height: 7rem;
|
|
}
|
|
|
|
.card a {
|
|
transition: all ease-in-out 200ms;
|
|
position: absolute;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
color: var(--col-text);
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
width: 20rem;
|
|
padding: 0.5rem 1rem;
|
|
bottom: 0;
|
|
text-align: center;
|
|
border-radius: 0 0 0.15rem 0.15rem;
|
|
background-color: var(--col-btn-bg);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card a:hover {
|
|
box-shadow: 0 0 0.5rem var(--col-btn-red);
|
|
background-color: var(--col-red-outline);
|
|
}
|
|
|
|
.card .btn {
|
|
position: relative;
|
|
width: unset;
|
|
border-radius: 0.25rem;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.card div {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.card h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1180px) {
|
|
a,
|
|
button,
|
|
.nav-logo a {
|
|
cursor: pointer;
|
|
transition: all ease-in-out 200ms;
|
|
transform: scale(1);
|
|
text-decoration: none;
|
|
}
|
|
.btn:hover,
|
|
button:hover {
|
|
transform: scale(1.05);
|
|
background-color: var(--col-red-outline);
|
|
}
|
|
.nav-logo a:hover {
|
|
transform: scale(1.05);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.btn {
|
|
z-index: 8;
|
|
transition: all ease-in-out 200ms;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 0.75rem;
|
|
border: none;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-btn-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
text-decoration: none;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.alt-btn {
|
|
background-color: var(--col-red-bg);
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
}
|
|
.btn a {
|
|
color: var(--col-red-text);
|
|
}
|
|
.btn-icon.btn-icon {
|
|
height: 1rem;
|
|
margin: 0 0.5rem;
|
|
}
|
|
.btn-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
width: 100%;
|
|
}
|
|
|
|
.card-container {
|
|
flex-wrap: wrap;
|
|
width: 66rem;
|
|
}
|
|
|
|
.card {
|
|
flex-direction: column;
|
|
width: 15rem;
|
|
min-height: 21rem;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-btn-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
padding: 2rem 2rem 2rem 2rem;
|
|
margin: 1rem 1rem 4rem 1rem;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.card img {
|
|
min-width: 8rem;
|
|
max-height: 8rem;
|
|
}
|
|
|
|
.card a {
|
|
transition: all ease-in-out 200ms;
|
|
position: absolute;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
color: var(--col-text);
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
width: 100%;
|
|
padding: 0.5rem 2rem;
|
|
margin-top: 19.5rem;
|
|
text-align: center;
|
|
border-radius: 0 0 0.15rem 0.15rem;
|
|
background-color: var(--col-btn-bg);
|
|
}
|
|
|
|
.card a:hover {
|
|
box-shadow: 0 0 0.5rem var(--col-btn-red);
|
|
background-color: var(--col-red-outline);
|
|
}
|
|
|
|
.card p {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
margin-top: 0rem;
|
|
margin-bottom: 1rem;
|
|
height: 10rem;
|
|
}
|
|
|
|
.card .btn {
|
|
position: relative;
|
|
width: unset;
|
|
border-radius: 0.25rem;
|
|
margin: 0.5rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.card div {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
margin: 0 0 1rem 0;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.card h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 3rem;
|
|
}
|
|
}
|
|
|
|
/* UTILITY CLASSES */
|
|
.flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.w-14 {
|
|
width: 14em;
|
|
}
|
|
|
|
.mx-auto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.my-1 {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text-white {
|
|
color: white !important;
|
|
}
|
|
|
|
.font-size-md{
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.px-0 {
|
|
padding-left: 0rem !important;
|
|
padding-right: 0rem !important;
|
|
}
|
|
|
|
/* HEADER, FOOTER & BG */
|
|
|
|
@media screen {
|
|
header {
|
|
z-index: 18;
|
|
display: flex;
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: var(--col-red-bg);
|
|
padding: 1rem;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
backdrop-filter: blur(25px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.link-out::after {
|
|
transition: all ease-in-out 200ms;
|
|
content: "";
|
|
background-image: url(../img/graphics/icon_link_out.svg);
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
a:hover.link-out::after {
|
|
background-image: url(../img/graphics/icon_linkout_red.svg);
|
|
}
|
|
|
|
.nav-logo {
|
|
cursor: pointer;
|
|
width: 50%;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.nav-logo a {
|
|
display: inline-block;
|
|
height: 3.5rem;
|
|
width: 6.75rem;
|
|
/* margin: -0.75rem 0 -0.75rem 0; */
|
|
filter: drop-shadow(0 0 0.15rem var(--col-red-text));
|
|
background-image: url(../img/logos/dragonx_logotext_light.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
#mobile-menu-btn {
|
|
z-index: 20;
|
|
transition: all ease-in-out 200ms;
|
|
position: absolute;
|
|
right: 2rem;
|
|
top: 2rem;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
background-image: url(../img/mobile-sidebar-button.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#mobile-checkbox:checked ~ #mobile-menu-btn {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.nav-menu.mobile {
|
|
z-index: 19;
|
|
transition: all ease-in-out 200ms;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: start;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
width: 10rem;
|
|
height: 100vh;
|
|
height: 100svh;
|
|
padding-top: 8rem;
|
|
gap: 2rem;
|
|
padding-right: unset;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
transform: translateX(105%);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
#mobile-checkbox:checked ~ .nav-menu {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
.nav-menu a {
|
|
padding: 0.25rem 0.5rem;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-btn-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
text-decoration: none;
|
|
margin: 0 0.5rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 700;
|
|
width: 8rem;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.img-bg {
|
|
position: fixed;
|
|
z-index: -2;
|
|
height: 100vh;
|
|
width: 100%;
|
|
background-image: url(../img/graphics/bg_lava.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.bg-overlay {
|
|
z-index: -1;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100vh;
|
|
height: 100svh;
|
|
background-color: black;
|
|
opacity: 60%;
|
|
}
|
|
footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 12rem;
|
|
background-color: var(--col-dark-bg);
|
|
padding-top: 8rem;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
footer > div {
|
|
position: relative;
|
|
flex-direction: column;
|
|
}
|
|
.footer-logo {
|
|
transition: all ease-in-out 200ms;
|
|
width: 10rem;
|
|
cursor: pointer;
|
|
filter: saturate(10%);
|
|
position: absolute;
|
|
top: -6rem;
|
|
}
|
|
.footer-logo:hover {
|
|
transform: scale(1.05);
|
|
filter: saturate(100%);
|
|
}
|
|
.footer-links {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
min-height: 12rem;
|
|
height: 100%;
|
|
margin: 0 0 0 0;
|
|
color: white;
|
|
}
|
|
.footer-links a {
|
|
display: inline-flex;
|
|
color: white;
|
|
padding: 1rem 1rem;
|
|
}
|
|
.footer-links a:hover {
|
|
color: var(--col-btn-red);
|
|
background-color: var(--col-red-bg);
|
|
padding: 1rem 1.5rem;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
border-radius: 0.15rem;
|
|
}
|
|
|
|
.footer-social {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.footer-social img,
|
|
.footer-links img {
|
|
height: 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1180px) {
|
|
header {
|
|
z-index: 20;
|
|
display: flex;
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: var(--col-red-bg);
|
|
padding: 1rem;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
backdrop-filter: blur(25px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 12rem;
|
|
background-color: var(--col-dark-bg);
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
footer > div {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.footer-logo {
|
|
transition: all ease-in-out 200ms;
|
|
width: 10rem;
|
|
cursor: pointer;
|
|
filter: saturate(10%);
|
|
position: relative;
|
|
margin: 0;
|
|
top: unset;
|
|
}
|
|
.footer-logo:hover {
|
|
transform: scale(1.05);
|
|
filter: saturate(100%);
|
|
}
|
|
.footer-links {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
width: 16rem;
|
|
min-height: 12rem;
|
|
height: 100%;
|
|
margin: 0 10rem;
|
|
color: white;
|
|
}
|
|
.footer-links a {
|
|
display: inline-flex;
|
|
color: white;
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
.footer-links a:hover {
|
|
color: var(--col-btn-red);
|
|
background-color: var(--col-red-bg);
|
|
padding: 1rem 1.5rem;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
border-radius: 0.15rem;
|
|
}
|
|
.footer-social img,
|
|
.footer-links img {
|
|
height: 1.5rem;
|
|
}
|
|
.link-out::after {
|
|
transition: all ease-in-out 200ms;
|
|
content: "";
|
|
background-image: url(../img/graphics/icon_link_out.svg);
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
a:hover.link-out::after {
|
|
background-image: url(../img/graphics/icon_linkout_red.svg);
|
|
}
|
|
|
|
.nav-logo {
|
|
cursor: pointer;
|
|
width: 20%;
|
|
margin-left: 6rem;
|
|
}
|
|
|
|
.nav-logo a {
|
|
display: inline-block;
|
|
height: 3.5rem;
|
|
width: 6.75rem;
|
|
/* margin: -0.75rem 0 -0.75rem 0; */
|
|
filter: drop-shadow(0 0 0.15rem var(--col-red-text));
|
|
background-image: url(../img/logos/dragonx_logotext_light.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
#mobile-menu-btn {
|
|
display: none;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
width: 90%;
|
|
padding-right: 10%;
|
|
}
|
|
|
|
.nav-menu a {
|
|
padding: 0.25rem 0.5rem;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-btn-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
text-decoration: none;
|
|
margin: 0 0.5rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 700;
|
|
width: fit-content;
|
|
}
|
|
|
|
.img-bg {
|
|
position: fixed;
|
|
z-index: -2;
|
|
height: 100vh;
|
|
width: 100%;
|
|
background-image: url(../img/graphics/bg_lava.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.bg-overlay {
|
|
z-index: -1;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100vh;
|
|
height: 100svh;
|
|
background-color: black;
|
|
opacity: 60%;
|
|
}
|
|
}
|
|
|
|
/* HERO SECTION */
|
|
|
|
@media screen {
|
|
#hero {
|
|
flex-direction: column;
|
|
padding-top: 8rem;
|
|
}
|
|
|
|
#hero h3 {
|
|
text-align: center;
|
|
opacity: 75%;
|
|
width: 80%;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#hero h2 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.hero-slogan {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: white;
|
|
font-weight: 200;
|
|
font-size: 1.25rem;
|
|
letter-spacing: 0.8rem;
|
|
}
|
|
|
|
.hero-downloads,
|
|
.hero img,
|
|
.hero h2 {
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
.btn-guide {
|
|
position: absolute;
|
|
bottom: -3rem;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: rgba(24, 24, 24, 0.85);
|
|
}
|
|
|
|
.hero .alt-btn {
|
|
position: absolute;
|
|
bottom: -6rem;
|
|
right: 0;
|
|
left: 0;
|
|
background-color: rgba(24, 24, 24, 0.85);
|
|
}
|
|
|
|
.hero > img {
|
|
width: 80%;
|
|
filter: drop-shadow(0 0 2rem var(--col-red-outline));
|
|
margin-bottom: -2rem;
|
|
}
|
|
|
|
.hero-downloads {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
justify-content: center;
|
|
width: 90%;
|
|
padding: 0.5rem;
|
|
margin: 1rem 0 1rem 0;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-red-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
backdrop-filter: blur(15px);
|
|
}
|
|
|
|
.hero-downloads h2 {
|
|
font-weight: 600;
|
|
font-size: 1.5rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.hero-downloads p {
|
|
font-weight: 200;
|
|
font-size: 1.25rem;
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.wallet-download {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 2rem;
|
|
width: 10rem;
|
|
padding: 1.75rem 0.5rem;
|
|
border: none;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-btn-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
text-decoration: none;
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
.wallet-download p {
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
text-shadow: 0 0 1rem rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.wallet-download img {
|
|
height: 1.5rem;
|
|
margin: 0 0.75rem 0 0;
|
|
filter: drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.5));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1180px) {
|
|
#hero {
|
|
flex-direction: column;
|
|
padding-top: 10rem;
|
|
}
|
|
|
|
.hero-slogan {
|
|
color: white;
|
|
font-weight: 200;
|
|
font-size: 2.25rem;
|
|
letter-spacing: 0.97rem;
|
|
/* text-shadow: 0 0 .75rem rgba(255, 255, 255, 1); */
|
|
filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 1));
|
|
}
|
|
|
|
.hero-downloads,
|
|
.hero img,
|
|
.hero h2 {
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
.btn-guide {
|
|
position: absolute;
|
|
bottom: -3rem;
|
|
left: 0;
|
|
right: unset;
|
|
}
|
|
|
|
.hero .alt-btn {
|
|
position: absolute;
|
|
bottom: -3rem;
|
|
right: 0;
|
|
left: unset;
|
|
}
|
|
|
|
.hero > img {
|
|
width: 30%;
|
|
filter: drop-shadow(0 0 2rem var(--col-red-outline));
|
|
margin-bottom: -4rem;
|
|
}
|
|
|
|
.hero-downloads {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
justify-content: center;
|
|
width: 50rem;
|
|
padding: 1rem;
|
|
margin: 4rem 0 1rem 0;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-red-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
backdrop-filter: blur(15px);
|
|
}
|
|
|
|
.hero-downloads h2 {
|
|
font-weight: 600;
|
|
font-size: 2.5rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.hero-downloads p {
|
|
font-weight: 200;
|
|
font-size: 1.5rem;
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.wallet-download {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 2rem;
|
|
padding: 1.75rem 1rem;
|
|
border: none;
|
|
outline: 0.1rem solid var(--col-red-outline);
|
|
background-color: var(--col-btn-bg);
|
|
color: var(--col-btn-text);
|
|
border-radius: 0.15rem;
|
|
text-decoration: none;
|
|
margin: 1rem;
|
|
}
|
|
|
|
.wallet-download p {
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
text-shadow: 0 0 1rem rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.wallet-download img {
|
|
height: 1.75rem;
|
|
margin: 0 0.75rem 0 0;
|
|
filter: drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.5));
|
|
}
|
|
}
|
|
|
|
/* ABOUT SECTION */
|
|
#about {
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ROADMAP SECTION */
|
|
#roadmap {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* SPECS SECTION */
|
|
@media screen {
|
|
#specs {
|
|
flex-direction: column;
|
|
padding: 4rem 0;
|
|
}
|
|
#specs table {
|
|
width: 90%;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
@media (min-width: 1180px) {
|
|
#specs table {
|
|
width: 32rem;
|
|
}
|
|
}
|
|
|
|
/* RELEASES SECTION */
|
|
@media screen {
|
|
#releases {
|
|
}
|
|
|
|
.release-card {
|
|
display: flex;
|
|
justify-content: start;
|
|
flex-direction: column;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
padding: 5rem 0.25rem 0.25rem 0.25rem;
|
|
width: 90%;
|
|
background-color: var(--col-red-bg-50);
|
|
backdrop-filter: blur(20px);
|
|
box-sizing: border-box;
|
|
border-radius: 0.25rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.card-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
background-color: var(--col-red-bg);
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
margin: 0rem 0 1rem 0;
|
|
}
|
|
|
|
.card-title h2 {
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
width: 100%;
|
|
font-size: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card-title h2:first-of-type {
|
|
z-index: 1;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
background-color: var(--col-red-bg);
|
|
}
|
|
|
|
.card-title h2:last-of-type {
|
|
opacity: 80%;
|
|
font-weight: 400;
|
|
background-color: var(--col-dark-bg);
|
|
}
|
|
|
|
.card-content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-details {
|
|
order: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.card-screenshot-container {
|
|
width: 90%;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.release-card img {
|
|
height: unset;
|
|
width: auto;
|
|
max-width: 100%;
|
|
max-height: 24rem;
|
|
border-radius: 0.25rem;
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.card-details ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 90%;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.card-btn-container {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
justify-content: start;
|
|
position: relative;
|
|
bottom: 0rem;
|
|
left: 0rem;
|
|
}
|
|
|
|
.card-btn-container .btn {
|
|
margin: 0.5rem;
|
|
justify-content: center;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
padding: 0.5rem 0.5rem;
|
|
width: 9rem;
|
|
height: 4rem;
|
|
}
|
|
|
|
.card-btn-container .btn img {
|
|
width: 1.5rem;
|
|
box-shadow: unset;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1180px) {
|
|
#releases {
|
|
}
|
|
|
|
#releases h2 {
|
|
margin: 0 0 4rem 0;
|
|
}
|
|
|
|
.release-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
padding: 1rem;
|
|
max-width: 80rem;
|
|
background-color: var(--col-red-bg-50);
|
|
backdrop-filter: blur(20px);
|
|
box-sizing: border-box;
|
|
border-radius: 0.25rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.card-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
height: 3rem;
|
|
background-color: var(--col-red-bg);
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
margin: 0 0 1rem 0;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.card-title h2 {
|
|
font-size: 1.5rem;
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.card-title h2:first-of-type {
|
|
z-index: 1;
|
|
font-size: 1.5rem;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
width: 30%;
|
|
border-radius: 0.25rem 0 0 0;
|
|
background-color: var(--col-red-bg);
|
|
}
|
|
|
|
.card-title h2:last-of-type {
|
|
opacity: 80%;
|
|
font-weight: 400;
|
|
width: 70%;
|
|
background-color: var(--col-dark-bg);
|
|
text-align: right;
|
|
}
|
|
|
|
.card-content {
|
|
align-items: start;
|
|
margin: 2rem 0;
|
|
flex-direction: row-reverse;
|
|
width: 100%;
|
|
}
|
|
|
|
.card-details {
|
|
display: flex;
|
|
justify-content: start;
|
|
flex-direction: column;
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.card-screenshot-container {
|
|
width: 50%;
|
|
}
|
|
|
|
.release-card img {
|
|
height: 20rem;
|
|
border-radius: 0.25rem;
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.card-details ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 80%;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.card-btn-container {
|
|
width: 50%;
|
|
flex-wrap: wrap;
|
|
justify-content: start;
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
width: 38rem;
|
|
}
|
|
|
|
.card-btn-container .btn {
|
|
margin: 0.5rem;
|
|
justify-content: center;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
padding: 1.5em 1rem;
|
|
height: 2.75rem;
|
|
width: 10rem;
|
|
}
|
|
|
|
.card-btn-container .btn img {
|
|
width: 1.5rem;
|
|
box-shadow: unset;
|
|
}
|
|
}
|
|
|
|
/* EXCHANGES SECTION */
|
|
@media screen {
|
|
#exchanges {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/* GUIDES SECTION */
|
|
|
|
@media screen {
|
|
#guides .btn{
|
|
font-size: 2rem;
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
#guides h3 {
|
|
margin: 0rem 0;
|
|
padding: 0;
|
|
font-size: 2rem;
|
|
}
|
|
#guides .card div {
|
|
margin: 0;
|
|
padding: 2rem 0;
|
|
position: relative;
|
|
flex-direction: column;
|
|
}
|
|
#guides .card div img{
|
|
width: 100%;
|
|
max-height: unset;
|
|
min-height: unset;
|
|
margin-bottom: 1rem;
|
|
|
|
}
|
|
#guides .card div p{
|
|
width: 100%;
|
|
margin: 0 1rem;
|
|
text-align: left;
|
|
}
|
|
#guides .card{
|
|
max-width: unset;
|
|
width: 40rem;
|
|
}
|
|
|
|
}
|
|
|
|
@media (min-width: 1180px) {
|
|
#guides .btn{
|
|
font-size: 2rem;
|
|
margin: 0;
|
|
}
|
|
#guides .card div {
|
|
flex-direction: row;
|
|
}
|
|
#guides .card div img{
|
|
margin: 0;
|
|
width: 45%;
|
|
}
|
|
#guides .card div p{
|
|
width: 45%;
|
|
}
|
|
}
|
|
|
|
/* MINING SECTION */
|
|
@media screen {
|
|
#mining > div {
|
|
background-color: var(--col-red-bg);
|
|
backdrop-filter: blur(20px);
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
padding: 0 0 2rem 0;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
#mining h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
#mining h4 {
|
|
font-size: 1.25rem;
|
|
text-align: left;
|
|
margin: 2rem auto 0 auto;
|
|
opacity: 100%;
|
|
}
|
|
|
|
#mining p {
|
|
font-size: 1rem;
|
|
width: 90%;
|
|
text-align: left;
|
|
margin: 2rem auto 2rem auto;
|
|
opacity: 80%;
|
|
}
|
|
|
|
#mining a {
|
|
text-decoration: underline;
|
|
color: var(--col-btn-red);
|
|
}
|
|
|
|
.how-to-gif {
|
|
display: block;
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1180px) {
|
|
#mining > div {
|
|
background-color: var(--col-red-bg);
|
|
backdrop-filter: blur(20px);
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
padding: 0 0 2rem 0;
|
|
margin: 2rem 0;
|
|
width: 70rem;
|
|
}
|
|
#mining img {
|
|
width: 50rem;
|
|
margin: 2rem auto;
|
|
}
|
|
#mining p,
|
|
#mining h4 {
|
|
text-align: center;
|
|
}
|
|
#mining p {
|
|
font-size: 1.25rem;
|
|
margin: 4rem auto;
|
|
}
|
|
}
|
|
|
|
/* EXPLORER SECTIONS */
|
|
@media screen {
|
|
|
|
|
|
|
|
|
|
.explorer-content {
|
|
width: 22rem;
|
|
margin: 0 auto;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
background-color:rgba(24, 24, 24, 0.5);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 0.25rem;
|
|
padding: 5rem .5rem .5rem .5rem;
|
|
}
|
|
|
|
.explorer-title {
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.explorer-title h3 {
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
background-color: var(--col-red-bg);
|
|
padding: 1rem;
|
|
height: 2rem;
|
|
margin: 0;
|
|
border-radius: 0 0 0.25rem 0;
|
|
}
|
|
|
|
.explorer-title div {
|
|
flex-direction: column;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
background-color: var(--col-red-bg);
|
|
border-radius: 0.25rem;
|
|
height: 3rem;
|
|
top: .5rem;
|
|
right: .5rem;
|
|
position: absolute;
|
|
}
|
|
.explorer-title div p {
|
|
margin: 0;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.explorer-inner-content {
|
|
display: flex;
|
|
justify-content: start;
|
|
flex-wrap: wrap;
|
|
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
background-color: var(--col-red-bg);
|
|
border-radius: 0.25rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.line1 {
|
|
fill: none;
|
|
stroke: green;
|
|
stroke-width: 3px;
|
|
}
|
|
.line2 {
|
|
fill: none;
|
|
stroke: rgb(255, 102, 0);
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
.graph {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.graph g text {
|
|
fill: var(--col-btn-red);
|
|
}
|
|
.graph g line,
|
|
.graph .domain {
|
|
stroke: var(--col-btn-red);
|
|
}
|
|
|
|
.explorer-1 {
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
width: 34rem;
|
|
height: 22rem;
|
|
margin: 1rem 1rem 0 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.explorer-1 p {
|
|
box-sizing: border-box;
|
|
line-height: 1.75rem;
|
|
padding: 0 1rem;
|
|
margin: 0;
|
|
background-color: rgba(20, 20, 20, 0.75);
|
|
}
|
|
|
|
.explorer-1 > div:nth-child(1) p:nth-child(odd) {
|
|
height: 100%;
|
|
border: 0.15rem solid rgba(0, 128, 0, 0.5);
|
|
|
|
border-radius: 0.15rem 0 0 0.15rem;
|
|
border-right: 0.05rem solid rgba(0, 128, 0, 0.5);
|
|
}
|
|
.explorer-1 > div:nth-child(1) p:nth-child(even) {
|
|
height: 100%;
|
|
border: 0.15rem solid rgba(0, 128, 0, 0.5);
|
|
|
|
border-radius: 0 0.15rem 0.15rem 0;
|
|
border-left: 0.05rem solid rgba(0, 128, 0, 0.5);
|
|
}
|
|
.explorer-1 > div:nth-child(1) > div:nth-child(2) p:nth-child(odd) {
|
|
height: 100%;
|
|
border: 0.15rem solid rgba(255, 102, 0, 0.5);
|
|
|
|
border-radius: 0.15rem 0 0 0.15rem;
|
|
border-right: 0.05rem solid rgba(255, 102, 0, 0.5);
|
|
}
|
|
.explorer-1 > div:nth-child(1) > div:nth-child(2) p:nth-child(even) {
|
|
height: 100%;
|
|
border: 0.15rem solid rgba(255, 102, 0, 0.5);
|
|
|
|
border-radius: 0 0.15rem 0.15rem 0;
|
|
|
|
border-left: 0.05rem solid rgba(255, 102, 0, 0.5);
|
|
}
|
|
|
|
.explorer-1 > div:nth-child(1) div:nth-child(1) {
|
|
height: 2rem;
|
|
position: absolute;
|
|
bottom: 4.5rem;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
|
|
border-radius: 0.25rem;
|
|
}
|
|
.explorer-1 > div:nth-child(1) div:nth-child(2) {
|
|
height: 2rem;
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
#graphContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
background-color: var(--col-dark-bg);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
|
|
.explorer-2,
|
|
.explorer-3 {
|
|
width: 18rem;
|
|
height: 24rem;
|
|
margin: 3rem auto;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.explorer-2 div ,
|
|
.explorer-3 div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
box-sizing: border-box;
|
|
margin: .5rem;
|
|
border-radius: .25rem;
|
|
padding: .5rem 1rem;
|
|
}
|
|
.explorer-2 p ,
|
|
.explorer-3 p {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.explorer-3 {
|
|
width: 18rem;
|
|
margin: 0 auto 2rem auto;
|
|
height: 12rem;
|
|
}
|
|
.explorer-4 {
|
|
width: 18rem;
|
|
margin: 0 auto;
|
|
height: 12rem;
|
|
}
|
|
.explorer-4 a{
|
|
outline-width: .2rem;
|
|
font-size: 3.5rem;
|
|
padding: 1rem 2rem;
|
|
background-color: rgba(20, 20, 20, 0.75);
|
|
}
|
|
|
|
.explorer-footer {
|
|
flex-direction: column;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
background-color: var(--col-red-bg);
|
|
width: 18rem;
|
|
margin: 0 auto;
|
|
height: 8rem;
|
|
margin: 1rem 0 0 0;
|
|
padding: 0 2rem;
|
|
justify-content: space-between;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.explorer-footer p {
|
|
font-size: .75rem;
|
|
padding: 0 .25rem;
|
|
}
|
|
|
|
.explorer-blocks-bar {
|
|
width: 90%;
|
|
height: fit-content;
|
|
margin: 0 auto;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
background-color: var(--col-red-bg);
|
|
background-color: rgba(22, 22, 22, 0.5);
|
|
position: relative;
|
|
justify-content: start;
|
|
padding: 0 1rem;
|
|
padding-top: 5rem;
|
|
padding-bottom: 1rem;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.explorer-blocks-bar a {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.back-btn,
|
|
.explorer-btn {
|
|
font-size: 1.5rem;
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 1rem;
|
|
padding: .5rem 2rem;
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
outline: .15rem solid var(--col-btn-red);
|
|
border-radius: .5rem;
|
|
}
|
|
.back-btn:hover,
|
|
.explorer-btn:hover {
|
|
position: absolute;
|
|
padding: .5rem 2rem;
|
|
background-color: var(--col-red-bg-50);
|
|
transform: scale(1.05);
|
|
}
|
|
.explorer-btn {
|
|
left: unset;
|
|
right: 1rem;
|
|
}
|
|
.block-title {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 1rem;
|
|
font-size: 2rem;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.block-card {
|
|
|
|
width: 100%;
|
|
padding: 1rem;
|
|
padding-bottom: 3rem;
|
|
padding-bottom: 2rem;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
box-sizing: border-box;
|
|
background-color: var(--col-red-bg);
|
|
background-color: rgba(12, 12, 12, 0.5);
|
|
margin: .5rem 0;
|
|
}
|
|
|
|
.block-card div:nth-child(1) {
|
|
width: 100%;
|
|
height: 12rem;
|
|
flex-direction: column;
|
|
|
|
}
|
|
.block-height {
|
|
width: 20%;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
outline: .15rem solid var(--col-btn-red);
|
|
margin-bottom: .45rem;
|
|
}
|
|
.block-height:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
.explorer-blocks-bar div:nth-child(1) div {
|
|
position: relative;
|
|
width: 80%;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
.block-hash,
|
|
.address-reward {
|
|
display: flex;
|
|
width: calc(100% - 1rem);
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
height: 2rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
margin: 0 0 0 1rem;
|
|
margin: .5rem 0 .5rem 0rem;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
border-radius: 0.25rem;
|
|
font-size: .75rem;
|
|
}
|
|
|
|
.block-hash {
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
outline: .15rem solid var(--col-btn-red);
|
|
font-size: .55rem;
|
|
|
|
}
|
|
.block-hash:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
|
|
.address-reward {
|
|
top: unset;
|
|
bottom: 0;
|
|
}
|
|
|
|
.block-card div:nth-child(2) {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 5rem;
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
.block-card div:nth-child(2) div:nth-child(1){
|
|
margin: 0;
|
|
position: relative;
|
|
height: 3rem;
|
|
width: 20%;
|
|
width: 100%;
|
|
|
|
}
|
|
.block-card div:nth-child(2) div:nth-child(2){
|
|
margin: 0;
|
|
position: relative;
|
|
flex-direction: column;
|
|
width: 80%;
|
|
width: 100%;
|
|
|
|
height: 3rem;
|
|
}
|
|
|
|
.block-time {
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
width: 10%;
|
|
width: 100%;
|
|
margin-left: 12%;
|
|
margin-left: unset;
|
|
height: 2rem;
|
|
padding: 0 2rem;
|
|
padding: 0 0;
|
|
border-radius: .25rem;
|
|
top: 1rem;
|
|
top: unset;
|
|
position: absolute;
|
|
position: relative;
|
|
right: 0;
|
|
right: unset;
|
|
margin-bottom: 1rem;
|
|
|
|
}
|
|
|
|
.block-date,
|
|
.tx-count {
|
|
height: 2rem;
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
width: 40%;
|
|
width: 100%;
|
|
position: absolute;
|
|
position: relative;
|
|
left: 1rem;
|
|
left: unset;
|
|
top: 1rem;
|
|
top: unset;
|
|
border-radius: .25rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.tx-count {
|
|
left: unset;
|
|
right: 0;
|
|
margin: .5rem 0 0 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.explorer-block-bar {
|
|
width: 90%;
|
|
height: fit-content;
|
|
margin: 0 auto;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
background-color: var(--col-red-bg);
|
|
background-color: rgba(22, 22, 22, 0.5);
|
|
position: relative;
|
|
justify-content: start;
|
|
padding: 0 1rem;
|
|
padding-top: 8rem;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.explorer-block-bar .block-title {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
|
|
.block-info-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
margin: 0;
|
|
flex-wrap: wrap;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.block-info-card > div {
|
|
width: 100%;
|
|
}
|
|
|
|
.block-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
height: 4rem;
|
|
box-sizing: border-box;
|
|
margin: .5rem 0;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
|
|
.main-info,
|
|
.hash-info {
|
|
flex-direction: column;
|
|
height: fit-content;
|
|
padding: 0rem 0rem;
|
|
box-sizing: border-box;
|
|
justify-content: start;
|
|
}
|
|
|
|
|
|
|
|
.main-info > div:nth-child(2) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.main-info > div:nth-child(2) > div:nth-child(1){
|
|
flex-direction: column;
|
|
width: 100%;
|
|
/* height: 100%; */
|
|
position: absolute;
|
|
position: relative;
|
|
height: fit-content;
|
|
|
|
top: 0;
|
|
top: unset;
|
|
}
|
|
.main-info > div:nth-child(2) > div:nth-child(2){
|
|
flex-direction: column;
|
|
width: 100%;
|
|
|
|
position: absolute;
|
|
position: relative;
|
|
height: fit-content;
|
|
|
|
bottom: 0;
|
|
bottom: unset;
|
|
}
|
|
|
|
.block-info.height {
|
|
width: 100%;
|
|
height: 6rem;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.block-info.height p {
|
|
font-size: 1.25rem;
|
|
position: absolute;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: var(--col-red-bg-50);
|
|
top: 0rem;
|
|
left: 0rem;
|
|
padding: .25rem 1.5rem;
|
|
border-radius: .25rem 0 .25rem 0;
|
|
|
|
}
|
|
.block-info.height a {
|
|
text-align: center;
|
|
line-height: 8rem;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
font-size: 1.5rem;
|
|
|
|
}
|
|
.block-info.height a:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
|
|
.block-info.main {
|
|
height: 4rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.block-info p {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
}
|
|
.block-info p:last-child {
|
|
font-size: .8rem;
|
|
|
|
}
|
|
|
|
|
|
.hash-info {
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.hash-info .block-info {
|
|
width: 100%;
|
|
position: relative;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
|
|
}
|
|
.hash-info .block-info p {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: .25rem 1rem;
|
|
|
|
border-radius: .25rem 0 .25rem 0;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
.hash-info .block-info a {
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
margin: auto;
|
|
line-height: 6rem;
|
|
letter-spacing: .125rem;
|
|
font-weight: 200;
|
|
font-size: .8rem;
|
|
}
|
|
.hash-info .block-info a:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
|
|
.adv-info {
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.adv-info .block-info{
|
|
width: 100%;
|
|
|
|
}
|
|
.adv-info .block-info p:nth-child(1){
|
|
padding-bottom: .25rem;
|
|
}
|
|
.adv-info .block-info p:nth-child(2){
|
|
letter-spacing: .125rem;
|
|
font-weight: 200;
|
|
padding-top: .25rem;
|
|
}
|
|
|
|
.hash-info .block-info a,
|
|
.adv-info .block-info p:nth-child(2) {
|
|
font-size: .52rem;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
|
|
.transaction {
|
|
outline: .15rem solid var(--col-red-outline);
|
|
border-radius: .5rem;
|
|
position: relative;
|
|
padding: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tx-title {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 1rem;
|
|
margin: 0;
|
|
/* outline: .15rem solid white; */
|
|
border-bottom: .15rem solid var(--col-red-bg-50);
|
|
border-right: .15rem solid var(--col-red-bg-50);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-sizing: border-box;
|
|
padding: .5rem 1rem;
|
|
border-radius: .25rem 0 .25rem 0;
|
|
font-size: 1.25rem;
|
|
}
|
|
.shielded {
|
|
|
|
background-color: var(--shielded-bg);
|
|
padding: .5rem 1rem;
|
|
font-size: 1.5rem;
|
|
position: absolute;
|
|
left: unset;
|
|
right: 1rem;
|
|
top: 1rem;
|
|
border-radius: 0 .25rem 0 .25rem ;
|
|
border-bottom: .15rem solid var(--shielded-col);
|
|
border-left: .15rem solid var(--shielded-col);
|
|
box-sizing: border-box;
|
|
font-size: 1.25rem;
|
|
}
|
|
.tx-reward{
|
|
position: absolute;
|
|
border: .15rem solid var(--col-red-bg-50);
|
|
border-right: none;
|
|
box-sizing: border-box;
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
right: 1rem;
|
|
top: 6.25rem;
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1.5rem;
|
|
border-radius: 1rem 0 0 1rem;
|
|
}
|
|
|
|
.tx-time {
|
|
position: absolute;
|
|
top: 4.25rem;
|
|
text-align: center;
|
|
width: 16rem;
|
|
}
|
|
.tx-info {
|
|
outline: .15rem solid var(--tx-outline);
|
|
background-color: var(--col-red-bg);
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: .25rem;
|
|
position: relative;
|
|
}
|
|
.tx-info > div:nth-child(1) {
|
|
position: relative;
|
|
margin: 9.5rem 0 0 0;
|
|
}
|
|
|
|
.tx-id-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: start;
|
|
width: 90%;
|
|
margin: 1rem 0;
|
|
border-radius: .25rem;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
position: relative;
|
|
height: 3.5rem;
|
|
}
|
|
.tx-id-bar p{
|
|
margin: .25rem 0 0 0;
|
|
|
|
}
|
|
.tx-id-bar a,
|
|
.tx-id-bar p:nth-child(2){
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
line-height: 4.75rem;
|
|
/* letter-spacing: .125rem; */
|
|
font-weight: 200;
|
|
font-size: .85rem;
|
|
|
|
}
|
|
.tx-id-bar a {
|
|
font-size: .5rem;
|
|
}
|
|
|
|
.tx-id-bar a:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
|
|
.tx-id-bar:nth-child(2) {
|
|
outline: .15rem solid var(--col-red-bg-50);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
.tx-info > div:nth-child(2) {
|
|
flex-direction: column;
|
|
padding: 0 1rem;
|
|
}
|
|
.tx-in-out {
|
|
margin: 0 1rem 1rem 1rem;
|
|
padding: 0 1rem;
|
|
outline: .15rem solid var(--col-red-bg-50);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
border-radius: .25rem;
|
|
}
|
|
.tx-in-out div {
|
|
margin: 0 .5rem;
|
|
padding: .5rem 0;
|
|
|
|
}
|
|
.tx-in-out div p {
|
|
margin: 0 .5rem;
|
|
}
|
|
|
|
#tx-info {
|
|
width: 100%;
|
|
|
|
}
|
|
#tx-info .back-btn,
|
|
#tx-info .explorer-btn {
|
|
font-size: 1rem;
|
|
padding: .5rem .5rem;
|
|
width: 5rem;
|
|
text-align: center;
|
|
}
|
|
#tx-info .back-btn:nth-child(2) {
|
|
left: unset;
|
|
right: unset;
|
|
|
|
|
|
}
|
|
|
|
.tx-info-bar {
|
|
width: 90%;
|
|
height: 100%;
|
|
outline: .15rem solid var(--col-red-outline);
|
|
margin: 0 auto;
|
|
position: relative;
|
|
background-color: rgba(22, 22, 22, 0.5);
|
|
border-radius: .25rem;
|
|
backdrop-filter: blur(20px);
|
|
padding: 2rem;
|
|
padding-top: 6rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tx-info-bar > div {
|
|
outline: .15rem solid var(--col-red-outline);
|
|
border-radius: .25rem;
|
|
background-color: rgba(22, 22, 22, 0.25);
|
|
padding: 0rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
height: 4rem;
|
|
margin: .5rem 0;
|
|
|
|
}
|
|
|
|
.tx-info-bar div p {
|
|
margin: .25rem 0 0 0;
|
|
}
|
|
|
|
.tx-info-hash p {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: .25rem 1rem;
|
|
margin: 0 !important;
|
|
border-radius: .25rem 0 .25rem 0;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
.tx-info-hash a {
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
margin: auto;
|
|
line-height: 6rem;
|
|
letter-spacing: .125rem;
|
|
font-weight: 200;
|
|
font-size: .8rem;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.tx-info-hash a:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
|
|
.tx-transaction {
|
|
height: fit-content !important;
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
|
|
.tx-info-main.tx-id {
|
|
padding: 0 .5rem;
|
|
height: 5rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tx-id-text {
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1180px) {
|
|
|
|
.explorer-content {
|
|
width: 70rem;
|
|
margin: 0 auto;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
background-color:rgba(24, 24, 24, 0.5);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 0.25rem;
|
|
padding: 5rem .5rem .5rem .5rem;
|
|
}
|
|
|
|
.explorer-title {
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.explorer-title h3 {
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
background-color: var(--col-red-bg);
|
|
padding: 1rem;
|
|
height: 2rem;
|
|
margin: 0;
|
|
border-radius: 0 0 0.25rem 0;
|
|
}
|
|
|
|
.explorer-title div {
|
|
flex-direction: column;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
background-color: var(--col-red-bg);
|
|
border-radius: 0.25rem;
|
|
height: 3rem;
|
|
top: .5rem;
|
|
right: .5rem;
|
|
position: absolute;
|
|
}
|
|
.explorer-title div p {
|
|
margin: 0;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.explorer-inner-content {
|
|
display: flex;
|
|
justify-content: start;
|
|
flex-wrap: wrap;
|
|
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
background-color: var(--col-red-bg);
|
|
border-radius: 0.25rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.line1 {
|
|
fill: none;
|
|
stroke: green;
|
|
stroke-width: 3px;
|
|
}
|
|
.line2 {
|
|
fill: none;
|
|
stroke: rgb(255, 102, 0);
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
.graph {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.graph g text {
|
|
fill: var(--col-btn-red);
|
|
}
|
|
.graph g line,
|
|
.graph .domain {
|
|
stroke: var(--col-btn-red);
|
|
}
|
|
|
|
.explorer-1 {
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
width: 34rem;
|
|
height: 22rem;
|
|
margin: 1rem 1rem 0 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.explorer-1 p {
|
|
box-sizing: border-box;
|
|
line-height: 1.75rem;
|
|
padding: 0 1rem;
|
|
margin: 0;
|
|
background-color: rgba(20, 20, 20, 0.75);
|
|
}
|
|
|
|
.explorer-1 > div:nth-child(1) p:nth-child(odd) {
|
|
height: 100%;
|
|
border: 0.15rem solid rgba(0, 128, 0, 0.5);
|
|
|
|
border-radius: 0.15rem 0 0 0.15rem;
|
|
border-right: 0.05rem solid rgba(0, 128, 0, 0.5);
|
|
}
|
|
.explorer-1 > div:nth-child(1) p:nth-child(even) {
|
|
height: 100%;
|
|
border: 0.15rem solid rgba(0, 128, 0, 0.5);
|
|
|
|
border-radius: 0 0.15rem 0.15rem 0;
|
|
border-left: 0.05rem solid rgba(0, 128, 0, 0.5);
|
|
}
|
|
.explorer-1 > div:nth-child(1) > div:nth-child(2) p:nth-child(odd) {
|
|
height: 100%;
|
|
border: 0.15rem solid rgba(255, 102, 0, 0.5);
|
|
|
|
border-radius: 0.15rem 0 0 0.15rem;
|
|
border-right: 0.05rem solid rgba(255, 102, 0, 0.5);
|
|
}
|
|
.explorer-1 > div:nth-child(1) > div:nth-child(2) p:nth-child(even) {
|
|
height: 100%;
|
|
border: 0.15rem solid rgba(255, 102, 0, 0.5);
|
|
|
|
border-radius: 0 0.15rem 0.15rem 0;
|
|
|
|
border-left: 0.05rem solid rgba(255, 102, 0, 0.5);
|
|
}
|
|
|
|
.explorer-1 > div:nth-child(1) div:nth-child(1) {
|
|
height: 2rem;
|
|
position: absolute;
|
|
bottom: 4.5rem;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
|
|
border-radius: 0.25rem;
|
|
}
|
|
.explorer-1 > div:nth-child(1) div:nth-child(2) {
|
|
height: 2rem;
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
#graphContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
background-color: var(--col-dark-bg);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
|
|
.explorer-2,
|
|
.explorer-3 {
|
|
width: 18rem;
|
|
height: 22rem;
|
|
margin: 1rem 0 0 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.explorer-2 {
|
|
width: calc(100% - 36rem);
|
|
}
|
|
|
|
.explorer-2 div ,
|
|
.explorer-3 div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
box-sizing: border-box;
|
|
margin: .5rem;
|
|
border-radius: .25rem;
|
|
padding: .5rem 1rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
|
|
|
|
.explorer-2 p ,
|
|
.explorer-3 p {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.explorer-3 {
|
|
width: 34rem;
|
|
margin: 1rem;
|
|
height: 12rem;
|
|
}
|
|
.explorer-4 {
|
|
width: 18rem;
|
|
margin: 0 auto;
|
|
height: 12rem;
|
|
}
|
|
.explorer-4 a{
|
|
outline-width: .2rem;
|
|
font-size: 3.5rem;
|
|
padding: 1rem 2rem;
|
|
background-color: rgba(20, 20, 20, 0.75);
|
|
}
|
|
|
|
.explorer-footer {
|
|
flex-direction: row;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
background-color: var(--col-red-bg);
|
|
width: 60rem;
|
|
margin: 0 auto;
|
|
height: 1.5rem;
|
|
margin: 1rem 0 0 0;
|
|
padding: 0 2rem;
|
|
justify-content: space-between;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.explorer-footer p {
|
|
font-size: .75rem;
|
|
padding: 0 .25rem;
|
|
}
|
|
|
|
|
|
#blocks,
|
|
#explorer-block-section {
|
|
min-height: fit-content;
|
|
}
|
|
|
|
|
|
|
|
.explorer-blocks-bar {
|
|
width: 60%;
|
|
height: fit-content;
|
|
margin: 0 auto;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
background-color: rgba(22, 22, 22, 0.5);
|
|
position: relative;
|
|
justify-content: start;
|
|
padding: 0 1rem;
|
|
padding-top: 4.75rem;
|
|
padding-bottom: 1rem;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.explorer-blocks-bar a {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.back-btn,
|
|
.explorer-btn {
|
|
font-size: 1.5rem;
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 1rem;
|
|
padding: .5rem 2rem;
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
outline: .15rem solid var(--col-btn-red);
|
|
border-radius: .5rem;
|
|
}
|
|
.back-btn:hover,
|
|
.explorer-btn:hover {
|
|
position: absolute;
|
|
padding: .5rem 2rem;
|
|
background-color: var(--col-red-bg-50);
|
|
transform: scale(1.05);
|
|
}
|
|
.explorer-btn {
|
|
left: unset;
|
|
right: 1rem;
|
|
}
|
|
.block-title {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 1rem;
|
|
font-size: 2rem;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.block-card {
|
|
|
|
width: 100%;
|
|
padding: 1rem;
|
|
padding-bottom: 1rem;
|
|
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
box-sizing: border-box;
|
|
|
|
background-color: rgba(12, 12, 12, 0.5);
|
|
}
|
|
|
|
.block-card div:nth-child(1) {
|
|
width: 100%;
|
|
height: 5.5rem;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
}
|
|
.block-height {
|
|
width: 20%;
|
|
|
|
height: 100%;
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
outline: .15rem solid var(--col-btn-red);
|
|
/* margin-bottom: .45rem; */
|
|
margin: 0;
|
|
}
|
|
.block-height:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
.explorer-blocks-bar div:nth-child(1) div {
|
|
position: relative;
|
|
width: 80%;
|
|
height: 100%;
|
|
margin: 0 0 0 1rem;
|
|
}
|
|
.block-hash,
|
|
.address-reward {
|
|
display: flex;
|
|
|
|
width: calc(100% - 1rem);
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
height: 2rem;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.block-hash {
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
outline: .15rem solid var(--col-btn-red);
|
|
top: 0;
|
|
bottom: unset;
|
|
|
|
}
|
|
.block-hash:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
|
|
.address-reward {
|
|
top: unset;
|
|
bottom: 0;
|
|
}
|
|
|
|
|
|
.block-card div:nth-child(2) {
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 4rem;
|
|
|
|
|
|
|
|
}
|
|
.block-card div:nth-child(2) div:nth-child(1){
|
|
margin: 0;
|
|
position: relative;
|
|
|
|
height: 3rem;
|
|
width: 20%;
|
|
|
|
|
|
}
|
|
.block-card div:nth-child(2) div:nth-child(2){
|
|
margin: 0;
|
|
position: relative;
|
|
flex-direction: row;
|
|
width: 80%;
|
|
margin: 0 0 0 1rem;
|
|
|
|
height: 3rem;
|
|
}
|
|
|
|
.block-time {
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
width: 10%;
|
|
|
|
/* margin-left: 12%; */
|
|
|
|
height: 2rem;
|
|
padding: 0 2rem;
|
|
|
|
border-radius: .25rem;
|
|
top: 0;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
/* margin-bottom: 1rem; */
|
|
|
|
}
|
|
|
|
.block-date,
|
|
.tx-count {
|
|
height: 2rem;
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
width: 40%;
|
|
|
|
position: absolute;
|
|
|
|
left: 0rem;
|
|
|
|
bottom: 0rem;
|
|
margin: 0;
|
|
border-radius: .25rem;
|
|
|
|
}
|
|
|
|
.tx-count {
|
|
left: unset;
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.explorer-block-bar {
|
|
width: 70%;
|
|
height: fit-content;
|
|
margin: 0 auto;
|
|
outline: 0.15rem solid var(--col-red-outline);
|
|
border-radius: 0.25rem;
|
|
background-color: var(--col-red-bg);
|
|
background-color: rgba(22, 22, 22, 0.5);
|
|
position: relative;
|
|
justify-content: start;
|
|
padding: 0 1rem;
|
|
padding-top: 0;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
|
|
|
|
.block-info-card {
|
|
flex-direction: column;
|
|
padding: .5rem;
|
|
margin: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.block-info-card > div {
|
|
width: 100%;
|
|
}
|
|
|
|
.block-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
outline: 0.15rem solid var(--col-red-bg-50);
|
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
|
|
height: 4rem;
|
|
box-sizing: border-box;
|
|
margin: .5rem;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.main-info,
|
|
.hash-info {
|
|
flex-direction: row;
|
|
height: 10rem;
|
|
padding: 1rem .5rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
|
|
.main-info > div:nth-child(2) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 70%;
|
|
height: 100%;
|
|
|
|
padding: 0;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
.main-info > div:nth-child(2) > div:nth-child(1){
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
height: 40%;
|
|
|
|
top: 0;
|
|
}
|
|
.main-info > div:nth-child(2) > div:nth-child(2){
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
height: 40%;
|
|
|
|
bottom: 0;
|
|
}
|
|
|
|
.block-info.height {
|
|
width: 30%;
|
|
height: 100%;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
position: relative;
|
|
}
|
|
|
|
.block-info.height p {
|
|
font-size: 1.25rem;
|
|
position: absolute;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: var(--col-red-bg-50);
|
|
top: 0rem;
|
|
left: 0rem;
|
|
padding: .25rem 1.5rem;
|
|
border-radius: .25rem 0 .25rem 0;
|
|
|
|
}
|
|
.block-info.height a {
|
|
text-align: center;
|
|
line-height: 8rem;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
font-size: 1.5rem;
|
|
|
|
}
|
|
.block-info.height a:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
|
|
.block-info.main {
|
|
height: 100%;
|
|
width: 33%;
|
|
|
|
}
|
|
|
|
.block-info p {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
.hash-info {
|
|
flex-direction: row;
|
|
height: 5rem;
|
|
padding: 0 .5rem;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.hash-info .block-info {
|
|
width: 100%;
|
|
position: relative;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
}
|
|
.hash-info .block-info p {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: .25rem 1rem;
|
|
|
|
border-radius: .25rem 0 .25rem 0;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
.hash-info .block-info a {
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
margin: auto;
|
|
line-height: 6rem;
|
|
letter-spacing: .125rem;
|
|
font-weight: 200;
|
|
}
|
|
.hash-info .block-info a:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
|
|
.adv-info {
|
|
padding: 0 4rem;
|
|
box-sizing: border-box;
|
|
}
|
|
.adv-info .block-info{
|
|
width: 100%;
|
|
|
|
}
|
|
.adv-info .block-info p:nth-child(1){
|
|
padding-bottom: .25rem;
|
|
}
|
|
.adv-info .block-info p:nth-child(2){
|
|
letter-spacing: .125rem;
|
|
font-weight: 200;
|
|
padding-top: .25rem;
|
|
}
|
|
|
|
.transaction {
|
|
outline: .15rem solid var(--col-red-outline);
|
|
border-radius: .5rem;
|
|
position: relative;
|
|
padding: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tx-title {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 1rem;
|
|
margin: 0;
|
|
/* outline: .15rem solid white; */
|
|
border-bottom: .15rem solid var(--col-red-bg-50);
|
|
border-right: .15rem solid var(--col-red-bg-50);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-sizing: border-box;
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
padding: .5rem 1rem;
|
|
border-radius: .25rem 0 .25rem 0;
|
|
}
|
|
.shielded {
|
|
border: .15rem solid var(--shielded-col);
|
|
border-top :none;
|
|
box-sizing: border-box;
|
|
background-color: var(--shielded-bg);
|
|
padding: .5rem 1rem;
|
|
font-size: 1.5rem;
|
|
position: absolute;
|
|
left: 12rem;
|
|
right: unset;
|
|
top: 1rem;
|
|
border-radius: .0 0 .25rem .25rem;
|
|
}
|
|
.tx-reward{
|
|
position: absolute;
|
|
border: .15rem solid var(--col-red-bg-50);
|
|
border-right: none;
|
|
box-sizing: border-box;
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
right: 1rem;
|
|
top: 2rem;
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1.75rem;
|
|
border-radius: 1rem 0 0 1rem;
|
|
}
|
|
|
|
.tx-time {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 4.75rem;
|
|
text-align: center;
|
|
width: 16rem;
|
|
}
|
|
.tx-info {
|
|
outline: .15rem solid var(--tx-outline);
|
|
background-color: var(--col-red-bg);
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: .25rem;
|
|
position: relative;
|
|
}
|
|
.tx-info > div:nth-child(1) {
|
|
position: relative;
|
|
margin: 6rem 0 0 0;
|
|
/* outline: .1rem solid blue; */
|
|
}
|
|
|
|
.tx-id-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: start;
|
|
width: 90%;
|
|
margin: 1rem 0;
|
|
border-radius: .25rem;
|
|
outline: .15rem solid var(--col-btn-red);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: 0 0 1rem var(--col-red-outline);
|
|
position: relative;
|
|
height: 3.5rem;
|
|
}
|
|
.tx-id-bar p{
|
|
margin: .25rem 0 0 0;
|
|
}
|
|
.tx-id-bar a,
|
|
.tx-id-bar p:nth-child(2){
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
line-height: 4.75rem;
|
|
letter-spacing: .125rem;
|
|
font-weight: 200;
|
|
}
|
|
.tx-id-bar a:hover {
|
|
background-color: var(--col-red-bg-50);
|
|
}
|
|
|
|
.tx-id-bar:nth-child(2) {
|
|
outline: .15rem solid var(--col-red-bg-50);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
.tx-info > div:nth-child(2) {
|
|
|
|
}
|
|
.tx-in-out {
|
|
margin: 0 1rem 1rem 1rem;
|
|
padding: 0 1rem;
|
|
outline: .15rem solid var(--col-red-bg-50);
|
|
background-color: rgba(20, 20, 20, 0.5);
|
|
border-radius: .25rem;
|
|
}
|
|
.tx-in-out div {
|
|
margin: 0 1rem;
|
|
padding: .5rem 0;
|
|
|
|
}
|
|
.tx-in-out div p {
|
|
margin: 0 .5rem;
|
|
}
|
|
|
|
|
|
}
|