forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
fix: perfectly centered loading animation with icon
+28
-5
+28
src/styles/animations.css
+28
src/styles/animations.css
···
5
5
--animate-bounce: bounce 1s infinite;
6
6
}
7
7
8
+
/* Default: animate the element itself */
8
9
.animate-spin {
9
10
animation: var(--animate-spin);
11
+
display: inline-block;
12
+
}
13
+
14
+
/* When animate-spin is directly on a Phosphor <i>, animate ::before instead */
15
+
i[class^="ph-"].animate-spin {
16
+
animation: none;
17
+
}
18
+
19
+
i[class^="ph-"].animate-spin::before {
20
+
display: inline-block;
21
+
animation: var(--animate-spin);
22
+
line-height: 0;
23
+
transform-origin: center;
10
24
}
25
+
26
+
/* When animate-spin is on a parent of a Phosphor <i>,
27
+
don't rotate the parent — rotate the icon's ::before instead */
28
+
.animate-spin:has(> i[class^="ph-"]) {
29
+
animation: none;
30
+
}
31
+
32
+
.animate-spin > i[class^="ph-"]::before {
33
+
display: inline-block;
34
+
animation: var(--animate-spin);
35
+
line-height: 0;
36
+
transform-origin: center;
37
+
}
38
+
11
39
12
40
.animate-ping {
13
41
animation: var(--animate-ping);