Subversion Repositories LCARS

Rev

Rev 175 | Rev 177 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
175 PointedEar 1
/* Responsive Web Design  */
119 PointedEar 2
 
175 PointedEar 3
<?php use de\pointedears\css\least\Mixins; ?>
119 PointedEar 4
 
175 PointedEar 5
/* Desktops with medium-size browser viewport (SVGA resolution) */
119 PointedEar 6
 
175 PointedEar 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
}
119 PointedEar 14
 
175 PointedEar 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) */
176 PointedEar 203
@media all and (max-width: 584px) {
175 PointedEar 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;
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,'
244
        . ' background-color 0s   1s   linear'
245
      );
246
    ?>
247
  }
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,'
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
  }
554
 
555
  .multi-display .upper .content #cmd2,
556
  .multi-display .upper .content #cmd3
557
  {
558
    display: none;
559
  }
560
 
561
  .multi-display .upper .content #cmd1,
562
  .multi-display .upper .content #cmd4
563
  {
564
    right: 0;
565
  }  
566
 
567
  .multi-display .upper .content .analysis
568
  {
569
    right: 5.2em;
570
  }
571
 
572
  .multi-display .upper .content .commands
573
  {
574
    width: 5.2em;
575
  }
576
}