Subversion Repositories LCARS

Rev

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

Rev Author Line No. Line
50 PointedEar 1
<?php
58 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 */
117 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 */
8
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
58 PointedEar 9
 
50 PointedEar 10
\header('Content-Type: text/css; charset=UTF-8');
79 PointedEar 11
?>@charset "UTF-8";
37 PointedEar 12
 
58 PointedEar 13
<?php
14
  if (!isset($_GET['ani']) || $_GET['ani'] !== '0')
15
  {
16
?>
79 PointedEar 17
@import url("/styles/lcars-ani.css");
58 PointedEar 18
<?php
19
  }
20
?>
50 PointedEar 21
 
37 PointedEar 22
body {
23
  margin-top: 12em;
24
  margin-left: 22em;
25
  margin-right: 0.2em;
26
  margin-bottom: 0.2em;
27
}
28
 
116 PointedEar 29
/* HTML5 elements */
30
 
31
nav
32
{
33
  display: block;
34
}
35
 
37 PointedEar 36
/* Bow (main) and elbo (multi-view) */
37
 
38
#LCARS {
39
  position: fixed;
40
  left: 0;
41
  top: 0;
42
  right: 0;
43
  padding: 0.2em;
44
  background-color: #000;
45
  z-index: 1701;
46
}
47
 
48
#bow {
49
  position: absolute;
50
  left: 0.2em;
51
  top: 0.2em;
52
  right: 0.2em;
53
  height: 2.4em;
54
  padding-bottom: 0.2em;
55
  background-color: #000;
56
}
57
 
58
#bow-top {
59
  /* NOTE: position: absolute is needed for animation */
60
  position: absolute;
61
  top: 0;
62
  left: 0;
63
  right: 0;
64
  min-width: 15.4em;
65
  height: 2em;
66
  background-color: #999;
67
  border-top-left-radius: 2.4em;
68
  border-top-right-radius: 1.2em;
69
  border-bottom-right-radius: 1.2em;
70
  line-height: 0.9;
71
}
72
 
73
.empty #bow-top {
74
  border-top-left-radius: 1.2em;
75
  border-bottom-left-radius: 1.2em;
38 PointedEar 76
  min-width: 10em;
37 PointedEar 77
}
78
 
79
 
80
#bow-top .text {
81
  position: absolute;
82
  margin: 0;
83
  left: 4.33em;
84
  top: 0;
40 PointedEar 85
  right: 0.75em;
37 PointedEar 86
  height: 1em;
87
  text-align: right;
88
  color: #fc0;
89
  font-size: 2.4em;
90
  padding-right: 0.1em;
91
  overflow: hidden;
92
  text-overflow: ellipsis;
93
}
94
 
38 PointedEar 95
.empty #bow-top .text {
96
  left: 0.93em;
97
}
98
 
37 PointedEar 99
 
100
 
101
#bow-top .text span {
102
  padding-right: 0.1em;
103
  background-color: #000;
104
  padding-left: 0.1em;
105
  text-transform: uppercase;
106
  white-space: nowrap;
107
}
108
 
38 PointedEar 109
.empty #footer-container {
110
  position: fixed;
111
  left: 0.2em;
112
  bottom: 0;
113
  right: 0.2em;
114
  min-height: 2.4em;
115
  padding-top: 0.2em;
116
  padding-bottom: 0.2em;
117
  background-color: #000;
118
}
119
 
40 PointedEar 120
 
38 PointedEar 121
.empty #footer {
122
  position: absolute;
123
  bottom: 0;
124
  left: 0;
125
  right: 0;
126
  height: 2em;
40 PointedEar 127
  min-width: 10em;
38 PointedEar 128
  margin-bottom: 0.2em;
129
  background-color: #999;
130
  border-radius: 1.2em;
40 PointedEar 131
  line-height: 0.9;
38 PointedEar 132
}
133
 
134
.empty #footer .text {
135
  position: absolute;
40 PointedEar 136
  margin: 0;
137
  left: 0.93em;
138
  top: 0;
139
  right: 0.75em;
140
  height: 1em;
141
  background-color: transparent;
38 PointedEar 142
  color: #fc0;
40 PointedEar 143
  font-size: 2.4em;
38 PointedEar 144
  padding-right: 0.1em;
145
  overflow: hidden;
146
  text-overflow: ellipsis;
147
}
148
 
149
.empty #footer .text span {
150
  padding-right: 0.1em;
40 PointedEar 151
  background-color: #000;
