Subversion Repositories LCARS

Rev

Rev 72 | Rev 81 | Go to most recent revision | Only display areas with differences | Regard whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 72 Rev 74
1
<?php
1
<?php
2
namespace de\pointedears\css\least;
2
namespace de\pointedears\css\least;
3
3
4
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
4
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
5
5
6
/* Cached resource expires in HTTP/1.1 caches 0h after last retrieval */
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');
7
\header('Cache-Control: max-age=86400, s-maxage=0'/*'86400*/.', must-revalidate, proxy-revalidate');
8
8
9
/* Cached resource expires in HTTP/1.0 caches 0h after last retrieval */
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');
10
\header('Expires: ' . gmdate('D, d M Y H:i:s', time()/* + 86400*/) . ' GMT');
11
 
11
 
12
\header('Content-Type: text/css; charset=UTF-8');
12
\header('Content-Type: text/css; charset=UTF-8');
13
13
14
require_once 'css/least/Mixins.php';
14
require_once 'css/least/Mixins.php';
15
?>
15
?>
16
@CHARSET "UTF-8";
16
@CHARSET "UTF-8";
17
17
18
/* 0.0 to 1.0 s */
18
/* 0.0 to 1.0 s */
19
<?php
19
<?php
20
  Mixins::keyframes('fade-in',
20
  Mixins::keyframes('fade-in',
21
    'from {
21
    'from {
22
       opacity: 0;
22
       opacity: 0;
23
     }
23
     }
24
   
24
   
25
     /* at 0.25 s */
25
     /* at 0.25 s */
26
     25% {
26
     25% {
27
       opacity: 0;
27
       opacity: 0;
28
     }
28
     }
29
   
29
   
30
     to {
30
     to {
31
       opacity: 1;
31
       opacity: 1;
32
     }');
32
     }');
33
?>
33
?>
34
34
35
body.fade-in {
35
body.fade-in {
36
  /* TODO: Step-by-step display instead */
36
  /* TODO: Step-by-step display instead */
37
  /*-webkit-animation-name: fade-in;*/
37
  /*-webkit-animation-name: fade-in;*/
38
  /* -webkit-animation-iteration-count: infinite; */
38
  /* -webkit-animation-iteration-count: infinite; */
39
}
39
}
40
40
41
/* 0.0 to 0.6 s */
41
/* 0.0 to 0.6 s */
42
<?php
42
<?php
43
  Mixins::keyframes('empty-content',
43
  Mixins::keyframes('empty-content',
44
    'from {
44
    'from {
45
       opacity: 0;
45
       opacity: 0;
46
     }
46
     }
47
     
47
     
48
     /* 0.6 s */
48
     /* 0.6 s */
49
     99% {
49
     99% {
50
       opacity: 0;
50
       opacity: 0;
51
     }');
51
     }');
52
?>
52
?>
53
53
54
.empty.fade-in #content {
54
.empty.fade-in #content {
55
  <?php
55
  <?php
56
    Mixins::animation('-name', 'empty-content');
56
    Mixins::animation('-name', 'empty-content');
57
    Mixins::animation('-duration', '0.6s');
57
    Mixins::animation('-duration', '0.6s');
58
    Mixins::animation('-timing-function', 'linear');
58
    Mixins::animation('-timing-function', 'linear');
59
  ?>
59
  ?>
