Subversion Repositories LCARS

Rev

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

Rev Author Line No. Line
50 PointedEar 1
<?php
119 PointedEar 2
namespace de\pointedears\css\least;
3
 
58 PointedEar 4
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
50 PointedEar 5
 
116 PointedEar 6
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
117 PointedEar 7
\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
58 PointedEar 8
 
116 PointedEar 9
/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
10
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
58 PointedEar 11
 
50 PointedEar 12
\header('Content-Type: text/css; charset=UTF-8');
119 PointedEar 13
 
14
require_once 'css/least/Mixins.php';
79 PointedEar 15
?>@charset "UTF-8";
37 PointedEar 16
 
58 PointedEar 17
<?php
18
  if (!isset($_GET['ani']) || $_GET['ani'] !== '0')
19
  {
123 PointedEar 20
    /* Optional general animations */
58 PointedEar 21
?>
79 PointedEar 22
@import url("/styles/lcars-ani.css");
58 PointedEar 23
<?php
24
  }
25
?>
123 PointedEar 26
 
27
<?php
28
  /* Non-optional content-specific animations */
29
  Mixins::keyframes('analysis', <<<CSS
30
    from, 74% {
31
      opacity: 0;
32
    }
33
 
34
    75%, to {
35
      opacity: 1;
36
      color: #fc6;
37
    }
38
CSS
39
   );
40
?>
41
 
42
<?php
43
  Mixins::keyframes('analysis-scan', <<<CSS
44
    from, 25% {
45
      color: #fc6;
46
    }
47
 
48
    26%, to {
49
      color: #fff;
50
    }
51
CSS
52
   );
53
 
54
   /* FIXME: :hover hides first row */
55
?>
56
/*
57
.multi-display .upper .content .analysis tr {
58
  <?php
59
    Mixins::animation('-play-state', 'running');
60
  ?>  
61
}
62
 
63
.multi-display .upper .content .analysis:hover tr {
64
  <?php
65
    Mixins::animation('-play-state', 'paused');
66
  ?>  
67
}
68
*/
69
/* Blink rate 1 Hz should be safe for people with photosensitive epilepsy */
70
.multi-display .upper .content .analysis tr:nth-child(1) th,
71
.multi-display .upper .content .analysis tr:nth-child(1) td
72
{
73
  <?php
74
    Mixins::animation('', 'analysis 1.5s linear 0s, analysis-scan 4s linear 2.0s infinite');
75
  ?>  
76
}
77
 
78
.multi-display .upper .content .analysis tr:nth-child(2) th,
79
.multi-display .upper .content .analysis tr:nth-child(2) td
80
{
81
  <?php
82
    Mixins::animation('', 'analysis 1.5s linear 0.25s, analysis-scan 4s linear 3.0s infinite');
83
  ?>  
84
}
85
 
86
.multi-display .upper .content .analysis tr:nth-child(3) th,
87
.multi-display .upper .content .analysis tr:nth-child(3) td
88
{
89
  <?php
90
    Mixins::animation('', 'analysis 1.5s linear 0.5s, analysis-scan 4s linear 4.0s infinite');
91
  ?>  
92
}
93
 
94
/* FIXME: Does not work, appended at bottom instead  */
119 PointedEar 95
/* @import url("/styles/lcars-responsive.css"); */
50 PointedEar 96
 
37 PointedEar 97
body {
98
  margin-top: 12em;
119 PointedEar 99
  margin-left: 16.8em;
37 PointedEar 100
  margin-right: 0.2em;
101
  margin-bottom: 0.2em;
102
}
103
 
116 PointedEar 104
/* HTML5 elements */
105
 
106
nav
107
{
108
  display: block;
109
}
110
 
37 PointedEar 111
/* Bow (main) and elbo (multi-view) */
112
 
113
#LCARS {
114
  position: fixed;
115
  left: 0;
116
  top: 0;
117
  right: 0;
118
  padding: 0.2em;
119
  background-color: #000;
120
  z-index: 1701;
121
}
122
 
123
#bow {
124
  position: absolute;
125
  left: 0.2em;
126
  top: 0.2em;
127
  right: 0.2em;
128
  height: 2.4em;
129
  padding-bottom: 0.2em;
130
  background-color: #000;
131
}
132
 
