Subversion Repositories LCARS

Rev

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

Rev Author Line No. Line
36 PointedEar 1
<?php header('Content-Type: text/css'); ?>
2
@CHARSET "UTF-8";
3
 
18 PointedEar 4
/*
5
 * <title>CSS for PointedEars' LCARS, version 2.054, stardate 200712.02</title>
6
 */
17 PointedEar 7
 
8
/* basic fonts */
9
@font-face {
18 PointedEar 10
  font-family: "Downloadable LCARS";
11
  font-style: normal;
12
  font-weight: normal;
19 PointedEar 13
  src: url(fonts/LCARS.ttf);
17 PointedEar 14
}
15
 
18 PointedEar 16
/* EOT font created with WEFT on 2002-03-23 */
17 PointedEar 17
@font-face {
18 PointedEar 18
  font-family: "Downloadable Haettenschweiler";
19
  font-style: normal;
20
  font-weight: normal;
19 PointedEar 21
  src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);
18 PointedEar 22
}
23
 
24
/*
25
@font-face {
17 PointedEar 26
  font-family:Webdings;
27
  font-style:normal;
28
  font-weight:normal;
29
  src:url(WEBDING0.eot);
30
}
18 PointedEar 31
*/
17 PointedEar 32
@font-face {
18 PointedEar 33
  font-family: "Downloadable Zurich XCn BT";
34
  font-style: normal;
35
  font-weight: normal;
19 PointedEar 36
  src: url(fonts/ZurichXCn.pfr);
17 PointedEar 37
}
38
 
39
/* basic display */
40
* {
36 PointedEar 41
  font-family: LCARS, "Downloadable LCARS", Haettenschweiler,
42
    "Downloadable Haettenschweiler", "Zurich XCn BT",
43
    "Downloadable Zurich XCn BT", impact, Verdana, Geneva, Arial,
44
    Helvetica, sans-serif;
18 PointedEar 45
  font-weight: normal;
17 PointedEar 46
}
47
 
36 PointedEar 48
<?php
49
  $colors = array(
50
    'primary' => array(
51
      'elbo'     => '#f1df6f',
52
      'offline1' => '#300',
53
      'offline2' => '#f00',
54
      'n/a'      => '#39f',
55
      'primary'  => '#9cf',
56
      'color1'   => '#ff3',
57
      'color2'   => '#ffc'
58
    ),
59
    'secondary' => array(
60
      'elbo'     => '#b19f7a',
61
      'offline1' => '#300',
62
      'offline2' => '#f00',
63
      'n/a'      => '#5355de',
64
      'primary'  => '#9cf',
65
      'color1'   => '#fc0',
66
      'color2'   => '#ff9'
67
    ),
68
    'ancillary'  => array(
69
      'elbo'     => '#f1b1af',
70
      'offline1' => '#300',
71
      'offline2' => '#f00',
72
      'n/a'      => '#a27fa5',
73
      'primary'  => '#adacd8',
74
      'color1'   => '#ff3',
75
      'color2'   => '#e6b0d4'
76
    ),
77
    'database'  => array(
78
      'elbo'     => '#c66',
79
      'offline1' => '#300',
80
      'offline2' => '#f00',
81
      'n/a'      => '#ccf',
82
      'primary'  => '#9cf',
83
      'color1'   => '#f90',
84
      'text'     => '#99f',
85
      'old_text' => '#669',
86
      'new_text' => '#9cf',
87
      'link'     => '#fc9',
88
      'visited'  => '#c9c',
89
      'hover'    => '#f90',
90
      'active'   => '#fff'
91
    ),
92
    'red_alert'  => array(
93
      'elbo'     => '#f00',
94
      'offline1' => '#300',
95
      'offline2' => '#f00',
96
      'n/a'      => '#f00',
97
      'primary'  => '#f00',
98
      'color1'   => '#f00',
99
      'color2'   => '#f00'
100
    ),
101
    'multi-display'  => array(
102
      'upper_elbo' => '#9cf',
103
      'lower_elbo' => '#c66',
104
      'color1'     => '#f90',
105
      'color2'     => '#c9c',
106
      'text1'      => '#fff',
107
      'text2'      => '#f90',
108
    )
109
  );
