Rev 37 | Rev 40 | Go to most recent revision | Show entire file | Regard whitespace | Details | Blame | Last modification | View Log | RSS feed
| Rev 37 | Rev 38 | ||
|---|---|---|---|
| Line 76... | Line 76... | ||
| 76 | /*-webkit-animation-name: fade-in;*/
|
76 | /*-webkit-animation-name: fade-in;*/
|
| 77 | /* -webkit-animation-iteration-count: infinite; */
|
77 | /* -webkit-animation-iteration-count: infinite; */
|
| 78 | }
|
78 | }
|
| 79 | 79 | ||
| 80 | body.empty { |
80 | body.empty { |
| - | 81 | margin-top: 3em; |
|
| 81 | margin-left: 0.2em; |
82 | margin-left: 0.2em; |
| 82 | margin-bottom: 3em; |
83 | margin-bottom: 3em; |
| 83 | }
|
84 | }
|
| 84 | 85 | ||
| 85 | body.multi { |
86 | body.multi { |
| Line 208... | Line 209... | ||
| 208 | }
|
209 | }
|
| 209 | 210 | ||
| 210 | .empty #bow-top { |
211 | .empty #bow-top { |
| 211 | border-top-left-radius: 1.2em; |
212 | border-top-left-radius: 1.2em; |
| 212 | border-bottom-left-radius: 1.2em; |
213 | border-bottom-left-radius: 1.2em; |
| - | 214 | min-width: 10em; |
|
| 213 | }
|
215 | }
|
| 214 | 216 | ||
| 215 | /* 0.0 to 1.0 s */
|
217 | /* 0.0 to 1.0 s */
|
| 216 | @-webkit-keyframes bow-top {
|
218 | @-webkit-keyframes bow-top {
|
| 217 | from {
|
219 | from {
|
| 218 | left: 90%; |
220 | left: 90%; |
| 219 | border-top-left-radius: 0; |
221 | border-top-left-radius: 0; |
| - | 222 | border-bottom-left-radius: 0; |
|
| 220 | }
|
223 | }
|
| 221 | }
|
224 | }
|
| 222 | 225 | ||
| 223 | .fade-in #bow-top { |
226 | .fade-in #bow-top { |
| 224 | -webkit-animation-name: bow-top; |
227 | -webkit-animation-name: bow-top; |
| Line 239... | Line 242... | ||
| 239 | padding-right: 0.1em; |
242 | padding-right: 0.1em; |
| 240 | overflow: hidden; |
243 | overflow: hidden; |
| 241 | text-overflow: ellipsis; |
244 | text-overflow: ellipsis; |
| 242 | }
|
245 | }
|
| 243 | 246 | ||
| - | 247 | .empty #bow-top .text { |
|
| - | 248 | left: 0.93em; |
|
| - | 249 | }
|
|
| - | 250 | ||
| 244 | /* 0.0 to 1.0 s */
|
251 | /* 0.0 to 1.0 s */
|
| 245 | @-webkit-keyframes bow-top-text {
|
252 | @-webkit-keyframes bow-top-text {
|
| 246 | from {
|
253 | from {
|
| 247 | opacity: 0; |
254 | opacity: 0; |
| 248 | }
|
255 | }
|
| Line 265... | Line 272... | ||
| 265 | padding-left: 0.1em; |
272 | padding-left: 0.1em; |
| 266 | text-transform: uppercase; |
273 | text-transform: uppercase; |
| 267 | white-space: nowrap; |
274 | white-space: nowrap; |
| 268 | }
|
275 | }
|
| 269 | 276 | ||
| - | 277 | .empty #footer-container { |
|
| - | 278 | position: fixed; |
|
| - | 279 | left: 0.2em; |
|
| - | 280 | bottom: 0; |
|
| - | 281 | right: 0.2em; |
|
| - | 282 | min-height: 2.4em; |
|
| - | 283 | padding-top: 0.2em; |
|
| - | 284 | padding-bottom: 0.2em; |
|
| - | 285 | background-color: #000; |
|
| - | 286 | }
|
|
| - | 287 | ||
| - | 288 | .empty #footer { |
|
| - | 289 | position: absolute; |
|
| - | 290 | bottom: 0; |
|
| - | 291 | left: 0; |
|
| - | 292 | right: 0; |
|
| - | 293 | height: 2em; |
|
| - | 294 | margin-bottom: 0.2em; |
|
| - | 295 | background-color: #999; |
|
| - | 296 | border-radius: 1.2em; |
|
| - | 297 | line-height: 0.8; |
|
| - | 298 | }
|
|
| - | 299 | ||
| - | 300 | .empty #footer .text { |
|
| - | 301 | position: absolute; |
|
| - | 302 | bottom: 0; |
|
| - | 303 | left: 0.75em; |
|
| - | 304 | margin: 0 !important; |
|
| - | 305 | background-color: #000; |
|
| - | 306 | color: #fc0; |
|
| - | 307 | padding-top: 0.1em; |
|
| - | 308 | padding-left: 0.1em; |
|
| - | 309 | padding-right: 0.1em; |
|
| - | 310 | text-transform: uppercase; |
|
| - | 311 | font-size: 2.4em; |
|
| - | 312 | overflow: hidden; |
|
| - | 313 | text-overflow: ellipsis; |
|
| - | 314 | }
|
|
| - | 315 | ||
| - | 316 | .empty #footer .text span { |
|
| - | 317 | padding-right: 0.1em; |
|
| - | 318 | padding-left: 0.1em; |
|
| - | 319 | background-color: #000; |
|
| - | 320 | text-transform: uppercase; |
|
| - | 321 | white-space: nowrap; |
|
| - | 322 | }
|
|
| - | 323 | ||
| 270 | .empty .separator-left { |
324 | .empty .separator-left { |
| 271 | position: absolute; |
325 | position: absolute; |
| 272 | left: 2em; |
326 | left: 2em; |
| 273 | height: 2em; |
327 | height: 2em; |
| 274 | width: 0.25em; |
328 | width: 0.25em; |
| Line 368... | Line 422... | ||
| 368 | -webkit-animation-duration: 2.25s; |
422 | -webkit-animation-duration: 2.25s; |
| 369 | -webkit-animation-timing-function: linear; |
423 | -webkit-animation-timing-function: linear; |
| 370 | }
|
424 | }
|
| 371 | 425 | ||
| 372 | #bow ul { |
426 | #bow ul { |
| 373 | margin: 0 0.2em 0.5em 0; |
427 | margin: 0 0.2em 0.2em 0; |
| 374 | padding: 0; |
428 | padding: 0; |
| 375 | }
|
429 | }
|
| 376 | 430 | ||
| 377 | #bow li { |
431 | #bow li { |
| 378 | margin: 0; |
432 | margin: 0; |
| Line 415... | Line 469... | ||
| 415 | border-bottom-left-radius: 1.2em; |
469 | border-bottom-left-radius: 1.2em; |
| 416 | border-bottom-right-radius: 1em; |
470 | border-bottom-right-radius: 1em; |
| 417 | background-color: #000; |
471 | background-color: #000; |
| 418 | }
|
472 | }
|
| 419 | 473 | ||
| 420 | .empty #bow-bottom-left-concave { |
474 | #bow-bottom .spacer { |
| 421 | display: none; |
- | |
| 422 | }
|
- | |
| 423 | - | ||
| 424 | .empty #footer-container { |
- | |
| 425 | position: fixed; |
- | |
| 426 | left: 0.2em; |
- | |
| 427 | bottom: 0; |
- | |
| 428 | right: 0.2em; |
- | |
| 429 | min-height: 2.4em; |
- | |
| 430 | padding-top: 0.2em; |
- | |
| 431 | padding-bottom: 0.2em; |
- | |
| 432 | background-color: #000; |
- | |
| 433 | }
|
- | |
| 434 | - | ||
| 435 | .empty #footer { |
- | |
| 436 | position: absolute; |
475 | position: absolute; |
| 437 | bottom: 0; |
476 | left: 10.2em; |
| 438 | left: 0; |
477 | bottom: 0em; |
| 439 | right: 0; |
478 | width: 0.2em; |
| 440 | height: 2em; |
479 | height: 0.5em; |
| 441 | margin-bottom: 0.2em; |
- | |
| 442 | background-color: #999; |
480 | background-color: black; |
| 443 | border-radius: 1.2em; |
- | |
| 444 | line-height: 0.8; |
- | |
| 445 | }
|
481 | }
|
| 446 | 482 | ||
| 447 | .empty #footer .text { |
483 | .empty #bow-bottom-left-concave { |
| 448 | position: absolute; |
- | |
| 449 | bottom: 0; |
- | |
| 450 | left: 0.75em; |
- | |
| 451 | margin: 0 !important; |
- | |
| 452 | background-color: #000; |
- | |
| 453 | color: #fc0; |
484 | display: none; |
| 454 | padding-top: 0.1em; |
- | |
| 455 | padding-left: 0.1em; |
- | |
| 456 | padding-right: 0.1em; |
- | |
| 457 | text-transform: uppercase; |
- | |
| 458 | font-size: 2.4em; |
- | |
| 459 | }
|
485 | }
|
| 460 | 486 | ||
| 461 | /* Controls */
|
487 | /* Controls */
|
| 462 | 488 | ||
| 463 | .button:visited:hover, |
489 | .button:visited:hover, |
| Line 673... | Line 699... | ||
| 673 | }
|
699 | }
|
| 674 | 700 | ||
| 675 | .group { |
701 | .group { |
| 676 | margin: 0 auto; |
702 | margin: 0 auto; |
| 677 | position: relative; |
703 | position: relative; |
| 678 | width: 9em; |
704 | width: 7.7em; |
| 679 | }
|
705 | }
|
| 680 | 706 | ||
| 681 | .group .separator { |
707 | .group .separator { |
| 682 | float: left; |
708 | float: left; |
| 683 | position: absolute; |
709 | position: absolute; |
| - | 710 | top: 0; |
|
| 684 | margin-left: 14px; |
711 | left: 0; |
| 685 | width: 29px; |
712 | width: 1.5em; |
| 686 | height: 100%; |
713 | height: 100%; |
| 687 | background-color: #c66; |
714 | background-color: #c66; |
| 688 | color: #000; |
715 | color: #000; |
| 689 | }
|
716 | }
|
| 690 | 717 | ||
| 691 | .group .separator:after { |
718 | .group .separator:after { |
| 692 | position: absolute; |
719 | position: absolute; |
| 693 | width: 18px; |
720 | width: 0.8em; |
| 694 | height: 9px; |
721 | height: 0.5em; |
| 695 | bottom: 3px; |
722 | bottom: 0.25em; |
| 696 | left: 3px; |
723 | left: 0.25em; |
| 697 | background-color: #000; |
724 | background-color: #000; |
| 698 | content: "\a0"; |
725 | content: "\a0"; |
| 699 | }
|
726 | }
|
| 700 | 727 | ||
| 701 | .group ul { |
728 | .group ul { |
| 702 | margin-left: 35px; |
729 | margin-left: 1.7em; |
| 703 | }
|
730 | }
|
| 704 | 731 | ||
| 705 | .group li { |
732 | .group li { |
| 706 | margin-bottom: 4px; |
733 | margin-bottom: 0; |
| 707 | }
|
734 | }
|
| 708 | 735 | ||
| 709 | .group .button:visited:hover, |
- | |
| 710 | .group .button:visited, |
736 | .group .button:visited, |
| 711 | .group .button |
737 | .group .button |
| 712 | {
|
738 | {
|
| - | 739 | display: block; |
|
| 713 | position: relative; |
740 | position: relative; |
| - | 741 | width: 6em; |
|
| 714 | background-color: #99f !important; |
742 | background-color: #99f !important; |
| 715 | }
|
743 | }
|
| 716 | 744 | ||
| 717 | .group .button.right { |
745 | .group li:last-child .button |
| 718 | border-top-left-radius: 0; |
- | |
| - | 746 | {
|
|
| 719 | border-bottom-left-radius: 0; |
747 | margin-bottom: 0; |
| 720 | }
|
748 | }
|
| 721 | 749 | ||
| 722 | .group .button.left { |
750 | .button.right { |
| 723 | border-top-right-radius: 0; |
751 | border-top-right-radius: 1em; |
| 724 | border-bottom-right-radius: 0; |
752 | border-bottom-right-radius: 1em; |
| - | 753 | }
|
|
| - | 754 | ||
| - | 755 | .button.right .text { |
|
| - | 756 | right: 1em; |
|
| - | 757 | }
|
|
| - | 758 | ||
| - | 759 | .button.left { |
|
| - | 760 | border-top-left-radius: 1em; |
|
| - | 761 | border-bottom-left-radius: 1em; |
|
| 725 | }
|
762 | }
|
| 726 | 763 | ||
| 727 | .group .button .key { |
764 | .group .button .key { |
| 728 | display: inline-block; |
765 | display: inline-block; |
| 729 | position: absolute; |
766 | position: absolute; |
| 730 | left: 0.25em; |
767 | left: 0.2em; |
| 731 | top: 0; |
768 | top: 0; |
| 732 | bottom: 0; |
769 | bottom: 0; |
| 733 | padding: 0 1px; |
770 | padding: 0 0.1em; |
| 734 | background-color: #000; |
771 | background-color: #000; |
| 735 | color: #f90; |
772 | color: #f90; |
| 736 | font-size: 222%; |
773 | font-size: 2.4em; |
| 737 | text-transform: uppercase; |
774 | text-transform: uppercase; |
| - | 775 | line-height: 0.9; |
|
| 738 | }
|
776 | }
|