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 | */ |