-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcounter-value.css
307 lines (298 loc) · 14.9 KB
/
counter-value.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
/* css-counter-value
// BSD 2-Clause License
// Copyright (c) Jane Ori, PropJockey, 2024
*/
@counter-style --counter-value { system: additive; additive-symbols: 1 ".", 0 ""; }
@property --counter-value\\1 { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --counter-value\\2 { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --counter-value\\3 { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --counter-value\\4 { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --counter-value\\5 { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --counter-value\\6 { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --counter-value\\7 { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --counter-value\\8 { syntax: "<integer>"; inherits: true; initial-value: 0; }
@keyframes --counter-value_kf1 { 0% { --counter-value\\1: 120; } 100% { --counter-value\\1: 0; } }
@keyframes --counter-value_kf2 { 0% { --counter-value\\2: 120; } 100% { --counter-value\\2: 0; } }
@keyframes --counter-value_kf3 { 0% { --counter-value\\3: 120; } 100% { --counter-value\\3: 0; } }
@keyframes --counter-value_kf4 { 0% { --counter-value\\4: 120; } 100% { --counter-value\\4: 0; } }
@keyframes --counter-value_kf5 { 0% { --counter-value\\5: 120; } 100% { --counter-value\\5: 0; } }
@keyframes --counter-value_kf6 { 0% { --counter-value\\6: 120; } 100% { --counter-value\\6: 0; } }
@keyframes --counter-value_kf7 { 0% { --counter-value\\7: 120; } 100% { --counter-value\\7: 0; } }
@keyframes --counter-value_kf8 { 0% { --counter-value\\8: 120; } 100% { --counter-value\\8: 0; } }
:where(
:has(> :is(
[data-counter-value=""]:not([data-counter-value*="host:1"] *),
[data-counter-value*="1"]:not([data-counter-value*="host:"], [data-counter-value*="host:1"] *),
[data-counter-value*="2"]:not([data-counter-value*="host:"], [data-counter-value*="host:2"] *),
[data-counter-value*="3"]:not([data-counter-value*="host:"], [data-counter-value*="host:3"] *),
[data-counter-value*="4"]:not([data-counter-value*="host:"], [data-counter-value*="host:4"] *),
[data-counter-value*="5"]:not([data-counter-value*="host:"], [data-counter-value*="host:5"] *),
[data-counter-value*="6"]:not([data-counter-value*="host:"], [data-counter-value*="host:6"] *),
[data-counter-value*="7"]:not([data-counter-value*="host:"], [data-counter-value*="host:7"] *),
[data-counter-value*="8"]:not([data-counter-value*="host:"], [data-counter-value*="host:8"] *)
)),
[data-counter-value*="host:1"]:has([data-counter-value=""], [data-counter-value*="1"]:not([data-counter-value*="host:"])),
[data-counter-value*="host:2"]:has([data-counter-value*="2"]:not([data-counter-value*="host:"])),
[data-counter-value*="host:3"]:has([data-counter-value*="3"]:not([data-counter-value*="host:"])),
[data-counter-value*="host:4"]:has([data-counter-value*="4"]:not([data-counter-value*="host:"])),
[data-counter-value*="host:5"]:has([data-counter-value*="5"]:not([data-counter-value*="host:"])),
[data-counter-value*="host:6"]:has([data-counter-value*="6"]:not([data-counter-value*="host:"])),
[data-counter-value*="host:7"]:has([data-counter-value*="7"]:not([data-counter-value*="host:"])),
[data-counter-value*="host:8"]:has([data-counter-value*="8"]:not([data-counter-value*="host:"]))
) {
--__cvat_1: initial;
--__cvat_2: initial;
--__cvat_1and2_elseNeither: var(--__cvat_1), var(--__cvat_2);
--__cvat_1and2_elseEither_elseNeither: var(--__cvat_1and2_elseNeither, var(--__cvat_1, var(--__cvat_2)));
--__cvat_3: initial;
--__cvat_4: initial;
--__cvat_3and4_elseNeither: var(--__cvat_3), var(--__cvat_4);
--__cvat_3and4_elseEither_elseNeither: var(--__cvat_3and4_elseNeither, var(--__cvat_3, var(--__cvat_4)));
--__cvat_1ao2and3ao4_elseNone: var(--__cvat_1and2_elseEither_elseNeither), var(--__cvat_3and4_elseEither_elseNeither);
--__cvat_1ao2and3ao4_elseEither_elseNone: var(
--__cvat_1ao2and3ao4_elseNone,
var(
--__cvat_1and2_elseEither_elseNeither,
var(--__cvat_3and4_elseEither_elseNeither)
)
);
--__cvat_5: initial;
--__cvat_6: initial;
--__cvat_5and6_elseNeither: var(--__cvat_5), var(--__cvat_6);
--__cvat_5and6_elseEither_elseNeither: var(--__cvat_5and6_elseNeither, var(--__cvat_5, var(--__cvat_6)));
--__cvat_7: initial;
--__cvat_8: initial;
--__cvat_7and8_elseNeither: var(--__cvat_7), var(--__cvat_8);
--__cvat_7and8_elseEither_elseNeither: var(--__cvat_7and8_elseNeither, var(--__cvat_7, var(--__cvat_8)));
--__cvat_5ao6and7ao8_elseNone: var(--__cvat_5and6_elseEither_elseNeither), var(--__cvat_7and8_elseEither_elseNeither);
--__cvat_5ao6and7ao8_elseEither_elseNone: var(
--__cvat_5ao6and7ao8_elseNone,
var(
--__cvat_5and6_elseEither_elseNeither,
var(--__cvat_7and8_elseEither_elseNeither)
)
);
--__cvat_some1to4andSome5to8_elseNone: var(--__cvat_1ao2and3ao4_elseEither_elseNone), var(--__cvat_5ao6and7ao8_elseEither_elseNone);
--counter-value-animation-timelines: var(
--__cvat_some1to4andSome5to8_elseNone,
var(
--__cvat_1ao2and3ao4_elseEither_elseNone,
var(--__cvat_5ao6and7ao8_elseEither_elseNone)
)
);
--__cva_1: initial;
--__cva_2: initial;
--__cva_1and2_elseNeither: var(--__cva_1), var(--__cva_2);
--__cva_1and2_elseEither_elseNeither: var(--__cva_1and2_elseNeither, var(--__cva_1, var(--__cva_2)));
--__cva_3: initial;
--__cva_4: initial;
--__cva_3and4_elseNeither: var(--__cva_3), var(--__cva_4);
--__cva_3and4_elseEither_elseNeither: var(--__cva_3and4_elseNeither, var(--__cva_3, var(--__cva_4)));
--__cva_1ao2and3ao4_elseNone: var(--__cva_1and2_elseEither_elseNeither), var(--__cva_3and4_elseEither_elseNeither);
--__cva_1ao2and3ao4_elseEither_elseNone: var(
--__cva_1ao2and3ao4_elseNone,
var(
--__cva_1and2_elseEither_elseNeither,
var(--__cva_3and4_elseEither_elseNeither)
)
);
--__cva_5: initial;
--__cva_6: initial;
--__cva_5and6_elseNeither: var(--__cva_5), var(--__cva_6);
--__cva_5and6_elseEither_elseNeither: var(--__cva_5and6_elseNeither, var(--__cva_5, var(--__cva_6)));
--__cva_7: initial;
--__cva_8: initial;
--__cva_7and8_elseNeither: var(--__cva_7), var(--__cva_8);
--__cva_7and8_elseEither_elseNeither: var(--__cva_7and8_elseNeither, var(--__cva_7, var(--__cva_8)));
--__cva_5ao6and7ao8_elseNone: var(--__cva_5and6_elseEither_elseNeither), var(--__cva_7and8_elseEither_elseNeither);
--__cva_5ao6and7ao8_elseEither_elseNone: var(
--__cva_5ao6and7ao8_elseNone,
var(
--__cva_5and6_elseEither_elseNeither,
var(--__cva_7and8_elseEither_elseNeither)
)
);
--__cva_some1to4andSome5to8_elseNone: var(--__cva_1ao2and3ao4_elseEither_elseNone), var(--__cva_5ao6and7ao8_elseEither_elseNone);
--counter-value-animations: var(
--__cva_some1to4andSome5to8_elseNone,
var(
--__cva_1ao2and3ao4_elseEither_elseNone,
var(--__cva_5ao6and7ao8_elseEither_elseNone)
)
);
--__cvar_1: initial;
--__cvar_2: initial;
--__cvar_1and2_elseNeither: var(--__cvar_1), var(--__cvar_2);
--__cvar_1and2_elseEither_elseNeither: var(--__cvar_1and2_elseNeither, var(--__cvar_1, var(--__cvar_2)));
--__cvar_3: initial;
--__cvar_4: initial;
--__cvar_3and4_elseNeither: var(--__cvar_3), var(--__cvar_4);
--__cvar_3and4_elseEither_elseNeither: var(--__cvar_3and4_elseNeither, var(--__cvar_3, var(--__cvar_4)));
--__cvar_1ao2and3ao4_elseNone: var(--__cvar_1and2_elseEither_elseNeither), var(--__cvar_3and4_elseEither_elseNeither);
--__cvar_1ao2and3ao4_elseEither_elseNone: var(
--__cvar_1ao2and3ao4_elseNone,
var(
--__cvar_1and2_elseEither_elseNeither,
var(--__cvar_3and4_elseEither_elseNeither)
)
);
--__cvar_5: initial;
--__cvar_6: initial;
--__cvar_5and6_elseNeither: var(--__cvar_5), var(--__cvar_6);
--__cvar_5and6_elseEither_elseNeither: var(--__cvar_5and6_elseNeither, var(--__cvar_5, var(--__cvar_6)));
--__cvar_7: initial;
--__cvar_8: initial;
--__cvar_7and8_elseNeither: var(--__cvar_7), var(--__cvar_8);
--__cvar_7and8_elseEither_elseNeither: var(--__cvar_7and8_elseNeither, var(--__cvar_7, var(--__cvar_8)));
--__cvar_5ao6and7ao8_elseNone: var(--__cvar_5and6_elseEither_elseNeither), var(--__cvar_7and8_elseEither_elseNeither);
--__cvar_5ao6and7ao8_elseEither_elseNone: var(
--__cvar_5ao6and7ao8_elseNone,
var(
--__cvar_5and6_elseEither_elseNeither,
var(--__cvar_7and8_elseEither_elseNeither)
)
);
--__cvar_some1to4andSome5to8_elseNone: var(--__cvar_1ao2and3ao4_elseEither_elseNone), var(--__cvar_5ao6and7ao8_elseEither_elseNone);
--counter-value-animation-ranges: var(
--__cvar_some1to4andSome5to8_elseNone,
var(
--__cvar_1ao2and3ao4_elseEither_elseNone,
var(--__cvar_5ao6and7ao8_elseEither_elseNone)
)
);
timeline-scope: var(--counter-value-animation-timelines, none);
animation: var(--counter-value-animations, none);
animation-timeline: var(--counter-value-animation-timelines, none);
animation-range: var(--counter-value-animation-ranges, none);
}
:has(> :is(
[data-counter-value=""]:not([data-counter-value*="host:1"] *),
[data-counter-value*="1"]:not([data-counter-value*="host:"], [data-counter-value*="host:1"] *)
)),
[data-counter-value*="host:1"]:has([data-counter-value=""], [data-counter-value*="1"]:not([data-counter-value*="host:"])) {
--__cvat_1: --counter-value_tl1;
--__cva_1: --counter-value_kf1 linear;
--__cvar_1: entry 100% exit 100%;
}
:has(> [data-counter-value*="2"]:not([data-counter-value*="host:"], [data-counter-value*="host:2"] *)),
[data-counter-value*="host:2"]:has([data-counter-value*="2"]:not([data-counter-value*="host:"])) {
--__cvat_2: --counter-value_tl2;
--__cva_2: --counter-value_kf2 linear;
--__cvar_2: entry 100% exit 100%;
}
:has(> [data-counter-value*="3"]:not([data-counter-value*="host:"], [data-counter-value*="host:3"] *)),
[data-counter-value*="host:3"]:has([data-counter-value*="3"]:not([data-counter-value*="host:"])) {
--__cvat_3: --counter-value_tl3;
--__cva_3: --counter-value_kf3 linear;
--__cvar_3: entry 100% exit 100%;
}
:has(> [data-counter-value*="4"]:not([data-counter-value*="host:"], [data-counter-value*="host:4"] *)),
[data-counter-value*="host:4"]:has([data-counter-value*="4"]:not([data-counter-value*="host:"])) {
--__cvat_4: --counter-value_tl4;
--__cva_4: --counter-value_kf4 linear;
--__cvar_4: entry 100% exit 100%;
}
:has(> [data-counter-value*="5"]:not([data-counter-value*="host:"], [data-counter-value*="host:5"] *)),
[data-counter-value*="host:5"]:has([data-counter-value*="5"]:not([data-counter-value*="host:"])) {
--__cvat_5: --counter-value_tl5;
--__cva_5: --counter-value_kf5 linear;
--__cvar_5: entry 100% exit 100%;
}
:has(> [data-counter-value*="6"]:not([data-counter-value*="host:"], [data-counter-value*="host:6"] *)),
[data-counter-value*="host:6"]:has([data-counter-value*="6"]:not([data-counter-value*="host:"])) {
--__cvat_6: --counter-value_tl6;
--__cva_6: --counter-value_kf6 linear;
--__cvar_6: entry 100% exit 100%;
}
:has(> [data-counter-value*="7"]:not([data-counter-value*="host:"], [data-counter-value*="host:7"] *)),
[data-counter-value*="host:7"]:has([data-counter-value*="7"]:not([data-counter-value*="host:"])) {
--__cvat_7: --counter-value_tl7;
--__cva_7: --counter-value_kf7 linear;
--__cvar_7: entry 100% exit 100%;
}
:has(> [data-counter-value*="8"]:not([data-counter-value*="host:"], [data-counter-value*="host:8"] *)),
[data-counter-value*="host:8"]:has([data-counter-value*="8"]:not([data-counter-value*="host:"])) {
--__cvat_8: --counter-value_tl8;
--__cva_8: --counter-value_kf8 linear;
--__cvar_8: entry 100% exit 100%;
}
[data-counter-value]:not([data-counter-value*="host:"]) {
visibility: hidden;
overflow: hidden;
width: 1200px;
height: 20px;
right: 100vw;
bottom: 100vh;
line-height: 0px;
letter-spacing: 0px;
background: lime;
&, &::before {
box-sizing: border-box;
position: absolute;
margin: 0px;
padding: 0px;
font-size: 0px;
font-family: monospace;
}
&::before {
content: counter(var(--counter), --counter-value);
letter-spacing: 10px;
line-height: 10px;
white-space: pre;
left: 0px;
top: 0px;
background: hotpink;
}
}
:where([data-counter-value]:not([data-counter-value*="host:"]))::before {
--__cvvt_1: initial;
--__cvvt_2: initial;
--__cvvt_1and2_elseNeither: var(--__cvvt_1), var(--__cvvt_2);
--__cvvt_1and2_elseEither_elseNeither: var(--__cvvt_1and2_elseNeither, var(--__cvvt_1, var(--__cvvt_2)));
--__cvvt_3: initial;
--__cvvt_4: initial;
--__cvvt_3and4_elseNeither: var(--__cvvt_3), var(--__cvvt_4);
--__cvvt_3and4_elseEither_elseNeither: var(--__cvvt_3and4_elseNeither, var(--__cvvt_3, var(--__cvvt_4)));
--__cvvt_1ao2and3ao4_elseNone: var(--__cvvt_1and2_elseEither_elseNeither), var(--__cvvt_3and4_elseEither_elseNeither);
--__cvvt_1ao2and3ao4_elseEither_elseNone: var(
--__cvvt_1ao2and3ao4_elseNone,
var(
--__cvvt_1and2_elseEither_elseNeither,
var(--__cvvt_3and4_elseEither_elseNeither)
)
);
--__cvvt_5: initial;
--__cvvt_6: initial;
--__cvvt_5and6_elseNeither: var(--__cvvt_5), var(--__cvvt_6);
--__cvvt_5and6_elseEither_elseNeither: var(--__cvvt_5and6_elseNeither, var(--__cvvt_5, var(--__cvvt_6)));
--__cvvt_7: initial;
--__cvvt_8: initial;
--__cvvt_7and8_elseNeither: var(--__cvvt_7), var(--__cvvt_8);
--__cvvt_7and8_elseEither_elseNeither: var(--__cvvt_7and8_elseNeither, var(--__cvvt_7, var(--__cvvt_8)));
--__cvvt_5ao6and7ao8_elseNone: var(--__cvvt_5and6_elseEither_elseNeither), var(--__cvvt_7and8_elseEither_elseNeither);
--__cvvt_5ao6and7ao8_elseEither_elseNone: var(
--__cvvt_5ao6and7ao8_elseNone,
var(
--__cvvt_5and6_elseEither_elseNeither,
var(--__cvvt_7and8_elseEither_elseNeither)
)
);
--__cvvt_some1to4andSome5to8_elseNone: var(--__cvvt_1ao2and3ao4_elseEither_elseNone), var(--__cvvt_5ao6and7ao8_elseEither_elseNone);
--counter-value-view-timelines: var(
--__cvvt_some1to4andSome5to8_elseNone,
var(
--__cvvt_1ao2and3ao4_elseEither_elseNone,
var(--__cvvt_5ao6and7ao8_elseEither_elseNone)
)
);
view-timeline: var(--counter-value-view-timelines);
}
[data-counter-value=""]::before,
[data-counter-value*="1"]:not([data-counter-value*="host:"])::before { --__cvvt_1: --counter-value_tl1 inline; }
[data-counter-value*="2"]:not([data-counter-value*="host:"])::before { --__cvvt_2: --counter-value_tl2 inline; }
[data-counter-value*="3"]:not([data-counter-value*="host:"])::before { --__cvvt_3: --counter-value_tl3 inline; }
[data-counter-value*="4"]:not([data-counter-value*="host:"])::before { --__cvvt_4: --counter-value_tl4 inline; }
[data-counter-value*="5"]:not([data-counter-value*="host:"])::before { --__cvvt_5: --counter-value_tl5 inline; }
[data-counter-value*="6"]:not([data-counter-value*="host:"])::before { --__cvvt_6: --counter-value_tl6 inline; }
[data-counter-value*="7"]:not([data-counter-value*="host:"])::before { --__cvvt_7: --counter-value_tl7 inline; }
[data-counter-value*="8"]:not([data-counter-value*="host:"])::before { --__cvvt_8: --counter-value_tl8 inline; }