Subversion Repositories LCARS

Rev

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