Subversion Repositories LCARS

Rev

Rev 119 | Rev 176 | Go to most recent revision | Show entire file | Regard whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 119 Rev 175
Line -... Line 1...
-
 
1
/* Responsive Web Design  */
-
 
2
-
 
3
<?php use de\pointedears\css\least\Mixins; ?>
-
 
4
-
 
5
/* Desktops with medium-size browser viewport (SVGA resolution) */
-
 
6
-
 
7
body {
-
 
8
  <?php
-
 
9
    Mixins::transition('',
-
 
10
        'margin-top   0.25s 0.75s linear,'
-
 
11
      . ' margin-left 0.25s 0.5s linear');
-
 
12
  ?>
-
 
13
}
-
 
14
-
 
15
.multi-display
-
 
16
{
-
 
17
  <?php
-
 
18
    Mixins::transition('',
-
 
19
        'top    0.25s 0.75s linear,'
-
 
20
      . ' left  0.25s 0.5s linear');
-
 
21
  ?>
-
 
22
}
-
 
23
-
 
24
.menu .bow
-
 
25
{
-
 
26
  <?php
-
 
27
    Mixins::transition('',
-
 
28
        'width            0.5s 1s    linear,'
-
 
29
      . 'background-color 0s   0.75s linear'
-
 
30
    );
-
 
31
  ?>
-
 
32
}
-
 
33
-
 
34
.multi-display .lower .bg
-
 
35
{
-
 
36
  <?php
-
 
37
    /* Wait 1s for bow to become shallower */
-
 
38
    Mixins::transition('',
-
 
39
        'top    0.25s 0.75s linear,'
-
 
40
      . 'bottom 2.5s 0.5s ease');
-
 
41
  ?>
-
 
42
}
-
 
43
 
-
 
44
#bow-top {
-
 
45
  <?php
-
 
46
    Mixins::transition('',
-
 
47
        'left                        0.5s 1.0s linear,'
-
 
48
      . ' min-width                  0s   1.5s linear,'
-
 
49
      . ' border-top-left-radius     0.5s 1.0s linear,'
-
 
50
      . ' border-top-right-radius    0.5s 1.0s linear,'
-
 
51
      . ' border-bottom-right-radius 0.5s 1.0s linear,'
-
 
52
      . ' opacity                    0s   1.0s linear');
-
 
53
  ?>
-
 
54
}
-
 
55
-
 
56
#bow-top .text {
-
 
57
  <?php
-
 
58
    Mixins::transition('-property', 'opacity');
-
 
59
    Mixins::transition('-delay', '1.5s');
-
 
60
    Mixins::transition('-timing-function', 'linear');
-
 
61
  ?>
-
 
62
}
-
 
63
-
 
64
#bow-top-left {
-
 
65
  <?php
-
 
66
    Mixins::transition('-property', 'height');
-
 
67
    Mixins::transition('-duration', '0.125s');
-
 
68
    Mixins::transition('-delay', '1.5s');
-
 
69
    Mixins::transition('-timing-function', 'linear');
-
 
70
  ?>
-
 
71
}
-
 
72
-
 
73
.menu-container
-
 
74
{
-
 
75
  <?php
-
 
76
    Mixins::transition('',
-
 
77
        'top      0.5s 1s linear,'
-
 
78
      . ' width   0.5s 1s linear,'
-
 
79
      . ' bottom  0.5s 1s linear,'
-
 
80
      . ' z-index 0s   1s linear');
-
 
81
  ?>
-
 
82
}  
-
 
83
-
 
84
.menu {
-
 
85
  <?php
-
 
86
    Mixins::transition('', 'height 0.5s 1s linear');
-
 
87
  ?>
-
 
88
}
-
 
89
-
 
90
.menu ul:first-child {
-
 
91
  <?php
-
 
92
    Mixins::transition('', 'padding-top 0.5s 1s linear');
-
 
93
  ?>
-
 
94
}
-
 
95
-
 
96
.menu .button
-
 
97
{
-
 
98
  <?php
-
 
99
    Mixins::transition('', 'width 0.5s 1s linear');
-
 
100
  ?>
-
 
101
}  
-
 
102
-
 
103
#bow #bottom {
-
 
104
  <?php
-
 
105
    Mixins::transition('', 'visibility 0s 1.625s linear');
-
 
106
  ?>
-
 
107
}
-
 
108
-
 
109
#bow-bottom {
-
 
110
  <?php
-
 
