-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapi-fetch.css
167 lines (161 loc) · 7.06 KB
/
api-fetch.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
/**
* css-api-fetch
* BSD 2-Clause License
* Copyright (c) Jane Ori, PropJockey, 2025
*/
@property --api-w-px { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --api-h-px { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --api-w { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-h { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --api-ready { syntax: "<integer>"; inherits: true; initial-value: 0; }
.css-api-fetch-compat {
--api_height: var(--api-height, 0px);
--api_width: var(--api-width, 0px);
--api_fetch: var(--api-fetch, none);
height: var(--api_height);
width: var(--api_width);
overflow: hidden;
position: relative;
*, & { margin: 0px; padding: 0px; box-sizing: border-box; }
&.api-debug-compat-on .api-response-compat::after {
counter-reset: w var(--api-w) h var(--api-h);
content: "w: " counter(w) " h: " counter(h);
}
.api-fetch-compat {
visibility: hidden;
position: absolute;
&::after {
content: var(--api_fetch);
display: block;
font-size: 0;
}
.api-parse-compat {
container: api-response-compat / size;
position: absolute;
inset: 0px;
.api-response-compat {
visibility: visible;
position: absolute;
height: var(--api_height);
width: var(--api_width);
--api-w-px: 100cqw;
--api-h-px: 100cqh;
--api-w: calc(10000 * tan(atan2(var(--api-w-px), 10000px)));
--api-h: calc(10000 * tan(atan2(var(--api-h-px), 10000px)));
--api-ready: min(1, min(1, var(--api-w)) + min(1, var(--api-h)));
}
}
}
}
@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: var(--api_1_max_w); } 100% { --api-1-w: 0; } }
@keyframes --api-1-h-parse { 0% { --api-1-h: var(--api_1_max_h); } 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: var(--api_2_max_w); } 100% { --api-2-w: 0; } }
@keyframes --api-2-h-parse { 0% { --api-2-h: var(--api_2_max_h); } 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: var(--api_3_max_w); } 100% { --api-3-w: 0; } }
@keyframes --api-3-h-parse { 0% { --api-3-h: var(--api_3_max_h); } 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: var(--api_4_max_w); } 100% { --api-4-w: 0; } }
@keyframes --api-4-h-parse { 0% { --api-4-h: var(--api_4_max_h); } 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) ";";
}