Subversion Repositories LCARS

Rev

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