yotsubluemobile.css
1 /** Here's one for you: internet explorer in wp7 can only handle 1 stylesheet at a time it seems **/ 2 /** Chrome Mobile seems to dislike media="" in html, so we do it this way instead. **/ 3 @media only screen and (max-width: 480px) { 4 /** GENERIC / ELEMENT STYLING **/ 5 html { 6 -moz-text-size-adjust: 100%; 7 -webkit-text-size-adjust: 100%; 8 -ms-text-size-adjust: 100%; 9 } 10 11 .postMenuBtn { 12 -webkit-transform: rotate(90deg); 13 -moz-transform: rotate(90deg); 14 -ms-transform: rotate(90deg); 15 transform: rotate(90deg); 16 margin: 4px -5px 0px 4px !important; 17 float: left; 18 font-weight: bold; 19 opacity: 1 !important; 20 height: 0.5em !important; 21 font-size: 16px; 22 } 23 24 .dd-menu { 25 font-size: 16px; 26 line-height: 2.5em; 27 } 28 29 .adg-rects > span.mobile { 30 display: inline-block !important; 31 } 32 33 .party-hat { 34 left: -15px; 35 margin-top: -30px; 36 position: absolute; 37 width: 100px; 38 pointer-events: none; 39 } 40 41 .pu-img { 42 background: url('//s.4cdn.org/image/minileaf@2x.gif'); 43 background-size: 100%; 44 } 45 46 body { 47 background: #EEF2FF url(/image/fade-blue.png) top center repeat-x; 48 49 color: #000000; 50 font-family: arial, helvetica, sans-serif; 51 font-size: 10pt; 52 53 margin-left: 0; 54 margin-right: 0; 55 margin-top: 5px; 56 57 padding-left: 0px; 58 padding-right: 0px; 59 60 width: 100%; 61 } 62 63 embed { 64 display: none !important; 65 } 66 67 .jlist-link { 68 margin: 15px auto 30px auto; 69 } 70 71 a, 72 .useremail:not(:hover) .name:not(.capcode), 73 .useremail:not(:hover) .postertrip:not(.capcode) { 74 color: #34345C !important; 75 } 76 77 a.replylink, div#absbot a { 78 text-decoration: underline !important; 79 } 80 81 a.replylink:not(:hover), div#absbot a:not(:hover) { 82 color: #34345C !important; 83 } 84 85 a:hover, 86 .useremail .name:hover, .useremail .postertrip:hover, 87 a.quoteLink:hover, a.quotelink:hover, a.deadlink:hover, 88 .useremail *:hover, .useremail:hover * { 89 color: #DD0000 !important; 90 } 91 92 .posteruid .hand:hover { 93 color: #DD0000 !important; 94 } 95 96 img { 97 border: none; 98 } 99 100 img.topad, .topad > div, .topad a img { 101 width: 300px; 102 height: 250px; 103 } 104 105 img.middlead, .middlead > div, .middlead a img { 106 width: 234px; 107 height: 30px; 108 max-width: 100%; 109 overflow: hidden; 110 margin: auto; 111 } 112 113 img.bottomad, .bottomad > div, .bottomad a img { 114 width: 320px; 115 height: 40px; 116 max-width: 100%; 117 overflow: hidden; 118 margin: auto; 119 } 120 121 ul.rules { 122 display: none; 123 } 124 125 .button a { 126 text-decoration: none !important; 127 } 128 129 div.boardBanner { 130 margin-top: 40px !important; 131 } 132 133 .backlink.mobile { 134 background-color: #C9CDE8; 135 border-top: 1px solid #B7C5D9; 136 } 137 138 .mobile { 139 display: block !important; 140 clear: left !important; 141 } 142 143 #quote-preview { 144 box-shadow: 0px 0px 4px 0 rgba(45, 77, 59, 0.5); 145 } 146 147 .noPictures .mFileInfo { 148 display: none !important; 149 } 150 .postLink.mobile { 151 clear: both !important; 152 } 153 154 .mobileinline { 155 display: inline !important; 156 } 157 158 .mobileib { 159 display: inline-block !important; 160 } 161 162 span.replyTextM { 163 display: inline !important; 164 } 165 166 .desktop { 167 display: none !important; 168 } 169 170 .hideMobile { 171 display: none !important; 172 } 173 174 div.board > hr { 175 border: none; 176 border-top: 1px solid #B7C5D9; 177 178 height: 0; 179 180 margin-top: 30px !important; 181 margin-bottom: 30px !important; 182 } 183 184 div.board > hr:last-of-type { 185 margin-bottom: 10px !important; 186 } 187 188 hr.abovePostForm { 189 width: 90%; 190 } 191 192 span.x-small { 193 font-size: x-small; 194 } 195 196 /** Mobile Specific CSS **/ 197 div.postLink { 198 background-color: #c9cde8; 199 border-top: 1px solid #B7C5D9; 200 padding: 5px; 201 202 overflow: hidden; 203 } 204 205 div.postLink span { 206 float: left; 207 208 } 209 210 div.postLink a { 211 float: right; 212 213 color: #34345C !important; 214 } 215 216 .mobilePostFormToggle { 217 text-align: center; 218 219 font-weight: bold; 220 221 margin: 0 auto; 222 padding-top: 15px; 223 } 224 225 a.mobilePostFormToggle { 226 text-align: center; 227 228 display: inline-block !important; 229 } 230 231 div.mobilePostFormToggle div { 232 width: 300px; 233 background-color: #98E; 234 padding-top: 5px; 235 padding-bottom: 5px; 236 border: 1px solid #000; 237 margin: 0 auto; 238 } 239 240 div.post div.file .fileThumb img { 241 max-width: 125px; 242 max-height: 125px; 243 object-fit: scale-down; 244 } 245 246 span.fileThumb { 247 margin-left: 0px !important; 248 margin-right: 5px !important; 249 } 250 251 div.post div.file .fileThumb { 252 margin-left: 5px !important; 253 margin-right: 10px !important; 254 text-decoration: none; 255 } 256 257 div.post div.file.image-expanded .fileThumb { 258 margin-left: 0 !important; 259 margin-right: 0 !important; 260 } 261 262 div.post div.file div.fileText { 263 display: none; 264 } 265 266 div.sideArrows { 267 display: none; 268 } 269 270 div.reply { 271 padding: 2px; 272 273 background-color: #D6DAF0; 274 275 margin: 0px; 276 border: 0; 277 } 278 279 div.replyContainer { 280 background-color: #D6DAF0; 281 margin: 5px 0 0; 282 padding-left: 0; 283 } 284 285 .is_index div.replyContainer { 286 margin: 7px 0 0 0; 287 } 288 289 div.opContainer { 290 margin: 5px 0 0; 291 padding-left: 0; 292 293 display: block; 294 overflow: hidden; 295 296 background-color: #D6DAF0; 297 298 border: none; 299 } 300 301 span.summary:not(.preview-summary) { 302 padding: 5px; 303 text-align: center; 304 display: block; 305 306 background-color: #c9cde8; 307 border-bottom: 1px solid #B7C5D9 !important; 308 309 margin-top: 0px; 310 margin-bottom: 5px; 311 312 font-weight: bold; 313 } 314 315 div.postLink span.info { 316 color: #34345C; 317 margin-top: 8px; 318 } 319 320 blockquote { 321 margin: 10px !important; 322 } 323 324 blockquote.postMessage { 325 font-size: 11pt; 326 } 327 328 .omittedposts, .abbr { 329 color: #707070 !important; 330 font-size: 10pt !important; 331 } 332 333 div.thread { 334 border-top: none; 335 } 336 337 div.opContainer div.postInfo { 338 display: none !important; 339 } 340 341 div.post div.postInfoM { 342 overflow: hidden; 343 344 border-bottom: 1px solid #B7C5D9; 345 background-color: #c9cde8; 346 347 padding: 5px; 348 } 349 350 div.replyContainer div.postInfoM { 351 margin: 0px; 352 } 353 354 div.post div.postInfoM span.postNum, div.postInfo span.postNum { 355 float: left; 356 } 357 358 div.post div.postInfoM span.postNum a, div.postInfo span.postNum a { 359 text-decoration: none; 360 color: #000000 !important; 361 } 362 363 div.post div.postInfoM span.postNum a:hover { 364 color: red; 365 } 366 367 /* Name */ 368 div.post div.postInfoM span.nameBlock, div.postInfo span.nameBlock { 369 display: inline; 370 float: left; 371 372 clear: left; 373 } 374 375 div.post div.postInfoM span.nameBlock span.name, div.postInfo span.nameBlock span.name { 376 color: #117743; 377 font-weight: bold; 378 } 379 380 div.post div.postInfoM span.nameBlock span.tripcode, div.postInfo span.nameBlock span.tripcode { 381 color: #117743; 382 } 383 384 /* Date/Time */ 385 div.post div.postInfoM span.dateTime { 386 float: right; 387 /*font-style: italic;*/ 388 text-align: right; 389 color: black !important; 390 } 391 392 div.post div.postInfoM span.time { 393 394 } 395 396 div.post div.postInfoM span.subject { 397 color: #0F0C5D; 398 font-weight: bold; 399 } 400 401 span.fileText { 402 font-size: smaller; 403 } 404 405 div.replyContainer div.reply { 406 width: 100%; 407 408 padding: 0px !important; 409 410 } 411 412 div.replyContainer div.post div.postInfo { 413 overflow: hidden; 414 415 border-bottom: 1px solid #B7C5D9; 416 background-color: #c9cde8; 417 418 padding: 3px; 419 420 margin: 0px; 421 } 422 423 div.replyContainer div.post div.postInfo input[type=checkbox] { 424 display: none; 425 } 426 427 div.replyContainer div.post div.postInfo span.postNum { 428 429 font-style: italic; 430 } 431 432 div.replyContainer div.post div.postInfo span.userInfo { 433 float: left; 434 padding-left: 5px; 435 } 436 437 div.replyContainer div.post div.postInfo span.nameBlock { 438 439 } 440 441 div.replyContainer div.post div.postInfo span.postNum a:first-child:after { 442 content: " "; 443 } 444 445 div.replyContainer div.post div.postInfo span.dateTime { 446 float: right; 447 text-align: right; 448 449 padding-right: 10px; 450 451 font-style: italic; 452 } 453 454 div.replyContainer div.post div.postInfo span.dateTime span.date { 455 display: block; 456 } 457 458 div.thread > div:nth-of-type(2) > div.reply { 459 margin-top: 0px !important; 460 } 461 462 div.replyContainer div.post div.fileInfo { 463 margin-left: 0px; 464 } 465 466 div.replyContainer div.post div.file:not(.image-expanded) { 467 padding: 5px; 468 } 469 470 div.mPagelist { 471 margin-top: 10px; 472 text-align: center; 473 474 border-bottom: 1px solid #B7C5D9; 475 476 padding-bottom: 10px; 477 478 color: #89A; 479 480 } 481 482 div.mPagelist strong { 483 color: #34345C; 484 } 485 486 div.mPagelist > div.prev, div.mPagelist div.next { 487 margin: 20px 2px 15px; 488 display: inline-block; 489 } 490 491 .button { 492 border-radius: 3px; 493 padding: 6px 10px 5px 10px; 494 font-weight: bold; 495 background-color: #D6DAF0; 496 border: 1px solid #B7C5D9; 497 user-select: none; 498 499 background-image: url(/image/buttonfade-blue.png); 500 background-repeat: repeat-x; 501 502 text-decoration: none; 503 color: #34345C !important; 504 } 505 506 #globalToggle { 507 width: 200px; 508 display: inline; 509 text-align: center; 510 511 margin: 0 auto; 512 margin-bottom: 10px; 513 } 514 515 .redButton { 516 background-color: #ffadad; 517 background-image: url(/image/buttonfade-red.png); 518 border: 1px solid #C45858; 519 520 color: #800 !important; 521 } 522 523 div.mPagelist span { 524 padding-left: 3px; 525 padding-right: 3px; 526 527 font-size: larger; 528 } 529 530 .button:hover { 531 cursor: pointer; 532 } 533 534 .mobileCatalogLink, 535 div.absBotText { 536 margin-top: 10px; 537 } 538 539 .mobileCatalogLink { 540 font-size: larger; 541 } 542 543 #disable-mobile { 544 font-size: small !important; 545 } 546 547 #enable-mobile { 548 font-size: small !important; 549 display: none; 550 } 551 552 .absBotDisclaimer { 553 display: none !important; 554 } 555 556 div#boardNavMobile { 557 padding: 2px 4px; 558 559 background-color: #D6DAF0; 560 561 overflow: hidden; 562 563 border-bottom: 2px solid #B7C5D9; 564 565 position: fixed; 566 top: 0px; 567 568 width: 100%; 569 font-size: x-small; 570 } 571 572 div#boardNavMobile select, div#boardNavMobile option { 573 font-size: x-small; 574 } 575 576 div.boardSelect { 577 float: left; 578 } 579 580 div.boardSelect > strong { 581 padding-right: 5px; 582 } 583 584 div.pageJump { 585 float: right; 586 padding-right: 5px; 587 padding-top: 3px; 588 font-size: 7.5pt; 589 } 590 591 .pageJump a { 592 text-decoration: none; 593 padding-right: 5px; 594 } 595 596 div.postingMode { 597 background-color: #e04000; 598 padding: 3px; 599 text-align: center; 600 601 width: 300px; 602 margin: 0 auto; 603 } 604 605 div.navLinks { 606 margin-top: 9px !important; 607 margin-bottom: 0px !important; 608 text-align: center; 609 } 610 611 /** WP7 ADDITIONS **/ 612 div.post div.postInfo span.postNum a { 613 text-decoration: none; 614 color: #000000; 615 } 616 617 a.quoteLink { 618 color: #D00 !important; 619 } 620 621 div.boardBanner { 622 text-align: center; 623 clear: both; 624 } 625 626 div.boardBanner > img { 627 border: 1px solid #34345C; 628 margin: 5px 0px 5px 0px; 629 height: 50px; 630 width: 150px; 631 max-width: 100%; 632 } 633 634 div.boardBanner > div.boardTitle { 635 font-family: Tahoma, sans-serif; 636 font-size: 28px; 637 font-weight: bold; 638 letter-spacing: -2px; 639 640 margin-top: 0px; 641 } 642 643 div.boardBanner > div.boardSubtitle { 644 font-size: x-small; 645 } 646 647 div.post div.file .fileThumb img { 648 border: none; 649 650 float: left; 651 } 652 653 div.post div.file .fileThumb .expanded-thumb { 654 max-width: 100vw !important; 655 max-height: none !important; 656 } 657 658 .expandedWebm { 659 width: auto !important; 660 height: auto !important; 661 margin: 3px 0 5px; 662 max-width: 100vw !important; 663 max-height: none !important; 664 } 665 666 span.subject { 667 display: block; 668 } 669 670 hr { 671 border: none; 672 border-top: 1px solid #B7C5D9; 673 674 height: 0; 675 } 676 677 .commentpostername { 678 font-weight: bold; 679 } 680 681 .identityIcon { 682 margin-bottom: -3px; 683 height: 16px; 684 width: 16px; 685 } 686 687 .stickyIcon { 688 margin-bottom: -2px; 689 padding-left: 2px; 690 height: 16px; 691 width: 16px; 692 } 693 694 .archivedIcon, 695 .closedIcon { 696 margin-bottom: -2px; 697 margin-left: -1px; 698 height: 16px; 699 width: 16px; 700 } 701 702 .trashIcon { 703 width: 16px; 704 height: 16px; 705 margin-bottom: -2px; 706 } 707 708 .fileDeleted { 709 height: 13px; 710 width: 172px; 711 } 712 713 .fileDeletedRes { 714 height: 13px; 715 width: 127px; 716 } 717 718 .navSmall { 719 font-size: 90%; 720 } 721 722 .center { 723 text-align: center; 724 } 725 726 .bold { 727 font-weight: bold; 728 } 729 730 .smaller { 731 font-size: smaller; 732 } 733 734 .password { 735 font-size: smaller; 736 } 737 738 .passNotice { 739 font-size: smaller; 740 padding-left: 3px; 741 } 742 743 .qcDiv { 744 display: none; 745 } 746 747 .qcImg { 748 height: 1px; 749 width: 1px; 750 border: 0px; 751 } 752 753 .jpnFlag { 754 height: 11px; 755 width: 17px; 756 } 757 758 .globalMessage { 759 color: red; 760 text-align: center; 761 } 762 763 .highlightPost { 764 background: #f0d6d6 !important; 765 } 766 767 span.postertrip { 768 color: #117743; 769 font-weight: normal !important; 770 } 771 772 span.capcodeAdmin span.name, span.capcodeAdmin span.name a, span.capcodeAdmin span.postertrip, span.capcodeAdmin strong.capcode { 773 color: #F00 !important; 774 } 775 776 span.capcodeMod span.name, span.capcodeMod span.name a, span.capcodeMod span.postertrip, span.capcodeMod strong.capcode { 777 color: #800080 !important; 778 } 779 780 .omittedposts, .abbr { 781 color: #070707; 782 } 783 784 span.spoiler { 785 color: #000 !important; 786 background: #000 !important; 787 } 788 789 span.spoiler:hover, span.spoiler:focus { 790 color: #fff !important; 791 } 792 793 table.exif { 794 display: none; 795 min-width: 450px; 796 } 797 798 table.exif td { 799 color: #070707; 800 min-width: 150px; 801 font-size: 8pt; 802 } 803 804 table.exif td b { 805 text-decoration: underline; 806 } 807 808 #navtopright, #navbotright { 809 float: right; 810 } 811 812 .preview { 813 background-color: #D6DAF0; 814 815 border: 1px solid #B7C5D9 !important; 816 border-right-width: 2px !important; 817 border-bottom-width: 2px !important; 818 } 819 820 div.posthover { 821 max-width: 400px; 822 margin-left: 20px; 823 824 } 825 826 div.posthover { 827 padding: 5px; 828 829 padding-left: 10px; 830 padding-right: 10px; 831 832 } 833 834 div.posthover a.fileThumb { 835 margin-left: 5px !important; 836 margin-right: 10px !important; 837 } 838 839 div.posthover blockquote { 840 margin: 5px; 841 842 } 843 844 div.posthover img[data-md5] { 845 max-width: 80px; 846 max-height: 80px; 847 } 848 849 div.posthover div.fileThumb { 850 margin-left: 0px !important; 851 margin-right: 10px !important; 852 } 853 854 #settingsBox { 855 position: absolute; 856 857 right: 10px; 858 margin-top: 10px; 859 860 background-color: #D6DAF0; 861 } 862 863 div.mPagelist a { 864 text-decoration: none !important; 865 } 866 867 .pages a { 868 bottom: -1px; 869 position: relative; 870 } 871 872 img.expandedImg { 873 max-width: auto !important; 874 max-height: auto !important; 875 } 876 877 .prettyprint { 878 border: none !important; 879 background-color: #fff; 880 padding: 5px !important; 881 display: inline-block; 882 883 max-height: 400px; 884 885 max-width: 300px; 886 word-wrap: break-word; 887 } 888 889 td > input[type="text"], td > textarea, td > input[type="password"] { 890 width: 220px !important; 891 margin-right: 0 !important; 892 } 893 894 #postForm { 895 width: auto; 896 } 897 898 #postForm input[name="sub"] { 899 width: 160px !important; 900 } 901 902 #postForm input[type="submit"] { 903 width: 60px; 904 padding: 2px 4px 3px 4px; 905 margin: 0px; 906 } 907 908 #postForm input[type="password"] { 909 width: 70px !important; 910 } 911 912 td > input { 913 margin-left: 1px; 914 } 915 916 tr.mobile { 917 display: table-row !important; 918 } 919 920 tr.mobile td { 921 padding: 5px; 922 } 923 924 .recaptcha_image_cell { 925 width: auto !important; 926 padding: 0 !important; 927 } 928 929 #recaptcha_table tr > td:last-child { 930 display: none; 931 } 932 933 #recaptcha_table tr[height="73"] { 934 height: auto !important; 935 } 936 937 #recaptcha_table tr > td { 938 padding: 0 !important; 939 } 940 941 #recaptcha_image { 942 width: 280px !important; 943 944 } 945 946 .recaptchatable .recaptcha_image_cell center { 947 948 } 949 950 #recaptcha_response_field { 951 width: 272px !important; 952 margin-left: 3px; 953 margin-top: -1px; 954 955 font-size: 10pt !important; 956 } 957 958 #recaptcha_image > img { 959 width: 280px !important; 960 } 961 962 #postForm:not(.hideMobile) { 963 /*max-width: 280px !important;*/ 964 overflow: hidden; 965 margin-top: 20px; 966 display: table; 967 } 968 969 form[name="post"] { 970 margin: auto; 971 max-width: 100%; 972 } 973 974 input[type="text"], input[type="password"], textarea { 975 -webkit-appearance: none; 976 -webkit-border-radius: 0; 977 } 978 979 input:focus, textarea:focus { 980 border: 1px solid #9988EE !important; 981 } 982 983 a:hover, .posteruid .hand:hover { 984 color: #DD0000 !important; 985 } 986 987 .button a:hover, a.button:hover { 988 color: #34345C!important; 989 } 990 991 a.redButton:hover, 992 a.redButton:focus { 993 color: #880000 !important; 994 } 995 996 table#recaptcha_table > tbody > tr:first-child > td:nth-child(2) { 997 display: none; 998 } 999 1000 .reply:target, .reply:focus, .reply.highlight { 1001 background: #D6BAD0 !important; 1002 border: none !important; 1003 } 1004 1005 .mFileInfo { 1006 padding-top: 5px; 1007 text-align: center; 1008 color: #707070 !important; 1009 font-size: 9pt !important; 1010 text-decoration: none!important; 1011 } 1012 1013 a.replylink, div#absbot a { 1014 text-decoration: underline !important; 1015 } 1016 1017 a.replylink:not(:hover), div#absbot a:not(:hover) { 1018 color: #34345C !important; 1019 } 1020 1021 .mobileSpoiler { 1022 padding: 2px !important; 1023 } 1024 1025 #mpostform { 1026 text-align: center; 1027 margin-top: 10px; 1028 } 1029 1030 }