Rev 80 | Rev 90 | 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'); |
79 | PointedEar | 11 | ?>@charset "UTF-8"; |
37 | PointedEar | 12 | |
58 | PointedEar | 13 | <?php |
14 | if (!isset($_GET['ani']) || $_GET['ani'] !== '0') |
||
15 | { |
||
16 | ?> |
||
79 | PointedEar | 17 | @import url("/styles/lcars-ani.css"); |
58 | PointedEar | 18 | <?php |
19 | } |
||
20 | ?> |
||
50 | PointedEar | 21 | |
37 | PointedEar | 22 | body { |
23 | margin-top: 12em; |
||
24 | margin-left: 22em; |
||
25 | margin-right: 0.2em; |
||
26 | margin-bottom: 0.2em; |
||
27 | } |
||
28 | |||
29 | /* Bow (main) and elbo (multi-view) */ |
||
30 | |||
31 | #LCARS { |
||
32 | position: fixed; |
||
33 | left: 0; |
||
34 | top: 0; |
||
35 | right: 0; |
||
36 | padding: 0.2em; |
||
37 | background-color: #000; |
||
38 | z-index: 1701; |
||
39 | } |
||
40 | |||
41 | #bow { |
||
42 | position: absolute; |
||
43 | left: 0.2em; |
||
44 | top: 0.2em; |
||
45 | right: 0.2em; |
||
46 | height: 2.4em; |
||
47 | padding-bottom: 0.2em; |
||
48 | background-color: #000; |
||
49 | } |
||
50 | |||
51 | #bow-top { |
||
52 | /* NOTE: position: absolute is needed for animation */ |
||
53 | position: absolute; |
||
54 | top: 0; |
||
55 | left: 0; |
||
56 | right: 0; |
||
57 | min-width: 15.4em; |
||
58 | height: 2em; |
||
59 | background-color: #999; |
||
60 | border-top-left-radius: 2.4em; |
||
61 | border-top-right-radius: 1.2em; |
||
62 | border-bottom-right-radius: 1.2em; |
||
63 | line-height: 0.9; |
||
64 | } |
||
65 | |||
66 | .empty #bow-top { |
||
67 | border-top-left-radius: 1.2em; |
||
68 | border-bottom-left-radius: 1.2em; |
||
38 | PointedEar | 69 | min-width: 10em; |
37 | PointedEar | 70 | } |
71 | |||
72 | |||
73 | #bow-top .text { |
||
74 | position: absolute; |
||
75 | margin: 0; |
||
76 | left: 4.33em; |
||
77 | top: 0; |
||
40 | PointedEar | 78 | right: 0.75em; |
37 | PointedEar | 79 | height: 1em; |
80 | text-align: right; |
||
81 | color: #fc0; |
||
82 | font-size: 2.4em; |
||
83 | padding-right: 0.1em; |
||
84 | overflow: hidden; |
||
85 | text-overflow: ellipsis; |
||
86 | } |
||
87 | |||
38 | PointedEar | 88 | .empty #bow-top .text { |
89 | left: 0.93em; |
||
90 | } |
||
91 | |||
37 | PointedEar | 92 | |
93 | |||
94 | #bow-top .text span { |
||
95 | padding-right: 0.1em; |
||
96 | background-color: #000; |
||
97 | padding-left: 0.1em; |
||
98 | text-transform: uppercase; |
||
99 | white-space: nowrap; |
||
100 | } |
||
101 | |||
38 | PointedEar | 102 | .empty #footer-container { |
103 | position: fixed; |
||
104 | left: 0.2em; |
||
105 | bottom: 0; |
||
106 | right: 0.2em; |
||
107 | min-height: 2.4em; |
||
108 | padding-top: 0.2em; |
||
109 | padding-bottom: 0.2em; |
||
110 | background-color: #000; |
||
111 | } |
||
112 | |||
40 | PointedEar | 113 | |
38 | PointedEar | 114 | .empty #footer { |
115 | position: absolute; |
||
116 | bottom: 0; |
||
117 | left: 0; |
||
118 | right: 0; |
||
119 | height: 2em; |
||
40 | PointedEar | 120 | min-width: 10em; |
38 | PointedEar | 121 | margin-bottom: 0.2em; |
122 | background-color: #999; |
||
123 | border-radius: 1.2em; |
||
40 | PointedEar | 124 | line-height: 0.9; |
38 | PointedEar | 125 | } |
126 | |||
127 | .empty #footer .text { |
||
128 | position: absolute; |
||
40 | PointedEar | 129 | margin: 0; |
130 | left: 0.93em; |
||
131 | top: 0; |
||
132 | right: 0.75em; |
||
133 | height: 1em; |
||
134 | background-color: transparent; |
||
38 | PointedEar | 135 | color: #fc0; |
40 | PointedEar | 136 | font-size: 2.4em; |
38 | PointedEar | 137 | padding-right: 0.1em; |
138 | overflow: hidden; |
||
139 | text-overflow: ellipsis; |
||
140 | } |
||
141 | |||
142 | .empty #footer .text span { |
||
143 | padding-right: 0.1em; |
||
40 | PointedEar | 144 | background-color: #000; |
38 | PointedEar | 145 | padding-left: 0.1em; |
146 | text-transform: uppercase; |
||
147 | white-space: nowrap; |
||
148 | } |
||
149 | |||
37 | PointedEar | 150 | .empty .separator-left { |
151 | position: absolute; |
||
152 | left: 2em; |
||
153 | height: 2em; |
||
154 | width: 0.25em; |
||
155 | background-color: #000; |
||
156 | } |
||
157 | |||
158 | .empty .separator-right { |
||
159 | position: absolute; |
||
160 | right: 2em; |
||
161 | height: 2em; |
||
162 | width: 0.25em; |
||
163 | background-color: #000; |
||
164 | } |
||
165 | |||
58 | PointedEar | 166 | .bow { |
167 | background-color: #999; |
||
168 | } |
||
169 | |||
37 | PointedEar | 170 | #bow-top-left { |
171 | position: absolute; |
||
172 | top: 2em; |
||
173 | left: 0; |
||
174 | right: 0; |
||
175 | height: 3.2em; |
||
176 | width: 9.2em; |
||
177 | background-color: #999; |
||
178 | } |
||
179 | |||
180 | .empty #bow-top-left { |
||
181 | display: none; |
||
182 | } |
||
183 | |||
184 | #bow-top-left .concave { |
||
185 | position: absolute; |
||
186 | top: 0; |
||
187 | left: 8em; |
||
188 | height: 3.2em; |
||
189 | width: 1.2em; |
||
190 | background-color: #000; |
||
191 | border-top-left-radius: 1.2em; |
||
192 | } |
||
193 | |||
194 | .empty #bow-top-left-concave { |
||
195 | display: none; |
||
196 | } |
||
197 | |||
50 | PointedEar | 198 | .menu-container { |
43 | PointedEar | 199 | position: fixed; |
200 | left: 0.2em; |
||
201 | top: 5.6em; |
||
202 | width: 8em; |
||
203 | bottom: 2.8em; |
||
204 | background-color: #999; |
||
37 | PointedEar | 205 | overflow: auto; |
206 | } |
||
207 | |||
50 | PointedEar | 208 | .menu |
43 | PointedEar | 209 | { |
71 | PointedEar | 210 | height: 21.2em; |
43 | PointedEar | 211 | background-color: #000; |
212 | } |
||
213 | |||
214 | .menu ul { |
||
38 | PointedEar | 215 | margin: 0 0.2em 0.2em 0; |
37 | PointedEar | 216 | padding: 0; |
217 | } |
||
218 | |||
43 | PointedEar | 219 | .menu li { |
37 | PointedEar | 220 | margin: 0; |
221 | } |
||
222 | |||
223 | #bow #bottom |
||
224 | { |
||
225 | position: fixed; |
||
226 | left: 0; |
||
227 | bottom: 0; |
||
228 | width: 20.8em; |
||
229 | height: 2.4em; |
||
230 | background-color: #000; |
||
231 | z-index: 1701; |
||
232 | } |
||
233 | |||
234 | #bow-bottom { |
||
235 | position: absolute; |
||
236 | bottom: 0.2em; |
||
237 | left: 0.2em; |
||
238 | width: 20.6em; |
||
239 | height: 2.4em; |
||
240 | border-bottom-left-radius: 2.4em; |
||
241 | border-bottom-right-radius: 2em; |
||
242 | background-color: #999; |
||
243 | } |
||
244 | |||
245 | .empty #bow-bottom { |
||
246 | display: none; |
||
247 | } |
||
248 | |||
249 | #bow-bottom .concave { |
||
250 | position: absolute; |
||
251 | margin-left: 0.2em; |
||
252 | margin-bottom: 0.2em; |
||
253 | bottom: 0.3em; |
||
254 | left: 7.8em; |
||
255 | height: 2.1em; |
||
256 | width: 7.6em; |
||
257 | border-bottom-left-radius: 1.2em; |
||
258 | border-bottom-right-radius: 1em; |
||
259 | background-color: #000; |
||
260 | } |
||
261 | |||
38 | PointedEar | 262 | #bow-bottom .spacer { |
37 | PointedEar | 263 | position: absolute; |
38 | PointedEar | 264 | left: 10.2em; |
265 | bottom: 0em; |
||
266 | width: 0.2em; |
||
267 | height: 0.5em; |
||
268 | background-color: black; |
||
37 | PointedEar | 269 | } |
270 | |||
38 | PointedEar | 271 | .empty #bow-bottom-left-concave { |
272 | display: none; |
||
37 | PointedEar | 273 | } |
274 | |||
275 | /* Controls */ |
||
276 | |||
277 | .button:visited:hover, |
||
278 | .button:visited, |
||
279 | .button:hover, |
||
280 | .button |
||
281 | { |
||
282 | position: relative; |
||
283 | display: inline-block; |
||
284 | margin-right: 0.2em; |
||
285 | margin-bottom: 0.2em; |
||
286 | width: 5em; |
||
287 | height: 2em; |
||
288 | background-color: #7d7d7d; /* c9c */ |
||
289 | color: #000 !important; |
||
290 | text-decoration: none !important; |
||
291 | text-transform: uppercase; |
||
292 | overflow: hidden; |
||
83 | PointedEar | 293 | cursor: pointer !important; |
37 | PointedEar | 294 | } |
295 | |||
296 | .button .text { |
||
297 | position: absolute; |
||
298 | bottom: 0; |
||
299 | right: 0.5em; |
||
83 | PointedEar | 300 | cursor: pointer !important; |
37 | PointedEar | 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; |
||
74 | PointedEar | 355 | top: 2.6em; |
37 | PointedEar | 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; |
||
75 | PointedEar | 371 | height: 7.4em; |
37 | PointedEar | 372 | padding-bottom: 0.2em; |
373 | padding-right: 0.2em; |
||
374 | background-color: black; |
||
375 | } |
||
376 | |||
74 | PointedEar | 377 | .multi-display .upper .content |
72 | PointedEar | 378 | { |
379 | position: absolute; |
||
380 | top: 0; |
||
74 | PointedEar | 381 | left: 6em; |
382 | bottom: 1.2em; |
||
72 | PointedEar | 383 | right: 0.2em; |
384 | background-color: black; |
||
385 | color: white; |
||
74 | PointedEar | 386 | text-align: right; |
387 | overflow: hidden; |
||
388 | text-overflow: ellipsis; |
||
389 | } |
||
390 | |||
391 | .multi-display .upper .content .title |
||
392 | { |
||
393 | position: absolute; |
||
394 | top: 0; |
||
395 | left: 0em; |
||
396 | height: 1em; |
||
397 | right: 0em; |
||
398 | background-color: black; |
||
399 | color: white; |
||
72 | PointedEar | 400 | font-size: 2.4em; |
401 | text-transform: uppercase; |
||
402 | text-align: right; |
||
74 | PointedEar | 403 | overflow: hidden; |
404 | text-overflow: ellipsis; |
||
72 | PointedEar | 405 | } |
406 | |||
74 | PointedEar | 407 | .multi-display .upper .content .title span |
37 | PointedEar | 408 | { |
74 | PointedEar | 409 | white-space: nowrap; |
410 | } |
||
411 | |||
412 | .multi-display .upper .content .button |
||
413 | { |
||
414 | position: absolute; |
||
415 | margin-right: 0; |
||
416 | height: 1.8em; |
||
417 | text-transform: none; |
||
418 | } |
||
419 | |||
420 | .multi-display .upper .content .button .text { |
||
421 | right: 0.75em; |
||
422 | } |
||
423 | |||
424 | .multi-display .upper .content #cmd1 |
||
425 | { |
||
426 | top: 2.4em; |
||
427 | right: 5.2em; |
||
428 | } |
||
429 | |||
430 | .multi-display .upper .content #cmd2 |
||
431 | { |
||
432 | top: 2.4em; |
||
433 | right: 0; |
||
434 | } |
||
435 | |||
436 | .multi-display .upper .content #cmd3 |
||
437 | { |
||
438 | top: 4.4em; |
||
439 | right: 5.2em; |
||
440 | } |
||
441 | |||
442 | .multi-display .upper .content #cmd4 |
||
443 | { |
||
444 | top: 4.4em; |
||
445 | right: 0; |
||
446 | } |
||
447 | |||
448 | .multi-display .upper .elbo-button |
||
449 | { |
||
450 | position: absolute; |
||
451 | top: 0; |
||
452 | left: 0; |
||
453 | width: 5em; |
||
454 | height: 4em; |
||
37 | PointedEar | 455 | background-color: #c9c !important; |
72 | PointedEar | 456 | color: #000 !important; |
83 | PointedEar | 457 | cursor: default; |
37 | PointedEar | 458 | } |
459 | |||
74 | PointedEar | 460 | .multi-display .upper .elbo-button .text |
72 | PointedEar | 461 | { |
462 | position: absolute; |
||
463 | bottom: 0; |
||
464 | right: 0.2em; |
||
465 | max-width: 4.6em; |
||
466 | max-height: 3.6em; |
||
467 | text-align: right; |
||
468 | overflow: hidden; |
||
469 | } |
||
470 | |||
37 | PointedEar | 471 | .multi-display .upper .elbo |
472 | { |
||
473 | position: absolute; |
||
474 | left: 0; |
||
74 | PointedEar | 475 | top: 4.2em; |
37 | PointedEar | 476 | width: 6em; |
477 | height: 3.2em; |
||
478 | border-bottom-left-radius: 2em; |
||
479 | background-color: #9cf; |
||
72 | PointedEar | 480 | color: #000; |
37 | PointedEar | 481 | } |
482 | |||
72 | PointedEar | 483 | .multi-display .upper .elbo .text |
484 | { |
||
485 | position: absolute; |
||
486 | top: 0; |
||
487 | right: 1.2em; |
||
488 | max-width: 3.5em; |
||
489 | max-height: 2.2em; |
||
490 | text-align: right; |
||
491 | overflow: hidden; |
||
83 | PointedEar | 492 | cursor: default; |
72 | PointedEar | 493 | } |
494 | |||
37 | PointedEar | 495 | .multi-display .upper .elbo .concave |
496 | { |
||
497 | position: absolute; |
||
498 | left: 5em; |
||
499 | top: 0; |
||
500 | width: 1em; |
||
501 | height: 2.2em; |
||
502 | border-bottom-left-radius: 1em; |
||
503 | background-color: black; |
||
504 | } |
||
505 | |||
80 | PointedEar | 506 | .multi-display .border |
507 | { |
||
508 | overflow: hidden; |
||
509 | height: 1em; |
||
510 | } |
||
511 | |||
37 | PointedEar | 512 | .multi-display .upper .border |
513 | { |
||
514 | position: fixed; |
||
515 | top: 9em; |
||
516 | left: 21.8em; |
||
517 | right: 0.2em; |
||
79 | PointedEar | 518 | } |
519 | |||
520 | .multi-display .border div |
||
521 | { |
||
522 | position: absolute; |
||
523 | top: 0; |
||
524 | height: 1em; |
||
525 | } |
||
526 | |||
527 | .multi-display .upper .border div |
||
528 | { |
||
37 | PointedEar | 529 | background-color: #9cf; |
80 | PointedEar | 530 | } |
79 | PointedEar | 531 | |
532 | .multi-display .upper .border .left |
||
533 | { |
||
534 | left: 0; |
||
535 | right: 5.2em; |
||
536 | height: 1em; |
||
37 | PointedEar | 537 | } |
538 | |||
79 | PointedEar | 539 | .multi-display .upper .border .right |
540 | { |
||
541 | width: 5em; |
||
542 | right: 0; |
||
543 | } |
||
544 | |||
37 | PointedEar | 545 | .multi-display .lower |
546 | { |
||
547 | position: absolute; |
||
74 | PointedEar | 548 | top: 7.5em; |
37 | PointedEar | 549 | left: 0; |
550 | padding-top: 0.1em; |
||
551 | background-color: black; |
||
552 | } |
||
553 | |||
554 | .multi-display .lower .elbo |
||
555 | { |
||
556 | position: relative; |
||
557 | width: 6em; |
||
558 | height: 3em; |
||
559 | border-top-left-radius: 2em; |
||
560 | background-color: #fc6; |
||
561 | } |
||
562 | |||
563 | .multi-display .lower .elbo .concave |
||
564 | { |
||
565 | position: absolute; |
||
566 | left: 5em; |
||
567 | top: 1em; |
||
568 | width: 1em; |
||
569 | height: 2em; |
||
570 | background-color: black; |
||
571 | border-top-left-radius: 1em; |
||
572 | } |
||
573 | |||
574 | .multi-display .lower .bg |
||
575 | { |
||
576 | position: fixed; |
||
577 | top: 13.4em; |
||
578 | bottom: 2.8em; |
||
579 | width: 5em; |
||
580 | background-color: #fc6; |
||
581 | } |
||
582 | |||
583 | .multi-display .lower .border-container |
||
584 | { |
||
585 | position: fixed; |
||
586 | top: 10.2em; |
||
587 | left: 21.8em; |
||
588 | right: 0em; |
||
589 | height: 1.2em; |
||
590 | background-color: black; |
||
591 | } |
||
592 | |||
593 | .multi-display .lower .border |
||
594 | { |
||
80 | PointedEar | 595 | position: absolute; |
37 | PointedEar | 596 | left: 0; |
597 | right: 0.2em; |
||
79 | PointedEar | 598 | } |
599 | |||
600 | .multi-display .lower .border div |
||
601 | { |
||
37 | PointedEar | 602 | background-color: #fc6; |
603 | } |
||
604 | |||
79 | PointedEar | 605 | .multi-display .lower .border .left |
606 | { |
||
607 | left: 0; |
||
80 | PointedEar | 608 | right: 5.2em; |
79 | PointedEar | 609 | } |
610 | |||
611 | .multi-display .lower .border .right |
||
612 | { |
||
613 | width: 5em; |
||
80 | PointedEar | 614 | right: 0; |
79 | PointedEar | 615 | } |
616 | |||
43 | PointedEar | 617 | .menu .button.secondary, |
618 | .multi-display .lower .elbo.secondary, |
||
619 | .multi-display .lower .bg.secondary, |
||
620 | .multi-display .lower .border.secondary |
||
621 | { |
||
622 | background-color: #f96; |
||
623 | } |
||
624 | |||
625 | .menu .button.ancillary, |
||
626 | .multi-display .lower .elbo.ancillary, |
||
627 | .multi-display .lower .bg.ancillary, |
||
628 | .multi-display .lower .border.ancillary |
||
629 | { |
||
630 | background-color: #c9c; |
||
631 | } |
||
632 | |||
633 | .menu .button.database, |
||
634 | .multi-display .lower .elbo.database, |
||
635 | .multi-display .lower .bg.database, |
||
636 | .multi-display .lower .border.database |
||
637 | { |
||
37 | PointedEar | 638 | background-color: #c66; |
639 | } |
||
640 | |||
43 | PointedEar | 641 | .menu .button .text { |
37 | PointedEar | 642 | position: static; |
643 | margin: 0 0.25em; |
||
644 | } |
||
645 | |||
646 | .button.selected { |
||
647 | background-color: #fc6 !important; |
||
648 | color: #000 !important; |
||
649 | } |
||
650 | |||
651 | .group { |
||
652 | margin: 0 auto; |
||
653 | position: relative; |
||
38 | PointedEar | 654 | width: 7.7em; |
37 | PointedEar | 655 | } |
656 | |||
657 | .group .separator { |
||
658 | float: left; |
||
659 | position: absolute; |
||
38 | PointedEar | 660 | top: 0; |
661 | left: 0; |
||
662 | width: 1.5em; |
||
37 | PointedEar | 663 | height: 100%; |
664 | background-color: #c66; |
||
665 | color: #000; |
||
666 | } |
||
667 | |||
668 | .group .separator:after { |
||
669 | position: absolute; |
||
38 | PointedEar | 670 | width: 0.8em; |
671 | height: 0.5em; |
||
672 | bottom: 0.25em; |
||
673 | left: 0.25em; |
||
37 | PointedEar | 674 | background-color: #000; |
675 | content: "\a0"; |
||
676 | } |
||
677 | |||
678 | .group ul { |
||
38 | PointedEar | 679 | margin-left: 1.7em; |
37 | PointedEar | 680 | } |
681 | |||
682 | .group li { |
||
38 | PointedEar | 683 | margin-bottom: 0; |
37 | PointedEar | 684 | } |
685 | |||
686 | .group .button:visited, |
||
687 | .group .button |
||
688 | { |
||
38 | PointedEar | 689 | display: block; |
37 | PointedEar | 690 | position: relative; |
38 | PointedEar | 691 | width: 6em; |
37 | PointedEar | 692 | background-color: #99f !important; |
693 | } |
||
694 | |||
38 | PointedEar | 695 | .group li:last-child .button |
696 | { |
||
697 | margin-bottom: 0; |
||
37 | PointedEar | 698 | } |
699 | |||
38 | PointedEar | 700 | .button.right { |
701 | border-top-right-radius: 1em; |
||
702 | border-bottom-right-radius: 1em; |
||
37 | PointedEar | 703 | } |
704 | |||
38 | PointedEar | 705 | .button.right .text { |
706 | right: 1em; |
||
707 | } |
||
708 | |||
709 | .button.left { |
||
710 | border-top-left-radius: 1em; |
||
711 | border-bottom-left-radius: 1em; |
||
712 | } |
||
713 | |||
37 | PointedEar | 714 | .group .button .key { |
715 | display: inline-block; |
||
716 | position: absolute; |
||
38 | PointedEar | 717 | left: 0.2em; |
37 | PointedEar | 718 | top: 0; |
719 | bottom: 0; |
||
38 | PointedEar | 720 | padding: 0 0.1em; |
37 | PointedEar | 721 | background-color: #000; |
722 | color: #f90; |
||
38 | PointedEar | 723 | font-size: 2.4em; |
37 | PointedEar | 724 | text-transform: uppercase; |
38 | PointedEar | 725 | line-height: 0.9; |
726 | } |