60
}
60
}
61
61
62
/*
62
/*
63
time in s      |0.0                |0.5      |0.75     |1.0                |1.5
63
time in s      |0.0                |0.5      |0.75     |1.0                |1.5
64
                                   :   |0.625   :      :       |1.25
64
                                   :   |0.625   :      :       |1.25
65
                                   :   :  |0.63 |0.875
65
                                   :   :  |0.63 |0.875
66
bow-top        |------------------>|   :  :  :  :  :  :  :
66
bow-top        |------------------>|   :  :  :  :  :  :  :
67
bow-top-left   |                   :-->|  :  :  :  :  :  :
67
bow-top-left   |                   :-->|  :  :  :  :  :  :
68
bow-top-text   |------------------>|   :  :  :  :  :  :  :
68
bow-top-text   |------------------>|   :  :  :  :  :  :  :
69
menu-container |                   :   :->|  :  :  :  :  :
69
menu-container |                   :   :->|  :  :  :  :  :
70
footer         |------------------>|   :  :  :  :  :  :  :
70
footer         |------------------>|   :  :  :  :  :  :  :
71
menu           |                   :   :->|  :  :  :  :  :
71
menu           |                   :   :->|  :  :  :  :  :
72
footer-text    |------------------>|      :  :  :  :  :  :
72
footer-text    |------------------>|      :  :  :  :  :  :
73
bow-bottom     |                          :> |  :  :  :  :
73
bow-bottom     |                          :> |  :  :  :  :
74
elbo-bg        |                           :>|  :  :  :
74
elbo-bg        |                           :>|  :  :  :
75
elbo           |                                :->|  :
75
elbo           |                                :->|  :
76
elbo-border    |                                         :->|
76
elbo-border    |                                         :->|
77
content        |                                      :->|
77
content        |                                      :->|
78

78

79
1: bow-top-left
79
1: bow-top-left
80

80

81
*/
81
*/
82
82
83
/* 0.0 to 0.5 s */
83
/* 0.0 to 0.5 s */
84
<?php
84
<?php
85
  Mixins::keyframes('bow-top',
85
  Mixins::keyframes('bow-top',
86
    'from {
86
    'from {
87
       left: 90%;
87
       left: 90%;
88
       border-top-left-radius: 0;    
88
       border-top-left-radius: 0;    
89
       border-bottom-left-radius: 0;    
89
       border-bottom-left-radius: 0;    
90
       border-top-right-radius: 1.2em;
90
       border-top-right-radius: 1.2em;
91
       border-bottom-right-radius: 1.2em;
91
       border-bottom-right-radius: 1.2em;
92
     }');
92
     }');
93
?>
93
?>
94
       
94
       
95
.fade-in #bow-top {
95
.fade-in #bow-top {
96
  <?php
96
  <?php
97
    Mixins::animation('-name', 'bow-top');
97
    Mixins::animation('-name', 'bow-top');
98
    Mixins::animation('-duration', '0.5s');
98
    Mixins::animation('-duration', '0.5s');
99
    Mixins::animation('-timing-function', 'linear');
99
    Mixins::animation('-timing-function', 'linear');
100
  ?>
100
  ?>
101
}
101
}
102
102
103
/* 0.0 to 0.5 s */
103
/* 0.0 to 0.5 s */
104
<?php
104
<?php
105
  Mixins::keyframes('bow-top-text',
105
  Mixins::keyframes('bow-top-text',
106
    'from {
106
    'from {
107
       opacity: 0;
107
       opacity: 0;
108
     }
108
     }
109
   
109
   
110
     /* shortly before 1.0 s */
110
     /* shortly before 1.0 s */
111
     99% {
111
     99% {
112
       opacity: 0;
112
       opacity: 0;
113
     }');
113
     }');
114
?>
114
?>
115
115
116
.fade-in #bow-top .text {
116
.fade-in #bow-top .text {
117
  <?php
117
  <?php
118
    Mixins::animation('-name', 'bow-top-text');
118
    Mixins::animation('-name', 'bow-top-text');
119
    Mixins::animation('-duration', '0.5s');
119
    Mixins::animation('-duration', '0.5s');
120
    Mixins::animation('-timing-function', 'linear');
120
    Mixins::animation('-timing-function', 'linear');
121
  ?>
121
  ?>
122
}
122
}
123
123
124
/* 0.0 to 0.5 s */
124
/* 0.0 to 0.5 s */
125
<?php
125
<?php
126
  Mixins::keyframes('footer',
126
  Mixins::keyframes('footer',
127
    'from {
127
    'from {
128
       left: 90%;
128
       left: 90%;
129
       border-top-left-radius: 0;    
129
       border-top-left-radius: 0;    
130
       border-bottom-left-radius: 0;    
130
       border-bottom-left-radius: 0;    
131
     }');
131
     }');
132
?>
132
?>
133
133
134
.empty.fade-in #footer {
134
.empty.fade-in #footer {
135
  <?php
135
  <?php
136
    Mixins::animation('-name', 'footer');
136
    Mixins::animation('-name', 'footer');
137
    Mixins::animation('-duration', '0.5s');
