Subversion Repositories LCARS

Rev

Rev 58 | Rev 72 | 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');
11
?>
37 PointedEar 12
@CHARSET "UTF-8";
13
 
58 PointedEar 14
<?php
15
  if (!isset($_GET['ani']) || $_GET['ani'] !== '0')
16
  {
17
?>
18
    @import url("/styles/lcars-ani.css");
19
<?php
20
  }
21
?>
50 PointedEar 22
 
37 PointedEar 23
body {
24
  margin-top: 12em;
25
  margin-left: 22em;
26
  margin-right: 0.2em;
27
  margin-bottom: 0.2em;
28
}
29
 
30
/* Bow (main) and elbo (multi-view) */
31
 
32
#LCARS {
33
  position: fixed;
34
  left: 0;
35
  top: 0;
36
  right: 0;
37
  padding: 0.2em;
38
  background-color: #000;
39
  z-index: 1701;
40
}
41
 
42
#bow {
43
  position: absolute;
44
  left: 0.2em;
45
  top: 0.2em;
46
  right: 0.2em;
47
  height: 2.4em;
48
  padding-bottom: 0.2em;
49
  background-color: #000;
50
}
51
 
52
#bow-top {
53
  /* NOTE: position: absolute is needed for animation */
54
  position: absolute;
55
  top: 0;
56
  left: 0;
57
  right: 0;
58
  min-width: 15.4em;
59
  height: 2em;
60
  background-color: #999;
61
  border-top-left-radius: 2.4em;
62
  border-top-right-radius: 1.2em;
63
  border-bottom-right-radius: 1.2em;
64
  line-height: 0.9;
65
}
66
 
67
.empty #bow-top {
68
  border-top-left-radius: 1.2em;
69
  border-bottom-left-radius: 1.2em;
38 PointedEar 70
  min-width: 10em;
37 PointedEar 71
}
72
 
73
 
74
#bow-top .text {
75
  position: absolute;
76
  margin: 0;
77
  left: 4.33em;
78
  top: 0;
40 PointedEar 79
  right: 0.75em;
37 PointedEar 80
  height: 1em;
81
  text-align: right;
82
  color: #fc0;
83
  font-size: 2.4em;
84
  padding-right: 0.1em;
85
  overflow: hidden;
86
  text-overflow: ellipsis;
87
}
88
 
38 PointedEar 89
.empty #bow-top .text {
90
  left: 0.93em;
91
}
92
 
37 PointedEar 93
 
94
 
95
#bow-top .text span {
96
  padding-right: 0.1em;
97
  background-color: #000;
98
  padding-left: 0.1em;
99
  text-transform: uppercase;
100
  white-space: nowrap;
101
}
102
 
38 PointedEar 103
.empty #footer-container {
104
  position: fixed;
105
  left: 0.2em;
106
  bottom: 0;
107
  right: 0.2em;
108
  min-height: 2.4em;
109
  padding-top: 0.2em;
110
  padding-bottom: 0.2em;
111
  background-color: #000;
112
}
113
 
40 PointedEar 114
 
38 PointedEar 115
.empty #footer {
116
  position: absolute;
117
  bottom: 0;
118
  left: 0;
119
  right: 0;
120
  height: 2em;
40 PointedEar 121
  min-width: 10em;
38 PointedEar 122
  margin-bottom: 0.2em;
123
  background-color: #999;
124
  border-radius: 1.2em;
40 PointedEar 125
  line-height: 0.9;
38 PointedEar 126
}
127
 
128
.empty #footer .text {
129
  position: absolute;
40 PointedEar 130
  margin: 0;
131
  left: 0.93em;
132
  top: 0;
133
  right: 0.75em;
134
  height: 1em;
135
  background-color: transparent;
38 PointedEar 136
  color: #fc0;
40 PointedEar 137
  font-size: 2.4em;
38 PointedEar 138
  padding-right: 0.1em;
139
  overflow: hidden;
140
  text-overflow: ellipsis;
141
}
142
 
143
.empty #footer .text span {
144
  padding-right: 0.1em;
40 PointedEar 145
  background-color: #000;
38 PointedEar 146
  padding-left: 0.1em;
147
  text-transform: uppercase;
148
  white-space: nowrap;
149
}
150
 
37 PointedEar 151
.empty .separator-left {
152
  position: absolute;
153
  left: 2em;
154
  height: 2em;
155
  width: 0.25em;
156
  background-color: #000;
157
}
158
 