111
    Mixins::transition('',
-
 
112
        'border-bottom-left-radius   0.5s    0.5s   ease,'
-
 
113
      . ' border-bottom-right-radius 0.5s    0.5s   ease,'
-
 
114
      . ' width                      0.5s    0.5s   ease,'
-
 
115
      . ' bottom                     0.0225s 1.625s linear,'
-
 
116
      . ' height                     0.0225s 1.625s linear');
-
 
117
  ?>
-
 
118
}
-
 
119
-
 
120
#bow-bottom .concave {
-
 
121
  <?php
-
 
122
    Mixins::transition('', 'width 0.5s 0.5s ease');
-
 
123
  ?>
-
 
124
}
-
 
125
-
 
126
#connectors {
-
 
127
  <?php
-
 
128
    Mixins::transition('', 'opacity 0s 1.6475s linear');
-
 
129
  ?>
-
 
130
}  
-
 
131
-
 
132
#connectors .right {
-
 
133
  <?php
-
 
134
    Mixins::transition('', 'width 0.5s 0.5s ease');
-
 
135
  ?>
-
 
136
}
-
 
137
-
 
138
/* Desktops with large viewport (XGA resolution and more, or no toolbars) */
-
 
139
@media all and (min-width: 1024px) and (min-height: 364px) {
-
 
140
  body {
-
 
141
    margin-left: 22em;
-
 
142
  <?php
-
 
143
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
-
 
144
  ?>
-
 
145
  }
-
 
146
-
 
147
  #bow #bottom
-
 
148
  {
-
 
149
    width: 20.8em;
-
 
150
  <?php
-
 
151
    /* Wait 0.5s for multi-display to be reduced in height */
-
 
152
    Mixins::transition('', 'width 1.0s 0.5s ease');
-
 
153
  ?>
-
 
154
  }
-
 
155
   
-
 
156
  #bow-bottom {
-
 
157
    border-bottom-left-radius: 2.4em;
-
 
158
    border-bottom-right-radius: 2em;
-
 
159
    width: 20.6em;
-
 
160
  <?php
-
 
161
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
-
 
162
    Mixins::transition('-delay', '1.0s');
-
 
163
    Mixins::transition('-duration', '0.5s');
-
 
164
    Mixins::transition('-timing-function', 'ease');
-
 
165
  ?>
-
 
166
  }
-
 
167
 
-
 
168
  #bow-bottom .concave {
-
 
169
    width: 7.6em;
-
 
170
  <?php
-
 
171
    Mixins::transition('', 'width 1.0s 0.5s ease');
-
 
172
  ?>
-
 
173
  }
-
 
174
-
 
175
  #connectors .right {
-
 
176
    width: 5em;
-
 
177
    <?php
-
 
178
      /* Wait 1.0s for multi-display to be moved to right */
-
 
179
      Mixins::transition('', 'width 1.0s 0.5s ease');
-
 
180
    ?>
-
 
181
  }
-
 
182
 
-
 
183
  .multi-display
-
 
184
  {
-
 
185
    left: 15.8em;
-
 
186
  <?php
-
 
187
    Mixins::transition('',
-
 
188
        'left 0.5s 0.5s ease,'
-
 
189
      . 'top  0.5s 0.5s linear');
-
 
190
  ?>
-
 
191
  }
-
 
192
 
-
 
193
  .multi-display .lower .bg
-
 
194
  {
-
 
195
    bottom: 2.8em;
-
 
196
    <?php
-
 
197
      Mixins::transition('', 'bottom 0.5s 0.5s ease');
-
 
198
    ?>
-
 
199
  }  
-
 
200
}
-
 
201
-
 
202
/* Desktops with small viewport (VGA resolution and less, or toolbars) */
-
 
203
@media all and (max-width: 640px) {
-
 
204
  /* 0.5 to 0.5225s */
-
 
205
  #connectors {
-
 
206
    opacity: 0;
-
 
207
    <?php
-
 
208
      Mixins::transition('', 'opacity 0s 0.5s linear');
-
 
209
    ?>
-
 
210
  }
-
 
211
-
 
212
  #bow-bottom {
-
 
213
    bottom: 2.6em;
-
 
214
    height: 0em;
-
 
215
    opacity: 0;
-
 
216
    <?php
-
 
217
      Mixins::transition('',
-
 
218
          'bottom   0.0225s 0.5s    linear,'
-
 
219
        . ' height  0.0225s 0.5s    linear,'
-
 
220
        . ' opacity 0s      0.5225s linear');
-
 
221
    ?>
-
 
222
  }
-
 
223
 
-
 
224
  #bow #bottom {
-
 
225
    visibility: hidden;
-
 
226
    <?php
-
 
227
      Mixins::transition('',
-
 
228
          'visibility 0s      0.5225s linear');
