Subversion Repositories LCARS

Rev

Rev 119 | Rev 123 | 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
      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
261
    from {
262
      opacity: 0;
263
    }
264
 
265
    99% {
266
      opacity: 0;
267
    }
268
CSS
269
   );
270
?>
271
 
74 PointedEar 272
.fade-in .multi-display .upper .elbo-button,
58 PointedEar 273
.fade-in .multi-display .lower .bg
274
{
275
  <?php
276
    Mixins::animation('-name', 'elbo-bg');
277
    Mixins::animation('-duration', '0.75s');
278
    Mixins::animation('-timing-function', 'linear');
279
  ?>
280
}
281
 
282
/* 0.0 to 0.875 */
283
<?php
284
  Mixins::keyframes('elbo', <<<CSS
285
    from {
286
      opacity: 0;
287
    }
288
 
289
    99% {
290
      opacity: 0;
291
    }
292
CSS
293
   );
294
?>
295
 
296
.fade-in .multi-display .elbo {
297
  <?php
298
    Mixins::animation('-name', 'elbo');
299
    Mixins::animation('-duration', '0.875s');
300
    Mixins::animation('-timing-function', 'linear');
301
  ?>
302
}
303
 
304
/* 0.0 to 1s */
305
<?php
306
  Mixins::keyframes('elbo-border', <<<CSS
307
    from {
308
      opacity: 0;
309
    }
310
 
311
    /* 0.99 s */
312
    99% {
313
      opacity: 0;
314
    }
315
CSS
316
   );
317
?>
318
 
81 PointedEar 319
.fade-in .multi-display .border
72 PointedEar 320
{
58 PointedEar 321
  <?php
322
    Mixins::animation('-name', 'elbo-border');
323
    Mixins::animation('-duration', '1s');
324
    Mixins::animation('-timing-function', 'linear');
325
  ?>
326
}
327
 
328
/* 0.0 to 1.125s */
329
<?php
330
  Mixins::keyframes('content', <<<CSS
331
    from {
332
      opacity: 0;
333
    }
334
 
335
    99% {
336
      opacity: 0;
337
    }
338
CSS
339
   );
340
?>
341
 
118 PointedEar 342
.fade-in .multi-display .upper .content,
58 PointedEar 343
.fade-in #connectors,
344
.fade-in #content
345
{
346
  <?php
347
    Mixins::animation('-name', 'content');
50 PointedEar 348
    Mixins::animation('-duration', '1.125s');
349
    Mixins::animation('-timing-function', 'linear');
350
  ?>
118 PointedEar 351
}
352
 
353
<?php
354
  Mixins::keyframes('analysis', <<<CSS
355
    from, 74% {
356
      opacity: 0;
357
    }
358
 
122 PointedEar 359
    75%, to {
118 PointedEar 360
      opacity: 1;
122 PointedEar 361
      color: #fc6;
118 PointedEar 362
    }
363
CSS
364
   );
365
?>
366
 
122 PointedEar 367
<?php
368
  Mixins::keyframes('analysis-scan', <<<CSS
369
    from, 25% {
370
      color: #fc6;
371
    }
372
 
373
    26%, to {
374
      color: #fff;
375
    }
376
CSS
377
   );
378
 
379
   /* FIXME: :hover hides first row */
380
?>
118 PointedEar 381
/*
122 PointedEar 382
.multi-display .upper .content .analysis tr {
383
  <?php
384
    Mixins::animation('-play-state', 'running');
385
  ?>  
386
}
387
 
118 PointedEar 388
.multi-display .upper .content .analysis:hover tr {
389
  <?php
390
    Mixins::animation('-play-state', 'paused');
391
  ?>  
392
}
393
*/
122 PointedEar 394
/* Blink rate 1 Hz should be safe for people with photosensitive epilepsy */
395
.multi-display .upper .content .analysis tr:nth-child(1) th,
396
.multi-display .upper .content .analysis tr:nth-child(1) td
397
{
118 PointedEar 398
  <?php
122 PointedEar 399
    Mixins::animation('', 'analysis 1.5s linear 0s, analysis-scan 4s linear 2.0s infinite');
118 PointedEar 400
  ?>  
401
}
402
 
122 PointedEar 403
.multi-display .upper .content .analysis tr:nth-child(2) th,
404
.multi-display .upper .content .analysis tr:nth-child(2) td
405
{
118 PointedEar 406
  <?php
122 PointedEar 407
    Mixins::animation('', 'analysis 1.5s linear 0.25s, analysis-scan 4s linear 3.0s infinite');
118 PointedEar 408
  ?>  
409
}
410
 
122 PointedEar 411
.multi-display .upper .content .analysis tr:nth-child(3) th,
412
.multi-display .upper .content .analysis tr:nth-child(3) td
413
{
118 PointedEar 414
  <?php
122 PointedEar 415
    Mixins::animation('', 'analysis 1.5s linear 0.5s, analysis-scan 4s linear 4.0s infinite');
118 PointedEar 416
  ?>  
417
}