Rev 175 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 175 | Rev 184 | ||
---|---|---|---|
1 | <?php |
1 | <?php |
2 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
2 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
3 | 3 | ||
4 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
|
4 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
|
5 | \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
5 | \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
6 | 6 | ||
7 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
|
7 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
|
8 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
8 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
9 | 9 | ||
10 | \header('Content-Type: text/css; charset=UTF-8'); |
10 | \header('Content-Type: text/css; charset=UTF-8'); |
11 | 11 | ||
12 | require_once 'css/least/Mixins.php'; |
12 | require_once 'css/least/Mixins.php'; |
13 | use de\pointedears\css\least\Mixins;
|
13 | use de\pointedears\css\least\Mixins;
|
14 | ?>@charset "UTF-8"; |
14 | ?>@charset "UTF-8"; |
15 | 15 | ||
16 | /* 0.0 to 1.0 s */
|
16 | /* 0.0 to 1.0 s */
|
17 | <?php |
17 | <?php |
- | 18 | /* hide up to 0.25 s */
|
|
18 | Mixins::keyframes('fade-in', |
19 | Mixins::keyframes('fade-in', <<<CSS |
19 | 'from {
|
- | |
20 | opacity: 0;
|
- | |
21 | }
|
- | |
22 |
|
- | |
23 | /* at 0.25 s */
|
- | |
24 | 25% {
|
20 | from, 25% { |
25 | opacity: 0;
|
21 | opacity: 0; |
26 | }
|
22 | }
|
27 |
|
23 | |
28 | to {
|
24 | to {
|
29 | opacity: 1;
|
25 | opacity: 1; |
30 | }'); |
26 | }
|
- | 27 | CSS |
|
- | 28 | ); |
|
31 | ?>
|
29 | ?>
|
32 | 30 | ||
33 | body.fade-in { |
31 | body.fade-in { |
34 | /* TODO: Step-by-step display instead */
|
32 | /* TODO: Step-by-step display instead */
|
35 | /*-webkit-animation-name: fade-in;*/
|
33 | /*-webkit-animation-name: fade-in;*/
|
36 | /* -webkit-animation-iteration-count: infinite; */
|
34 | /* -webkit-animation-iteration-count: infinite; */
|
37 | }
|
35 | }
|
38 | 36 | ||
39 | /* 0.0 to 0.6 s */
|
37 | /* 0.0 to 0.6 s */
|
40 | <?php |
38 | <?php |
- | 39 | /* up to shortly before 0.6 s */
|
|
41 | Mixins::keyframes('empty-content', |
40 | Mixins::keyframes('empty-content', <<<CSS |
42 | 'from {
|
41 | from, 99% { |
43 | opacity: 0;
|
42 | opacity: 0; |
44 | }
|
43 | }
|
45 |
|
44 | CSS |
46 | /* 0.6 s */
|
- | |
47 | 99% {
|
- | |
48 | opacity: 0;
|
- | |
49 | }'); |
45 | ); |
50 | ?>
|
46 | ?>
|
51 | 47 | ||
52 | .empty.fade-in #content { |
48 | .empty.fade-in #content { |
53 | <?php |
49 | <?php |
54 | Mixins::animation('-name', 'empty-content'); |
50 | Mixins::animation('-name', 'empty-content'); |
55 | Mixins::animation('-duration', '0.6s'); |
51 | Mixins::animation('-duration', '0.6s'); |
56 | Mixins::animation('-timing-function', 'linear'); |
52 | Mixins::animation('-timing-function', 'linear'); |
57 | ?>
|
53 | ?>
|
58 | }
|
54 | }
|
59 | 55 | ||
60 | /*
|
56 | /*
|
61 | time in s |0.0 |0.5 |0.75 |1.0 |1.5
|
57 | time in s |0.0 |0.5 |0.75 |1.0 |1.5
|
62 | : |0.625 : : |1.25
|
58 | : |0.625 : : |1.25
|
63 | : : |0.63 |0.875
|
59 | : : |0.63 |0.875
|
64 | bow-top |------------------>| : : : : : : :
|
60 | bow-top |------------------>| : : : : : : :
|
65 | bow-top-left | :-->| : : : : : :
|
61 | bow-top-left | :-->| : : : : : :
|
66 | bow-top-text |------------------>| : : : : : : :
|
62 | bow-top-text |------------------>| : : : : : : :
|
67 | menu-container | : :->| : : : : :
|
63 | menu-container | : :->| : : : : :
|
68 | footer |------------------>| : : : : : : :
|
64 | footer |------------------>| : : : : : : :
|
69 | menu | : :->| : : : : :
|
65 | menu | : :->| : : : : :
|
70 | footer-text |------------------>| : : : : : :
|
66 | footer-text |------------------>| : : : : : :
|
71 | bow-bottom | :> | : : : :
|
67 | bow-bottom | :> | : : : :
|
72 | elbo-bg | :>| : : :
|
68 | elbo-bg | :>| : : :
|
73 | elbo | :->| :
|
69 | elbo | :->| :
|
74 | elbo-border | :->|
|
70 | elbo-border | :->|
|
75 | content | :->|
|
71 | content | :->|
|
76 | 72 | ||
77 | 1: bow-top-left
|
73 | 1: bow-top-left
|
78 | 74 | ||
79 | */
|
75 | */
|
80 | 76 | ||
81 | /* 0.0 to 0.5 s */
|
77 | /* 0.0 to 0.5 s */
|
82 | <?php |
78 | <?php |
83 | Mixins::keyframes('bow-top', |
79 | Mixins::keyframes('bow-top', |
84 | 'from {
|
80 | 'from {
|
85 | left: 90%;
|
81 | left: 90%;
|
86 | min-width: auto;
|
82 | min-width: auto;
|
87 | border-top-left-radius: 0;
|
83 | border-top-left-radius: 0;
|
88 | border-bottom-left-radius: 0;
|
84 | border-bottom-left-radius: 0;
|
89 | border-top-right-radius: 1.2em;
|
85 | border-top-right-radius: 1.2em;
|
90 | border-bottom-right-radius: 1.2em;
|
86 | border-bottom-right-radius: 1.2em;
|
91 | }'); |
87 | }'); |
92 | ?>
|
88 | ?>
|
93 | 89 | ||
94 | .fade-in #bow-top { |
90 | .fade-in #bow-top { |
95 | <?php |
91 | <?php |
96 | Mixins::animation('-name', 'bow-top'); |
92 | Mixins::animation('-name', 'bow-top'); |
97 | Mixins::animation('-duration', '0.5s'); |
93 | Mixins::animation('-duration', '0.5s'); |
98 | Mixins::animation('-timing-function', 'linear'); |
94 | Mixins::animation('-timing-function', 'linear'); |
99 | ?>
|
95 | ?>
|
100 | }
|
96 | }
|
101 | 97 | ||
102 | /* 0.0 to 0.5 s */
|
98 | /* 0.0 to 0.5 s */
|
103 | <?php |
99 | <?php |
- | 100 | /* up to shortly before 0.5 s */
|
|
104 | Mixins::keyframes('bow-top-text', |
101 | Mixins::keyframes('bow-top-text', <<<CSS |
105 | 'from {
|
102 | from, 99% { |
106 | opacity: 0;
|
103 | opacity: 0; |
107 | }
|
104 | }
|
108 |
|
105 | CSS |
109 | /* shortly before 1.0 s */
|
- | |
110 | 99% {
|
- | |
111 | opacity: 0;
|
- | |
112 | }'); |
106 | ); |
113 | ?>
|
107 | ?>
|
114 | 108 | ||
115 | .fade-in #bow-top .text { |
109 | .fade-in #bow-top .text { |
116 | <?php |
110 | <?php |
117 | Mixins::animation('-name', 'bow-top-text'); |
111 | Mixins::animation('-name', 'bow-top-text'); |
118 | Mixins::animation('-duration', '0.5s'); |
112 | Mixins::animation('-duration', '0.5s'); |
119 | Mixins::animation('-timing-function', 'linear'); |
113 | Mixins::animation('-timing-function', 'linear'); |
120 | ?>
|
114 | ?>
|
121 | }
|
115 | }
|
122 | 116 | ||
123 | /* 0.0 to 0.5 s */
|
117 | /* 0.0 to 0.5 s */
|
124 | <?php |
118 | <?php |
125 | Mixins::keyframes('footer', |
119 | Mixins::keyframes('footer', |
126 | 'from {
|
120 | 'from {
|
127 | left: 90%;
|
121 | left: 90%;
|
128 | border-top-left-radius: 0;
|
122 | border-top-left-radius: 0;
|
129 | border-bottom-left-radius: 0;
|
123 | border-bottom-left-radius: 0;
|
130 | }'); |
124 | }'); |
131 | ?>
|
125 | ?>
|
132 | 126 | ||
133 | .empty.fade-in #footer { |
127 | .empty.fade-in #footer { |
134 | <?php |
128 | <?php |
135 | Mixins::animation('-name', 'footer'); |
129 | Mixins::animation('-name', 'footer'); |
136 | Mixins::animation('-duration', '0.5s'); |
130 | Mixins::animation('-duration', '0.5s'); |
137 | Mixins::animation('-timing-function', 'linear'); |
131 | Mixins::animation('-timing-function', 'linear'); |
138 | ?>
|
132 | ?>
|
139 | }
|
133 | }
|
140 | 134 | ||
141 | /* 0.0 to 0.5 s */
|
135 | /* 0.0 to 0.5 s */
|
142 | <?php |
136 | <?php |
- | 137 | /* up to shortly before 0.5 s */
|
|
143 | Mixins::keyframes('footer-text', |
138 | Mixins::keyframes('footer-text', <<<CSS |
144 | 'from {
|
139 | from, 99% { |
145 | opacity: 0;
|
140 | opacity: 0; |
146 | }
|
141 | }
|
147 |
|
142 | CSS |
148 | /* shortly before 0.5 s */
|
- | |
149 | 99% {
|
- | |
150 | opacity: 0;
|
- | |
151 | }'); |
143 | ); |
152 | ?>
|
144 | ?>
|
153 | 145 | ||
154 | .empty.fade-in #footer .text { |
146 | .empty.fade-in #footer .text { |
155 | <?php |
147 | <?php |
156 | Mixins::animation('-name', 'footer-text'); |
148 | Mixins::animation('-name', 'footer-text'); |
157 | Mixins::animation('-duration', '0.5s'); |
149 | Mixins::animation('-duration', '0.5s'); |
158 | Mixins::animation('-timing-function', 'linear'); |
150 | Mixins::animation('-timing-function', 'linear'); |
159 | ?>
|
151 | ?>
|
160 | }
|
152 | }
|
161 | 153 | ||
162 | /* 0.0 to 0.625s */
|
154 | /* 0.0 to 0.625s */
|
163 | <?php |
155 | <?php |
- | 156 | /* up to 0.5s */
|
|
164 | Mixins::keyframes('bow-top-left', |
157 | Mixins::keyframes('bow-top-left', <<<CSS |
165 | 'from {
|
158 | from, 80% { |
166 | height: 0;
|
159 | height: 0; |
167 | }
|
160 | }
|
168 | 161 | CSS |
|
169 | /* at 0.5s */
|
- | |
170 | 80% {
|
- | |
171 | height: 0;
|
- | |
172 | }'); |
162 | ); |
173 | ?>
|
163 | ?>
|
174 | 164 | ||
175 | .fade-in #bow-top-left { |
165 | .fade-in #bow-top-left { |
176 | <?php |
166 | <?php |
177 | Mixins::animation('-name', 'bow-top-left'); |
167 | Mixins::animation('-name', 'bow-top-left'); |
178 | Mixins::animation('-duration', '0.625s'); |
168 | Mixins::animation('-duration', '0.625s'); |
179 | Mixins::animation('-timing-function', 'linear'); |
169 | Mixins::animation('-timing-function', 'linear'); |
180 | ?>
|
170 | ?>
|
181 | }
|
171 | }
|
182 | 172 | ||
183 | /* 0.0 to 0.63s */
|
173 | /* 0.0 to 0.63s */
|
184 | <?php |
174 | <?php |
- | 175 | /* up to ca. 0.61875s */
|
|
185 | Mixins::keyframes('menu-container', <<<CSS |
176 | Mixins::keyframes('menu-container', <<<CSS |
186 | from {
|
177 | from, 98% { |
187 | opacity: 0; |
178 | opacity: 0; |
188 | }
|
179 | }
|
189 | - | ||
190 | /* at ca. 0.61875s */
|
- | |
191 | 98% { |
- | |
192 | opacity: 0; |
- | |
193 | }
|
- | |
194 | CSS |
180 | CSS |
195 | ); |
181 | ); |
196 | ?>
|
182 | ?>
|
197 | 183 | ||
198 | .fade-in .menu-container { |
184 | .fade-in .menu-container { |
199 | <?php |
185 | <?php |
200 | Mixins::animation('-name', 'menu-container'); |
186 | Mixins::animation('-name', 'menu-container'); |
201 | Mixins::animation('-duration', '0.63s'); |
187 | Mixins::animation('-duration', '0.63s'); |
202 | Mixins::animation('-timing-function', 'linear'); |
188 | Mixins::animation('-timing-function', 'linear'); |
203 | ?>
|
189 | ?>
|
204 | }
|
190 | }
|
205 | 191 | ||
206 | /* 0.0 to 0.63s */
|
192 | /* 0.0 to 0.63s */
|
207 | <?php |
193 | <?php |
- | 194 | /* up to ca. 0.61875 s */
|
|
208 | Mixins::keyframes('menu', <<<CSS |
195 | Mixins::keyframes('menu', <<<CSS |
209 | from {
|
196 | from, 98% { |
210 | opacity: 0; |
- | |
211 | }
|
- | |
212 | - | ||
213 | /* at ca. 0.61875 s */
|
- | |
214 | 98% { |
- | |
215 | opacity: 0; |
197 | opacity: 0; |
216 | }
|
198 | }
|
217 | CSS |
199 | CSS |
218 | ); |
200 | ); |
219 | ?>
|
201 | ?>
|
220 | 202 | ||
221 | .fade-in .menu |
203 | .fade-in .menu |
222 | {
|
204 | {
|
223 | <?php |
205 | <?php |
224 | Mixins::animation('-name', 'menu'); |
206 | Mixins::animation('-name', 'menu'); |
225 | Mixins::animation('-duration', '0.63s'); |
207 | Mixins::animation('-duration', '0.63s'); |
226 | Mixins::animation('-timing-function', 'linear'); |
208 | Mixins::animation('-timing-function', 'linear'); |
227 | ?>
|
209 | ?>
|
228 | }
|
210 | }
|
229 | 211 | ||
230 | /* 0.0 to 0.75s */
|
212 | /* 0.0 to 0.75s */
|
231 | <?php |
213 | <?php |
232 | Mixins::keyframes('bow-bottom', <<<CSS |
214 | Mixins::keyframes('bow-bottom', <<<CSS |
233 | from {
|
215 | from {
|
234 | bottom: 2.6em; |
216 | bottom: 2.6em; |
235 | height: 0em; |
217 | height: 0em; |
236 | opacity: 0; |
218 | opacity: 0; |
237 | }
|
219 | }
|
238 | 220 | ||
239 | /* 0.64125 s */
|
221 | /* 0.64125 s */
|
240 | 83%, 97% { |
222 | 83%, 97% { |
241 | bottom: 2.6em; |
223 | bottom: 2.6em; |
242 | width: 0em; |
224 | width: 0em; |
243 | height: 0em; |
225 | height: 0em; |
244 | opacity: 1; |
226 | opacity: 1; |
245 | }
|
227 | }
|
246 | CSS |
228 | CSS |
247 | ); |
229 | ); |
248 | ?>
|
230 | ?>
|
249 | 231 | ||
250 | .fade-in #bow-bottom { |
232 | .fade-in #bow-bottom { |
251 | <?php |
233 | <?php |
252 | Mixins::animation('-name', 'bow-bottom'); |
234 | Mixins::animation('-name', 'bow-bottom'); |
253 | Mixins::animation('-duration', '0.75s'); |
235 | Mixins::animation('-duration', '0.75s'); |
254 | Mixins::animation('-timing-function', 'linear'); |
236 | Mixins::animation('-timing-function', 'linear'); |
255 | ?>
|
237 | ?>
|
256 | }
|
238 | }
|
257 | 239 | ||
258 | /* 0.0 to 0.875s */
|
240 | /* 0.0 to 0.75s */
|
259 | <?php |
241 | <?php |
- | 242 | /* hide up to 0.7425 s */
|
|
260 | Mixins::keyframes('elbo-bg', <<<CSS |
243 | Mixins::keyframes('elbo-bg', <<<CSS |
261 | from, 99% { |
244 | from, 99% { |
262 | opacity: 0; |
245 | opacity: 0; |
263 | }
|
246 | }
|
264 | CSS |
247 | CSS |
265 | ); |
248 | ); |
266 | ?>
|
249 | ?>
|
267 | 250 | ||
268 | .fade-in .multi-display .upper .elbo-button, |
251 | .fade-in .multi-display .upper .elbo-button, |
269 | .fade-in .multi-display .lower .bg |
252 | .fade-in .multi-display .lower .bg |
270 | {
|
253 | {
|
271 | <?php |
254 | <?php |
272 | Mixins::animation('-name', 'elbo-bg'); |
255 | Mixins::animation('-name', 'elbo-bg'); |
273 | Mixins::animation('-duration', '0.75s'); |
256 | Mixins::animation('-duration', '0.75s'); |
274 | Mixins::animation('-timing-function', 'linear'); |
257 | Mixins::animation('-timing-function', 'linear'); |
275 | ?>
|
258 | ?>
|
276 | }
|
259 | }
|
277 | 260 | ||
278 | /* 0.0 to 0.875 */
|
261 | /* 0.0 to 0.875 s */
|
279 | <?php |
262 | <?php |
- | 263 | /* hide up to 0.86625 s */
|
|
280 | Mixins::keyframes('elbo', <<<CSS |
264 | Mixins::keyframes('elbo', <<<CSS |
281 | from {
|
265 | from, 99% { |
282 | opacity: 0; |
- | |
283 | }
|
- | |
284 | - | ||
285 | 99% { |
- | |
286 | opacity: 0; |
266 | opacity: 0; |
287 | }
|
267 | }
|
288 | CSS |
268 | CSS |
289 | ); |
269 | ); |
290 | ?>
|
270 | ?>
|
291 | 271 | ||
292 | .fade-in .multi-display .elbo { |
272 | .fade-in .multi-display .elbo { |
293 | <?php |
273 | <?php |
294 | Mixins::animation('-name', 'elbo'); |
274 | Mixins::animation('-name', 'elbo'); |
295 | Mixins::animation('-duration', '0.875s'); |
275 | Mixins::animation('-duration', '0.875s'); |
296 | Mixins::animation('-timing-function', 'linear'); |
276 | Mixins::animation('-timing-function', 'linear'); |
297 | ?>
|
277 | ?>
|
298 | }
|
278 | }
|
299 | 279 | ||
300 | /* 0.0 to 1s */
|
280 | /* 0.0 to 1s */
|
301 | <?php |
281 | <?php |
- | 282 | /* up to 0.99 s */
|
|
302 | Mixins::keyframes('elbo-border', <<<CSS |
283 | Mixins::keyframes('elbo-border', <<<CSS |
303 | from {
|
284 | from, 99% { |
304 | opacity: 0; |
- | |
305 | }
|
- | |
306 | - | ||
307 | /* 0.99 s */
|
- | |
308 | 99% { |
- | |
309 | opacity: 0; |
285 | opacity: 0; |
310 | }
|
286 | }
|
311 | CSS |
287 | CSS |
312 | ); |
288 | ); |
313 | ?>
|
289 | ?>
|
314 | 290 | ||
315 | .fade-in .multi-display .border |
291 | .fade-in .multi-display .border |
316 | {
|
292 | {
|
317 | <?php |
293 | <?php |
318 | Mixins::animation('-name', 'elbo-border'); |
294 | Mixins::animation('-name', 'elbo-border'); |
319 | Mixins::animation('-duration', '1s'); |
295 | Mixins::animation('-duration', '1s'); |
320 | Mixins::animation('-timing-function', 'linear'); |
296 | Mixins::animation('-timing-function', 'linear'); |
321 | ?>
|
297 | ?>
|
322 | }
|
298 | }
|
323 | 299 | ||
324 | /* 0.0 to 1.125s */
|
300 | /* 0.0 to 1.125s */
|
325 | <?php |
301 | <?php |
- | 302 | /* hide up to 1.11375 s */
|
|
326 | Mixins::keyframes('content', <<<CSS |
303 | Mixins::keyframes('content', <<<CSS |
327 | from {
|
304 | from, 99% { |
328 | opacity: 0; |
- | |
329 | }
|
- | |
330 | - | ||
331 | 99% { |
- | |
332 | opacity: 0; |
305 | opacity: 0; |
333 | }
|
306 | }
|
334 | CSS |
307 | CSS |
335 | ); |
308 | ); |
336 | ?>
|
309 | ?>
|
337 | 310 | ||
338 | .fade-in .multi-display .upper .content, |
311 | .fade-in .multi-display .upper .content, |
339 | .fade-in #connectors, |
312 | .fade-in #connectors, |
340 | .fade-in #content |
313 | .fade-in #content |
341 | {
|
314 | {
|
342 | <?php |
315 | <?php |
343 | Mixins::animation('-name', 'content'); |
316 | Mixins::animation('-name', 'content'); |
344 | Mixins::animation('-duration', '1.125s'); |
317 | Mixins::animation('-duration', '1.125s'); |
345 | Mixins::animation('-timing-function', 'linear'); |
318 | Mixins::animation('-timing-function', 'linear'); |
346 | ?>
|
319 | ?>
|
347 | }
|
320 | }
|
348 | 321 |