@duskmoon-dev/css-art 1.13.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/art/csswitch.css +936 -0
- package/dist/art/index.css +1365 -80
- package/dist/art/moon.css +1 -0
- package/dist/art/mountain.css +240 -79
- package/dist/art/plasma-ball.css +21 -3
- package/dist/art/snowball-preloader.css +167 -0
- package/dist/index.css +1365 -80
- package/dist/index.min.css +1 -1
- package/package.json +1 -1
package/dist/art/moon.css
CHANGED
package/dist/art/mountain.css
CHANGED
|
@@ -1,112 +1,273 @@
|
|
|
1
1
|
@layer css-art {
|
|
2
|
+
@keyframes art-mountain-slide {
|
|
3
|
+
0% { transform: translateX(-2%); }
|
|
4
|
+
50% { transform: translateX(2%); }
|
|
5
|
+
100% { transform: translateX(-2%); }
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@keyframes art-mountain-grow {
|
|
9
|
+
50% {
|
|
10
|
+
width: 2%;
|
|
11
|
+
opacity: 0.4;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@keyframes art-mountain-slide-right {
|
|
16
|
+
0% { transform: translateX(-200%); }
|
|
17
|
+
100% { transform: translateX(2000%); }
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@keyframes art-mountain-slide-left {
|
|
21
|
+
0% { transform: translateX(200%); }
|
|
22
|
+
100% { transform: translateX(-2000%); }
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* === Canvas === */
|
|
2
26
|
.art-mountain {
|
|
3
|
-
--art-mountain-
|
|
4
|
-
--art-mountain-height: 10rem;
|
|
5
|
-
--art-mountain-color: oklch(45% 0.05 150);
|
|
6
|
-
--art-mountain-shadow: oklch(35% 0.04 150);
|
|
7
|
-
--art-mountain-snow: oklch(97% 0.005 90);
|
|
27
|
+
--art-mountain-size: 600px;
|
|
8
28
|
|
|
9
29
|
position: relative;
|
|
10
|
-
width: var(--art-mountain-
|
|
11
|
-
height: var(--art-mountain-
|
|
30
|
+
width: var(--art-mountain-size);
|
|
31
|
+
height: var(--art-mountain-size);
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
background:
|
|
34
|
+
/* Aurora glow layer — bottom 60% of canvas */
|
|
35
|
+
linear-gradient(transparent, rgba(31, 164, 152, 0.6)) 0 100% / 100% 60%,
|
|
36
|
+
/* Stars */
|
|
37
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 3% 70% / 0.2% 0.25%,
|
|
38
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 7% 60% / 0.2% 0.25%,
|
|
39
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 3% 47% / 0.2% 0.25%,
|
|
40
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 26% 65% / 0.2% 0.25%,
|
|
41
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 20% 50% / 0.2% 0.25%,
|
|
42
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 12% 53% / 0.2% 0.25%,
|
|
43
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 10% 40% / 0.2% 0.25%,
|
|
44
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 24% 34% / 0.2% 0.25%,
|
|
45
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 38% 35% / 0.2% 0.25%,
|
|
46
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 24% 48% / 0.2% 0.25%,
|
|
47
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 7% 30% / 0.2% 0.25%,
|
|
48
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 2% 20% / 0.2% 0.25%,
|
|
49
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 5% 4% / 0.2% 0.25%,
|
|
50
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 10% 15% / 0.2% 0.25%,
|
|
51
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 15% 8% / 0.2% 0.25%,
|
|
52
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 20% 20% / 0.2% 0.25%,
|
|
53
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 80% 36% / 0.2% 0.25%,
|
|
54
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 84% 50% / 0.2% 0.25%,
|
|
55
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 97% 50% / 0.2% 0.25%,
|
|
56
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 85% 40% / 0.2% 0.25%,
|
|
57
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 90% 54% / 0.2% 0.25%,
|
|
58
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 50% 40% / 0.2% 0.25%,
|
|
59
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 55% 49% / 0.2% 0.25%,
|
|
60
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 48% 55% / 0.2% 0.25%,
|
|
61
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 33% 45% / 0.2% 0.25%,
|
|
62
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 80% 60% / 0.2% 0.25%,
|
|
63
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 88% 70% / 0.2% 0.25%,
|
|
64
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 30% 24% / 0.2% 0.25%,
|
|
65
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 30% 10% / 0.2% 0.25%,
|
|
66
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 15% 30% / 0.2% 0.25%,
|
|
67
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 38% 3% / 0.2% 0.25%,
|
|
68
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 68% 30% / 0.2% 0.2%,
|
|
69
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 90% 32% / 0.2% 0.25%,
|
|
70
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 85% 10% / 0.2% 0.25%,
|
|
71
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 60% 16% / 0.2% 0.25%,
|
|
72
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 88% 12% / 0.2% 0.25%,
|
|
73
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 96% 5% / 0.2% 0.25%,
|
|
74
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 75% 18% / 0.2% 0.25%,
|
|
75
|
+
radial-gradient(rgba(255, 250, 250, 0.9) 70%, transparent 70%) 47% 14% / 0.2% 0.25%,
|
|
76
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 54% 10% / 0.2% 0.25%,
|
|
77
|
+
radial-gradient(rgba(255, 250, 250, 0.5) 70%, transparent 70%) 53% 23% / 0.2% 0.25%,
|
|
78
|
+
/* Night sky gradient */
|
|
79
|
+
linear-gradient(rgb(20, 21, 33), #022e4e, #03518a);
|
|
80
|
+
background-repeat: no-repeat;
|
|
81
|
+
z-index: 1;
|
|
12
82
|
}
|
|
13
83
|
|
|
14
|
-
/*
|
|
15
|
-
|
|
16
|
-
|
|
84
|
+
/* === Mountains === */
|
|
85
|
+
|
|
86
|
+
/* Shared mountain base */
|
|
87
|
+
.art-mountain .mountain {
|
|
17
88
|
position: absolute;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* Snow cap */
|
|
29
|
-
.art-mountain::after {
|
|
30
|
-
content: '';
|
|
89
|
+
clip-path: polygon(49% 0, 51% 0, 100% 100%, 0% 100%);
|
|
90
|
+
border-radius: 50% 50% 0 0;
|
|
91
|
+
z-index: 2;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Shadow sub-peak offset to the right */
|
|
95
|
+
.art-mountain .mountain::before {
|
|
96
|
+
content: "";
|
|
31
97
|
position: absolute;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
border-
|
|
38
|
-
border-right: calc(var(--art-mountain-width) * 0.1) solid transparent;
|
|
39
|
-
border-bottom: calc(var(--art-mountain-height) * 0.25) solid var(--art-mountain-snow);
|
|
40
|
-
z-index: 1;
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 100%;
|
|
100
|
+
right: 5%;
|
|
101
|
+
background: inherit;
|
|
102
|
+
clip-path: inherit;
|
|
103
|
+
border-radius: inherit;
|
|
41
104
|
}
|
|
42
105
|
|
|
43
|
-
/*
|
|
44
|
-
.art-mountain
|
|
45
|
-
|
|
46
|
-
|
|
106
|
+
/* Snow highlight at peak */
|
|
107
|
+
.art-mountain .mountain::after {
|
|
108
|
+
content: "";
|
|
109
|
+
position: absolute;
|
|
110
|
+
width: 100%;
|
|
111
|
+
height: 15%;
|
|
112
|
+
background: linear-gradient(rgba(255, 250, 250, 0.5), transparent);
|
|
113
|
+
}
|
|
47
114
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
115
|
+
.art-mountain .mountain:nth-of-type(1) {
|
|
116
|
+
background: linear-gradient(#02284a, transparent);
|
|
117
|
+
width: 50%;
|
|
118
|
+
height: 40%;
|
|
119
|
+
left: -10%;
|
|
120
|
+
bottom: 0;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.art-mountain .mountain:nth-of-type(2) {
|
|
124
|
+
background: linear-gradient(#022e4e, rgba(20, 21, 33, 0.8));
|
|
125
|
+
width: 60%;
|
|
126
|
+
height: 50%;
|
|
127
|
+
left: 10%;
|
|
128
|
+
bottom: 0;
|
|
129
|
+
z-index: 3;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.art-mountain .mountain:nth-of-type(3) {
|
|
133
|
+
background: linear-gradient(#02284a, transparent);
|
|
134
|
+
width: 50%;
|
|
135
|
+
height: 65%;
|
|
136
|
+
left: 40%;
|
|
137
|
+
bottom: 0;
|
|
53
138
|
}
|
|
54
139
|
|
|
55
|
-
.art-mountain-
|
|
56
|
-
|
|
57
|
-
|
|
140
|
+
.art-mountain .mountain:nth-of-type(4) {
|
|
141
|
+
background: linear-gradient(#022e4e, rgba(20, 21, 33, 0.8));
|
|
142
|
+
width: 30%;
|
|
143
|
+
height: 40%;
|
|
144
|
+
right: -10%;
|
|
145
|
+
bottom: 0;
|
|
58
146
|
}
|
|
59
147
|
|
|
60
|
-
|
|
148
|
+
/* === Trees === */
|
|
149
|
+
|
|
150
|
+
.art-mountain .tree {
|
|
61
151
|
position: absolute;
|
|
152
|
+
width: 0.5%;
|
|
62
153
|
bottom: 0;
|
|
63
|
-
|
|
64
|
-
|
|
154
|
+
background: linear-gradient(rgb(4, 24, 22), rgb(20, 21, 33));
|
|
155
|
+
z-index: 4;
|
|
65
156
|
}
|
|
66
157
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
158
|
+
/* Layered triangles forming a pine silhouette */
|
|
159
|
+
.art-mountain .tree::before {
|
|
160
|
+
content: "";
|
|
161
|
+
position: absolute;
|
|
162
|
+
width: 800%;
|
|
163
|
+
height: 100%;
|
|
164
|
+
top: -5%;
|
|
165
|
+
left: -350%;
|
|
166
|
+
background: rgb(4, 24, 22);
|
|
167
|
+
clip-path: polygon(
|
|
168
|
+
50% 0%,
|
|
169
|
+
0% 30%,
|
|
170
|
+
50% 30%,
|
|
171
|
+
0% 60%,
|
|
172
|
+
50% 60%,
|
|
173
|
+
0% 90%,
|
|
174
|
+
50% 90%,
|
|
175
|
+
100% 90%,
|
|
176
|
+
50% 60%,
|
|
177
|
+
100% 60%,
|
|
178
|
+
50% 30%,
|
|
179
|
+
100% 30%
|
|
180
|
+
);
|
|
72
181
|
}
|
|
73
182
|
|
|
74
|
-
.art-mountain
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
border-right: calc(var(--art-mountain-width) * 0.3) solid transparent;
|
|
78
|
-
border-bottom: var(--art-mountain-height) solid var(--art-mountain-color);
|
|
79
|
-
z-index: 1;
|
|
183
|
+
.art-mountain .tree:nth-of-type(1) {
|
|
184
|
+
height: 20%;
|
|
185
|
+
right: 25%;
|
|
80
186
|
}
|
|
81
187
|
|
|
82
|
-
.art-mountain
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
188
|
+
.art-mountain .tree:nth-of-type(2) {
|
|
189
|
+
height: 15%;
|
|
190
|
+
right: 20%;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.art-mountain .tree:nth-of-type(3) {
|
|
194
|
+
height: 12%;
|
|
195
|
+
right: 28%;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* === Aurora lights container === */
|
|
199
|
+
|
|
200
|
+
.art-mountain .lights {
|
|
201
|
+
height: 100%;
|
|
202
|
+
width: 100%;
|
|
203
|
+
animation: art-mountain-slide 15s ease-in-out infinite;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* === Borealis beams === */
|
|
207
|
+
|
|
208
|
+
.art-mountain .borealis {
|
|
209
|
+
position: absolute;
|
|
210
|
+
width: 5%;
|
|
211
|
+
height: 100%;
|
|
212
|
+
bottom: 8%;
|
|
213
|
+
filter: blur(40px);
|
|
214
|
+
background: radial-gradient(rgb(31, 164, 152) 40%, transparent);
|
|
215
|
+
opacity: 0.6;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.art-mountain .borealis:nth-of-type(1) {
|
|
219
|
+
left: 0%;
|
|
220
|
+
animation: art-mountain-grow 30s ease-in-out infinite;
|
|
87
221
|
}
|
|
88
222
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
--art-mountain-shadow: oklch(22% 0.05 280);
|
|
93
|
-
--art-mountain-snow: oklch(85% 0.08 50);
|
|
223
|
+
.art-mountain .borealis:nth-of-type(2) {
|
|
224
|
+
left: 20%;
|
|
225
|
+
animation: art-mountain-grow 25s 10s ease-in-out infinite;
|
|
94
226
|
}
|
|
95
227
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
--art-mountain-shadow: oklch(30% 0.06 145);
|
|
228
|
+
.art-mountain .borealis:nth-of-type(3) {
|
|
229
|
+
left: 40%;
|
|
230
|
+
animation: art-mountain-grow 30s ease-in-out infinite;
|
|
100
231
|
}
|
|
101
232
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
--art-mountain-height: 6rem;
|
|
233
|
+
.art-mountain .borealis:nth-of-type(4) {
|
|
234
|
+
left: 60%;
|
|
235
|
+
animation: art-mountain-grow 20s 3s ease-in-out infinite;
|
|
106
236
|
}
|
|
107
237
|
|
|
108
|
-
.art-mountain-
|
|
109
|
-
|
|
110
|
-
|
|
238
|
+
.art-mountain .borealis:nth-of-type(5) {
|
|
239
|
+
left: 80%;
|
|
240
|
+
animation: art-mountain-grow 25s ease-in-out infinite;
|
|
111
241
|
}
|
|
242
|
+
|
|
243
|
+
.art-mountain .borealis:nth-of-type(6) {
|
|
244
|
+
left: 97%;
|
|
245
|
+
animation: art-mountain-grow 20s 8s ease-in-out infinite;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* Purple beam sweeping left → right */
|
|
249
|
+
.art-mountain .borealis:nth-of-type(7) {
|
|
250
|
+
background: radial-gradient(rgb(157, 78, 221) 40%, transparent);
|
|
251
|
+
transform: translateX(-200%);
|
|
252
|
+
animation: art-mountain-slide-right 25s infinite;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.art-mountain .borealis:nth-of-type(8) {
|
|
256
|
+
background: radial-gradient(rgb(157, 78, 221) 40%, transparent);
|
|
257
|
+
transform: translateX(-200%);
|
|
258
|
+
animation: art-mountain-slide-right 25s 8s infinite;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* Blue beam sweeping right → left */
|
|
262
|
+
.art-mountain .borealis:nth-of-type(9) {
|
|
263
|
+
left: unset;
|
|
264
|
+
right: 0%;
|
|
265
|
+
transform: translateX(200%);
|
|
266
|
+
background: radial-gradient(#045fa0 40%, transparent);
|
|
267
|
+
animation: art-mountain-slide-left 18s 5s ease-in-out infinite;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* === Size variants === */
|
|
271
|
+
.art-mountain-sm { --art-mountain-size: 300px; }
|
|
272
|
+
.art-mountain-lg { --art-mountain-size: 900px; }
|
|
112
273
|
}
|
package/dist/art/plasma-ball.css
CHANGED
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
--art-plasma-ball-base-color: #222222;
|
|
5
5
|
--art-plasma-ball-switch-size: calc(var(--art-plasma-ball-size) * 37 / 350);
|
|
6
6
|
position: relative;
|
|
7
|
+
isolation: isolate;
|
|
7
8
|
margin: 0 auto;
|
|
8
9
|
width: var(--art-plasma-ball-size);
|
|
9
|
-
height: var(--art-plasma-ball-size);
|
|
10
|
+
height: calc(var(--art-plasma-ball-size) * 1.6);
|
|
10
11
|
box-sizing: border-box;
|
|
11
12
|
|
|
12
13
|
* {
|
|
@@ -21,6 +22,7 @@
|
|
|
21
22
|
margin: calc(var(--art-plasma-ball-size) * 48 / 350) auto;
|
|
22
23
|
top: calc(var(--art-plasma-ball-size) * 286 / 350);
|
|
23
24
|
left: calc(var(--art-plasma-ball-size) * 25 / 350);
|
|
25
|
+
z-index: -2;
|
|
24
26
|
}
|
|
25
27
|
.base:before {
|
|
26
28
|
position: absolute;
|
|
@@ -93,8 +95,8 @@
|
|
|
93
95
|
position: absolute;
|
|
94
96
|
overflow: hidden;
|
|
95
97
|
margin: 0 auto;
|
|
96
|
-
width:
|
|
97
|
-
height:
|
|
98
|
+
width: var(--art-plasma-ball-size);
|
|
99
|
+
height: var(--art-plasma-ball-size);
|
|
98
100
|
border-radius: 100%;
|
|
99
101
|
background-color: rgb(255 255 255 / 0.15);
|
|
100
102
|
top: 0%;
|
|
@@ -525,6 +527,22 @@
|
|
|
525
527
|
--art-plasma-ball-size: 500px;
|
|
526
528
|
}
|
|
527
529
|
|
|
530
|
+
/* No-base variant: hides the stand/switch, shrinks container to ball size only */
|
|
531
|
+
.art-plasma-ball-no-base {
|
|
532
|
+
height: var(--art-plasma-ball-size);
|
|
533
|
+
}
|
|
534
|
+
.art-plasma-ball-no-base .base,
|
|
535
|
+
.art-plasma-ball-no-base .switch {
|
|
536
|
+
display: none;
|
|
537
|
+
}
|
|
538
|
+
.art-plasma-ball-no-base input.switcher {
|
|
539
|
+
top: 0;
|
|
540
|
+
left: 0;
|
|
541
|
+
width: 100%;
|
|
542
|
+
height: 100%;
|
|
543
|
+
border-radius: 100% !important;
|
|
544
|
+
}
|
|
545
|
+
|
|
528
546
|
@keyframes art-plasma-ball-rotation {
|
|
529
547
|
50% {
|
|
530
548
|
transform: rotate(360deg);
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
@layer css-art {
|
|
2
|
+
@keyframes art-snowball-preloader-ball {
|
|
3
|
+
from { transform: rotate(0) translateY(-6.5em); }
|
|
4
|
+
50% { transform: rotate(180deg) translateY(-6em); }
|
|
5
|
+
to { transform: rotate(360deg) translateY(-6.5em); }
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@keyframes art-snowball-preloader-inner-shadow {
|
|
9
|
+
from { transform: rotate(0); }
|
|
10
|
+
to { transform: rotate(-360deg); }
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@keyframes art-snowball-preloader-outer-shadow {
|
|
14
|
+
from { transform: rotate(20deg); }
|
|
15
|
+
to { transform: rotate(-340deg); }
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@keyframes art-snowball-preloader-texture {
|
|
19
|
+
from { transform: translateX(0); }
|
|
20
|
+
to { transform: translateX(50%); }
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes art-snowball-preloader-track-cover {
|
|
24
|
+
from { transform: rotate(0); }
|
|
25
|
+
to { transform: rotate(360deg); }
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.art-snowball-preloader {
|
|
29
|
+
--art-snowball-preloader-size: 256px;
|
|
30
|
+
--art-snowball-preloader-bg: hsl(223, 90%, 95%);
|
|
31
|
+
|
|
32
|
+
font-size: calc(var(--art-snowball-preloader-size) / 16);
|
|
33
|
+
position: relative;
|
|
34
|
+
width: 16em;
|
|
35
|
+
height: 16em;
|
|
36
|
+
|
|
37
|
+
*, *::before, *::after {
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
border: 0;
|
|
40
|
+
margin: 0;
|
|
41
|
+
padding: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.art-snowball-preloader-outer-ring,
|
|
45
|
+
.art-snowball-preloader-inner-ring,
|
|
46
|
+
.art-snowball-preloader-track-cover,
|
|
47
|
+
.art-snowball-preloader-ball,
|
|
48
|
+
.art-snowball-preloader-ball-inner-shadow,
|
|
49
|
+
.art-snowball-preloader-ball-side-shadows,
|
|
50
|
+
.art-snowball-preloader-ball-texture {
|
|
51
|
+
border-radius: 50%;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.art-snowball-preloader-outer-ring,
|
|
55
|
+
.art-snowball-preloader-inner-ring,
|
|
56
|
+
.art-snowball-preloader-track-cover,
|
|
57
|
+
.art-snowball-preloader-ball,
|
|
58
|
+
.art-snowball-preloader-ball-inner-shadow,
|
|
59
|
+
.art-snowball-preloader-ball-outer-shadow,
|
|
60
|
+
.art-snowball-preloader-ball-side-shadows,
|
|
61
|
+
.art-snowball-preloader-ball-texture,
|
|
62
|
+
.art-snowball-preloader-ball-texture::before {
|
|
63
|
+
position: absolute;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.art-snowball-preloader-ball {
|
|
67
|
+
animation: art-snowball-preloader-ball 3s linear infinite;
|
|
68
|
+
top: calc(50% - 1.25em);
|
|
69
|
+
left: calc(50% - 1.25em);
|
|
70
|
+
transform: rotate(0) translateY(-6.5em);
|
|
71
|
+
width: 2.5em;
|
|
72
|
+
height: 2.5em;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.art-snowball-preloader-ball-inner-shadow {
|
|
76
|
+
animation: art-snowball-preloader-inner-shadow 3s linear infinite;
|
|
77
|
+
box-shadow:
|
|
78
|
+
0 0.1em 0.2em hsla(0, 0%, 0%, 0.3),
|
|
79
|
+
0 0 0.2em hsla(0, 0%, 0%, 0.1) inset,
|
|
80
|
+
0 -1em 0.5em hsla(0, 0%, 0%, 0.15) inset;
|
|
81
|
+
width: 100%;
|
|
82
|
+
height: 100%;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.art-snowball-preloader-ball-outer-shadow {
|
|
86
|
+
animation: art-snowball-preloader-outer-shadow 3s linear infinite;
|
|
87
|
+
background-image: linear-gradient(hsla(0, 0%, 0%, 0.15), hsla(0, 0%, 0%, 0));
|
|
88
|
+
border-radius: 0 0 50% 50% / 0 0 100% 100%;
|
|
89
|
+
filter: blur(2px);
|
|
90
|
+
top: 50%;
|
|
91
|
+
left: 0;
|
|
92
|
+
width: 100%;
|
|
93
|
+
height: 250%;
|
|
94
|
+
transform: rotate(20deg);
|
|
95
|
+
transform-origin: 50% 0;
|
|
96
|
+
z-index: -2;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.art-snowball-preloader-ball-side-shadows {
|
|
100
|
+
background-color: hsla(0, 0%, 0%, 0.1);
|
|
101
|
+
filter: blur(2px);
|
|
102
|
+
width: 100%;
|
|
103
|
+
height: 100%;
|
|
104
|
+
transform: scale(0.75, 1.1);
|
|
105
|
+
z-index: -1;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.art-snowball-preloader-ball-texture {
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
width: 100%;
|
|
111
|
+
height: 100%;
|
|
112
|
+
transform: translate3d(0, 0, 0);
|
|
113
|
+
|
|
114
|
+
&::before {
|
|
115
|
+
animation: art-snowball-preloader-texture 0.25s linear infinite;
|
|
116
|
+
background: url(https://assets.codepen.io/416221/snow.jpg) 0 0 / 50% 100%;
|
|
117
|
+
content: "";
|
|
118
|
+
display: block;
|
|
119
|
+
filter: brightness(1.05);
|
|
120
|
+
top: 0;
|
|
121
|
+
right: 0;
|
|
122
|
+
width: 200%;
|
|
123
|
+
height: 100%;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.art-snowball-preloader-inner-ring {
|
|
128
|
+
box-shadow:
|
|
129
|
+
0 -0.25em 0.5em hsla(0, 0%, 100%, 0.4),
|
|
130
|
+
0 0.5em 0.75em hsla(0, 0%, 100%, 0.4) inset,
|
|
131
|
+
0 0.5em 0.375em hsla(0, 0%, 0%, 0.15),
|
|
132
|
+
0 -0.5em 0.75em hsla(0, 0%, 0%, 0.15) inset;
|
|
133
|
+
top: 2.375em;
|
|
134
|
+
left: 2.375em;
|
|
135
|
+
width: calc(100% - 4.75em);
|
|
136
|
+
height: calc(100% - 4.75em);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.art-snowball-preloader-outer-ring {
|
|
140
|
+
box-shadow:
|
|
141
|
+
0 -0.45em 0.375em hsla(0, 0%, 0%, 0.15),
|
|
142
|
+
0 0.5em 0.75em hsla(0, 0%, 0%, 0.15) inset,
|
|
143
|
+
0 0.25em 0.5em hsla(0, 0%, 100%, 0.4),
|
|
144
|
+
0 -0.5em 0.75em hsla(0, 0%, 100%, 0.4) inset;
|
|
145
|
+
top: 0.75em;
|
|
146
|
+
left: 0.75em;
|
|
147
|
+
width: calc(100% - 1.5em);
|
|
148
|
+
height: calc(100% - 1.5em);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.art-snowball-preloader-track-cover {
|
|
152
|
+
animation: art-snowball-preloader-track-cover 3s linear infinite;
|
|
153
|
+
background-image: conic-gradient(
|
|
154
|
+
var(--art-snowball-preloader-bg) 210deg,
|
|
155
|
+
oklch(from var(--art-snowball-preloader-bg) l c h / 0) 270deg
|
|
156
|
+
);
|
|
157
|
+
top: 0;
|
|
158
|
+
left: 0;
|
|
159
|
+
width: 100%;
|
|
160
|
+
height: 100%;
|
|
161
|
+
z-index: 1;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.art-snowball-preloader-sm { --art-snowball-preloader-size: 192px; }
|
|
166
|
+
.art-snowball-preloader-lg { --art-snowball-preloader-size: 384px; }
|
|
167
|
+
}
|