137
    Mixins::animation('-duration', '0.5s');
138
    Mixins::animation('-timing-function', 'linear');
138
    Mixins::animation('-timing-function', 'linear');
139
  ?>
139
  ?>
140
}
140
}
141
141
142
/* 0.0 to 0.5 s */
142
/* 0.0 to 0.5 s */
143
<?php
143
<?php
144
  Mixins::keyframes('footer-text',
144
  Mixins::keyframes('footer-text',
145
  'from {
145
  'from {
146
     opacity: 0;
146
     opacity: 0;
147
   }
147
   }
148
 
148
 
149
   /* shortly before 0.5 s */
149
   /* shortly before 0.5 s */
150
   99% {
150
   99% {
151
     opacity: 0;
151
     opacity: 0;
152
   }');
152
   }');
153
?>
153
?>
154
154
155
.empty.fade-in #footer .text {
155
.empty.fade-in #footer .text {
156
  <?php
156
  <?php
157
    Mixins::animation('-name', 'footer-text');
157
    Mixins::animation('-name', 'footer-text');
158
    Mixins::animation('-duration', '0.5s');
158
    Mixins::animation('-duration', '0.5s');
159
    Mixins::animation('-timing-function', 'linear');
159
    Mixins::animation('-timing-function', 'linear');
160
  ?>
160
  ?>
161
}
161
}
162
162
163
/* 0.0 to 0.625s */
163
/* 0.0 to 0.625s */
164
<?php
164
<?php
165
  Mixins::keyframes('bow-top-left',
165
  Mixins::keyframes('bow-top-left',
166
    'from {
166
    'from {
167
       height: 0;
167
       height: 0;
168
     }
168
     }
169

169

170
     /* at 0.5s */
170
     /* at 0.5s */
171
     80% {
171
     80% {
172
       height: 0;
172
       height: 0;
173
     }');
173
     }');
174
?>
174
?>
175
     
175
     
176
.fade-in #bow-top-left {
176
.fade-in #bow-top-left {
177
  <?php
177
  <?php
178
    Mixins::animation('-name', 'bow-top-left');
178
    Mixins::animation('-name', 'bow-top-left');
179
    Mixins::animation('-duration', '0.625s');  
179
    Mixins::animation('-duration', '0.625s');  
180
    Mixins::animation('-timing-function', 'linear');
180
    Mixins::animation('-timing-function', 'linear');
181
  ?>  
181
  ?>  
182
}
182
}
183
183
184
/* 0.0 to 0.63s */
184
/* 0.0 to 0.63s */
185
<?php
185
<?php
186
  Mixins::keyframes('menu-container',
186
  Mixins::keyframes('menu-container',
187
    'from {
187
    'from {
188
       opacity: 0;
188
       opacity: 0;
189
     }
189
     }
190
     
190
     
191
     /* at ca. 0.61875s */
191
     /* at ca. 0.61875s */
192
     98% {
192
     98% {
193
       opacity: 0;
193
       opacity: 0;
194
     }
194
     }
195
     
195
     
196
     to {
196
     to {
197
       opacity: 1;
197
       opacity: 1;
198
     }'
198
     }'
199
   );
199
   );
200
?>
200
?>
201
201
202
.fade-in .menu-container {
202
.fade-in .menu-container {
203
  <?php
203
  <?php
204
    Mixins::animation('-name', 'menu-container');
204
    Mixins::animation('-name', 'menu-container');
205
    Mixins::animation('-duration', '0.63s');
205
    Mixins::animation('-duration', '0.63s');
206
    Mixins::animation('-timing-function', 'linear');
206
    Mixins::animation('-timing-function', 'linear');
207
  ?>
207
  ?>
208
}
208
}
209
209
210
/* 0.0 to 0.63s */
210
/* 0.0 to 0.63s */
211
<?php
211
<?php
212
  Mixins::keyframes('menu', <<<CSS
212
  Mixins::keyframes('menu', <<<CSS
213
    from {
213
    from {
214
      opacity: 0;
214
      opacity: 0;
215
    }
215
    }
216
     
216
     
217
    /* at ca. 0.61875 s */
217
    /* at ca. 0.61875 s */
218
    98% {
218
    98% {
219
      opacity: 0;
219
      opacity: 0;
220
    }
220
    }
221
     
221
     
222
    /* at ca. 0.63 s */
222
    /* at ca. 0.63 s */
223
    to {
223
    to {
224
      opacity: 1;
224
      opacity: 1;
225
    }
225
    }
226
CSS
226
CSS
227
   );
227
   );