133
#bow-top {
134
  /* NOTE: position: absolute is needed for animation */
135
  position: absolute;
136
  top: 0;
137
  left: 0;
138
  right: 0;
139
  min-width: 15.4em;
140
  height: 2em;
141
  background-color: #999;
142
  border-top-left-radius: 2.4em;
143
  border-top-right-radius: 1.2em;
144
  border-bottom-right-radius: 1.2em;
145
  line-height: 0.9;
146
}
147
 
148
.empty #bow-top {
149
  border-top-left-radius: 1.2em;
150
  border-bottom-left-radius: 1.2em;
38 PointedEar 151
  min-width: 10em;
37 PointedEar 152
}
153
 
154
 
155
#bow-top .text {
156
  position: absolute;
157
  margin: 0;
158
  left: 4.33em;
159
  top: 0;
40 PointedEar 160
  right: 0.75em;
37 PointedEar 161
  height: 1em;
162
  text-align: right;
163
  color: #fc0;
164
  font-size: 2.4em;
165
  padding-right: 0.1em;
166
  overflow: hidden;
167
  text-overflow: ellipsis;
168
}
169
 
38 PointedEar 170
.empty #bow-top .text {
171
  left: 0.93em;
172
}
173
 
37 PointedEar 174
 
175
 
176
#bow-top .text span {
177
  padding-right: 0.1em;
178
  background-color: #000;
179
  padding-left: 0.1em;
180
  text-transform: uppercase;
181
  white-space: nowrap;
182
}
183
 
38 PointedEar 184
.empty #footer-container {
185
  position: fixed;
186
  left: 0.2em;
187
  bottom: 0;
188
  right: 0.2em;
189
  min-height: 2.4em;
190
  padding-top: 0.2em;
191
  padding-bottom: 0.2em;
192
  background-color: #000;
193
}
194
 
40 PointedEar 195
 
38 PointedEar 196
.empty #footer {
197
  position: absolute;
198
  bottom: 0;
199
  left: 0;
200
  right: 0;
201
  height: 2em;
40 PointedEar 202
  min-width: 10em;
38 PointedEar 203
  margin-bottom: 0.2em;
204
  background-color: #999;
205
  border-radius: 1.2em;
40 PointedEar 206
  line-height: 0.9;
38 PointedEar 207
}
208
 
209
.empty #footer .text {
210
  position: absolute;
40 PointedEar 211
  margin: 0;
212
  left: 0.93em;
213
  top: 0;
214
  right: 0.75em;
215
  height: 1em;
216
  background-color: transparent;
38 PointedEar 217
  color: #fc0;
40 PointedEar 218
  font-size: 2.4em;
38 PointedEar 219
  padding-right: 0.1em;
220
  overflow: hidden;
221
  text-overflow: ellipsis;
222
}
223
 
224
.empty #footer .text span {
225
  padding-right: 0.1em;
40 PointedEar 226
  background-color: #000;
38 PointedEar 227
  padding-left: 0.1em;
228
  text-transform: uppercase;
229
  white-space: nowrap;
230
}
231
 
37 PointedEar 232
.empty .separator-left {
233
  position: absolute;
234
  left: 2em;
235
  height: 2em;
236
  width: 0.25em;
237
  background-color: #000;
238
}
239
 
240
.empty .separator-right {
241
  position: absolute;
242
  right: 2em;
243
  height: 2em;
244
  width: 0.25em;
245
  background-color: #000;
246
}
247
 
58 PointedEar 248
.bow {
249
  background-color: #999;
250
}
251
 
37 PointedEar 252
#bow-top-left {
253
  position: absolute;
254
  top: 2em;
255
  left: 0;
256
  right: 0;
109 PointedEar 257
  height: 4.4em;
37 PointedEar 258
  width: 9.2em;
259
  background-color: #999;
109 PointedEar 260
  overflow: hidden;
37 PointedEar 261
}
262
 
263
.empty #bow-top-left {
264
  display: none;
265
}
266
 
267
#bow-top-left .concave {
268
  position: absolute;
269
  top: 0;
270
  left: 8em;
109 PointedEar 271
  height: 4.4em;
37 PointedEar 272
  width: 1.2em;
273
  background-color: #000;
274
  border-top-left-radius: 1.2em;
275
}
276
 
277
.empty #bow-top-left-concave {
278
  display: none;
