Subversion Repositories LCARS

Rev

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

Rev Author Line No. Line
50 PointedEar 1
<?php
58 PointedEar 2
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
3
 
116 PointedEar 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');
58 PointedEar 6
 
116 PointedEar 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');
50 PointedEar 9
 
10
\header('Content-Type: text/css; charset=UTF-8');
11
 
12
require_once 'css/least/Mixins.php';
136 PointedEar 13
use de\pointedears\css\least\Mixins;
81 PointedEar 14
?>@charset "UTF-8";
50 PointedEar 15
 
16
/* 0.0 to 1.0 s */
17
<?php
18
  Mixins::keyframes('fade-in',
19
    'from {
20
       opacity: 0;
21
     }
22
 
23
     /* at 0.25 s */
24
     25% {
25
       opacity: 0;
26
     }
27
 
28
     to {
29
       opacity: 1;
30
     }');
31
?>
32
 
33
body.fade-in {
34
  /* TODO: Step-by-step display instead */
35
  /*-webkit-animation-name: fade-in;*/
36
  /* -webkit-animation-iteration-count: infinite; */
37
}
38
 
39
/* 0.0 to 0.6 s */
40
<?php
58 PointedEar 41
  Mixins::keyframes('empty-content',
50 PointedEar 42
    'from {
43
       opacity: 0;
44
     }
45
 
46
     /* 0.6 s */
47
     99% {
48
       opacity: 0;
49
     }');
50
?>
51
 
52
.empty.fade-in #content {
53
  <?php
58 PointedEar 54
    Mixins::animation('-name', 'empty-content');
50 PointedEar 55
    Mixins::animation('-duration', '0.6s');
56
    Mixins::animation('-timing-function', 'linear');
57
  ?>
58
}
59
 
58 PointedEar 60
/*
61
time in s      |0.0                |0.5      |0.75     |1.0                |1.5
62
                                   :   |0.625   :      :       |1.25
63
                                   :   :  |0.63 |0.875
64
bow-top        |------------------>|   :  :  :  :  :  :  :
65
bow-top-left   |                   :-->|  :  :  :  :  :  :
66
bow-top-text   |------------------>|   :  :  :  :  :  :  :
67
menu-container |                   :   :->|  :  :  :  :  :
68
footer         |------------------>|   :  :  :  :  :  :  :
69
menu           |                   :   :->|  :  :  :  :  :
70
footer-text    |------------------>|      :  :  :  :  :  :
71
bow-bottom     |                          :> |  :  :  :  :
72
elbo-bg        |                           :>|  :  :  :
73
elbo           |                                :->|  :
74
elbo-border    |                                         :->|
75
content        |                                      :->|
76
 
77
1: bow-top-left
78
 
79
*/
80
 
50 PointedEar 81
/* 0.0 to 0.5 s */
82
<?php
83
  Mixins::keyframes('bow-top',
84
    'from {
85
       left: 90%;
175 PointedEar 86
       min-width: auto;
50 PointedEar 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
?>
175 PointedEar 93
 
50 PointedEar 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
      height: 0em;
236
      opacity: 0;
237
    }
238
 
239
    /* 0.64125 s */
119 PointedEar 240
    83%, 97% {
58 PointedEar 241
      bottom: 2.6em;
242
      width: 0em;
243
      height: 0em;
244
      opacity: 1;
245
    }
246
CSS
247
   );
248
?>
249
 
250
.fade-in #bow-bottom {
251
  <?php
252
    Mixins::animation('-name', 'bow-bottom');
253
    Mixins::animation('-duration', '0.75s');
254
    Mixins::animation('-timing-function', 'linear');
255
  ?>
256
}
257
 
258
/* 0.0 to 0.875s */
259
<?php
260
  Mixins::keyframes('elbo-bg', <<<CSS
175 PointedEar 261
    from, 99% {
58 PointedEar 262
      opacity: 0;
263
    }
264
CSS
265
   );
266
?>
267
 
74 PointedEar 268
.fade-in .multi-display .upper .elbo-button,
58 PointedEar 269
.fade-in .multi-display .lower .bg
270
{
271
  <?php
272
    Mixins::animation('-name', 'elbo-bg');
273
    Mixins::animation('-duration', '0.75s');
274
    Mixins::animation('-timing-function', 'linear');
275
  ?>
276
}
277
 
278
/* 0.0 to 0.875 */
279
<?php
280
  Mixins::keyframes('elbo', <<<CSS
281
    from {
282
      opacity: 0;
283
    }
284
 
285
    99% {
286
      opacity: 0;
287
    }
288
CSS
289
   );
290
?>
291
 
292
.fade-in .multi-display .elbo {
293
  <?php
294
    Mixins::animation('-name', 'elbo');
295
    Mixins::animation('-duration', '0.875s');
296
    Mixins::animation('-timing-function', 'linear');
297
  ?>
298
}
299
 
300
/* 0.0 to 1s */
301
<?php
302
  Mixins::keyframes('elbo-border', <<<CSS
303
    from {
304
      opacity: 0;
305
    }
306
 
307
    /* 0.99 s */
308
    99% {
309
      opacity: 0;
310
    }
311
CSS
312
   );
313
?>
314
 
81 PointedEar 315
.fade-in .multi-display .border
72 PointedEar 316
{
58 PointedEar 317
  <?php
318
    Mixins::animation('-name', 'elbo-border');
319
    Mixins::animation('-duration', '1s');
320
    Mixins::animation('-timing-function', 'linear');
321
  ?>
322
}
323
 
324
/* 0.0 to 1.125s */
325
<?php
326
  Mixins::keyframes('content', <<<CSS
327
    from {
328
      opacity: 0;
329
    }
330
 
331
    99% {
332
      opacity: 0;
333
    }
334
CSS
335
   );
336
?>
337
 
118 PointedEar 338
.fade-in .multi-display .upper .content,
58 PointedEar 339
.fade-in #connectors,
340
.fade-in #content
341
{
342
  <?php
343
    Mixins::animation('-name', 'content');
50 PointedEar 344
    Mixins::animation('-duration', '1.125s');
345
    Mixins::animation('-timing-function', 'linear');
346
  ?>
118 PointedEar 347
}