Subversion Repositories LCARS

Rev

Rev 184 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

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

72

73
1: bow-top-left
73
1: bow-top-left
74

74

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