38 PointedEar 152
  padding-left: 0.1em;
153
  text-transform: uppercase;
154
  white-space: nowrap;
155
}
156
 
37 PointedEar 157
.empty .separator-left {
158
  position: absolute;
159
  left: 2em;
160
  height: 2em;
161
  width: 0.25em;
162
  background-color: #000;
163
}
164
 
165
.empty .separator-right {
166
  position: absolute;
167
  right: 2em;
168
  height: 2em;
169
  width: 0.25em;
170
  background-color: #000;
171
}
172
 
58 PointedEar 173
.bow {
174
  background-color: #999;
175
}
176
 
37 PointedEar 177
#bow-top-left {
178
  position: absolute;
179
  top: 2em;
180
  left: 0;
181
  right: 0;
109 PointedEar 182
  height: 4.4em;
37 PointedEar 183
  width: 9.2em;
184
  background-color: #999;
109 PointedEar 185
  overflow: hidden;
37 PointedEar 186
}
187
 
188
.empty #bow-top-left {
189
  display: none;
190
}
191
 
192
#bow-top-left .concave {
193
  position: absolute;
194
  top: 0;
195
  left: 8em;
109 PointedEar 196
  height: 4.4em;
37 PointedEar 197
  width: 1.2em;
198
  background-color: #000;
199
  border-top-left-radius: 1.2em;
200
}
201
 
202
.empty #bow-top-left-concave {
203
  display: none;
204
}
205
 
50 PointedEar 206
.menu-container {
43 PointedEar 207
  position: fixed;
208
  left: 0.2em;
109 PointedEar 209
  top: 6.8em;
43 PointedEar 210
  width: 8em;
211
  bottom: 2.8em;
212
  background-color: #999;
37 PointedEar 213
  overflow: auto;
109 PointedEar 214
  overflow-x: hidden;
215
  overflow-y: auto;
37 PointedEar 216
}
217
 
50 PointedEar 218
.menu
43 PointedEar 219
{
109 PointedEar 220
  height: 20em;
43 PointedEar 221
  background-color: #000;
222
}
223
 
224
.menu ul {
103 PointedEar 225
  margin: 0 0.2em 0 0;
37 PointedEar 226
  padding: 0;
227
}
228
 
43 PointedEar 229
.menu li {
37 PointedEar 230
  margin: 0;
231
}
232
 
233
#bow #bottom
234
{
235
  position: fixed;
236
  left: 0;
237
  bottom: 0;
238
  width: 20.8em;
239
  height: 2.4em;
240
  background-color: #000;
241
  z-index: 1701;
242
}
243
 
244
#bow-bottom {
245
  position: absolute;
246
  bottom: 0.2em;
247
  left: 0.2em;
248
  width: 20.6em;
249
  height: 2.4em;
250
  border-bottom-left-radius: 2.4em;
251
  border-bottom-right-radius: 2em;
252
  background-color: #999;
253
}
254
 
255
.empty #bow-bottom {
256
  display: none;
257
}
258
 
259
#bow-bottom .concave {
260
  position: absolute;
261
  margin-left: 0.2em;
262
  margin-bottom: 0.2em;
263
  bottom: 0.3em;
264
  left: 7.8em;
265
  height: 2.1em;
266
  width: 7.6em;
267
  border-bottom-left-radius: 1.2em;
268
  border-bottom-right-radius: 1em;
269
  background-color: #000;
270
}
271
 
38 PointedEar 272
#bow-bottom .spacer {
37 PointedEar 273
  position: absolute;
38 PointedEar 274
  left: 10.2em;
94 PointedEar 275
  bottom: 0;
38 PointedEar 276
  width: 0.2em;
277
  height: 0.5em;
278
  background-color: black;
37 PointedEar 279
}
280
 
38 PointedEar 281
.empty #bow-bottom-left-concave {
282
  display: none;
37 PointedEar 283
}
284
 
285
/* Controls */
286
 
287
.button:visited,
288
.button
289
{
290
  position: relative;
291
  display: inline-block;
292
  margin-right: 0.2em;
293
  margin-bottom: 0.2em;
294
  width: 5em;
295
  height: 2em;
296
  background-color: #7d7d7d; /* c9c */
297
  color: #000 !important;
298
  text-decoration: none !important;
299
  text-transform: uppercase;
300
  overflow: hidden;
83 PointedEar 301
  cursor: pointer !important;
37 PointedEar 302
}
303
 