279
}
280
 
50 PointedEar 281
.menu-container {
43 PointedEar 282
  position: fixed;
283
  left: 0.2em;
109 PointedEar 284
  top: 6.8em;
43 PointedEar 285
  width: 8em;
286
  bottom: 2.8em;
287
  background-color: #999;
37 PointedEar 288
  overflow: auto;
109 PointedEar 289
  overflow-x: hidden;
290
  overflow-y: auto;
37 PointedEar 291
}
292
 
50 PointedEar 293
.menu
43 PointedEar 294
{
109 PointedEar 295
  height: 20em;
43 PointedEar 296
  background-color: #000;
297
}
298
 
299
.menu ul {
103 PointedEar 300
  margin: 0 0.2em 0 0;
37 PointedEar 301
  padding: 0;
302
}
303
 
43 PointedEar 304
.menu li {
37 PointedEar 305
  margin: 0;
306
}
307
 
308
#bow #bottom
309
{
310
  position: fixed;
311
  left: 0;
312
  bottom: 0;
119 PointedEar 313
  width: 10.4em;
37 PointedEar 314
  height: 2.4em;
315
  background-color: #000;
316
  z-index: 1701;
317
}
318
 
319
#bow-bottom {
320
  position: absolute;
321
  bottom: 0.2em;
322
  left: 0.2em;
119 PointedEar 323
  width: 8em;
324
  height: 2.6em;
325
  border-bottom-left-radius: 0em;
326
  border-bottom-right-radius: 0em;
37 PointedEar 327
  background-color: #999;
328
}
329
 
330
.empty #bow-bottom {
331
  display: none;
332
}
333
 
334
#bow-bottom .concave {
335
  position: absolute;
336
  margin-left: 0.2em;
337
  margin-bottom: 0.2em;
338
  bottom: 0.3em;
339
  left: 7.8em;
340
  height: 2.1em;
119 PointedEar 341
  width: 2.2em;
37 PointedEar 342
  border-bottom-left-radius: 1.2em;
343
  border-bottom-right-radius: 1em;
344
  background-color: #000;
345
}
346
 
38 PointedEar 347
#bow-bottom .spacer {
37 PointedEar 348
  position: absolute;
38 PointedEar 349
  left: 10.2em;
94 PointedEar 350
  bottom: 0;
38 PointedEar 351
  width: 0.2em;
352
  height: 0.5em;
353
  background-color: black;
37 PointedEar 354
}
355
 
38 PointedEar 356
.empty #bow-bottom-left-concave {
357
  display: none;
37 PointedEar 358
}
359
 
360
/* Controls */
361
 
362
.button:visited,
363
.button
364
{
365
  position: relative;
366
  display: inline-block;
367
  margin-right: 0.2em;
368
  margin-bottom: 0.2em;
369
  width: 5em;
370
  height: 2em;
371
  background-color: #7d7d7d; /* c9c */
372
  color: #000 !important;
373
  text-decoration: none !important;
374
  text-transform: uppercase;
375
  overflow: hidden;
83 PointedEar 376
  cursor: pointer !important;
37 PointedEar 377
}
378
 
379
.button .text {
380
  position: absolute;
381
  bottom: 0;
382
  right: 0.5em;
83 PointedEar 383
  cursor: pointer !important;
37 PointedEar 384
}
385
 
386
.button.command {
387
  border-radius: 1.2em;
388
}
389
 
390
.button.command .text {
391
  position: absolute;
392
  bottom: 0;
393
  right: 1em;
394
}
395
 
396
.button:hover,
397
.button:focus,
398
.button.selected:hover,
399
.button.selected:focus,
400
.group .button:hover,
401
.group .button:focus,
402
.group .button:visited:hover,
403
.group .button:visited:focus
404
{
405
  background-color: #f90 !important;
406
  color: #000 !important;
407
}
408
 
409
.button:active,
410
.button.selected:active,
411
.group .button:active,
412
.group .button:visited:active
413
{
414
  background-color: #fff !important;
415
  color: #000 !important;
416
}
417
 
43 PointedEar 418
.menu .button {
37 PointedEar 419
  display: block;
420
  width: 8em;
421
  height: 1em;
422
  line-height: 1;
423
  background-color: #9cf;
424
  color: #000 !important;
50 PointedEar 425
  text-overflow: ellipsis;
426
  white-space: nowrap;
37 PointedEar 427
}
428
 