110
?>
111
 
112
*[lang^="x-vulcan-latin"] {
113
  font-family: cursive;
114
}
115
 
17 PointedEar 116
body {
36 PointedEar 117
  margin: 0 10px;
118
 
17 PointedEar 119
  /* IE 5.5+ scrollbar colors */
36 PointedEar 120
  /* from Mozilla LCARS Theme (2D style) */
121
  scrollbar-3dlight-color: #000;
122
  scrollbar-arrow-color: #000;
123
  scrollbar-base-color: #000;
124
  scrollbar-darkshadow-color: #000;
125
  scrollbar-face-color: #99f;
126
  scrollbar-highlight-color: #99f;
127
  scrollbar-track-color: #000;
128
  scrollbar-shadow-color: #99f;
129
 
130
  background-color: #000;
131
  color: <?php echo $colors['database']['text']; ?>;
132
  font-size: 131%; /* 134% */
17 PointedEar 133
}
134
 
36 PointedEar 135
/* headings */
136
h1 {
137
  font-size: 120%; /* 191% */
138
  font-weight: normal;
139
  color: #fff; /* #c96 */
140
  background-color: black;
17 PointedEar 141
}
142
 
36 PointedEar 143
h2 {
144
  font-size: 120%; /* 129% */
145
  font-weight: normal;
146
  color: #fff; /* #fc6 */
147
  background-color: black;
148
  text-transform: uppercase;
17 PointedEar 149
}
150
 
36 PointedEar 151
h3 {
152
  margin-top: 0;
153
  margin-bottom: 1em;
154
  font-size: 123%;
155
  font-weight: normal;
156
  color: #fff; /* #fc6 */
157
  background-color: black;
158
  text-transform: uppercase;
159
}
17 PointedEar 160
 
36 PointedEar 161
h4 {
162
  margin-top: 2em;
163
  margin-bottom: 1em;
164
  font-size: 116%;
165
  font-weight: normal;
166
  color: #fc6;
167
  background-color: black;
17 PointedEar 168
}
169
 
36 PointedEar 170
table+h4 {
171
  margin-top: 1em;
17 PointedEar 172
}
173
 
36 PointedEar 174
/*
175
a.h4:link:hover,a.h4:visited:hover {
176
  color: #fc6;
177
  background-color: black;
178
}
17 PointedEar 179
 
36 PointedEar 180
a.h4:link:active,a.h4:visited:active {
181
  color: #fff;
182
  background-color: black;
17 PointedEar 183
}
36 PointedEar 184
*/
17 PointedEar 185
 
36 PointedEar 186
h5 {
187
  margin-top: 2em;
188
  margin-bottom: 1em;
189
  background-color: black;
190
  color: <?php echo $colors['multi-display']['text1']; ?>; /* #fc6 */
191
  font-size: 111%;
192
  font-weight: normal;
18 PointedEar 193
}
194
 
36 PointedEar 195
h6 {
196
  margin-top: 2em;
197
  margin-bottom: 1em;
198
  font-size: 104%;
199
  font-weight: normal;
200
  color: #fc6;
201
  background-color: black;
17 PointedEar 202
}
203
 
36 PointedEar 204
div.body { /* width:95%; */
205
 
17 PointedEar 206
}
207
 
36 PointedEar 208
span.alt { /* span with alternative text color */
209
  color: #f93;
210
  background-color: #000;
17 PointedEar 211
}
212
 
36 PointedEar 213
/* for JavaScript processing messages */
214
.standby {
215
  font-size: 166%;
216
  background-color: #000;
217
  color: #99f;
17 PointedEar 218
}
219
 
36 PointedEar 220
div.standby {
221
  position: absolute;
222
  top: 0;
223
  visibility: hidden;
18 PointedEar 224
}
225
 
