Subversion Repositories LCARS

Rev

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

Rev 176 Rev 177
Line 199... Line 199...
199
  }  
199
  }  
200
}
200
}
201
201
202
/* Desktops with small viewport (VGA resolution and less, or toolbars) */
202
/* Desktops with small viewport (VGA resolution and less, or toolbars) */
203
@media all and (max-width: 584px) {
203
@media all and (max-width: 584px) {
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');
204
  <?php require 'lcars-responsive-small.css'; ?>
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
}
205
}
385
206
386
/* Mobile devices: HTC Sensation & friends */
207
/* Mobile devices: HTC Sensation & friends */
387
@media screen and (max-device-width: 540px) {
208
@media screen and (max-device-width: 540px) {
388
/*
209
/*
Line 391... Line 212...
391
  .multi-display
212
  .multi-display
392
  {
213
  {
393
    max-width: 540px;
214
    max-width: 540px;
394
  }
215
  }
395
*/
216
*/
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');
217
  <?php require 'lcars-responsive-small.css'; ?>  
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
}
218
}
577
219