-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscreensize.css
190 lines (183 loc) · 6.48 KB
/
screensize.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
/**
* css-screensize
* BSD 2-Clause License
* Copyright (c) Jane Ori, PropJockey, 2023
*/
:where(:root:has(.css-screensize)) {
--_pj_scrnsz_tick-hoist: paused;
--_pj_scrnsz_tick-capture: paused;
--css-screensize-animations:
pj-css-screensize-hoist 1ms linear both var(--_pj_scrnsz_tick-hoist, running),
pj-css-screensize-capture 1ms linear both var(--_pj_scrnsz_tick-capture, running);
animation: var(--css-screensize-animations);
--_pj_scrnsz_search-in: 0;
--_pj_scrnsz_search-out: var(--_pj_scrnsz_search-in);
--_pj_scrnsz_jump-in: 1024;
--_pj_scrnsz_jump-out: var(--_pj_scrnsz_jump-in);
--width: 0;
--_pj_scrnsz_width-out: var(--width);
--height: 0;
--_pj_scrnsz_height-out: var(--height);
--_pj_scrnsz_set-search-out: calc(
(1 - min(1, var(--height))) * (
1px + max(-1px, min(0px, -100000 * (
(var(--_pj_scrnsz_search-in) + var(--_pj_scrnsz_jump-in)) * 1px - (
min(1, var(--width)) * 100vh +
(1 - min(1, var(--width))) * 100vw
)
)
))));
--_pj_scrnsz_set-axis: calc(
(1 - min(1, var(--height))) * (
(1px - var(--_pj_scrnsz_set-search-out)) * (1 + max(-1, min(0, -100000 * (
var(--_pj_scrnsz_jump-in) - 1
))))
)
);
--_pj_scrnsz_set-jump-out: calc(
(1 - min(1, var(--height))) * (
1px - min(1px, var(--_pj_scrnsz_set-search-out) + var(--_pj_scrnsz_set-axis))
)
);
--_pj_scrnsz_do-reset: calc(
min(1, var(--height)) * (
max(var(--width) * 1px - 100vw, var(--width) * -1px + 100vw) +
max(var(--height) * 1px - 100vh, var(--height) * -1px + 100vh)
)
);
}
.css-screensize > :nth-child(-n+2) > * { position: absolute; inset: 0; left: 100%; }
.css-screensize > :nth-child(-n+2) :nth-child(1) {
left: calc((1px - var(--_pj_scrnsz_set-search-out)) * 10000);
background: red;
}
.css-screensize > :nth-child(-n+2) :nth-child(2) {
left: calc((1px - var(--_pj_scrnsz_set-axis)) * 10000);
background: green;
}
.css-screensize > :nth-child(-n+2) :nth-child(3) {
left: calc((1px - var(--_pj_scrnsz_set-jump-out)) * 10000);
background: blue;
}
.css-screensize > :nth-child(-n+2) :nth-child(4) {
left: calc((1px - (
1px + max(-1px, min(0px, 100000 * (var(--_pj_scrnsz_do-reset) - 3px)))
)) * 10000);
background: purple;
}
:root:has(.css-screensize > :nth-child(-n+2) :nth-child(1):hover) {
--_pj_scrnsz_search-out: calc(var(--_pj_scrnsz_search-in) + var(--_pj_scrnsz_jump-in));
}
:root:has(.css-screensize > :nth-child(-n+2) :nth-child(2):hover) {
--_pj_scrnsz_width-out: calc(
min(1, var(--width)) * var(--width) +
(1 - min(1, var(--width))) * var(--_pj_scrnsz_search-in)
);
--_pj_scrnsz_height-out: calc(
min(1, var(--width)) * var(--_pj_scrnsz_search-in)
);
--_pj_scrnsz_search-out: 0;
--_pj_scrnsz_jump-out: 1024;
}
:root:has(.css-screensize > :nth-child(-n+2) :nth-child(3):hover) {
--_pj_scrnsz_jump-out: calc(var(--_pj_scrnsz_jump-in) / 2);
}
:root:has(.css-screensize > :nth-child(-n+2) :nth-child(4):hover) {
--_pj_scrnsz_search-out: 0;
--_pj_scrnsz_jump-out: 1024;
--_pj_scrnsz_width-out: 0;
--_pj_scrnsz_height-out: 0;
}
:where(.css-screensize) {
--opacity: 0.9;
--background: hotpink;
--enable: 1; /* 1 = enabled, 0 = disabled */
--prompt: "Screensize Required\A~ please :hover ~";
--confirm: "...Capturing Screensize";
opacity: var(--opacity);
position: fixed;
transform: scale(2);
inset: 0px;
overflow: hidden;
z-index: 9999;
list-style: none;
left: calc((1px - (
1px + max(-1px, min(0px, 100000 * (var(--_pj_scrnsz_do-reset) - 3px)))
)) * 10000 * min(1, var(--height)));
background: var(--background);
top: calc((1 - clamp(0, 10000 * var(--enable, 1), 1)) * 100%);
}
:where(.css-screensize.contained) {
position: absolute;
transform: none;
}
:where(.css-screensize)::before {
font-family: sans-serif;
content: var(--prompt);
white-space: pre;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
:where(.css-screensize:hover)::before {
content: var(--confirm);
}
.css-screensize > :nth-child(1) { --_pj_scrnsz_rep-state: 0; }
.css-screensize > :nth-child(2) { --_pj_scrnsz_rep-state: 1; }
.css-screensize > :nth-child(3) { --_pj_scrnsz_rep-state: 2; }
.css-screensize > :nth-child(4) { --_pj_scrnsz_rep-state: 3; }
.css-screensize > :nth-child(-n+4) {
position: absolute;
inset: 0;
--_pj_scrnsz_matches: calc(1 + max(-1, 100000 * min(
var(--_pj_scrnsz_rep-state) - var(--_pj_scrnsz_state, 0), var(--_pj_scrnsz_state, 0) - var(--_pj_scrnsz_rep-state)
)));
left: calc(100% - var(--_pj_scrnsz_matches) * 100%);
opacity: 0; /* set to 1 for debug; WARNING: flashing colors */
}
:root:has(.css-screensize > :nth-child(1):hover) {
--_pj_scrnsz_tick-hoist: paused;
--_pj_scrnsz_tick-capture: running;
--_pj_scrnsz_state: 1;
}
:root:has(.css-screensize > :nth-child(2):hover) {
--_pj_scrnsz_tick-hoist: paused;
--_pj_scrnsz_tick-capture: paused;
--_pj_scrnsz_state: 2;
}
:root:has(.css-screensize > :nth-child(3):hover) {
--_pj_scrnsz_tick-hoist: running;
--_pj_scrnsz_tick-capture: paused;
--_pj_scrnsz_state: 3;
}
:root:has(.css-screensize > :nth-child(4):hover) {
--_pj_scrnsz_tick-hoist: paused;
--_pj_scrnsz_tick-capture: paused;
--_pj_scrnsz_state: 0;
}
@property --_pj_scrnsz_search-out { syntax: "<number>"; initial-value: 0.0; inherits: false; }
@property --_pj_scrnsz_jump-out { syntax: "<number>"; initial-value: 0.0; inherits: false; }
@property --_pj_scrnsz_width-out { syntax: "<number>"; initial-value: 0.0; inherits: false; }
@property --_pj_scrnsz_height-out { syntax: "<number>"; initial-value: 0.0; inherits: false; }
@property --_pj_scrnsz_set-search-out { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --_pj_scrnsz_set-axis { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --_pj_scrnsz_set-jump-out { syntax: "<length>"; initial-value: 0px; inherits: true; }
@property --_pj_scrnsz_do-reset { syntax: "<length>"; initial-value: 0px; inherits: true; }
@keyframes pj-css-screensize-hoist {
0%, 100% {
--_pj_scrnsz_search-in: var(--_pj_scrnsz_search-held, 0);
--_pj_scrnsz_jump-in: var(--_pj_scrnsz_jump-held, 1024);
--width: var(--_pj_scrnsz_width-held, 0);
--height: var(--_pj_scrnsz_height-held, 0);
}
}
@keyframes pj-css-screensize-capture {
0%, 100% {
--_pj_scrnsz_search-held: var(--_pj_scrnsz_search-out);
--_pj_scrnsz_jump-held: var(--_pj_scrnsz_jump-out);
--_pj_scrnsz_width-held: var(--_pj_scrnsz_width-out);
--_pj_scrnsz_height-held: var(--_pj_scrnsz_height-out);
}
}