159
.empty .separator-right {
160
  position: absolute;
161
  right: 2em;
162
  height: 2em;
163
  width: 0.25em;
164
  background-color: #000;
165
}
166
 
58 PointedEar 167
.bow {
168
  background-color: #999;
169
}
170
 
37 PointedEar 171
#bow-top-left {
172
  position: absolute;
173
  top: 2em;
174
  left: 0;
175
  right: 0;
176
  height: 3.2em;
177
  width: 9.2em;
178
  background-color: #999;
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;
189
  height: 3.2em;
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;
202
  top: 5.6em;
203
  width: 8em;
204
  bottom: 2.8em;
205
  background-color: #999;
37 PointedEar 206
  overflow: auto;
207
}
208
 
50 PointedEar 209
.menu
43 PointedEar 210
{
71 PointedEar 211
  height: 21.2em;
43 PointedEar 212
  background-color: #000;
213
}
214
 
215
.menu ul {
38 PointedEar 216
  margin: 0 0.2em 0.2em 0;
37 PointedEar 217
  padding: 0;
218
}
219
 
43 PointedEar 220
.menu li {
37 PointedEar 221
  margin: 0;
222
}
223
 
224
#bow #bottom
225
{
226
  position: fixed;
227
  left: 0;
228
  bottom: 0;
229
  width: 20.8em;
230
  height: 2.4em;
231
  background-color: #000;
232
  z-index: 1701;
233
}
234
 
235
#bow-bottom {
236
  position: absolute;
237
  bottom: 0.2em;
238
  left: 0.2em;
239
  width: 20.6em;
240
  height: 2.4em;
241
  border-bottom-left-radius: 2.4em;
242
  border-bottom-right-radius: 2em;
243
  background-color: #999;
244
}
245
 
246
.empty #bow-bottom {
247
  display: none;
248
}
249
 
250
#bow-bottom .concave {
251
  position: absolute;
252
  margin-left: 0.2em;
253
  margin-bottom: 0.2em;
254
  bottom: 0.3em;
255
  left: 7.8em;
256
  height: 2.1em;
257
  width: 7.6em;
258
  border-bottom-left-radius: 1.2em;
259
  border-bottom-right-radius: 1em;
260
  background-color: #000;
261
}
262
 
38 PointedEar 263
#bow-bottom .spacer {
37 PointedEar 264
  position: absolute;
38 PointedEar 265
  left: 10.2em;
266
  bottom: 0em;
267
  width: 0.2em;
268
  height: 0.5em;
269
  background-color: black;
37 PointedEar 270
}
271
 
38 PointedEar 272
.empty #bow-bottom-left-concave {
273
  display: none;
37 PointedEar 274
}
275
 
276
/* Controls */
277
 
278
.button:visited:hover,
279
.button:visited,
280
.button:hover,
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;
294
  cursor: pointer;
295
}
296
 
297
.button .text {
298
  position: absolute;
299
  bottom: 0;
300
  right: 0.5em;
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;
355
  top: 2.8em;
356
  left: 15.8em;
357
  right: 0em;
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;  
371
  height: 7.2em;  
372
  padding-bottom: 0.2em;
373
  padding-right: 0.2em;
374
  background-color: black;
375
}
376
 
377
.multi-display .upper .button
378
{
379
  height: 3.8em;
380
  background-color: #c9c !important;
381
}
382
 
383
.multi-display .upper .elbo
384
{
385
  position: absolute;
386
  left: 0;
387
  top: 4em;
388
  width: 6em;
389
  height: 3.2em;
390
  border-bottom-left-radius: 2em;
391
  background-color: #9cf;
392
}
393
 
394
.multi-display .upper .elbo .concave
395
{
396
  position: absolute;
397
  left: 5em;
398
  top: 0;
399
  width: 1em;
400
  height: 2.2em;
401
  border-bottom-left-radius: 1em;
402
  background-color: black;
403
}
404
 
405
.multi-display .upper .border
406
{
407
  position: fixed;
408
  top: 9em;
409
  left: 21.8em;
410
  right: 0.2em;
411
  height: 1em;
412
  background-color: #9cf;
413
}
414
 
415
.multi-display .lower
416
{
417
  position: absolute;
418
  top: 7.3em;
419
  left: 0;
420
  padding-top: 0.1em;
421
  background-color: black;
422
}
423
 
