Blockchain explorer for Ethereum based network and a tool for inspecting and analyzing EVM based blockchains.
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.
 
 
 
 
 
blockscout/apps/explorer_web/assets/css/components/_dashboard-banner.scss

127 lines
2.3 KiB

.dashboard-banner-container {
position: relative;
margin-top: -3rem;
background-color: $white;
box-shadow: 0 5px 40px -5px rgba($black, 0.25);
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 68px;
background-color: $white;
box-shadow: 0 0 40px -5px rgba($black, 0.25);
}
&:after {
content: "";
display: block;
position: absolute;
top: 3rem;
right: 0;
bottom: 0;
left: 70%;
background-color: $primary;
box-shadow: 0 0 40px -5px rgba($black, 0.25);
@media (max-width: 992px) {
top: 2rem;
left: 80%;
}
}
}
.dashboard-banner {
position: relative;
display: grid;
grid-template-rows: 3rem 2fr 1fr;
grid-template-columns: 1fr 4fr;
grid-template-areas:
"chart ."
"chart stats"
"legend stats";
margin-top: -1rem;
margin-bottom: 3rem;
z-index: 10;
@media (max-width: 992px) {
grid-template-rows: 2rem auto;
grid-template-columns: auto;
}
}
.dashboard-banner-chart {
grid-area: chart;
// 15px padding matches the Bootstarp conatiner padding.
padding: 1rem 1rem 1rem 0;
}
.dashboard-banner-chart-legend {
grid-area: legend;
display: flex;
// 15px padding matches the Bootstarp conatiner padding.
padding: 1rem 1rem;
&-item {
padding-left: 0.5rem;
flex-grow: 1;
&:first-of-type {
border-left: 4px solid $secondary;
}
&:last-of-type {
border-left: 4px solid $primary;
}
}
&-label {
display: block;
color: $text-muted;
}
&-value {
display: block;
}
}
.dashboard-banner-network-stats {
grid-area: stats;
display: flex;
align-items: center;
justify-content: space-around;
// 15px padding matches the Bootstarp conatiner padding.
padding-right: 15px;
background-color: $primary;
box-shadow: -10px 0 15px 0 rgba($black, 0.14);
@media (max-width: 992px) {
flex-direction: column;
align-items: flex-start;
padding: 0.5rem 2rem;
}
&-item {
padding-left: 1rem;
color: $white;
border-left: 4px solid rgba($white, 0.6);
}
&-label {
display: block;
white-space: nowrap;
}
&-value {
display: block;
font-size: 1.5rem;
font-weight: 200;
@media (max-width: 992px) {
font-size: 1.25rem;
}
}
}