44 lines
900 B
CSS
44 lines
900 B
CSS
|
/* ANALYTICS */
|
||
|
|
.pie-chart {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: conic-gradient(var(--color-cyan-500) 0% 65%,
|
||
|
|
var(--color-magenta-500) 65% 85%,
|
||
|
|
var(--color-void-200) 85% 100%);
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pie-chart::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
background: var(--color-void-50);
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pie-chart-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkline {
|
||
|
|
fill: none;
|
||
|
|
stroke-width: 3;
|
||
|
|
stroke-linecap: round;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkline.up {
|
||
|
|
stroke: var(--color-lime-500);
|
||
|
|
filter: drop-shadow(0 0 5px rgba(132, 204, 22, 0.4));
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkline.down {
|
||
|
|
stroke: var(--color-magenta-500);
|
||
|
|
filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.4));
|
||
|
|
}
|