58 PointedEar 429
#connectors {
430
  position: fixed;
431
  left: 8.4em;
432
  top: 5.6em;
433
}
434
 
119 PointedEar 435
#connectors div {
436
  position: absolute;
437
}
438
 
439
#connectors .top {
440
  top: 0;
441
  height: 1em;
442
}
443
 
444
#connectors .mid {
445
  top: 13.6em;
446
  height: 0.8em;
447
}
448
 
449
#connectors .left {
450
  left: 0;
451
  width: 2em;
452
}
453
 
454
#connectors .right {
455
  left: 2.2em;
456
  width: 0em;
457
}
458
 
37 PointedEar 459
.multi-display
460
{
461
  position: fixed;
74 PointedEar 462
  top: 2.6em;
119 PointedEar 463
  left: 10.6em;
94 PointedEar 464
  right: 0;
37 PointedEar 465
}
466
 
467
.multi-display .button
468
{
469
  width: 5em !important;
470
}
471
 
472
.multi-display .upper
473
{
474
  position: absolute;
475
  top: 0;
476
  left: 0;
477
  right: 0;  
94 PointedEar 478
  height: 7.5em;  
37 PointedEar 479
  padding-right: 0.2em;
480
  background-color: black;
481
}
482
 
74 PointedEar 483
.multi-display .upper .content
72 PointedEar 484
{
485
  position: absolute;
486
  top: 0;
74 PointedEar 487
  left: 6em;
94 PointedEar 488
  bottom: 1.3em;
72 PointedEar 489
  right: 0.2em;
490
  background-color: black;
491
  color: white;
74 PointedEar 492
  text-align: right;
493
  overflow: hidden;
494
  text-overflow: ellipsis;
495
}
496
 
497
.multi-display .upper .content .title
498
{
499
  position: absolute;
500
  top: 0;
94 PointedEar 501
  left: 0;
74 PointedEar 502
  height: 1em;
94 PointedEar 503
  right: 0;
74 PointedEar 504
  background-color: black;
505
  color: white;
72 PointedEar 506
  font-size: 2.4em;
507
  text-transform: uppercase;
508
  text-align: right;
74 PointedEar 509
  overflow: hidden;
72 PointedEar 510
}
511
 
74 PointedEar 512
.multi-display .upper .content .title span
37 PointedEar 513
{
74 PointedEar 514
  white-space: nowrap;
515
}
516
 
90 PointedEar 517
.multi-display .upper .content .analysis {
518
  position: absolute;
519
  top: 2.4em;
520
  bottom: 0;
521
  right: 11em;
522
  left: 0;
523
  overflow: hidden;
524
  text-align: left;
118 PointedEar 525
  cursor: default;
90 PointedEar 526
}
527
 
118 PointedEar 528
.multi-display .upper .content .analysis table {
529
  border-collapse: collapse;
530
  line-height: 1.2;
119 PointedEar 531
  max-width: 100%;
118 PointedEar 532
}
533
 
534
.multi-display .upper .content .analysis th {
120 PointedEar 535
  padding: 0 0.4em 0 0.1em;
118 PointedEar 536
  font-weight: normal;
537
  text-align: left;
538
  text-transform: uppercase;
539
  white-space: nowrap;
540
  vertical-align: baseline;
541
}
542
 
543
.multi-display .upper .content .analysis td {
120 PointedEar 544
  padding: 0 0.1em 0 0.1em;
118 PointedEar 545
  text-overflow: ellipsis;
546
  white-space: nowrap;
547
  vertical-align: baseline;
548
  text-overflow: ellipsis;
549
}
550
 
551
.multi-display .upper .content .analysis tr:hover th,
552
.multi-display .upper .content .analysis tr:hover td
553
{
554
  color: #f90;
555
}
556
 
557
.multi-display .upper .content .analysis td sup {
558
  line-height: 1;
559
  font-weight: 500;
560
}
561
 
92 PointedEar 562
.multi-display .upper .content .commands
74 PointedEar 563
{
564
  position: absolute;
92 PointedEar 565
  margin: 0;
566
  padding: 0;
567
  top: 2.4em;
94 PointedEar 568
  right: 0;
92 PointedEar 569
  height: 3.8em;
570
  width: 10.2em;
571
  list-style: none;
572
}
573
 
