Subversion Repositories LCARS

Rev

Rev 50 | Rev 72 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

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