Subversion Repositories LCARS

Rev

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

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

169

149
     /* at 0.5 s */
170
     /* at 0.5s */
150
     80% {
171
     80% {
151
       height: 0;
172
       height: 0;
152
     }');
173
     }');
153
?>
174
?>
154
     
175
     
155
.fade-in #bow-top-left {
176
.fade-in #bow-top-left {
156
  <?php
177
  <?php
157
    Mixins::animation('-name', 'bow-top-left');
178
    Mixins::animation('-name', 'bow-top-left');
158
    Mixins::animation('-duration', '0.625s');  
179
    Mixins::animation('-duration', '0.625s');  
159
    Mixins::animation('-timing-function', 'linear');
180
    Mixins::animation('-timing-function', 'linear');
160
  ?>  
181
  ?>  
161
}
182
}
162
183
163
/* 0.0 to 1.125 s */
184
/* 0.0 to 0.63s */
164
<?php
185
<?php
165
  Mixins::keyframes('menu-container',
186
  Mixins::keyframes('menu-container',
166
    'from {
187
    'from {
167
       opacity: 0;
188
       opacity: 0;
168
     }
189
     }
169
     
190
     
170
     /* at ca. 0.61875 s */
191
     /* at ca. 0.61875s */
171
     55% {
192
     98% {
172
       opacity: 0;
193
       opacity: 0;
173
     }
194
     }
174
     
195
     
175
     56% {
196
     to {
176
       opacity: 1;
197
       opacity: 1;
177
     }');
198
     }'
-
 
199
   );
178
?>
200
?>
179
201
180
.fade-in .menu-container {
202
.fade-in .menu-container {
181
  <?php
203
  <?php
182
    Mixins::animation('-name', 'menu-container');
204
    Mixins::animation('-name', 'menu-container');
183
    Mixins::animation('-duration', '1.125s');
205
    Mixins::animation('-duration', '0.63s');
184
    Mixins::animation('-timing-function', 'linear');
206
    Mixins::animation('-timing-function', 'linear');
185
  ?>
207
  ?>
186
}
208
}
187
209
188
/* 0.0 to 1.125 s */
210
/* 0.0 to 0.63s */
189
<?php
211
<?php
190
  Mixins::keyframes('menu',
212
  Mixins::keyframes('menu', <<<CSS
191
    'from {
213
    from {
192
       opacity: 0;
214
      opacity: 0;
193
     }
215
    }
194
     
216
     
195
     /* at ca. 0.61875 s */
217
    /* at ca. 0.61875 s */
196
     55% {
218
    98% {
197
       opacity: 0;
219
      opacity: 0;
198
     }
220
    }
199
     
221
     
-
 
222
    /* at ca. 0.63 s */
200
     56% {
223
    to {
201
       opacity: 1;
224
      opacity: 1;
-
 
225
    }
-
 
226
CSS
202
     }');
227
   );
203
?>
228
?>
204
229
205
.fade-in .menu
230
.fade-in .menu
206
{
231
{
207
  <?php
232
  <?php
208
    Mixins::animation('-name', 'menu');
233
    Mixins::animation('-name', 'menu');
-
 
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');
209
    Mixins::animation('-duration', '1.125s');
385
    Mixins::animation('-duration', '1.125s');
210
    Mixins::animation('-timing-function', 'linear');
386
    Mixins::animation('-timing-function', 'linear');
211
  ?>
387
  ?>
212
}
388
}