574
.multi-display .upper .content .commands li
575
{
576
  position: absolute;
577
  margin: 0;
578
  width: 5em;
74 PointedEar 579
  height: 1.8em;
92 PointedEar 580
}
581
 
582
.multi-display .upper .content .commands .button
583
{
584
  position: absolute;
585
  top: 0;
586
  left: 0;
587
  margin: 0;
588
  height: 1.8em;
589
  border-radius: 0.9em;
74 PointedEar 590
  text-transform: none;
591
}
592
 
92 PointedEar 593
.multi-display .upper .content .commands .button .text {
101 PointedEar 594
  right: 1em;
74 PointedEar 595
}
596
 
597
.multi-display .upper .content #cmd1
598
{
92 PointedEar 599
  top: 0;
74 PointedEar 600
  right: 5.2em;
601
}
602
 
603
.multi-display .upper .content #cmd2
604
{
92 PointedEar 605
  top: 0;
74 PointedEar 606
  right: 0;
607
}
608
 
609
.multi-display .upper .content #cmd3
610
{
92 PointedEar 611
  top: 2em;
612
  right: 0;
74 PointedEar 613
}
614
 
615
.multi-display .upper .content #cmd4
616
{
92 PointedEar 617
  top: 2em;
618
  right: 5.2em;
74 PointedEar 619
}
620
 
621
.multi-display .upper .elbo-button
622
{
623
  position: absolute;
624
  top: 0;
625
  left: 0;
626
  width: 5em;
627
  height: 4em;
37 PointedEar 628
  background-color: #c9c !important;
72 PointedEar 629
  color: #000 !important;
83 PointedEar 630
  cursor: default;
37 PointedEar 631
}
632
 
74 PointedEar 633
.multi-display .upper .elbo-button .text
72 PointedEar 634
{
635
  position: absolute;
636
  bottom: 0;
637
  right: 0.2em;
102 PointedEar 638
  max-width: 4em;
72 PointedEar 639
  max-height: 3.6em;
640
  text-align: right;
641
  overflow: hidden;
642
}
643
 
37 PointedEar 644
.multi-display .upper .elbo
645
{
646
  position: absolute;
647
  left: 0;
74 PointedEar 648
  top: 4.2em;
37 PointedEar 649
  width: 6em;
650
  height: 3.2em;
651
  border-bottom-left-radius: 2em;
652
  background-color: #9cf;
72 PointedEar 653
  color: #000;
37 PointedEar 654
}
655
 
72 PointedEar 656
.multi-display .upper .elbo .text
657
{
658
  position: absolute;
659
  top: 0;
660
  right: 1.2em;
102 PointedEar 661
  max-width: 4em;
72 PointedEar 662
  max-height: 2.2em;
663
  text-align: right;
664
  overflow: hidden;
83 PointedEar 665
  cursor: default;
72 PointedEar 666
}
667
 
101 PointedEar 668
.elbo [title],
669
.button [title]
670
{
671
  border-bottom: none;
672
}
673
 
37 PointedEar 674
.multi-display .upper .elbo .concave
675
{
676
  position: absolute;
677
  left: 5em;
678
  top: 0;
103 PointedEar 679
  width: 1.1em;
37 PointedEar 680
  height: 2.2em;
681
  border-bottom-left-radius: 1em;
682
  background-color: black;
683
}
684
 
80 PointedEar 685
.multi-display .border
686
{
687
  height: 1em;
688
}
689
 
37 PointedEar 690
.multi-display .upper .border
691
{
94 PointedEar 692
  position: absolute;
693
  top: 6.4em;
694
  left: 6em;
37 PointedEar 695
  right: 0.2em;
79 PointedEar 696
}
697
 
698
.multi-display .border div
699
{
700
  position: absolute;
701
  top: 0;
702
  height: 1em;
703
}
704
 
705
.multi-display .upper .border div
706
{
37 PointedEar 707
  background-color: #9cf;
80 PointedEar 708
}
79 PointedEar 709
 
710
.multi-display .upper .border .left
711
{
712
  left: 0;
713
  right: 5.2em;
714
  height: 1em;
37 PointedEar 715
}
716
 
