-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapi-fetch-root.css
121 lines (117 loc) · 5.41 KB
/
api-fetch-root.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
/**
* css-api-fetch
* BSD 2-Clause License
* Copyright (c) Jane Ori, PropJockey, 2025
*/
@property --api-1-w { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-1-h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@keyframes --api-1-w-parse { 0% { --api-1-w: 99999; } 100% { --api-1-w: 0; } }
@keyframes --api-1-h-parse { 0% { --api-1-h: 99999; } 100% { --api-1-h: 0; } }
@property --api-2-w { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-2-h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@keyframes --api-2-w-parse { 0% { --api-2-w: 99999; } 100% { --api-2-w: 0; } }
@keyframes --api-2-h-parse { 0% { --api-2-h: 99999; } 100% { --api-2-h: 0; } }
@property --api-3-w { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-3-h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@keyframes --api-3-w-parse { 0% { --api-3-w: 99999; } 100% { --api-3-w: 0; } }
@keyframes --api-3-h-parse { 0% { --api-3-h: 99999; } 100% { --api-3-h: 0; } }
@property --api-4-w { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-4-h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@keyframes --api-4-w-parse { 0% { --api-4-w: 99999; } 100% { --api-4-w: 0; } }
@keyframes --api-4-h-parse { 0% { --api-4-h: 99999; } 100% { --api-4-h: 0; } }
@property --api-1-ready { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-2-ready { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-3-ready { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-4-ready { syntax: "<integer>"; inherits: true; initial-value: 0; }
:where(:root) {
--api-max: 99999;
--api-max-w: initial;
--api-max-h: initial;
--api-1-max: initial;
--api-1-max-w: initial;
--api-1-max-h: initial;
--api-2-max: initial;
--api-2-max-w: initial;
--api-2-max-h: initial;
--api-3-max: initial;
--api-3-max-w: initial;
--api-3-max-h: initial;
--api-4-max: initial;
--api-4-max-w: initial;
--api-4-max-h: initial;
--api_1_max_w: var(--api-1-max-w, var(--api-1-max, var(--api-max-w, var(--api-max))));
--api_1_max_h: var(--api-1-max-h, var(--api-1-max, var(--api-max-h, var(--api-max))));
--api_2_max_w: var(--api-2-max-w, var(--api-2-max, var(--api-max-w, var(--api-max))));
--api_2_max_h: var(--api-2-max-h, var(--api-2-max, var(--api-max-h, var(--api-max))));
--api_3_max_w: var(--api-3-max-w, var(--api-3-max, var(--api-max-w, var(--api-max))));
--api_3_max_h: var(--api-3-max-h, var(--api-3-max, var(--api-max-h, var(--api-max))));
--api_4_max_w: var(--api-4-max-w, var(--api-4-max, var(--api-max-w, var(--api-max))));
--api_4_max_h: var(--api-4-max-h, var(--api-4-max, var(--api-max-h, var(--api-max))));
}
:root {
timeline-scope:
--api-1-w, --api-1-h, --api-2-w, --api-2-h,
--api-3-w, --api-3-h, --api-4-w, --api-4-h;
animation:
--api-1-w-parse linear, --api-1-h-parse linear,
--api-2-w-parse linear, --api-2-h-parse linear,
--api-3-w-parse linear, --api-3-h-parse linear,
--api-4-w-parse linear, --api-4-h-parse linear;
animation-timeline:
--api-1-w, --api-1-h, --api-2-w, --api-2-h,
--api-3-w, --api-3-h, --api-4-w, --api-4-h;
animation-range: entry 100% exit 100%;
--api-1-ready: min(1, min(1, var(--api-1-w)) + min(1, var(--api-1-h)));
--api-2-ready: min(1, min(1, var(--api-2-w)) + min(1, var(--api-2-h)));
--api-3-ready: min(1, min(1, var(--api-3-w)) + min(1, var(--api-3-h)));
--api-4-ready: min(1, min(1, var(--api-4-w)) + min(1, var(--api-4-h)));
}
.api-1-fetch, .api-2-fetch, .api-3-fetch, .api-4-fetch {
position: absolute;
visibility: hidden;
overflow: hidden;
width: calc(var(--api_X_max_w) * 1px);
height: calc(var(--api_X_max_h) * 1px);
left: calc(var(--api_X_max_w) * -1px - 101px);
top: calc(var(--api_X_max_h) * -1px - 101px);
pointer-events: none;
font-size: 0!important;
text-align: left!important;
&::before { display: inline-block; }
}
.api-1-fetch { display: var(--api-1-fetch, none);
--api_X_max_w: var(--api_1_max_w);
--api_X_max_h: var(--api_1_max_h);
&::before { content: var(--api-1-fetch, none);
view-timeline: --api-1-w inline, --api-1-h block; }
}
.api-2-fetch { display: var(--api-2-fetch, none);
--api_X_max_w: var(--api_2_max_w);
--api_X_max_h: var(--api_2_max_h);
&::before { content: var(--api-2-fetch, none);
view-timeline: --api-2-w inline, --api-2-h block; }
}
.api-3-fetch { display: var(--api-3-fetch, none);
--api_X_max_w: var(--api_3_max_w);
--api_X_max_h: var(--api_3_max_h);
&::before { content: var(--api-3-fetch, none);
view-timeline: --api-3-w inline, --api-3-h block; }
}
.api-4-fetch { display: var(--api-4-fetch, none);
--api_X_max_w: var(--api_4_max_w);
--api_X_max_h: var(--api_4_max_h);
&::before { content: var(--api-4-fetch, none);
view-timeline: --api-4-w inline, --api-4-h block; }
}
.api-debug-on::after {
white-space: pre;
counter-reset: api-1-w var(--api-1-w) api-1-h var(--api-1-h)
api-2-w var(--api-2-w) api-2-h var(--api-2-h)
api-3-w var(--api-3-w) api-3-h var(--api-3-h)
api-4-w var(--api-4-w) api-4-h var(--api-4-h);
content: "css-api-fetch data:"
"\0a--api-1-w: " counter(api-1-w) ";\0a--api-1-h: " counter(api-1-h) ";"
"\0a--api-2-w: " counter(api-2-w) ";\0a--api-2-h: " counter(api-2-h) ";"
"\0a--api-3-w: " counter(api-3-w) ";\0a--api-3-h: " counter(api-3-h) ";"
"\0a--api-4-w: " counter(api-4-w) ";\0a--api-4-h: " counter(api-4-h) ";";
}