Subversion Repositories LCARS

Rev

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

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