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