304
.button .text {
305
  position: absolute;
306
  bottom: 0;
307
  right: 0.5em;
83 PointedEar 308
  cursor: pointer !important;
37 PointedEar 309
}
310
 
311
.button.command {
312
  border-radius: 1.2em;
313
}
314
 
315
.button.command .text {
316
  position: absolute;
317
  bottom: 0;
318
  right: 1em;
319
}
320
 
321
.button:hover,
322
.button:focus,
323
.button.selected:hover,
324
.button.selected:focus,
325
.group .button:hover,
326
.group .button:focus,
327
.group .button:visited:hover,
328
.group .button:visited:focus
329
{
330
  background-color: #f90 !important;
331
  color: #000 !important;
332
}
333
 
334
.button:active,
335
.button.selected:active,
336
.group .button:active,
337
.group .button:visited:active
338
{
339
  background-color: #fff !important;
340
  color: #000 !important;
341
}
342
 
43 PointedEar 343
.menu .button {
37 PointedEar 344
  display: block;
345
  width: 8em;
346
  height: 1em;
347
  line-height: 1;
348
  background-color: #9cf;
349
  color: #000 !important;
50 PointedEar 350
  text-overflow: ellipsis;
351
  white-space: nowrap;
37 PointedEar 352
}
353
 
58 PointedEar 354
#connectors {
355
  position: fixed;
356
  left: 8.4em;
357
  top: 5.6em;
358
}
359
 
37 PointedEar 360
.multi-display
361
{
362
  position: fixed;
74 PointedEar 363
  top: 2.6em;
37 PointedEar 364
  left: 15.8em;
94 PointedEar 365
  right: 0;
37 PointedEar 366
}
367
 
368
.multi-display .button
369
{
370
  width: 5em !important;
371
}
372
 
373
.multi-display .upper
374
{
375
  position: absolute;
376
  top: 0;
377
  left: 0;
378
  right: 0;  
94 PointedEar 379
  height: 7.5em;  
37 PointedEar 380
  padding-right: 0.2em;
381
  background-color: black;
382
}
383
 
74 PointedEar 384
.multi-display .upper .content
72 PointedEar 385
{
386
  position: absolute;
387
  top: 0;
74 PointedEar 388
  left: 6em;
94 PointedEar 389
  bottom: 1.3em;
72 PointedEar 390
  right: 0.2em;
391
  background-color: black;
392
  color: white;
74 PointedEar 393
  text-align: right;
394
  overflow: hidden;
395
  text-overflow: ellipsis;
396
}
397
 
398
.multi-display .upper .content .title
399
{
400
  position: absolute;
401
  top: 0;
94 PointedEar 402
  left: 0;
74 PointedEar 403
  height: 1em;
94 PointedEar 404
  right: 0;
74 PointedEar 405
  background-color: black;
406
  color: white;
72 PointedEar 407
  font-size: 2.4em;
408
  text-transform: uppercase;
409
  text-align: right;
74 PointedEar 410
  overflow: hidden;
411
  text-overflow: ellipsis;
72 PointedEar 412
}
413
 
74 PointedEar 414
.multi-display .upper .content .title span
37 PointedEar 415
{
74 PointedEar 416
  white-space: nowrap;
417
}
418
 
90 PointedEar 419
.multi-display .upper .content .analysis {
420
  position: absolute;
421
  top: 2.4em;
422
  bottom: 0;
423
  right: 11em;
424
  left: 0;
425
  overflow: hidden;
426
  text-overflow: ellipsis;
427
  text-align: left;
428
}
429
 
92 PointedEar 430
.multi-display .upper .content .commands
74 PointedEar 431
{
432
  position: absolute;
92 PointedEar 433
  margin: 0;
434
  padding: 0;
435
  top: 2.4em;
94 PointedEar 436
  right: 0;
92 PointedEar 437
  height: 3.8em;
438
  width: 10.2em;
439
  list-style: none;
440
}
441
 
442
.multi-display .upper .content .commands li
443
{
444
  position: absolute;
445
  margin: 0;
446
  width: 5em;
74 PointedEar 447
  height: 1.8em;
92 PointedEar 448
}
449
 
450
.multi-display .upper .content .commands .button
451
{
452
  position: absolute;
453
  top: 0;
454
  left: 0;
455
  margin: 0;
456
  height: 1.8em;
457
  border-radius: 0.9em;
74 PointedEar 458
  text-transform: none;
459
}
460
 
92 PointedEar 461
.multi-display .upper .content .commands .button .text {
101 PointedEar 462
  right: 1em;
74 PointedEar 463
}
464
 
