mempool/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss

120 lines
2.0 KiB
SCSS
Raw Normal View History

.card-header {
border-bottom: 0;
font-size: 18px;
@media (min-width: 465px) {
font-size: 20px;
}
2023-05-05 23:38:35 +04:00
@media (min-width: 992px) {
height: 40px;
}
}
2022-02-19 22:09:35 +09:00
.main-title {
position: relative;
color: #ffffff91;
margin-top: -13px;
font-size: 10px;
text-transform: uppercase;
font-weight: 500;
text-align: center;
padding-bottom: 3px;
}
2022-02-21 14:02:41 +09:00
.full-container {
2023-05-05 23:38:35 +04:00
display: flex;
flex-direction: column;
padding: 0px 15px;
2022-02-21 14:02:41 +09:00
width: 100%;
2023-05-05 23:38:35 +04:00
height: calc(100vh - 250px);
@media (min-width: 992px) {
height: calc(100vh - 150px);
}
2022-02-21 14:02:41 +09:00
}
.chart {
2023-05-05 23:38:35 +04:00
display: flex;
flex: 1;
2022-02-21 14:02:41 +09:00
width: 100%;
height: 100%;
2022-02-21 18:24:24 +09:00
padding-bottom: 20px;
padding-right: 10px;
@media (max-width: 992px) {
padding-bottom: 25px;
}
@media (max-width: 829px) {
padding-bottom: 50px;
}
@media (max-width: 767px) {
padding-bottom: 25px;
}
@media (max-width: 629px) {
padding-bottom: 55px;
}
@media (max-width: 567px) {
padding-bottom: 55px;
}
2022-02-21 14:02:41 +09:00
}
.chart-widget {
width: 100%;
height: 100%;
2022-05-12 17:05:31 +02:00
height: 240px;
}
2022-02-21 14:02:41 +09:00
2022-03-14 20:00:19 +01:00
.pool-distribution {
min-height: 56px;
display: block;
@media (min-width: 485px) {
display: flex;
flex-direction: row;
}
h5 {
margin-bottom: 10px;
}
.item {
width: 50%;
display: inline-block;
margin: 0px auto 20px;
2022-03-14 20:00:19 +01:00
&:nth-child(2) {
order: 2;
@media (min-width: 485px) {
order: 3;
}
}
&:nth-child(3) {
order: 3;
@media (min-width: 485px) {
order: 2;
display: block;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: block;
}
}
.card-title {
font-size: 1rem;
color: #4a68b9;
}
.card-text {
font-size: 18px;
span {
color: #ffffff66;
font-size: 12px;
}
}
}
}
.skeleton-loader {
width: 100%;
display: block;
max-width: 80px;
margin: 15px auto 3px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}