opt-cc/static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss

74 lines
1.2 KiB
SCSS

@import url('../../../style/list-entry.scss');
@import url('../../../style/hide-scrollbar.scss');
.fraction-stats-container {
border-top: 1px solid #dadada;
padding-top: 25px;
}
.chart-select-group {
display: flex;
width: fit-content;
margin: auto;
}
:host /deep/ mat-button-toggle {
color: #666666;
background: #e7e7e7;
:hover {
background: #afafaf;
}
&.mat-button-toggle-checked {
background: #ffffff;
}
label.mat-button-toggle-label {
margin: 2px 0;
}
div.mat-button-toggle-label-content {
line-height: 25px;
margin-bottom: 0;
font-weight: normal;
}
}
.chart-container {
width: 95%;
margin: 2%;
min-width: 900px;
height: 50vh;
padding: 15px;
float: left;
}
@media all and (max-width: 959px) {
.fraction-stats-container {
width: 93%;
margin: auto;
}
.chart-container {
width: 100%;
min-width: 0;
padding: 0;
margin: 10px 0 0;
}
.chart-select-group {
flex-wrap: wrap;
}
mat-button-toggle.mat-button-toggle {
width: 50%;
border: 1px solid #dadada;
text-align: center;
& /deep/ button.mat-button-toggle-button, & /deep/ div.mat-button-toggle-label-content {
width: 100%;
}
}
}