465
.multi-display .upper .content #cmd1
466
{
92 PointedEar 467
  top: 0;
74 PointedEar 468
  right: 5.2em;
469
}
470
 
471
.multi-display .upper .content #cmd2
472
{
92 PointedEar 473
  top: 0;
74 PointedEar 474
  right: 0;
475
}
476
 
477
.multi-display .upper .content #cmd3
478
{
92 PointedEar 479
  top: 2em;
480
  right: 0;
74 PointedEar 481
}
482
 
483
.multi-display .upper .content #cmd4
484
{
92 PointedEar 485
  top: 2em;
486
  right: 5.2em;
74 PointedEar 487
}
488
 
489
.multi-display .upper .elbo-button
490
{
491
  position: absolute;
492
  top: 0;
493
  left: 0;
494
  width: 5em;
495
  height: 4em;
37 PointedEar 496
  background-color: #c9c !important;
72 PointedEar 497
  color: #000 !important;
83 PointedEar 498
  cursor: default;
37 PointedEar 499
}
500
 
74 PointedEar 501
.multi-display .upper .elbo-button .text
72 PointedEar 502
{
503
  position: absolute;
504
  bottom: 0;
505
  right: 0.2em;
102 PointedEar 506
  max-width: 4em;
72 PointedEar 507
  max-height: 3.6em;
508
  text-align: right;
509
  overflow: hidden;
510
}
511
 
37 PointedEar 512
.multi-display .upper .elbo
513
{
514
  position: absolute;
515
  left: 0;
74 PointedEar 516
  top: 4.2em;
37 PointedEar 517
  width: 6em;
518
  height: 3.2em;
519
  border-bottom-left-radius: 2em;
520
  background-color: #9cf;
72 PointedEar 521
  color: #000;
37 PointedEar 522
}
523
 
72 PointedEar 524
.multi-display .upper .elbo .text
525
{
526
  position: absolute;
527
  top: 0;
528
  right: 1.2em;
102 PointedEar 529
  max-width: 4em;
72 PointedEar 530
  max-height: 2.2em;
531
  text-align: right;
532
  overflow: hidden;
83 PointedEar 533
  cursor: default;
72 PointedEar 534
}
535
 
101 PointedEar 536
.elbo [title],
537
.button [title]
538
{
539
  border-bottom: none;
540
}
541
 
37 PointedEar 542
.multi-display .upper .elbo .concave
543
{
544
  position: absolute;
545
  left: 5em;
546
  top: 0;
103 PointedEar 547
  width: 1.1em;
37 PointedEar 548
  height: 2.2em;
549
  border-bottom-left-radius: 1em;
550
  background-color: black;
551
}
552
 
80 PointedEar 553
.multi-display .border
554
{
555
  height: 1em;
556
}
557
 
37 PointedEar 558
.multi-display .upper .border
559
{
94 PointedEar 560
  position: absolute;
561
  top: 6.4em;
562
  left: 6em;
37 PointedEar 563
  right: 0.2em;
79 PointedEar 564
}
565
 
566
.multi-display .border div
567
{
568
  position: absolute;
569
  top: 0;
570
  height: 1em;
571
}
572
 
573
.multi-display .upper .border div
574
{
37 PointedEar 575
  background-color: #9cf;
80 PointedEar 576
}
79 PointedEar 577
 
578
.multi-display .upper .border .left
579
{
580
  left: 0;
581
  right: 5.2em;
582
  height: 1em;
37 PointedEar 583
}
584
 
79 PointedEar 585
.multi-display .upper .border .right
586
{
587
  width: 5em;
588
  right: 0;
589
}
590
 
37 PointedEar 591
.multi-display .lower
592
{
593
  position: absolute;
74 PointedEar 594
  top: 7.5em;
37 PointedEar 595
  left: 0;
94 PointedEar 596
  height: 0.1em;
597
  right: 0;
37 PointedEar 598
  background-color: black;
599
}
600
 
601
.multi-display .lower .elbo
602
{
94 PointedEar 603
  position: absolute;
604
  top: 0.1em;
605
  left: 0;
37 PointedEar 606
  width: 6em;
607
  height: 3em;
608
  border-top-left-radius: 2em;
609
  background-color: #fc6;
610
}
611
 
612
.multi-display .lower .elbo .concave
613
{
614
  position: absolute;
615
  left: 5em;
616
  top: 1em;
103 PointedEar 617
  width: 1.1em;
618
  height: 2.1em;
37 PointedEar 619
  background-color: black;
620
  border-top-left-radius: 1em;
621
}
622
 