36 PointedEar 226
/* font styles  */
227
p {
228
  margin-top: 0;
229
  margin-bottom: 1em;
17 PointedEar 230
}
231
 
36 PointedEar 232
div,p,li,th,td {
233
  max-width: 60ex;
234
}
17 PointedEar 235
 
36 PointedEar 236
small {
237
  font-size: 100%;
17 PointedEar 238
}
239
 
36 PointedEar 240
b, strong {
241
  color: <?php echo $colors['multi-display']['text1']; ?>; /* #f93 */
242
  background-color: #000;
243
  font-weight: normal;
17 PointedEar 244
}
245
 
36 PointedEar 246
i, cite, blockquote, em {
247
  background-color: #000;
248
  color: <?php echo $colors['multi-display']['text1']; ?>; /* #f93 */
249
  font-style: normal;
17 PointedEar 250
}
251
 
36 PointedEar 252
abbr {
253
  white-space: nowrap;
17 PointedEar 254
}
255
 
36 PointedEar 256
abbr, acronym {
257
  border-bottom: 1px dotted;
258
  cursor: help;
17 PointedEar 259
}
260
 
36 PointedEar 261
del {
262
  background-color: #000;
263
  color: <?php echo $colors['database']['old_text']; ?>;
264
  text-decoration: line-through;
17 PointedEar 265
}
266
 
36 PointedEar 267
ins {
268
  background-color: #000;
269
  color: <?php echo $colors['database']['new_text']; ?>;
270
  text-decoration: none;
17 PointedEar 271
}
272
 
36 PointedEar 273
span.cap {
274
  font-variant: small-caps;
17 PointedEar 275
}
276
 
36 PointedEar 277
ul.filelist li  {
278
  background-color: #000;
279
  color: <?php echo $colors['database']['n/a']; ?>;
280
  cursor: not-allowed;
17 PointedEar 281
}
282
 
283
/* LCARS specific anchors */
284
 
285
/* order is important to buggy IE;
286
   TODO: [IE] links focus color, visited links hover color */
36 PointedEar 287
a:link:hover,
288
a:link:active,
289
a:link:focus
290
{
291
  background-color: #000;
292
  color: <?php echo $colors['database']['hover']; ?>; /* #fc0 */
293
  text-decoration: none;
17 PointedEar 294
}
295
 
296
a:link {
36 PointedEar 297
  background-color: #000;
298
  color: <?php echo $colors['database']['link']; ?>; /* white */
299
  text-decoration: none;
17 PointedEar 300
}
301
 
302
a:visited:hover {
36 PointedEar 303
  background-color: #000;
304
  color: <?php echo $colors['database']['hover']; ?>; /* #fc3 */
305
  text-decoration: none;
17 PointedEar 306
}
307
 
308
a:visited:active {
36 PointedEar 309
  background-color: #000;
310
  color: <?php echo $colors['database']['active']; ?>; /* #fff */
311
  text-decoration: none;
17 PointedEar 312
}
313
 
314
a:visited:focus {
36 PointedEar 315
  background-color: #000;
316
  color: <?php echo $colors['database']['hover']; ?>; /* #fc3; */
317
  text-decoration: none;
17 PointedEar 318
}
319
 
320
a:visited {
36 PointedEar 321
  background-color: #000;
322
  color: <?php echo $colors['database']['visited']; ?>; /* #fc9 */
323
  text-decoration: none;
17 PointedEar 324
}
325
 
326
/* buttons */
36 PointedEar 327
a.button:link:focus,a.button:visited:focus,a.button:link:hover,a.button:visited:hover
328
  {
329
  color: #000;
330
  background-color: #c9c;
331
  text-decoration: none;
17 PointedEar 332
}
333
 
36 PointedEar 334
a.button:link:active,a.button:visited:active {
335
  color: #000;
336
  background-color: #fff;
337
  cursor: default;
338
  text-decoration: none;
17 PointedEar 339
}
340
 
