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