-
 
229
    ?>
-
 
230
  }
-
 
231
-
 
232
  .menu-container
-
 
233
  {
-
 
234
    top: 11em;
-
 
235
    width: 5em;
-
 
236
    bottom: 0;
-
 
237
    z-index: 1;
-
 
238
    background-color: #fc6;
1
<?php
239
    <?php
-
 
240
      Mixins::transition('',
-
 
241
          'top               0.5s 0.5s linear,'
-
 
242
        . ' width            0.5s 0.5s linear,'
-
 
243
        . ' bottom           0.5s 0.5s linear,'
2
namespace de\pointedears\css\least;
244
        . ' background-color 0s   1s   linear'
-
 
245
      );
-
 
246
    ?>
-
 
247
  }
3
248
 
-
 
249
  .menu {
-
 
250
    height: 21.8em;
-
 
251
    <?php
-
 
252
      Mixins::transition('', 'height 0.5s 0.5s linear');
-
 
253
    ?>
-
 
254
  }
-
 
255
 
-
 
256
  .menu ul:first-child {
-
 
257
    padding-top: 0;
-
 
258
    <?php
-
 
259
      Mixins::transition('', 'padding-top 0.5s 0.5s linear');
-
 
260
    ?>
-
 
261
  }
-
 
262
   
-
 
263
  .menu .button
-
 
264
  {
-
 
265
    width: 5em;
-
 
266
    <?php
-
 
267
      Mixins::transition('', 'width 0.5s 0.5s linear');
-
 
268
    ?>
-
 
269
  }
-
 
270
-
 
271
  /* 0.5225s to 0.6475s */
-
 
272
  #bow-top-left {
-
 
273
    height: 0;
-
 
274
    <?php
-
 
275
      Mixins::transition('', 'height 0.125s 0.5225s linear');
-
 
276
    ?>  
-
 
277
  }
-
 
278
-
 
279
  /* at 0.6475s */
-
 
280
  #bow-top .text {
-
 
281
    opacity: 0;
-
 
282
    <?php
-
 
283
      Mixins::transition('-property', 'opacity');
-
 
284
      Mixins::transition('-delay', '0.6475s');
-
 
285
      Mixins::transition('-timing-function', 'linear');
-
 
286
    ?>
-
 
287
  }
-
 
288
 
-
 
289
  .empty #bow-top .text {
-
 
290
    opacity: 1;
-
 
291
  }
-
 
292
 
-
 
293
  /* 0.6475s to 1.1475s */
-
 
294
  #bow-top {
-
 
295
    left: 100%;
-
 
296
    min-width: auto;
-
 
297
    border-top-left-radius: 0;    
-
 
298
    border-bottom-left-radius: 0;
-
 
299
    border-top-right-radius: 1.2em;
-
 
300
    border-bottom-right-radius: 1.2em;
-
 
301
    opacity: 0;
-
 
302
    <?php
-
 
303
      Mixins::transition('',
-
 
304
          'left                        0.5s 0.6475s linear,'
-
 
305
        . ' min-width                  0s   0.6475s linear,'
-
 
306
        . ' border-top-left-radius     0.5s 0.6475s linear,'
-
 
307
        . ' border-top-right-radius    0.5s 0.6475s linear,'
-
 
308
        . ' border-bottom-right-radius 0.5s 0.6475s linear,'
4
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
309
        . ' opacity                    0s   1.1475s linear');
-
 
310
    ?>
-
 
311
  }
-
 
312
-
 
313
  .empty #bow-top {
-
 
314
    left: 0%;
-
 
315
    min-width: 10em;
-
 
316
    border-top-left-radius: 1.2em;
-
 
317
    border-bottom-left-radius: 1.2em;
-
 
318
    border-top-right-radius: 1.2em;
-
 
319
    border-bottom-right-radius: 1.2em;
-
 
320
    opacity: 1;
-
 
321
  }
-
 
322
-
 
323
  .multi-display
-
 
324
  {
-
 
325
    top: 0.2em;
-
 
326
    left: 0.2em;
-
 
327
    <?php
-
 
328
      Mixins::transition('',
-
 
329
          'top    0.25s 1.1475s linear,'
-
 
330
        . ' left  0.25s 1.3975s linear');      
-
 
331
    ?>
-
 
332
  }
-
 
333
-
 
334
  .menu .bow
-
 
335
  {
-
 
336
    background-color: #fc6;
-
 
337
    <?php
-
 
338
      Mixins::transition('',
-
 
339
        'width 0.5s 0.5s linear,'
-
 
340
        . 'background-color 0s 1.6475s linear'
-
 
341
      );
-
 
342
    ?>
-
 
343
  }
