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