Subversion Repositories LCARS

Rev

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

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