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