79 PointedEar 717
.multi-display .upper .border .right
718
{
719
  width: 5em;
720
  right: 0;
721
}
722
 
37 PointedEar 723
.multi-display .lower
724
{
725
  position: absolute;
74 PointedEar 726
  top: 7.5em;
37 PointedEar 727
  left: 0;
94 PointedEar 728
  height: 0.1em;
729
  right: 0;
37 PointedEar 730
  background-color: black;
731
}
732
 
733
.multi-display .lower .elbo
734
{
94 PointedEar 735
  position: absolute;
736
  top: 0.1em;
737
  left: 0;
37 PointedEar 738
  width: 6em;
739
  height: 3em;
740
  border-top-left-radius: 2em;
741
  background-color: #fc6;
742
}
743
 
744
.multi-display .lower .elbo .concave
745
{
746
  position: absolute;
747
  left: 5em;
748
  top: 1em;
103 PointedEar 749
  width: 1.1em;
750
  height: 2.1em;
37 PointedEar 751
  background-color: black;
752
  border-top-left-radius: 1em;
753
}
754
 
755
.multi-display .lower .bg
756
{
757
  position: fixed;
758
  top: 13.4em;
119 PointedEar 759
  bottom: 0.2em;
37 PointedEar 760
  width: 5em;
761
  background-color: #fc6;
762
}
763
 
764
.multi-display .lower .border-container
765
{
94 PointedEar 766
  position: absolute;
767
  top: 0.1em;
768
  left: 6em;
769
  right: 0;
37 PointedEar 770
  height: 1.2em;
771
  background-color: black;
772
}
773
 
774
.multi-display .lower .border
775
{
80 PointedEar 776
  position: absolute;
37 PointedEar 777
  left: 0;
778
  right: 0.2em;
79 PointedEar 779
}
780
 
781
.multi-display .lower .border div
782
{
37 PointedEar 783
  background-color: #fc6;
784
}
785
 
79 PointedEar 786
.multi-display .lower .border .left
787
{
788
  left: 0;
80 PointedEar 789
  right: 5.2em;
79 PointedEar 790
}
791
 
792
.multi-display .lower .border .right
793
{
794
  width: 5em;
80 PointedEar 795
  right: 0;
79 PointedEar 796
}
797
 
43 PointedEar 798
.menu .button.secondary,
799
.multi-display .lower .elbo.secondary,
800
.multi-display .lower .bg.secondary,
801
.multi-display .lower .border.secondary
802
{
803
  background-color: #f96;
804
}
805
 
806
.menu .button.ancillary,
807
.multi-display .lower .elbo.ancillary,
808
.multi-display .lower .bg.ancillary,
809
.multi-display .lower .border.ancillary
810
{
811
  background-color: #c9c;
812
}
813
 
814
.menu .button.database,
815
.multi-display .lower .elbo.database,
816
.multi-display .lower .bg.database,
817
.multi-display .lower .border.database
818
{
37 PointedEar 819
  background-color: #c66;
820
}
821
 
43 PointedEar 822
.menu .button .text {
37 PointedEar 823
  position: static;
824
  margin: 0 0.25em;
825
}
826
 
827
.button.selected {
828
  background-color: #fc6 !important;
829
  color: #000 !important;  
830
}
831
 
832
.group {
833
  margin: 0 auto;
834
  position: relative;
38 PointedEar 835
  width: 7.7em;
37 PointedEar 836
}
837
 
838
.group .separator {
839
  float: left;
840
  position: absolute;
38 PointedEar 841
  top: 0;
842
  left: 0;
843
  width: 1.5em;
37 PointedEar 844
  height: 100%;
845
  background-color: #c66;
846
  color: #000;
847
}
848
 
849
.group .separator:after {
850
  position: absolute;
38 PointedEar 851
  width: 0.8em;
852
  height: 0.5em;
853
  bottom: 0.25em;
854
  left: 0.25em;
37 PointedEar 855
  background-color: #000;
856
  content: "\a0";
857
}
858
 
859
.group ul {
38 PointedEar 860
  margin-left: 1.7em;
37 PointedEar 861
}
862
 
863
.group li {
38 PointedEar 864
  margin-bottom: 0;
37 PointedEar 865
}
866
 
867
.group .button:visited,
868
.group .button
869
{
38 PointedEar 870
  display: block;
37 PointedEar 871
  position: relative;
38 PointedEar 872
  width: 6em;
37 PointedEar 873
  background-color: #99f !important;
874
}
875
 