228
?>
228
?>
229
229
230
.fade-in .menu
230
.fade-in .menu
231
{
231
{
232
  <?php
232
  <?php
233
    Mixins::animation('-name', 'menu');
233
    Mixins::animation('-name', 'menu');
234
    Mixins::animation('-duration', '0.63s');
234
    Mixins::animation('-duration', '0.63s');
235
    Mixins::animation('-timing-function', 'linear');
235
    Mixins::animation('-timing-function', 'linear');
236
  ?>
236
  ?>
237
}
237
}
238
238
239
/* 0.0 to 0.75s */
239
/* 0.0 to 0.75s */
240
<?php
240
<?php
241
  Mixins::keyframes('bow-bottom', <<<CSS
241
  Mixins::keyframes('bow-bottom', <<<CSS
242
    from {
242
    from {
243
      bottom: 2.6em;
243
      bottom: 2.6em;
244
      width: 20.6em;
244
      width: 20.6em;
245
      height: 0em;
245
      height: 0em;
246
      border-bottom-right-radius: 0em;
246
      border-bottom-right-radius: 0em;
247
      opacity: 0;
247
      opacity: 0;
248
    }
248
    }
249
249
250
    /* 0.64125 s */
250
    /* 0.64125 s */
251
    83% {
251
    83% {
252
      bottom: 2.6em;
252
      bottom: 2.6em;
253
      width: 0em;
253
      width: 0em;
254
      height: 0em;
254
      height: 0em;
255
      border-bottom-right-radius: 0em;
255
      border-bottom-right-radius: 0em;
256
      opacity: 1;
256
      opacity: 1;
257
    }
257
    }
258
258
259
    98% {
259
    98% {
260
      bottom: 0.2em;
260
      bottom: 0.2em;
261
      width: 20.6em;
261
      width: 20.6em;
262
      height: 2.4em;
262
      height: 2.4em;
263
      border-bottom-right-radius: 2em;
263
      border-bottom-right-radius: 2em;
264
    }
264
    }
265
CSS
265
CSS
266
   );
266
   );
267
?>
267
?>
268
268
269
.fade-in #bow-bottom {
269
.fade-in #bow-bottom {
270
  <?php
270
  <?php
271
    Mixins::animation('-name', 'bow-bottom');
271
    Mixins::animation('-name', 'bow-bottom');
272
    Mixins::animation('-duration', '0.75s');
272
    Mixins::animation('-duration', '0.75s');
273
    Mixins::animation('-timing-function', 'linear');
273
    Mixins::animation('-timing-function', 'linear');
274
  ?>
274
  ?>
275
}
275
}
276
276
277
/* 0.0 to 0.875s */
277
/* 0.0 to 0.875s */
278
<?php
278
<?php
279
  Mixins::keyframes('elbo-bg', <<<CSS
279
  Mixins::keyframes('elbo-bg', <<<CSS
280
    from {
280
    from {
281
      opacity: 0;
281
      opacity: 0;
282
    }
282
    }
283
283
284
    99% {
284
    99% {
285
      opacity: 0;
285
      opacity: 0;
286
    }
286
    }
287
287
288
    /* 0.75 s */
288
    /* 0.75 s */
289
    to {
289
    to {
290
      opacity: 1;
290
      opacity: 1;
291
    }
291
    }
292
CSS
292
CSS
293
   );
293
   );
