Rev 118 | Rev 120 | Go to most recent revision | Show entire file | Regard whitespace | Details | Blame | Last modification | View Log | RSS feed
| Rev 118 | Rev 119 | ||
|---|---|---|---|
| Line 1... | Line 1... | ||
| 1 | <?php |
1 | <?php |
| - | 2 | namespace de\pointedears\css\least;
|
|
| - | 3 | ||
| 2 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
4 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
| 3 | 5 | ||
| 4 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
|
6 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
|
| 5 | \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
7 | \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
| 6 | 8 | ||
| 7 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
|
9 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
|
| 8 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
10 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
| 9 | 11 | ||
| 10 | \header('Content-Type: text/css; charset=UTF-8'); |
12 | \header('Content-Type: text/css; charset=UTF-8'); |
| - | 13 | ||
| - | 14 | require_once 'css/least/Mixins.php'; |
|
| 11 | ?>@charset "UTF-8"; |
15 | ?>@charset "UTF-8"; |
| 12 | 16 | ||
| 13 | <?php |
17 | <?php |
| 14 | if (!isset($_GET['ani']) || $_GET['ani'] !== '0') |
18 | if (!isset($_GET['ani']) || $_GET['ani'] !== '0') |
| 15 | {
|
19 | {
|
| 16 | ?>
|
20 | ?>
|
| 17 | @import url("/styles/lcars-ani.css");
|
21 | @import url("/styles/lcars-ani.css");
|
| 18 | <?php |
22 | <?php |
| 19 | }
|
23 | }
|
| 20 | ?>
|
24 | ?>
|
| - | 25 | /* FIXME: Does not work */
|
|
| - | 26 | /* @import url("/styles/lcars-responsive.css"); */
|
|
| 21 | 27 | ||
| 22 | body {
|
28 | body {
|
| 23 | margin-top: 12em; |
29 | margin-top: 12em; |
| 24 | margin-left: 22em; |
30 | margin-left: 16.8em; |
| 25 | margin-right: 0.2em; |
31 | margin-right: 0.2em; |
| 26 | margin-bottom: 0.2em; |
32 | margin-bottom: 0.2em; |
| 27 | }
|
33 | }
|
| 28 | 34 | ||
| 29 | /* HTML5 elements */
|
35 | /* HTML5 elements */
|
| Line 233... | Line 239... | ||
| 233 | #bow #bottom |
239 | #bow #bottom |
| 234 | {
|
240 | {
|
| 235 | position: fixed; |
241 | position: fixed; |
| 236 | left: 0; |
242 | left: 0; |
| 237 | bottom: 0; |
243 | bottom: 0; |
| 238 | width: 20.8em; |
244 | width: 10.4em; |
| 239 | height: 2.4em; |
245 | height: 2.4em; |
| 240 | background-color: #000; |
246 | background-color: #000; |
| 241 | z-index: 1701; |
247 | z-index: 1701; |
| 242 | }
|
248 | }
|
| 243 | 249 | ||
| 244 | #bow-bottom { |
250 | #bow-bottom { |
| 245 | position: absolute; |
251 | position: absolute; |
| 246 | bottom: 0.2em; |
252 | bottom: 0.2em; |
| 247 | left: 0.2em; |
253 | left: 0.2em; |
| 248 | width: 20.6em; |
254 | width: 8em; |
| 249 | height: 2.4em; |
255 | height: 2.6em; |
| 250 | border-bottom-left-radius: 2.4em; |
256 | border-bottom-left-radius: 0em; |
| 251 | border-bottom-right-radius: 2em; |
257 | border-bottom-right-radius: 0em; |
| 252 | background-color: #999; |
258 | background-color: #999; |
| 253 | }
|
259 | }
|
| 254 | 260 | ||
| 255 | .empty #bow-bottom { |
261 | .empty #bow-bottom { |
| 256 | display: none; |
262 | display: none; |
| Line 261... | Line 267... | ||
| 261 | margin-left: 0.2em; |
267 | margin-left: 0.2em; |
| 262 | margin-bottom: 0.2em; |
268 | margin-bottom: 0.2em; |
| 263 | bottom: 0.3em; |
269 | bottom: 0.3em; |
| 264 | left: 7.8em; |
270 | left: 7.8em; |
| 265 | height: 2.1em; |
271 | height: 2.1em; |
| 266 | width: 7.6em; |
272 | width: 2.2em; |
| 267 | border-bottom-left-radius: 1.2em; |
273 | border-bottom-left-radius: 1.2em; |
| 268 | border-bottom-right-radius: 1em; |
274 | border-bottom-right-radius: 1em; |
| 269 | background-color: #000; |
275 | background-color: #000; |
| 270 | }
|
276 | }
|
| 271 | 277 | ||
| Line 355... | Line 361... | ||
| 355 | position: fixed; |
361 | position: fixed; |
| 356 | left: 8.4em; |
362 | left: 8.4em; |
| 357 | top: 5.6em; |
363 | top: 5.6em; |
| 358 | }
|
364 | }
|
| 359 | 365 | ||
| - | 366 | #connectors div { |
|
| - | 367 | position: absolute; |
|
| - | 368 | }
|
|
| - | 369 | ||
| - | 370 | #connectors .top { |
|
| - | 371 | top: 0; |
|
| - | 372 | height: 1em; |
|
| - | 373 | }
|
|
| - | 374 | ||
| - | 375 | #connectors .mid { |
|
| - | 376 | top: 13.6em; |
|
| - | 377 | height: 0.8em; |
|
| - | 378 | }
|
|
| - | 379 | ||
| - | 380 | #connectors .left { |
|
| - | 381 | left: 0; |
|
| - | 382 | width: 2em; |
|
| - | 383 | }
|
|
| - | 384 | ||
| - | 385 | #connectors .right { |
|
| - | 386 | left: 2.2em; |
|
| - | 387 | width: 0em; |
|
| - | 388 | }
|
|
| - | 389 | ||
| 360 | .multi-display
|
390 | .multi-display
|
| 361 | {
|
391 | {
|
| 362 | position: fixed; |
392 | position: fixed; |
| 363 | top: 2.6em; |
393 | top: 2.6em; |
| 364 | left: 15.8em; |
394 | left: 10.6em; |
| 365 | right: 0; |
395 | right: 0; |
| 366 | }
|
396 | }
|
| 367 | 397 | ||
| 368 | .multi-display .button |
398 | .multi-display .button |
| 369 | {
|
399 | {
|
| Line 427... | Line 457... | ||
| 427 | }
|
457 | }
|
| 428 | 458 | ||
| 429 | .multi-display .upper .content .analysis table { |
459 | .multi-display .upper .content .analysis table { |
| 430 | border-collapse: collapse; |
460 | border-collapse: collapse; |
| 431 | line-height: 1.2; |
461 | line-height: 1.2; |
| - | 462 | max-width: 100%; |
|
| 432 | }
|
463 | }
|
| 433 | 464 | ||
| 434 | .multi-display .upper .content .analysis th { |
465 | .multi-display .upper .content .analysis th { |
| 435 | padding: 0 0.1em; |
466 | padding: 0 0.1em; |
| 436 | font-weight: normal; |
467 | font-weight: normal; |
| Line 654... | Line 685... | ||
| 654 | 685 | ||
| 655 | .multi-display .lower .bg |
686 | .multi-display .lower .bg |
| 656 | {
|
687 | {
|
| 657 | position: fixed; |
688 | position: fixed; |
| 658 | top: 13.4em; |
689 | top: 13.4em; |
| 659 | bottom: 2.8em; |
690 | bottom: 0.2em; |
| 660 | width: 5em; |
691 | width: 5em; |
| 661 | background-color: #fc6; |
692 | background-color: #fc6; |
| 662 | }
|
693 | }
|
| 663 | 694 | ||
| 664 | .multi-display .lower .border-container |
695 | .multi-display .lower .border-container |
| Line 803... | Line 834... | ||
| 803 | color: #f90; |
834 | color: #f90; |
| 804 | font-size: 2.4em; |
835 | font-size: 2.4em; |
| 805 | text-transform: uppercase; |
836 | text-transform: uppercase; |
| 806 | line-height: 0.9; |
837 | line-height: 0.9; |
| 807 | }
|
838 | }
|
| 808 | 839 | ||
| - | 840 | /* Responsive Web Design (TODO: Move to imported stylesheet; but see above) */
|
|
| - | 841 | ||
| - | 842 | body {
|
|
| - | 843 | <?php |
|
| - | 844 | Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
|
| - | 845 | ?>
|
|
| - | 846 | }
|
|
| - | 847 | ||
| - | 848 | #bow #bottom |
|
| - | 849 | {
|
|
| - | 850 | <?php |
|
| - | 851 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
|
| - | 852 | ?>
|
|
| - | 853 | }
|
|
| - | 854 | ||
| - | 855 | #bow-bottom { |
|
| - | 856 | <?php |
|
| - | 857 | Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
|
| - | 858 | Mixins::transition('-delay', '0.5s'); |
|
| - | 859 | Mixins::transition('-duration', '0.5s'); |
|
| - | 860 | Mixins::transition('-timing-function', 'ease'); |
|
| - | 861 | ?>
|
|
| - | 862 | }
|
|
| - | 863 | ||
| - | 864 | #bow-bottom .concave { |
|
| - | 865 | <?php |
|
| - | 866 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
|
| - | 867 | ?>
|
|
| - | 868 | }
|
|
| - | 869 | ||
| - | 870 | #connectors .right { |
|
| - | 871 | <?php |
|
| - | 872 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
|
| - | 873 | ?>
|
|
| - | 874 | }
|
|
| - | 875 | ||
| - | 876 | .multi-display
|
|
| - | 877 | {
|
|
| - | 878 | <?php |
|
| - | 879 | Mixins::transition('', 'left 0.5s 0.5s ease'); |
|
| - | 880 | ?>
|
|
| - | 881 | }
|
|
| - | 882 | ||
| - | 883 | .multi-display .lower .bg |
|
| - | 884 | {
|
|
| - | 885 | <?php |
|
| - | 886 | /* Wait 1s for bow to become shallower */
|
|
| - | 887 | Mixins::transition('', 'bottom 2.5s 0.5s ease'); |
|
| - | 888 | ?>
|
|
| - | 889 | }
|
|
| - | 890 | ||
| - | 891 | @media all and (min-width: 1024px) {
|
|
| - | 892 | body {
|
|
| - | 893 | margin-left: 22em; |
|
| - | 894 | <?php |
|
| - | 895 | Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
|
| - | 896 | ?>
|
|
| - | 897 | }
|
|
| - | 898 | ||
| - | 899 | #bow #bottom |
|
| - | 900 | {
|
|
| - | 901 | width: 20.8em; |
|
| - | 902 | <?php |
|
| - | 903 | /* Wait 0.5s for multi-display to be reduced in height */
|
|
| - | 904 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
|
| - | 905 | ?>
|
|
| - | 906 | }
|
|
| - | 907 | ||
| - | 908 | #bow-bottom { |
|
| - | 909 | border-bottom-left-radius: 2.4em; |
|
| - | 910 | border-bottom-right-radius: 2em; |
|
| - | 911 | height: 2.4em; |
|
| - | 912 | width: 20.6em; |
|
| - | 913 | <?php |
|
| - | 914 | Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
|
| - | 915 | Mixins::transition('-delay', '1.0s'); |
|
| - | 916 | Mixins::transition('-duration', '0.5s'); |
|
| - | 917 | Mixins::transition('-timing-function', 'ease'); |
|
| - | 918 | ?>
|
|
| - | 919 | }
|
|
| - | 920 | ||
| - | 921 | #bow-bottom .concave { |
|
| - | 922 | width: 7.6em; |
|
| - | 923 | <?php |
|
| - | 924 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
|
| - | 925 | ?>
|
|
| - | 926 | }
|
|
| - | 927 | ||
| - | 928 | #connectors .right { |
|
| - | 929 | width: 5em; |
|
| - | 930 | <?php |
|
| - | 931 | /* Wait 1.0s for multi-display to be moved to right */
|
|
| - | 932 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
|
| - | 933 | ?>
|
|
| - | 934 | }
|
|
| - | 935 | ||
| - | 936 | .multi-display
|
|
| - | 937 | {
|
|
| - | 938 | left: 15.8em; |
|
| - | 939 | <?php |
|
| - | 940 | Mixins::transition('', 'left 0.5s 0.5s ease'); |
|
| - | 941 | ?>
|
|
| - | 942 | }
|
|
| - | 943 | ||
| - | 944 | .multi-display .lower .bg |
|
| - | 945 | {
|
|
| - | 946 | bottom: 2.8em; |
|
| - | 947 | <?php |
|
| - | 948 | Mixins::transition('', 'bottom 0.5s 0.5s ease'); |
|
| - | 949 | ?>
|
|
| - | 950 | }
|
|
| - | 951 | }
|
|
| - | 952 | ||