424
.multi-display .lower .elbo
425
{
426
  position: relative;
427
  width: 6em;
428
  height: 3em;
429
  border-top-left-radius: 2em;
430
  background-color: #fc6;
431
}
432
 
433
.multi-display .lower .elbo .concave
434
{
435
  position: absolute;
436
  left: 5em;
437
  top: 1em;
438
  width: 1em;
439
  height: 2em;
440
  background-color: black;
441
  border-top-left-radius: 1em;
442
}
443
 
444
.multi-display .lower .bg
445
{
446
  position: fixed;
447
  top: 13.4em;
448
  bottom: 2.8em;
449
  width: 5em;
450
  background-color: #fc6;
451
}
452
 
453
.multi-display .lower .border-container
454
{
455
  position: fixed;
456
  top: 10.2em;
457
  left: 21.8em;
458
  right: 0em;
459
  height: 1.2em;
460
  background-color: black;
461
}
462
 
463
.multi-display .lower .border
464
{
465
  position: absolute;
466
  top: 0;
467
  left: 0;
468
  right: 0.2em;
469
  height: 1em;
470
  background-color: #fc6;
471
}
472
 
43 PointedEar 473
.menu .button.secondary,
474
.multi-display .lower .elbo.secondary,
475
.multi-display .lower .bg.secondary,
476
.multi-display .lower .border.secondary
477
{
478
  background-color: #f96;
479
}
480
 
481
.menu .button.ancillary,
482
.multi-display .lower .elbo.ancillary,
483
.multi-display .lower .bg.ancillary,
484
.multi-display .lower .border.ancillary
485
{
486
  background-color: #c9c;
487
}
488
 
489
.menu .button.database,
490
.multi-display .lower .elbo.database,
491
.multi-display .lower .bg.database,
492
.multi-display .lower .border.database
493
{
37 PointedEar 494
  background-color: #c66;
495
}
496
 
43 PointedEar 497
.menu .button .text {
37 PointedEar 498
  position: static;
499
  margin: 0 0.25em;
500
}
501
 
502
.button.selected {
503
  background-color: #fc6 !important;
504
  color: #000 !important;  
505
}
506
 
507
.group {
508
  margin: 0 auto;
509
  position: relative;
38 PointedEar 510
  width: 7.7em;
37 PointedEar 511
}
512
 
513
.group .separator {
514
  float: left;
515
  position: absolute;
38 PointedEar 516
  top: 0;
517
  left: 0;
518
  width: 1.5em;
37 PointedEar 519
  height: 100%;
520
  background-color: #c66;
521
  color: #000;
522
}
523
 
524
.group .separator:after {
525
  position: absolute;
38 PointedEar 526
  width: 0.8em;
527
  height: 0.5em;
528
  bottom: 0.25em;
529
  left: 0.25em;
37 PointedEar 530
  background-color: #000;
531
  content: "\a0";
532
}
533
 
534
.group ul {
38 PointedEar 535
  margin-left: 1.7em;
37 PointedEar 536
}
537
 
538
.group li {
38 PointedEar 539
  margin-bottom: 0;
37 PointedEar 540
}
541
 
542
.group .button:visited,
543
.group .button
544
{
38 PointedEar 545
  display: block;
37 PointedEar 546
  position: relative;
38 PointedEar 547
  width: 6em;
37 PointedEar 548
  background-color: #99f !important;
549
}
550
 
38 PointedEar 551
.group li:last-child .button
552
{
553
  margin-bottom: 0;
37 PointedEar 554
}
555
 
38 PointedEar 556
.button.right {
557
  border-top-right-radius: 1em;
558
  border-bottom-right-radius: 1em;
37 PointedEar 559
}
560
 
38 PointedEar 561
.button.right .text {
562
  right: 1em;
563
}
564
 
565
.button.left {
566
  border-top-left-radius: 1em;
567
  border-bottom-left-radius: 1em;
568
}
569
 
37 PointedEar 570
.group .button .key {
571
  display: inline-block;
572
  position: absolute;
38 PointedEar 573
  left: 0.2em;
37 PointedEar 574
  top: 0;
575
  bottom: 0;
38 PointedEar 576
  padding: 0 0.1em;
37 PointedEar 577
  background-color: #000;
578
  color: #f90;
38 PointedEar 579
  font-size: 2.4em;
37 PointedEar 580
  text-transform: uppercase;
38 PointedEar 581
  line-height: 0.9;
582
}