Subversion Repositories LCARS

Rev

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