Subversion Repositories LCARS

Rev

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