-
 
344
 
-
 
345
  .multi-display .lower .bg
-
 
346
  {
-
 
347
    top: 11em;
-
 
348
    <?php
-
 
349
      Mixins::transition('', 'top 0.25s 1.1475s linear');
-
 
350
    ?>
-
 
351
  }
-
 
352
 
-
 
353
  body {
-
 
354
    margin-top: 9.6em;
-
 
355
    margin-left: 6.4em;
-
 
356
    <?php
-
 
357
      Mixins::transition('',
-
 
358
          'margin-top   0.25s 1.1475s linear,'
-
 
359
        . ' margin-left 0.25s 1.3975s linear');
-
 
360
    ?>
-
 
361
  }
-
 
362
-
 
363
  .multi-display .upper .content #cmd2,
-
 
364
  .multi-display .upper .content #cmd3
-
 
365
  {
-
 
366
    display: none;
-
 
367
  }
-
 
368
 
-
 
369
  .multi-display .upper .content #cmd1,
-
 
370
  .multi-display .upper .content #cmd4
-
 
371
  {
-
 
372
    right: 0;
-
 
373
  }  
-
 
374
 
-
 
375
  .multi-display .upper .content .analysis
-
 
376
  {
-
 
377
    right: 5.2em;
-
 
378
  }
-
 
379
 
-
 
380
  .multi-display .upper .content .commands
-
 
381
  {
-
 
382
    width: 5.2em;
-
 
383
  }
-
 
384
}
-
 
385
-
 
386
/* Mobile devices: HTC Sensation & friends */
-
 
387
@media screen and (max-device-width: 540px) {
-
 
388
/*
-
 
389
  html,
-
 
390
  #LCARS,
-
 
391
  .multi-display
-
 
392
  {
-
 
393
    max-width: 540px;
-
 
394
  }
-
 
395
*/
-
 
396
  /* 0.5 to 0.5225s */
-
 
397
  #connectors {
-
 
398
    opacity: 0;
-
 
399
    <?php
-
 
400
      Mixins::transition('', 'opacity 0s 0.5s linear');
-
 
401
    ?>
-
 
402
  }
-
 
403
-
 
404
  #bow-bottom {
-
 
405
    bottom: 2.6em;
-
 
406
    height: 0em;
-
 
407
    opacity: 0;
-
 
408
    <?php
-
 
409
      Mixins::transition('',
-
 
410
          'bottom   0.0225s 0.5s    linear,'
-
 
411
        . ' height  0.0225s 0.5s    linear,'
-
 
412
        . ' opacity 0s      0.5225s linear');
-
 
413
    ?>
-
 
414
  }
-
 
415
 
-
 
416
  #bow #bottom {
-
 
417
    visibility: hidden;
-
 
418
    <?php
-
 
419
      Mixins::transition('',
-
 
420
          'visibility 0s      0.5225s linear');
-
 
421
    ?>
-
 
422
  }
-
 
423
-
 
424
  .menu-container
-
 
425
  {
-
 
426
    top: 11em;
-
 
427
    width: 5em;
-
 
428
    bottom: 0;
-
 
429
    z-index: 1;
-
 
430
    background-color: #fc6;
-
 
431
    <?php
-
 
432
      Mixins::transition('',
-
 
433
          'top               0.5s 0.5s linear,'
-
 
434
        . ' width            0.5s 0.5s linear,'
-
 
435
        . ' bottom           0.5s 0.5s linear,'
-
 
436
        . ' background-color 0s   1s   linear'
-
 
437
      );
-
 
438
    ?>
-
 
439
  }
-
 
440
 
-
 
441
  .menu {
-
 
442
    height: 21.8em;
-
 
443
    <?php
-
 
444
      Mixins::transition('', 'height 0.5s 0.5s linear');
-
 
445
    ?>
-
 
446
  }
-
 
447
 
-
 
448
  .menu ul:first-child {
-
 
449
    padding-top: 0;
-
 
450
    <?php
-
 
451
      Mixins::transition('', 'padding-top 0.5s 0.5s linear');
-
 
452
    ?>
-
 
453
  }
-
 
454
   
-
 
455
  .menu .button
-
 
456
  {
-
 
457
    width: 5em;
-
 
458
    <?php
-
 
459
      Mixins::transition('', 'width 0.5s 0.5s linear');
-
 
460
    ?>
-
 
461
  }
-
 
462
-
 
463
  /* 0.5225s to 0.6475s */
-
 
464
  #bow-top-left {
