@ -1,16 +1,7 @@
$dashboard-banner-gradient-start : $primary !default ;
$dashboard-banner-gradient-start : $primary !default ;
$dashboard-banner-gradient-end : lighten (
$dashboard-banner-gradient-end : lighten ( $dashboard-banner-gradient-start , 5 % ) !default ;
$ dashboard-banner-gradient-start ,
$dashboard-banner-network-plain-container-background-color : lighten ( $dashboard-banner-gradient-end , 5 % ) !default ;
5 %
$dashboard-line-color-price : lighten ( $dashboard-banner-gradient-end , 5 % ) !default ;
) ! default ;
$dashboard-banner-network-plain-container-background-color : lighten (
$ dashboard-banner-gradient-end ,
5 %
) ! default ;
$dashboard-line-color-price : lighten (
$ dashboard-banner-gradient-end ,
5 %
) ! default ;
$dashboard-line-color-market : $secondary !default ;
$dashboard-line-color-market : $secondary !default ;
$dashboard-stats-item-label-color : #fff !default ;
$dashboard-stats-item-label-color : #fff !default ;
$dashboard-stats-item-value-color : rgba ( #fff , 0 .8 ) !default ;
$dashboard-stats-item-value-color : rgba ( #fff , 0 .8 ) !default ;
@ -19,219 +10,192 @@ $dashboard-banner-chart-legend-value-color: $dashboard-stats-item-value-color !d
$dashboard-stats-item-border-color : $primary !default ;
$dashboard-stats-item-border-color : $primary !default ;
$dashboard-banner-network-plain-container-height : 205 px ;
$dashboard-banner-network-plain-container-height : 205 px ;
$dashboard-banner-chart-axis-font-color : $dashboard-stats-item-value-color !default ;
$dashboard-banner-chart-axis-font-color : $dashboard-stats-item-value-color !default ;
. dashboard-banner-container {
. dashboard-banner-container {
@include gradient-container () ;
@include gradient-container () ;
margin-bottom : 3 rem ;
margin-bottom : 3 rem ;
overflow : hidden ;
overflow : hidden ;
padding : 0 ;
padding : 0 ;
position : relative ;
position : relative ;
height : 249 px ;
height : 249 px ;
@include media-breakpoint-down ( sm ) {
@include media-breakpoint-down ( sm ) {
height : auto ;
height : auto ;
}
}
@include media-breakpoint-down ( md ) {
height : auto ;
}
}
}
. dashboard-banner {
. dashboard-banner {
display : flex ;
display : flex ;
justify-content : space-between ;
justify-content : space-between ;
position : relative ;
position : relative ;
z-index : 9 ;
z-index : 9 ;
@include media-breakpoint-down ( sm ) {
@include media-breakpoint-down ( sm ) {
flex-direction : column ;
flex-direction : column ;
}
}
}
}
. dashboard-banner-network-graph {
. dashboard-banner-network-graph {
flex-grow : 1 ;
flex-grow : 1 ;
padding : 15 px 0 0 0 ;
padding : 15 px 0 0 0 ;
@include media-breakpoint-down ( md ) {
@include media-breakpoint-down ( md ) {
display : flex ;
display : flex ;
flex-direction : column ;
flex-direction : column ;
padding-top : 20 px ;
padding-top : 20 px ;
}
}
}
}
. dashboard-banner-chart {
. dashboard-banner-chart {
flex-grow : 1 ;
flex-grow : 1 ;
margin : 0 0 35 px 0 ;
margin : 0 0 35 px 0 ;
max-width : 350 px ;
max-width : 350 px ;
position : relative ;
@include media-breakpoint-down ( md ) {
flex-grow : 0 ;
margin-bottom : 20 px ;
margin-top : auto ;
max-width : 100 % ;
}
> canvas {
max-height : 100 % ;
max-width : 100 % ;
width : 100 % ;
}
}
. dashboard-banner-chart-legend {
display : flex ;
/* grid-template-columns: 1fr 1fr; */
padding-bottom : 12 px ;
. dashboard-banner-chart-legend-item {
padding-bottom : 3 px ;
padding-left : 12 px ;
padding-top : 3 px ;
position : relative ;
position : relative ;
padding-right : 60 px ;
@include media-breakpoint-down ( md ) {
@include media-breakpoint-down ( md ) {
display : flex ;
flex-grow : 0 ;
flex-direction : row ;
margin-bottom : 20 px ;
margin-top : auto ;
max-width : 100 % ;
}
}
> canvas {
@media ( max-width : 599 px ) {
max-height : 100 % ;
padding-top : 0 ;
max-width : 100 % ;
padding-bottom : 0 ;
width : 100 % ;
flex-direction : column ;
}
& : : before {
border-radius : 2 px ;
content : " " ;
height : 100 % ;
left : 0 ;
position : absolute ;
top : 0 ;
width : 4 px ;
}
& : nth-child ( 1 ) : : before {
background-color : $dashboard-line-color-price ;
}
}
}
& : nth-child ( 2 ) : : before {
. dashboard-banner-chart-legend {
background-color : $dashboard-line-color-market ;
display : flex ;
/* grid-template-columns: 1fr 1fr; */
padding-bottom : 12 px ;
. dashboard-banner-chart-legend-item {
padding-bottom : 3 px ;
padding-left : 12 px ;
padding-top : 3 px ;
position : relative ;
padding-right : 60 px ;
@include media-breakpoint-down ( md ) {
display : flex ;
flex-direction : row ;
}
@media ( max-width : 599 px ) {
padding-top : 0 ;
padding-bottom : 0 ;
flex-direction : column ;
}
& : : before {
border-radius : 2 px ;
content : " " ;
height : 100 % ;
left : 0 ;
position : absolute ;
top : 0 ;
width : 4 px ;
}
& : nth-child ( 1 ) : : before {
background-color : $dashboard-line-color-price ;
}
& : nth-child ( 2 ) : : before {
background-color : $dashboard-line-color-market ;
}
}
}
}
. dashboard-banner-chart-legend-label {
color : $dashboard-banner-chart-legend-label-color ;
. dashboard-banner-chart-legend-label {
display : block ;
color : $dashboard-banner-chart-legend-label-color ;
font-size : 12 px ;
display : block ;
font-weight : 600 ;
font-size : 12 px ;
line-height : 1 .2 ;
font-weight : 600 ;
margin : 0 0 5 px ;
line-height : 1 .2 ;
@media ( max-width : 374 px ) {
margin : 0 0 5 px ;
position : relative ;
top : - 2 px ;
@media ( max-width : 374 px ) {
}
position : relative ;
@include media-breakpoint-down ( md ) {
top : - 2 px ;
margin : 0 5 px 0 0 ;
}
}
}
. dashboard-banner-chart-legend-value {
@include media-breakpoint-down ( md ) {
color : $dashboard-banner-chart-legend-value-color ;
margin : 0 5 px 0 0 ;
display : block ;
font-size : 12 px ;
font-weight : normal ;
line-height : 1 .2 ;
}
}
}
. dashboard-banner-chart-legend-value {
color : $dashboard-banner-chart-legend-value-color ;
display : block ;
font-size : 12 px ;
font-weight : normal ;
line-height : 1 .2 ;
}
}
}
. dashboard-banner-network-plain-container {
. dashboard-banner-network-plain-container {
align-items : center ;
align-items : center ;
align-self : flex-end ;
align-self : flex-end ;
background-color : $dashboard-banner-network-plain-container-background-color ;
border-top-left-radius : 10 px ;
display : flex ;
height : $dashboard-banner-network-plain-container-height ;
justify-content : center ;
margin : 45 px 0 0 30 px ;
max-width : 100 % ;
padding : 30 px 0 30 px 60 px ;
width : 750 px ;
position : relative ;
@include media-breakpoint-down ( lg ) {
margin-top : 15 px ;
width : 550 px ;
}
@include media-breakpoint-down ( md ) {
border-top-right-radius : 10 px ;
height : auto ;
justify-content : flex-start ;
margin-left : 0 ;
max-width : 100 % ;
padding : 20 px 0 20 px 20 px ;
width : 250 px ;
box-shadow : 0 0 35 px 0 rgba ( 0 , 0 , 0 , 0 .2 ) ;
}
@include media-breakpoint-down ( sm ) {
width : 100 % ;
}
& : : after {
background-color : $dashboard-banner-network-plain-container-background-color ;
background-color : $dashboard-banner-network-plain-container-background-color ;
bottom : 0 ;
content : " " ;
display : block ;
height : $dashboard-banner-network-plain-container-height ;
left : 0 ;
position : absolute ;
width : 9999 px ;
z-index : - 1 ;
box-shadow : 0 0 35 px 0 rgba ( 0 , 0 , 0 , 0 .2 ) ;
border-top-left-radius : 10 px ;
border-top-left-radius : 10 px ;
display : flex ;
height : $dashboard-banner-network-plain-container-height ;
justify-content : center ;
margin : 45 px 0 0 30 px ;
max-width : 100 % ;
padding : 30 px 0 30 px 60 px ;
width : 750 px ;
position : relative ;
@include media-breakpoint-down ( lg ) {
margin-top : 15 px ;
width : 550 px ;
}
@include media-breakpoint-down ( md ) {
@include media-breakpoint-down ( md ) {
display : none ;
border-top-right-radius : 10 px ;
height : auto ;
justify-content : flex-start ;
margin-left : 0 ;
max-width : 100 % ;
padding : 20 px 0 20 px 20 px ;
width : 250 px ;
box-shadow : 0 0 35 px 0 rgba ( 0 , 0 , 0 , 0 .2 ) ;
}
@include media-breakpoint-down ( sm ) {
width : 100 % ;
}
& : : after {
background-color : $dashboard-banner-network-plain-container-background-color ;
bottom : 0 ;
content : " " ;
display : block ;
height : $dashboard-banner-network-plain-container-height ;
left : 0 ;
position : absolute ;
width : 9999 px ;
z-index : - 1 ;
box-shadow : 0 0 35 px 0 rgba ( 0 , 0 , 0 , 0 .2 ) ;
border-top-left-radius : 10 px ;
@include media-breakpoint-down ( md ) {
display : none ;
}
}
}
}
}
}
. dashboard-banner-network-stats {
. dashboard-banner-network-stats {
column-gap : 25 px ;
column-gap : 25 px ;
display : grid ;
display : grid ;
grid-template-columns : 1 fr 1 fr 1 fr 1 fr ;
grid-template-columns : 1 fr 1 fr 1 fr 1 fr ;
@include media-breakpoint-down ( lg ) {
@include media-breakpoint-down ( lg ) {
grid-template-columns : 1 fr 1 fr ;
grid-template-columns : 1 fr 1 fr ;
row-gap : 20 px ;
row-gap : 20 px ;
}
@include media-breakpoint-down ( md ) {
grid-template-columns : 1 fr ;
row-gap : 20 px ;
}
@include media-breakpoint-down ( sm ) {
column-gap : 10 px ;
grid-template-columns : 1 fr 1 fr ;
}
@include stats-item (
$ dashboard-stats-item-border-color ,
$ dashboard-stats-item-label-color ,
$ dashboard-stats-item-value-color
) ;
. dashboard-banner-network-stats-item {
@media ( max-width : 374 px ) {
padding-left : calc ( 0 .6 rem + 4 px ) ;
padding-right : 0 .5 rem ;
}
}
}
@include media-breakpoint-down ( md ) {
grid-template-columns : 1 fr ;
. dashboard-banner-network-stats-value {
row-gap : 20 px ;
@media ( max-width : 374 px ) {
font-size : 0 .9 rem ;
}
}
}
@include media-breakpoint-down ( sm ) {
}
column-gap : 10 px ;
grid-template-columns : 1 fr 1 fr ;
}
@include stats-item ( $dashboard-stats-item-border-color , $dashboard-stats-item-label-color , $dashboard-stats-item-value-color ) ;
. dashboard-banner-network-stats-item {
@media ( max-width : 374 px ) {
padding-left : calc ( 0 .6 rem + 4 px ) ;
padding-right : 0 .5 rem ;
}
}
. dashboard-banner-network-stats-value {
@media ( max-width : 374 px ) {
font-size : 0 .9 rem ;
}
}
}