38 PointedEar 876
.group li:last-child .button
877
{
878
  margin-bottom: 0;
37 PointedEar 879
}
880
 
38 PointedEar 881
.button.right {
882
  border-top-right-radius: 1em;
883
  border-bottom-right-radius: 1em;
37 PointedEar 884
}
885
 
38 PointedEar 886
.button.right .text {
887
  right: 1em;
888
}
889
 
890
.button.left {
891
  border-top-left-radius: 1em;
892
  border-bottom-left-radius: 1em;
893
}
894
 
37 PointedEar 895
.group .button .key {
896
  display: inline-block;
897
  position: absolute;
38 PointedEar 898
  left: 0.2em;
37 PointedEar 899
  top: 0;
900
  bottom: 0;
38 PointedEar 901
  padding: 0 0.1em;
37 PointedEar 902
  background-color: #000;
903
  color: #f90;
38 PointedEar 904
  font-size: 2.4em;
37 PointedEar 905
  text-transform: uppercase;
38 PointedEar 906
  line-height: 0.9;
119 PointedEar 907
}
908
 
909
/* Responsive Web Design (TODO: Move to imported stylesheet; but see above) */
910
 
911
body {
912
  <?php
913
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
914
  ?>
915
}
916
 
917
#bow #bottom
918
{
919
  <?php
920
    Mixins::transition('', 'width 0.5s 0.5s ease');
921
  ?>
922
}
923
 
924
#bow-bottom {
925
  <?php
926
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
927
    Mixins::transition('-delay', '0.5s');
928
    Mixins::transition('-duration', '0.5s');
929
    Mixins::transition('-timing-function', 'ease');
930
  ?>
931
}
932
 
933
#bow-bottom .concave {
934
  <?php
935
    Mixins::transition('', 'width 0.5s 0.5s ease');
936
  ?>
937
}
938
 
939
#connectors .right {
940
  <?php
941
    Mixins::transition('', 'width 0.5s 0.5s ease');
942
  ?>
943
}
944
 
945
.multi-display
946
{
947
  <?php
948
    Mixins::transition('', 'left 0.5s 0.5s ease');
949
  ?>
950
}
951
 
952
.multi-display .lower .bg
953
{
954
  <?php
955
    /* Wait 1s for bow to become shallower */
956
    Mixins::transition('', 'bottom 2.5s 0.5s ease');
957
  ?>
958
}
959
 
960
@media all and (min-width: 1024px) {
961
  body {
962
    margin-left: 22em;
963
  <?php
964
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
965
  ?>
966
  }
967
 
968
  #bow #bottom
969
  {
970
    width: 20.8em;
971
  <?php
972
    /* Wait 0.5s for multi-display to be reduced in height */
973
    Mixins::transition('', 'width 1.0s 0.5s ease');
974
  ?>
975
  }
976
 
977
  #bow-bottom {
978
    border-bottom-left-radius: 2.4em;
979
    border-bottom-right-radius: 2em;
980
    height: 2.4em;
981
    width: 20.6em;
982
  <?php
983
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
984
    Mixins::transition('-delay', '1.0s');
985
    Mixins::transition('-duration', '0.5s');
986
    Mixins::transition('-timing-function', 'ease');
987
  ?>
988
  }
989
 
990
  #bow-bottom .concave {
991
    width: 7.6em;
992
  <?php
993
    Mixins::transition('', 'width 1.0s 0.5s ease');
994
  ?>
995
  }
996
 
997
  #connectors .right {
998
    width: 5em;
999
    <?php
1000
      /* Wait 1.0s for multi-display to be moved to right */
1001
      Mixins::transition('', 'width 1.0s 0.5s ease');
1002
    ?>
1003
  }
1004
 
1005
  .multi-display
1006
  {
1007
    left: 15.8em;
1008
  <?php
1009
    Mixins::transition('', 'left 0.5s 0.5s ease');
1010
  ?>
1011
  }
1012
 
1013
  .multi-display .lower .bg
1014
  {
1015
    bottom: 2.8em;
1016
    <?php
1017
      Mixins::transition('', 'bottom 0.5s 0.5s ease');
1018
    ?>
1019
  }  
1020
}