178 lines
2.6 KiB
CSS
178 lines
2.6 KiB
CSS
.databi-chart {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.geo-chart {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: 232px;
|
|
}
|
|
|
|
.databi-grid--top .geo-chart {
|
|
height: 100%;
|
|
}
|
|
|
|
.trend-chart,
|
|
.funnel-chart {
|
|
height: 232px;
|
|
}
|
|
|
|
.databi-grid--top .trend-chart {
|
|
flex: 1;
|
|
height: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.donut-chart {
|
|
height: 182px;
|
|
}
|
|
|
|
.bar-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.databi-grid--middle .bar-list {
|
|
gap: 15px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.bar-row {
|
|
display: grid;
|
|
grid-template-columns: 20px minmax(86px, 112px) minmax(0, 1fr) 86px;
|
|
align-items: center;
|
|
gap: 9px;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.bar-track {
|
|
position: relative;
|
|
height: 9px;
|
|
overflow: hidden;
|
|
border-radius: 0;
|
|
background: rgba(95, 151, 193, 0.18);
|
|
}
|
|
|
|
.bar-track i {
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
background: linear-gradient(90deg, #25d8f5, #1aa7ef);
|
|
box-shadow: 0 0 12px rgba(37, 216, 245, 0.42);
|
|
}
|
|
|
|
.donut-layout {
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 18px;
|
|
}
|
|
|
|
.databi-grid--middle .donut-layout {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.donut-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.distribution-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.distribution-row {
|
|
display: grid;
|
|
grid-template-columns: 8px minmax(150px, 1fr) 58px 86px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.distribution-row span {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #25d8f5;
|
|
}
|
|
|
|
.distribution-row:nth-child(2) span {
|
|
background: #1dc9aa;
|
|
}
|
|
|
|
.distribution-row:nth-child(3) span {
|
|
background: #367be8;
|
|
}
|
|
|
|
.distribution-row:nth-child(4) span {
|
|
background: #9a9cfb;
|
|
}
|
|
|
|
.distribution-row em {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: #cfe3f7;
|
|
font-style: normal;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.distribution-row strong {
|
|
color: #d9ebff;
|
|
font-weight: 680;
|
|
}
|
|
|
|
.game-table {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.databi-grid--middle .game-table {
|
|
gap: 13px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.game-table-head {
|
|
display: grid;
|
|
grid-template-columns: 1fr 86px 64px;
|
|
gap: 10px;
|
|
color: #9eb7ce;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.game-row {
|
|
display: grid;
|
|
grid-template-columns: 20px minmax(82px, 126px) minmax(0, 1fr) 86px 64px;
|
|
align-items: center;
|
|
gap: 9px;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.game-row strong {
|
|
color: #24d79f;
|
|
font-weight: 720;
|
|
}
|
|
|
|
.donut-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
display: grid;
|
|
width: 82px;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.donut-center strong {
|
|
color: #f6fbff;
|
|
font-size: 18px;
|
|
font-weight: 820;
|
|
}
|
|
|
|
.donut-center span {
|
|
color: #9eb7ce;
|
|
font-size: 11px;
|
|
}
|