623
.multi-display .lower .bg
624
{
625
  position: fixed;
626
  top: 13.4em;
627
  bottom: 2.8em;
628
  width: 5em;
629
  background-color: #fc6;
630
}
631
 
632
.multi-display .lower .border-container
633
{
94 PointedEar 634
  position: absolute;
635
  top: 0.1em;
636
  left: 6em;
637
  right: 0;
37 PointedEar 638
  height: 1.2em;
639
  background-color: black;
640
}
641
 
642
.multi-display .lower .border
643
{
80 PointedEar 644
  position: absolute;
37 PointedEar 645
  left: 0;
646
  right: 0.2em;
79 PointedEar 647
}
648
 
649
.multi-display .lower .border div
650
{
37 PointedEar 651
  background-color: #fc6;
652
}
653
 
79 PointedEar 654
.multi-display .lower .border .left
655
{
656
  left: 0;
80 PointedEar 657
  right: 5.2em;
79 PointedEar 658
}
659
 
660
.multi-display .lower .border .right
661
{
662
  width: 5em;
80 PointedEar 663
  right: 0;
79 PointedEar 664
}
665
 
43 PointedEar 666
.menu .button.secondary,
667
.multi-display .lower .elbo.secondary,
668
.multi-display .lower .bg.secondary,
669
.multi-display .lower .border.secondary
670
{
671
  background-color: #f96;
672
}
673
 
674
.menu .button.ancillary,
675
.multi-display .lower .elbo.ancillary,
676
.multi-display .lower .bg.ancillary,
677
.multi-display .lower .border.ancillary
678
{
679
  background-color: #c9c;
680
}
681
 
682
.menu .button.database,
683
.multi-display .lower .elbo.database,
684
.multi-display .lower .bg.database,
685
.multi-display .lower .border.database
686
{
37 PointedEar 687
  background-color: #c66;
688
}
689
 
43 PointedEar 690
.menu .button .text {
37 PointedEar 691
  position: static;
692
  margin: 0 0.25em;
693
}
694
 
695
.button.selected {
696
  background-color: #fc6 !important;
697
  color: #000 !important;  
698
}
699
 
700
.group {
701
  margin: 0 auto;
702
  position: relative;
38 PointedEar 703
  width: 7.7em;
37 PointedEar 704
}
705
 
706
.group .separator {
707
  float: left;
708
  position: absolute;
38 PointedEar 709
  top: 0;
710
  left: 0;
711
  width: 1.5em;
37 PointedEar 712
  height: 100%;
713
  background-color: #c66;
714
  color: #000;
715
}
716
 
717
.group .separator:after {
718
  position: absolute;
38 PointedEar 719
  width: 0.8em;
720
  height: 0.5em;
721
  bottom: 0.25em;
722
  left: 0.25em;
37 PointedEar 723
  background-color: #000;
724
  content: "\a0";
725
}
726
 
727
.group ul {
38 PointedEar 728
  margin-left: 1.7em;
37 PointedEar 729
}
730
 
731
.group li {
38 PointedEar 732
  margin-bottom: 0;
37 PointedEar 733
}
734
 
735
.group .button:visited,
736
.group .button
737
{
38 PointedEar 738
  display: block;
37 PointedEar 739
  position: relative;
38 PointedEar 740
  width: 6em;
37 PointedEar 741
  background-color: #99f !important;
742
}
743
 
38 PointedEar 744
.group li:last-child .button
745
{
746
  margin-bottom: 0;
37 PointedEar 747
}
748
 
38 PointedEar 749
.button.right {
750
  border-top-right-radius: 1em;
751
  border-bottom-right-radius: 1em;
37 PointedEar 752
}
753
 
38 PointedEar 754
.button.right .text {
755
  right: 1em;
756
}
757
 
758
.button.left {
759
  border-top-left-radius: 1em;
760
  border-bottom-left-radius: 1em;
761
}
762
 
37 PointedEar 763
.group .button .key {
764
  display: inline-block;
765
  position: absolute;
38 PointedEar 766
  left: 0.2em;
37 PointedEar 767
  top: 0;
768
  bottom: 0;
38 PointedEar 769
  padding: 0 0.1em;
37 PointedEar 770
  background-color: #000;
771
  color: #f90;
38 PointedEar 772
  font-size: 2.4em;
37 PointedEar 773
  text-transform: uppercase;
38 PointedEar 774
  line-height: 0.9;
775
}