36 PointedEar 341
a.button:link,a.button:visited {
342
  background-color: #969;
343
  color: #000;
344
  padding-left: 1px;
345
  vertical-align: middle;
346
  font-size: 110%;
347
  text-decoration: none;
17 PointedEar 348
}
349
 
36 PointedEar 350
a.stop:link,a.stop:visited {
351
  background-color: #c66;
352
  color: #000;
353
  padding-left: 1px;
354
  vertical-align: middle;
355
  font-size: 110%;
356
  text-decoration: none;
17 PointedEar 357
}
358
 
36 PointedEar 359
a.stop:link:hover,a.stop:visited:hover {
360
  background-color: #f66;
361
  color: #000;
362
  text-decoration: none;
17 PointedEar 363
}
364
 
36 PointedEar 365
a.stop:link:active,a.stop:visited:active {
366
  background-color: #fff;
367
  color: #000;
368
  text-decoration: none;
17 PointedEar 369
}
370
 
36 PointedEar 371
a.go:link,a.go:visited {
372
  background-color: #6c6;
373
  color: #000;
374
  padding-left: 1px;
375
  vertical-align: middle;
376
  font-size: 110%;
377
  text-decoration: none;
17 PointedEar 378
}
379
 
36 PointedEar 380
a.go:link:hover,a.go:visited:hover {
381
  background-color: #6f6;
382
  color: #000;
383
  text-decoration: none;
17 PointedEar 384
}
385
 
36 PointedEar 386
a.go:link:active,a.go:visited:active {
387
  background-color: #fff;
388
  color: #000;
389
  text-decoration: none;
17 PointedEar 390
}
391
 
392
span.symbol {
36 PointedEar 393
  font-family: Webdings, fantasy;
394
  font-style: normal;
395
  font-weight: normal;
396
  font-size: 110%;
17 PointedEar 397
}
398
 
399
/* form elements */
36 PointedEar 400
input {
401
  background-color: black;
402
  font-size: 104%;
403
  color: white;
17 PointedEar 404
}
405
 
36 PointedEar 406
input.button { /* offset-width:auto; */
407
  border-style: none;
408
  border-width: 0px;
409
  color: #000;
410
  background-color: #969;
411
  font-size: 123%;
412
  cursor: pointer;
17 PointedEar 413
}
414
 
36 PointedEar 415
textarea {
416
  background-color: #000;
417
  font-size: 104%;
418
  color: white;
17 PointedEar 419
}
420
 
36 PointedEar 421
select {
422
  color: white;
423
  background-color: #000;
424
  border-color: white;
425
  font-size: 104%;
426
  cursor: pointer;
17 PointedEar 427
}
428
 
429
option {
36 PointedEar 430
  cursor: pointer;
17 PointedEar 431
}
432
 
433
/* table elements */
434
table {
435
  border-collapse: separate;
36 PointedEar 436
  margin-top: 0;
437
  margin-bottom: 1em;
17 PointedEar 438
}
439
 
440
/*
441
 * Not for IE 6 and below.
442
 * Bugfix for IE 7 is provided by lcars-ie7.css which should be
443
 * included as follows:
444
 
445
   <link rel="stylesheet" href="/styles/lcars.css" type="text/css">
446
   <!--[if IE 7]>
447
     <link rel="stylesheet" href="/styles/lcars-ie7.css" type="text/css">
448
   <![endif]-->
449
 */
450
table>tbody.scroll {
36 PointedEar 451
  height: 11em;
452
  overflow: auto;
17 PointedEar 453
  /*
454
   * In current implementations, the scrollbar is displayed within
455
   * the tbody area, so we disable horizontal scrolling for that ...
456
   */
457
  overflow-x: hidden !important;
458
}
459
 
18 PointedEar 460
table>tbody.scroll tr {
461
  height: auto;
462
}
463
 