-
 
465
    height: 0;
-
 
466
    <?php
-
 
467
      Mixins::transition('', 'height 0.125s 0.5225s linear');
-
 
468
    ?>  
-
 
469
  }
-
 
470
-
 
471
  /* at 0.6475s */
-
 
472
  #bow-top .text {
-
 
473
    opacity: 0;
-
 
474
    <?php
-
 
475
      Mixins::transition('-property', 'opacity');
-
 
476
      Mixins::transition('-delay', '0.6475s');
-
 
477
      Mixins::transition('-timing-function', 'linear');
-
 
478
    ?>
-
 
479
  }
-
 
480
 
-
 
481
  .empty #bow-top .text {
-
 
482
    opacity: 1;
-
 
483
  }
-
 
484
 
-
 
485
  /* 0.6475s to 1.1475s */
-
 
486
  #bow-top {
-
 
487
    left: 100%;
-
 
488
    min-width: auto;
-
 
489
    border-top-left-radius: 0;    
-
 
490
    border-bottom-left-radius: 0;
-
 
491
    border-top-right-radius: 1.2em;
-
 
492
    border-bottom-right-radius: 1.2em;
-
 
493
    opacity: 0;
-
 
494
    <?php
-
 
495
      Mixins::transition('',
-
 
496
          'left                        0.5s 0.6475s linear,'
-
 
497
        . ' min-width                  0s   0.6475s linear,'
-
 
498
        . ' border-top-left-radius     0.5s 0.6475s linear,'
-
 
499
        . ' border-top-right-radius    0.5s 0.6475s linear,'
-
 
500
        . ' border-bottom-right-radius 0.5s 0.6475s linear,'
-
 
501
        . ' opacity                    0s   1.1475s linear');
-
 
502
    ?>
-
 
503
  }
-
 
504
-
 
505
  .empty #bow-top {
-
 
506
    left: 0%;
-
 
507
    min-width: 10em;
-
 
508
    border-top-left-radius: 1.2em;
-
 
509
    border-bottom-left-radius: 1.2em;
-
 
510
    border-top-right-radius: 1.2em;
-
 
511
    border-bottom-right-radius: 1.2em;
-
 
512
    opacity: 1;
-
 
513
  }
-
 
514
-
 
515
  .multi-display
-
 
516
  {
-
 
517
    top: 0.2em;
-
 
518
    left: 0.2em;
-
 
519
    <?php
-
 
520
      Mixins::transition('',
-
 
521
          'top    0.25s 1.1475s linear,'
-
 
522
        . ' left  0.25s 1.3975s linear');      
-
 
523
    ?>
-
 
524
  }
-
 
525
-
 
526
  .menu .bow
-
 
527
  {
-
 
528
    background-color: #fc6;
-
 
529
    <?php
-
 
530
      Mixins::transition('',
-
 
531
        'width 0.5s 0.5s linear,'
-
 
532
        . 'background-color 0s 1.6475s linear'
-
 
533
      );
-
 
534
    ?>
-
 
535
  }
-
 
536
 
-
 
537
  .multi-display .lower .bg
-
 
538
  {
-
 
539
    top: 11em;
-
 
540
    <?php
-
 
541
      Mixins::transition('', 'top 0.25s 1.1475s linear');
-
 
542
    ?>
-
 
543
  }
-
 
544
 
-
 
545
  body {
-
 
546
    margin-top: 9.6em;
-
 
547
    margin-left: 6.4em;
-
 
548
    <?php
-
 
549
      Mixins::transition('',
-
 
550
          'margin-top   0.25s 1.1475s linear,'
-
 
551
        . ' margin-left 0.25s 1.3975s linear');
-
 
552
    ?>
-
 
553
  }
5
554
6
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
555
  .multi-display .upper .content #cmd2,
7
\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
556
  .multi-display .upper .content #cmd3
-
 
557
  {
-
 
558
    display: none;
-
 
559
  }
8
560
 
9
/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
561
  .multi-display .upper .content #cmd1,
10
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
562
  .multi-display .upper .content #cmd4
-
 
563
  {
-
 
564
    right: 0;
-
 
565
  }  
11
 
566
 
12
\header('Content-Type: text/css; charset=UTF-8');
567
  .multi-display .upper .content .analysis
-
 
568
  {
-
 
569
    right: 5.2em;
-
 
570
  }
13
571
 
14
require_once 'css/least/Mixins.php';
572
  .multi-display .upper .content .commands
-
 
573
  {
15
?>@charset "UTF-8";
574
    width: 5.2em;
-
 
575
  }
-
 
576
}
16
 
577