294
?>
294
?>
295
295
296
.fade-in .multi-display .upper .button,
296
.fade-in .multi-display .upper .elbo-button,
297
.fade-in .multi-display .lower .bg
297
.fade-in .multi-display .lower .bg
298
{
298
{
299
  <?php
299
  <?php
300
    Mixins::animation('-name', 'elbo-bg');
300
    Mixins::animation('-name', 'elbo-bg');
301
    Mixins::animation('-duration', '0.75s');
301
    Mixins::animation('-duration', '0.75s');
302
    Mixins::animation('-timing-function', 'linear');
302
    Mixins::animation('-timing-function', 'linear');
303
  ?>
303
  ?>
304
}
304
}
305
305
306
/* 0.0 to 0.875 */
306
/* 0.0 to 0.875 */
307
<?php
307
<?php
308
  Mixins::keyframes('elbo', <<<CSS
308
  Mixins::keyframes('elbo', <<<CSS
309
    from {
309
    from {
310
      opacity: 0;
310
      opacity: 0;
311
    }
311
    }
312
312
313
    99% {
313
    99% {
314
      opacity: 0;
314
      opacity: 0;
315
    }
315
    }
316
316
317
    /* 0.875 s */
317
    /* 0.875 s */
318
    to {
318
    to {
319
      opacity: 1;
319
      opacity: 1;
320
    }
320
    }
321
CSS
321
CSS
322
   );
322
   );
323
?>
323
?>
324
324
325
.fade-in .multi-display .elbo {
325
.fade-in .multi-display .elbo {
326
  <?php
326
  <?php
327
    Mixins::animation('-name', 'elbo');
327
    Mixins::animation('-name', 'elbo');
328
    Mixins::animation('-duration', '0.875s');
328
    Mixins::animation('-duration', '0.875s');
329
    Mixins::animation('-timing-function', 'linear');
329
    Mixins::animation('-timing-function', 'linear');
330
  ?>
330
  ?>
331
}
331
}
332
332
333
/* 0.0 to 1s */
333
/* 0.0 to 1s */
334
<?php
334
<?php
335
  Mixins::keyframes('elbo-border', <<<CSS
335
  Mixins::keyframes('elbo-border', <<<CSS
336
    from {
336
    from {
337
      opacity: 0;
337
      opacity: 0;
338
    }
338
    }
339
339
340
    /* 0.99 s */
340
    /* 0.99 s */
341
    99% {
341
    99% {
342
      opacity: 0;
342
      opacity: 0;
343
    }
343
    }
344
344
345
    /* 1 s */
345
    /* 1 s */
346
    to {
346
    to {
347
      opacity: 1;
347
      opacity: 1;
348
    }
348
    }
349
CSS
349
CSS
350
   );
350
   );
351
?>
351
?>
352
352
353
.fade-in .multi-display .border,
353
.fade-in .multi-display .border,
354
.fade-in .multi-display .upper .title
354
.fade-in .multi-display .upper .title,
-
 
355
.fade-in .multi-display .upper .button
355
{
356
{
356
  <?php
357
  <?php
357
    Mixins::animation('-name', 'elbo-border');
358
    Mixins::animation('-name', 'elbo-border');
358
    Mixins::animation('-duration', '1s');
359
    Mixins::animation('-duration', '1s');
359
    Mixins::animation('-timing-function', 'linear');
360
    Mixins::animation('-timing-function', 'linear');
360
  ?>
361
  ?>
361
}
362
}
362
363
363
/* 0.0 to 1.125s */
364
/* 0.0 to 1.125s */
364
<?php
365
<?php
365
  Mixins::keyframes('content', <<<CSS
366
  Mixins::keyframes('content', <<<CSS
366
    from {
367
    from {
367
      opacity: 0;
368
      opacity: 0;
368
    }
369
    }
369
   
370
   
370
    99% {
371
    99% {
371
      opacity: 0;
372
      opacity: 0;
372
    }
373
    }
373
374
374
    /* 1.125s */
375
    /* 1.125s */
375
    to {
376
    to {
376
      opacity: 1;
377
      opacity: 1;
377
    }
378
    }
378
CSS
379
CSS
379
   );
380
   );
380
?>
381
?>
381
382
382
.fade-in #connectors,
383
.fade-in #connectors,
383
.fade-in #content
384
.fade-in #content
384
{
385
{
385
  <?php
386
  <?php
386
    Mixins::animation('-name', 'content');
387
    Mixins::animation('-name', 'content');
387
    Mixins::animation('-duration', '1.125s');
388
    Mixins::animation('-duration', '1.125s');
388
    Mixins::animation('-timing-function', 'linear');
389
    Mixins::animation('-timing-function', 'linear');
389
  ?>
390
  ?>
390
}
391
}