17 PointedEar 464
/*
465
 * ... and make enough room so that the text won't flow under the
466
 * vertical scrollbar.  However, that is still a dirty hack as we
467
 * assume that the vertical scrollbar is not wider than 20px.  
36 PointedEar 468
 */
17 PointedEar 469
table>tbody.scroll td:last-child {
470
  padding-right: 20px;
471
}
472
 
473
tr {
36 PointedEar 474
  vertical-align: top;
17 PointedEar 475
  vertical-align: baseline;
476
}
477
 
478
th {
36 PointedEar 479
  padding-left: 3px;
17 PointedEar 480
  /* border-right:2px solid black; */
36 PointedEar 481
  text-align: left;
482
  background-color: #c66;
483
  color: #000;
18 PointedEar 484
  font-size: 133%;
36 PointedEar 485
  font-weight: normal;
17 PointedEar 486
}
487
 
488
thead th:first-child {
19 PointedEar 489
  padding-left: 12px;
490
  border-radius: 12px 0 0 0;
491
  -moz-border-radius: 12px 0 0 0;
492
  -webkit-border-radius: 12px 0 0 0;
17 PointedEar 493
}
494
 
36 PointedEar 495
table.left th,thead.left th,tbody.left th,th.left {
496
  background-color: inherit;
497
  color: inherit;
498
  text-transform: uppercase;
499
  text-align: right;
17 PointedEar 500
}
501
 
36 PointedEar 502
th,td {
503
  padding-right: 3px;
17 PointedEar 504
}
505
 
506
td {
36 PointedEar 507
  padding-left: 4px;
508
  background-color: inherit;
509
  color: inherit;
510
  font-size: 133%;
17 PointedEar 511
}
512
 
513
/* hover table */
36 PointedEar 514
table.hover thead th:hover,thead.hover th:hover,tbody.hover th:hover,table.hover tbody tr:hover th,tbody.hover tr:hover th
515
  {
516
  background-color: #f99;
517
  color: #000;
17 PointedEar 518
}
519
 
36 PointedEar 520
table.hover tbody tr:hover,tbody.hover tr:hover {
521
  color: #fc3;
17 PointedEar 522
}
523
 
36 PointedEar 524
table.hover tbody tr:hover a,tbody.hover tr:hover a {
525
  background-color: inherit;
17 PointedEar 526
}
527
 
528
/* Lowlight all rows except that with the active/focused element */
36 PointedEar 529
table.hover tbody:active,table.hover tbody:focus,tbody.hover:active,tbody.hover:focus
530
  {
531
  background-color: #000;
532
  color: #99c;
17 PointedEar 533
}
534
 
36 PointedEar 535
table.hover tbody tr:active,tbody.hover tr:active,table.hover tbody tr:focus,tbody.hover tr:focus
536
  {
537
  background-color: #000;
538
  color: #fff;
17 PointedEar 539
}
540
 
541
/* This to invert display on hover does not seem proper LCARS design */
542
/*
543
table.hover tbody tr:hover a:link,
544
tbody.hover tr:hover a:link {
545
  color:#fff;
546
}
547
 
548
table.hover tbody tr:hover a:visited,
549
tbody.hover tr:hover a:visited {
550
  background-color:inherit;
551
  color:#963;
552
}
553
 
554
table.hover tbody tr:hover a:link:focus,
555
table.hover tbody tr:hover a:visited:focus,
556
table.hover tbody tr:hover a:link:hover,
557
table.hover tbody tr:hover a:visited:hover,
558
table.hover tbody tr:hover a:link:active,
559
tbody.hover tr:hover a:link:focus,
560
tbody.hover tr:hover a:visited:focus,
561
tbody.hover tr:hover a:link:hover,
562
tbody.hover tr:hover a:visited:hover,
563
tbody.hover tr:hover a:link:active {
564
  background-color:inherit;
565
  color:#960;
566
}
567
 
568
table.hover tbody tr:hover a:visited:active,
569
tbody.hover tr:hover a:visited:active {
570
  background-color:inherit;
571
  color:#c63;
572
}
573
*/