Subversion Repositories LCARS

Rev

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