Subversion Repositories LCARS

Rev

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