forked from michael-milette/moodle-filter_filtercodes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
53 lines (49 loc) · 1.4 KB
/
styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.fc-chart-pie .chart-area .chart-image {
width: auto;
}
@property --percent{
syntax: '<number>';
inherits: true;
initial-value: 0;
}
.fc-progress-pie {
--color:purple;
--percent:0;
--size:150px;
--border:20px;
--bgcolor:#f0f0f0;
width:var(--size);
aspect-ratio:1;
position:relative;
display:inline-grid;
margin:5px;
place-content:center;
font-size:1.5rem;
font-weight:bold;
}
.fc-progress-pie:before,
.fc-progress-pie:after {
content:"";
position:absolute;
border-radius:50%;
}
.fc-progress-pie:before {
inset:0;
background:radial-gradient(farthest-side,var(--color) 98%,#0000) top/var(--border) var(--border) no-repeat,conic-gradient(var(--color) calc(var(--percent)*1%),#0000 0);
-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--border)),#000 calc(100% - var(--border)));
mask:radial-gradient(farthest-side,#0000 calc(99% - var(--border)),#000 calc(100% - var(--border)));
background-color:var(--bgcolor);
background-size:0 0,auto;
}
.fc-progress-pie:after {
inset:calc(50% - var(--border)/2);
background:var(--color);
transform:rotate(calc(var(--percent)*3.6deg)) translateY(calc(50% - var(--size)/2));
content:none;
}
.fc-progress-pie.animate {
animation:fc-progress-pie-percent 1s .5s both;
}
@keyframes fc-progress-pie-percent {
from{--percent:0}
}