catalog_tomorrow.css
1 /* YUI Reset */ 2 html { 3 -moz-text-size-adjust: 100%; 4 -webkit-text-size-adjust: 100%; 5 -ms-text-size-adjust: 100%; 6 color: #000; 7 } 8 9 body, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td { 10 margin: 0; 11 padding: 0; 12 } 13 14 body { 15 margin-bottom: 8px; 16 } 17 18 .nwsb { display: none; } 19 20 a { 21 text-decoration: none; 22 } 23 24 div.reply { 25 background-color: #282a2e; 26 border: 1px solid #282a2e; 27 } 28 29 .click-me { 30 border-radius: 5px; 31 margin-top: 5px; 32 padding: 2px 5px; 33 position: absolute; 34 font-weight: bold; 35 z-index: 2; 36 white-space: nowrap; 37 } 38 .tomorrow .click-me { 39 color: #C5C8C6; 40 background-color: #282A2E; 41 border: 2px solid #111; 42 } 43 .click-me:before { 44 content: ""; 45 border-width: 0 6px 6px; 46 border-style: solid; 47 left: 50%; 48 margin-left: -6px; 49 position: absolute; 50 width: 0; 51 height: 0; 52 top: -6px; 53 } 54 .tomorrow .click-me:before { 55 border-color: #111 transparent; 56 } 57 .click-me:after { 58 content: ""; 59 border-width: 0 4px 4px; 60 top: -4px; 61 display: block; 62 left: 50%; 63 margin-left: -4px; 64 position: absolute; 65 width: 0; 66 height: 0; 67 } 68 .tomorrow .click-me:after { 69 border-color: #282A2E transparent; 70 border-style: solid; 71 } 72 73 .adg-rects { 74 margin: 0; 75 text-align: center; 76 } 77 .adg, .adg-m { overflow: hidden; } 78 .adg-rep .adg { margin-left: 15px } 79 .adp-228 { margin: auto; width: 728px; height: 320px; } 80 .adp-90 { margin: auto; width: 728px; height: 90px; } 81 .adp-128 { margin: auto; width: 728px; height: 128px; } 82 .adp-j { margin: auto; width: 728px; height: 102px; } 83 .adp-50 { margin: auto; width: 320px; height: 50px; } 84 .adp-250 { margin: auto; width: 300px; height: 250px; } 85 .adp-row { display: inline-block; margin: 0 10px; } 86 .adl { font-size: 10px; text-align: center; } 87 .adl + .ad-bgls, .ad-bgls + .adl { margin-top: 8px; } 88 89 .danbo-slot { width: 728px; height: 90px; margin: 10px auto; overflow: hidden; } 90 @media only screen and (max-width: 480px) { .danbo-slot { width: 300px; height: 250px; } } 91 92 .bsa-cnt { 93 margin: 20px 0; 94 height: 90px; 95 text-align: center; 96 } 97 98 @media only screen and (max-width: 640px) { 99 .bsa-cnt { 100 height: 250px; 101 display: flex; 102 justify-content: center; 103 align-items: center; 104 } 105 } 106 107 #t-root { 108 overflow: hidden; 109 box-sizing: border-box; 110 background: #eee; 111 border: 1px solid #777; 112 margin: 2px 0 2px 0; 113 width: 300px; 114 } 115 116 .adc-resp { 117 margin: auto; 118 width: 728px; 119 height: 228px; 120 overflow: hidden; 121 } 122 123 @media only screen and (max-width: 480px) { 124 .adc-resp { 125 width: 300px; 126 height: 300px; 127 } 128 } 129 130 .party-cnt { 131 position: relative; 132 display: inline-block; 133 } 134 135 .party-hat { 136 position: absolute; 137 pointer-events: none; 138 } 139 140 .small .party-hat, 141 .extended-small .party-hat { 142 width: 100px; 143 left: -10px; 144 margin-top: -55px; 145 } 146 147 .large .party-hat, 148 .extended-large .party-hat { 149 left: -15px; 150 margin-top: -95px; 151 } 152 153 #disclaimer { 154 font-size: 14px; 155 position: absolute; 156 overflow: hidden; 157 top: 0; left: 0; 158 width: 100%; height: 100%; 159 z-index: 9998; 160 } 161 162 #disclaimer-bg { 163 position: fixed; 164 top: 0; left: 0; 165 width: 100%; height: 100%; 166 background-color: rgba(0, 0, 0, 0.25); 167 } 168 169 #disclaimer-modal { 170 z-index: 9999; 171 width: 320px; 172 top: 0; 173 left: 50%; 174 margin-left: -170px; 175 display: block; 176 padding: 10px; 177 position: relative; 178 background-color: #282a2e; 179 box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); 180 } 181 182 #disclaimer ol { 183 margin-left: 20px; 184 padding: 0; 185 } 186 187 #disclaimer li { 188 margin: 10px 0; 189 } 190 191 #disclaimer h3 { 192 border-bottom: 1px solid #111; 193 margin: 0; 194 padding-bottom: 5px; 195 text-align: center; 196 } 197 198 #disclaimer-modal div { 199 margin-top: 10px; 200 text-align: center; 201 } 202 203 #disclaimer-modal button { 204 margin: 0 10px; 205 } 206 207 #disclaimer-accept { 208 font-weight: bold; 209 } 210 211 #footer-links { margin-top: 5px; } 212 213 .belowLeaderboard { 214 width: 728px; 215 max-width: 100%; 216 } 217 218 .aboveMidAd { 219 width: 468px; 220 max-width: 100%; 221 } 222 223 body.hasDropDownNav { 224 margin-top: 45px; 225 } 226 227 #postFormError { 228 background-color: #e62020; 229 color: #fff; 230 font-family: monospace; 231 font-size: 13px; 232 font-weight: bold; 233 padding: 3px 5px; 234 text-shadow: 0 1px rgba(0, 0, 0, 0.2); 235 display: none; 236 margin-top: 3px; 237 } 238 239 #postFormError a { 240 color: #fff; 241 } 242 243 .painter-ctrl input[type="text"], 244 #qr-painter-ctrl input[type="text"] { 245 width: 30px !important; 246 text-align: center; 247 } 248 249 .persistentNav, 250 div#boardNavMobile { 251 padding: 2px 4px; 252 background-color: #282a2e; 253 overflow: hidden; 254 border-bottom: 2px solid #111; 255 position: fixed; 256 top: 0; 257 left: 0; 258 right: 0; 259 z-index: 9001; 260 font-size: 12px; 261 } 262 263 div#boardNavMobile select, div#boardNavMobile option { 264 font-size: 11px; 265 } 266 267 .autohide-nav { transition: top 0.2s ease-in-out } 268 269 div.boardSelect { 270 float: left; 271 } 272 273 div.boardSelect > strong { 274 padding-right: 5px; 275 } 276 277 div.pageJump { 278 float: right; 279 padding-right: 5px; 280 padding-top: 3px; 281 } 282 283 .pageJump a { 284 text-decoration: none; 285 padding-right: 5px; 286 } 287 288 /* reCaptcha */ 289 .recaptchatable { 290 background-color: transparent !important; 291 border: none !important; 292 } 293 294 .recaptcha_image_cell { 295 background-color: transparent !important; 296 } 297 298 #g-recaptcha { 299 height: 78px; 300 } 301 302 #recaptcha_div { 303 height: 107px; width: 442px; 304 } 305 306 #recaptcha_challenge_field { width: 400px } 307 308 .recaptcha_input_area { 309 padding: 0!important; 310 } 311 #recaptcha_table tr:first-child { 312 height: auto!important; 313 } 314 315 #recaptcha_table tr:first-child > td:not(:first-child) { 316 padding: 0 7px 0 7px!important; 317 } 318 319 #recaptcha_table tr:last-child td:last-child { 320 padding-bottom: 0!important; 321 } 322 323 #recaptcha_table tr:last-child td:first-child { 324 padding-left: 0!important; 325 } 326 #recaptcha_image { 327 cursor: pointer; 328 } 329 #recaptcha_response_field { 330 width: 292px; 331 margin-right: 0px!important; 332 font-size: 10pt!important; 333 } 334 input:-moz-placeholder { color: gray !important; } 335 #recaptcha_image { 336 border: 1px solid #aaa !important; 337 } 338 #recaptcha_table tr > td:last-child { 339 display: none !important; 340 } 341 #captchaContainer { 342 width: 343px; 343 height: 86px; 344 line-height: 99px; 345 overflow: hidden; 346 } 347 #captchaContainer .placeholder { 348 font-style: italic; 349 padding-left: 5px; 350 } 351 352 #content table { 353 border-collapse: collapse; 354 border-spacing: 0; 355 } 356 357 .jpnFlag { 358 height: 11px; 359 width: 17px; 360 } 361 362 fieldset, img { 363 border: 0; 364 } 365 366 address, caption, cite, code, dfn, em, strong, th, var { 367 font-style: normal; 368 font-weight: normal; 369 } 370 371 li { 372 list-style: none; 373 } 374 375 caption, th { 376 text-align: left; 377 } 378 379 q:before, q:after { 380 content: ''; 381 } 382 383 abbr, acronym { 384 border: 0; 385 font-variant: normal; 386 } 387 388 sup { 389 vertical-align: text-top; 390 } 391 392 sub { 393 vertical-align: text-bottom; 394 } 395 396 legend { 397 color: #000; 398 } 399 400 ins { 401 text-decoration: none; 402 } 403 404 body { 405 background-color: #1D1F21; 406 color: #C5C8C6; 407 font-family: arial, helvetica, sans-serif; 408 font-size: 10pt; 409 margin-left: 0; 410 margin-right: 0; 411 margin-top: 5px; 412 padding-left: 5px; 413 padding-right: 5px; 414 } 415 416 strong { 417 font-weight: bold; 418 } 419 420 em { 421 font-style: italic; 422 } 423 424 a, 425 div#boardNavDesktopFoot a, 426 .boardnav a, 427 .button { 428 color: #81A2BE; 429 } 430 431 a:hover, 432 .boardnav a:hover, 433 div#boardNavDesktopFoot a:hover, 434 .button:hover { 435 color: #5F89AC; 436 } 437 438 hr { 439 clear: both; 440 border: none; 441 border-top: 1px solid #282A2E; 442 } 443 444 code { 445 padding: 1px 5px 1px 5px; 446 background-color: #EEE; 447 color: #000; 448 } 449 450 kbd { 451 background-color: #f7f7f7; 452 border: 1px solid #ccc; 453 border-radius: 3px 3px 3px 3px; 454 box-shadow: 0 1px 0 #ccc, 0 0 0 2px #fff inset; 455 font-family: monospace; 456 font-size: 11px; 457 line-height: 1.4; 458 padding: 0 5px; 459 color: #000; 460 } 461 462 p { 463 margin-bottom: 15px; 464 } 465 466 input[type="text"], 467 input[type="password"], 468 textarea { 469 border: 1px solid #AAA; 470 font-size: 11px; 471 margin: 0 2px 0 0; 472 padding: 2px 4px 3px; 473 } 474 475 input[type=text], 476 textarea { 477 outline: none; 478 } 479 480 input[type="text"], 481 input[type="password"] { 482 margin: 0px 2px; 483 padding: 1px; 484 } 485 486 input:focus, 487 textarea:focus { 488 border: 1px solid #000 !important; 489 } 490 491 #content input[type="checkbox"] { 492 vertical-align: middle; 493 } 494 495 #filters input[type="checkbox"] { 496 display: inline-block; 497 margin: auto; 498 } 499 500 img.topad, .topad > div, .topad a img { 501 width: 728px; 502 height: 90px; 503 max-width: 100%; 504 overflow: hidden; 505 margin: auto; 506 } 507 508 img.middlead, .middlead > div, .middlead a img{ 509 width: 468px; 510 height: 60px; 511 max-width: 100%; 512 overflow: hidden; 513 margin: auto; 514 } 515 516 img.bottomad, .bottomad > div, .bottomad a img { 517 width: 728px; 518 height: 90px; 519 max-width: 100%; 520 overflow: hidden; 521 margin: auto; 522 } 523 524 /* Clickables */ 525 .button { 526 cursor: pointer; 527 border: none; 528 white-space: nowrap; 529 -moz-user-select: none; 530 -webkit-user-select: none; 531 user-select: none; 532 } 533 534 .btn-wrap:before { 535 content: '['; 536 } 537 538 .btn-wrap:after { 539 content: ']'; 540 } 541 542 .clickbox { 543 margin-right: 3px; 544 width: 16px; 545 height: 16px; 546 line-height: 16px; 547 font-size: 10px; 548 display: block; 549 text-align: center; 550 background-color: #fff; 551 border: 1px solid #aaa; 552 text-decoration: none; 553 color: #000; 554 } 555 556 /* Input box for custom colors */ 557 .custom-rgb { 558 width: 45px; 559 } 560 561 .abovePostForm { 562 width: 90%; 563 } 564 565 /* UI panels */ 566 .hidden { 567 display: none; 568 } 569 570 #backdrop { 571 background-color: rgba(0, 0, 0, 0.25); 572 text-align: center; 573 position: fixed; 574 top: 0px; 575 left: 0px; 576 width: 100%; 577 height: 100%; 578 z-index: 100002; 579 } 580 581 .panel { 582 position: absolute; 583 padding: 2px 5px 5px 5px; 584 z-index: 100003; 585 font-size: 14px; 586 box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); 587 background-color: #282A2E; 588 } 589 590 .panel h4 { 591 font-size: 14px; 592 padding: 0; 593 margin: 10px 0px 5px 0px; 594 } 595 596 .panelHeader { 597 border-bottom: 1px solid #111111; 598 font-size: 16px; 599 font-weight: bold; 600 margin-bottom: 5px; 601 margin-top: 5px; 602 padding-bottom: 5px; 603 text-align: center; 604 line-height: 14px; 605 } 606 607 .extButton { 608 cursor: pointer; 609 } 610 611 .icon { 612 width: 18px; 613 height: 18px; 614 display: block; 615 background-size: 100%; 616 cursor: pointer; 617 position: absolute; 618 top: 5px; 619 } 620 621 .closeIcon { 622 background-image: url('//s.4cdn.org/image/buttons/tomorrow/cross.png'); 623 right: 5px; 624 } 625 626 .helpIcon { 627 background-image: url('//s.4cdn.org/image/buttons/tomorrow/question.png'); 628 right: 23px; 629 } 630 631 .expandIcon { 632 background-image: url('//s.4cdn.org/image/buttons/tomorrow/post_expand_plus.png'); 633 right: 23px; 634 } 635 636 .collapseIcon { 637 background-image: url('//s.4cdn.org/image/buttons/tomorrow/post_expand_minus.png'); 638 right: 23px; 639 } 640 641 .watchIcon, 642 .unwatchIcon { 643 height: 18px; 644 position: absolute; 645 width: 18px; 646 cursor: pointer; 647 visibility: hidden; 648 } 649 650 .watchIcon { 651 background-image: url('//s.4cdn.org/image/buttons/tomorrow/watch_thread_off.png'); 652 } 653 654 .unwatchIcon { 655 background-image: url('//s.4cdn.org/image/buttons/tomorrow/watch_thread_on.png'); 656 } 657 658 .thread:hover .watchIcon, 659 .thread:hover .unwatchIcon { 660 visibility: visible; 661 } 662 663 .threadIcons { 664 display: inline; 665 height: 16px; 666 margin: 2px 0 0 -101px; 667 position: absolute; 668 width: 100px; 669 text-align: right; 670 } 671 672 .threadIcon { 673 width: 16px; 674 height: 16px; 675 display: inline-block; 676 } 677 678 .stickyIcon { 679 background-image: url('//s.4cdn.org/image/sticky.gif'); 680 } 681 682 .closedIcon { 683 background-image: url('//s.4cdn.org/image/closed.gif'); 684 } 685 686 .adminIcon { 687 background-image: url('//s.4cdn.org/image/adminicon.gif'); 688 } 689 690 .founderIcon { 691 background-image: url('//s.4cdn.org/image/foundericon.gif'); 692 } 693 694 .modIcon { 695 background-image: url('//s.4cdn.org/image/modicon.gif'); 696 } 697 698 .developerIcon { 699 background-image: url('//s.4cdn.org/image/developericon.gif'); 700 } 701 702 .managerIcon { 703 background-image: url('//s.4cdn.org/image/managericon.gif'); 704 } 705 706 .imgdel { 707 padding: 20px 14px; 708 min-height: 0 !important; 709 width: 127px; 710 height: 13px; 711 } 712 713 .nofile { 714 padding: 20px 36px; 715 min-height: 0 !important; 716 } 717 718 .refreshIcon { 719 background-image: url('//s.4cdn.org/image/buttons/tomorrow/refresh.png'); 720 } 721 722 .rotateIcon { 723 background-image: url('//s.4cdn.org/image/buttons/tomorrow/post_expand_rotate.gif'); 724 } 725 726 @media (-webkit-min-device-pixel-ratio: 2.0), 727 (min--moz-device-pixel-ratio: 2), 728 (min-resolution: 2dppx) 729 { 730 .closeIcon { 731 background-image: url('//s.4cdn.org/image/buttons/tomorrow/cross@2x.png'); 732 } 733 734 .helpIcon { 735 background-image: url('//s.4cdn.org/image/buttons/tomorrow/question@2x.png'); 736 } 737 738 .expandIcon { 739 background-image: url('//s.4cdn.org/image/buttons/tomorrow/post_expand_plus@2x.png'); 740 background-size: 100%; 741 } 742 743 .collapseIcon { 744 background-image: url('//s.4cdn.org/image/buttons/tomorrow/post_expand_minus@2x.png'); 745 background-size: 100%; 746 } 747 748 .stickyIcon { 749 background-image: url('//s.4cdn.org/image/sticky@2x.gif'); 750 background-size: 100%; 751 } 752 753 .closedIcon { 754 background-image: url('//s.4cdn.org/image/closed@2x.gif'); 755 background-size: 100%; 756 } 757 758 .adminIcon { 759 background-image: url('//s.4cdn.org/image/adminicon@2x.gif'); 760 background-size: 100%; 761 } 762 763 .modIcon { 764 background-image: url('//s.4cdn.org/image/modicon@2x.gif'); 765 background-size: 100%; 766 } 767 768 .developerIcon { 769 background-image: url('//s.4cdn.org/image/developericon@2x.gif'); 770 background-size: 100%; 771 } 772 773 .managerIcon { 774 background-image: url('//s.4cdn.org/image/managericon@2x.gif'); 775 background-size: 100%; 776 } 777 778 .refreshIcon { 779 background-image: url('//s.4cdn.org/image/buttons/tomorrow/refresh@2x.png'); 780 background-size: 100%; 781 } 782 783 .rotateIcon { 784 background-image: url('//s.4cdn.org/image/buttons/tomorrow/post_expand_rotate@2x.gif'); 785 background-size: 100%; 786 } 787 788 .watchIcon { 789 background-image: url('//s.4cdn.org/image/buttons/tomorrow/watch_thread_off@2x.png'); 790 background-size: 100%; 791 } 792 793 .unwatchIcon { 794 background-image: url('//s.4cdn.org/image/buttons/tomorrow/watch_thread_on@2x.png'); 795 background-size: 100%; 796 } 797 798 } 799 800 .clickset { 801 margin-bottom: 8px; 802 } 803 804 .clickset li { 805 clear: both; 806 margin-bottom: 2px; 807 line-height: 20px; 808 } 809 810 .inputset { 811 margin-bottom: 3px; 812 } 813 814 /* Notifications */ 815 .msg-error, 816 .msg-ok { 817 border-radius: 3px; 818 padding: 1px 5px 1px 5px; 819 } 820 821 .msg-ok { 822 background-color: #282A2E; 823 color: #000; 824 } 825 826 .msg-error { 827 background-color: #E62020; 828 color: #fff; 829 } 830 831 .error { 832 color: #c5c8c6; 833 font-size: x-large; 834 font-weight: bold 835 } 836 837 /***************************************************************/ 838 /* Info bar: update time, order, etc on the left */ 839 /* Settings bar: buttons on the right */ 840 #info { 841 float: left; 842 } 843 844 #settings { 845 float: right; 846 text-align: right; 847 } 848 849 #filtered-count, 850 #hidden-count, 851 #filtered-count-bottom, 852 #hidden-count-bottom, 853 #search-term, 854 #search-term-bottom, 855 #ordered-by { 856 font-weight: bold; 857 } 858 859 #filtered-label, 860 #hidden-label, 861 #filtered-label-bottom, 862 #hidden-label-bottom, 863 #search-label, 864 #search-label-bottom { 865 display: none; 866 } 867 868 /* Search "Quickfilter" Bar related elements */ 869 #qf-cnt { 870 display: none; 871 } 872 873 #qf-clear { 874 text-decoration: none; 875 } 876 877 #qf-box { 878 width: 75px; 879 margin-right: 5px; 880 } 881 882 /* Top and bottom navigation menus */ 883 div#boardNavDesktopFoot, 884 .boardnav { 885 color: #C5C8C6; 886 font-size: 9pt; 887 } 888 889 .hasDropDownNav #navtopright { 890 display: none; 891 } 892 893 #boardNavDesktop .pageJump { 894 padding: 0; 895 } 896 897 #boardNavDesktop .pageJump a { 898 padding-right: 5px; 899 } 900 901 #bottomnav { 902 clear: both; 903 } 904 905 div#boardNavDesktopFoot a, 906 #boardNavDesktop a { 907 padding: 1px; 908 text-decoration: none; 909 } 910 911 .navLinks .btn-wrap { 912 display: inline; 913 } 914 915 #navtopright, 916 #navbotright { 917 float: right; 918 } 919 920 .navSmall { 921 font-size: 90%; 922 } 923 924 #styleSwitcher { 925 float: right; 926 } 927 928 #globalMessage { 929 color: #C5C8C6; 930 text-align: center; 931 } 932 933 #toggleMsgBtn { 934 width: 18px; 935 height: 18px; 936 display: block; 937 cursor: pointer; 938 top: 5px; 939 float: left; 940 margin-bottom: 6px; 941 } 942 943 div.boardBanner { 944 text-align: center; 945 clear: both; 946 } 947 948 #bannerCnt { 949 border: 1px solid #000; 950 margin: 5px auto; 951 width: 300px; 952 height: 100px; 953 max-width: 100%; 954 } 955 956 div.boardBanner > div.boardTitle { 957 font-family: Tahoma, sans-serif; 958 font-size: 28px; 959 font-weight: bold; 960 letter-spacing: -2px; 961 margin-top: 0px; 962 } 963 964 div.boardBanner > div.boardSubtitle { 965 font-size: x-small; 966 } 967 968 div#boardNavDesktopFoot { 969 clear: both; 970 padding-top: 10px; 971 padding-bottom: 3px; 972 } 973 974 div#boardNavDesktopFoot a { 975 font-weight: normal; 976 padding: 1px; 977 } 978 979 div.homelink { 980 float: right 981 } 982 983 div#absbot { 984 text-align: center; 985 font-size: x-small !important; 986 padding-bottom: 4px; 987 padding-top: 10px; 988 color: #C5C8C6; 989 clear: both; 990 } 991 992 /***************************************************************/ 993 994 /* Theme editor panel */ 995 #theme { 996 width: 330px; 997 top: 60px; 998 left: 50%; 999 margin-left: -178px; 1000 } 1001 1002 .settings-field { 1003 margin-top: 5px; 1004 width: 100%; 1005 } 1006 1007 #theme-css { 1008 font-family: 'DejaVu Sans Mono', 'Consolas', 'Andale Mono', 'Lucida Console', monospace; 1009 width: 320px; 1010 min-width: 320px; 1011 } 1012 1013 #theme-msg { 1014 position: absolute; 1015 margin-top: 4px; 1016 } 1017 1018 #theme-btns { 1019 margin-top: 5px; 1020 margin-bottom: 3px; 1021 } 1022 1023 /***************************************************************/ 1024 1025 /* Filters panel */ 1026 #filters { 1027 width: 380px; 1028 top: 60px; 1029 left: 50%; 1030 margin-left: -190px; 1031 } 1032 1033 #filters-search { 1034 position: absolute; 1035 left: 4px; 1036 width: 50px; 1037 font-size: 11px; 1038 padding: 0px 2px; 1039 } 1040 1041 #filters-search:focus { 1042 width: 85px; 1043 } 1044 1045 #filters .clickbox { 1046 margin: auto; 1047 } 1048 1049 /* Filters help panel */ 1050 #filters-protip { 1051 width: 570px; 1052 top: 50px; 1053 left: 50%; 1054 margin-left: -295px; 1055 padding-left: 10px; 1056 padding-right: 10px; 1057 } 1058 1059 #filters-protip h4:before { 1060 content: "»"; 1061 margin-right: 3px; 1062 } 1063 1064 #filters-protip h4 { 1065 font-size: 15px; 1066 } 1067 1068 @media all and (max-width: 605px) { 1069 #filters-protip { 1070 left: 0; 1071 margin-left: 0; 1072 } 1073 } 1074 1075 #filters-protip ul { 1076 margin-bottom: 10px; 1077 } 1078 1079 #filters-protip li { 1080 margin: 5px 0px; 1081 } 1082 1083 /* Filters color palette */ 1084 #filter-palette { 1085 position: fixed; 1086 width: 100%; 1087 height: 100%; 1088 z-index: 100004; 1089 top: 0; 1090 left: 0; 1091 } 1092 1093 #colorpicker { 1094 position: fixed; 1095 padding: 4px; 1096 } 1097 1098 #colorpicker table td { 1099 padding: 2px; 1100 text-align: center; 1101 } 1102 1103 #filter-rgb-ok { 1104 float: right; 1105 background-color: transparent; 1106 } 1107 1108 #filter-table { 1109 width: 100%; 1110 } 1111 1112 #filter-table th { 1113 font-weight: bold; 1114 font-size: 11px; 1115 min-width: 20px; 1116 } 1117 1118 #filter-table th, 1119 #filter-table td { 1120 text-align: center; 1121 } 1122 1123 #filter-table tbody td { 1124 padding: 8px 0px 0px 0px; 1125 } 1126 1127 #filter-table tfoot td { 1128 padding-top: 20px; 1129 } 1130 1131 #filter-color-table .clickbox { 1132 box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); 1133 margin: auto; 1134 } 1135 1136 .filter-pattern { 1137 width: 140px; 1138 } 1139 1140 .filter-color:hover { 1141 color: #000; 1142 } 1143 1144 .filter-hits { 1145 font-size: 12px; 1146 } 1147 1148 .filter-boards { 1149 width: 30px; 1150 } 1151 1152 #theme-msg, 1153 #filters-msg { 1154 display: none; 1155 } 1156 1157 /***************************************************************/ 1158 1159 /* Threads main container */ 1160 #threads { 1161 padding: 20px 0px; 1162 text-align: center; 1163 } 1164 1165 /* Thread wrapper */ 1166 .thread { 1167 vertical-align: top; 1168 display: inline-block; 1169 word-wrap: break-word; 1170 overflow: hidden; 1171 margin-top: 5px; 1172 margin-bottom: 20px; 1173 padding: 5px 0 3px 0; 1174 position: relative; 1175 } 1176 1177 .thread a { 1178 border: none; 1179 } 1180 1181 .thread img { 1182 display: inline; 1183 } 1184 1185 /* Thread in small mode, teaser off */ 1186 .small .thread { 1187 width: 165px; 1188 } 1189 1190 /* Thread in large mode, teaser off */ 1191 .large .thread { 1192 width: 270px; 1193 } 1194 1195 /* Thread in small mode with teaser displayed */ 1196 .extended-small .thread { 1197 width: 180px; 1198 max-height: 320px; 1199 } 1200 1201 /* Thread in large mode with teaser displayed */ 1202 .extended-large .thread { 1203 width: 270px; 1204 max-height: 410px; 1205 } 1206 1207 /* "On top" (highlighted) thumbnails */ 1208 .hl { 1209 border-style: solid; 1210 border-width: 3px; 1211 } 1212 1213 /* Watched (pinned) thumbnails */ 1214 .pinned { 1215 border: 3px dashed #34345C; 1216 } 1217 1218 .pinned:hover { 1219 border-color: red; 1220 } 1221 1222 /* Thumbnails */ 1223 .thumb { 1224 display: block; 1225 margin: auto; 1226 z-index: 2; 1227 box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); 1228 min-height: 50px; 1229 min-width: 50px; 1230 } 1231 1232 /* Replies / images / page indicators */ 1233 .meta { 1234 cursor: help; 1235 font-size: 11px; 1236 line-height: 8px; 1237 margin-top: 2px; 1238 margin-bottom: 1px; 1239 } 1240 1241 .meta .postMenuBtn { 1242 position: absolute; 1243 margin-top: -1px; 1244 display: none; 1245 } 1246 1247 .thread:hover .meta .postMenuBtn { display: inline-block; } 1248 1249 .teaser { 1250 display: none; 1251 padding: 0 15px; 1252 } 1253 1254 /* Teaser, displayed */ 1255 .extended-small .teaser, 1256 .extended-large .teaser { 1257 display: block; 1258 } 1259 1260 /* spoilers */ 1261 .teaser s { 1262 background-color: #000; 1263 color: #000; 1264 text-decoration: none; 1265 } 1266 1267 .teaser s:focus, 1268 .teaser s:hover { 1269 color: #fff; 1270 } 1271 1272 /***************************************************************/ 1273 1274 .left { 1275 float: left; 1276 } 1277 1278 .right { 1279 float: right; 1280 } 1281 1282 .clear { 1283 clear: both; 1284 } 1285 1286 .close { 1287 margin-left: 3px; 1288 } 1289 1290 .center { 1291 text-align: center; 1292 margin: auto; 1293 } 1294 1295 .mobile { 1296 display: none; 1297 } 1298 1299 #absbot a { 1300 text-decoration: underline !important; 1301 } 1302 1303 /***************************************************************/ 1304 1305 /* Thread Watcher */ 1306 #threadWatcher { 1307 max-width: 265px; 1308 display: block; 1309 position: absolute; 1310 border: 1px solid #282A2E; 1311 background-color: #282A2E; 1312 padding: 3px; 1313 } 1314 1315 #twHeader { 1316 font-weight: bold; 1317 text-align: center; 1318 height: 17px; 1319 cursor: move; 1320 user-select: none; 1321 -moz-user-select: none; 1322 -webkit-user-select: none; 1323 } 1324 1325 #twPrune { 1326 position: relative; 1327 top: 0; 1328 margin-left: 3px; 1329 margin-top: -1px; 1330 float: right; 1331 } 1332 1333 #watchList { 1334 margin: 0; 1335 padding: 0; 1336 overflow: auto; 1337 display: block; 1338 max-height: 100vh; 1339 user-select: none; 1340 -moz-user-select: none; 1341 -webkit-user-select: none; 1342 } 1343 1344 #watchList li:first-child { 1345 margin-top: 3px; 1346 padding-top: 2px; 1347 border-top: 1px solid #111; 1348 } 1349 1350 #watchList a { 1351 text-decoration: none; 1352 } 1353 1354 #watchList li { 1355 overflow: hidden; 1356 white-space: nowrap; 1357 text-overflow: ellipsis; 1358 } 1359 1360 .hasNewReplies { font-weight: bold; } 1361 .hasYouReplies { font-style: italic; } 1362 .archivelink { opacity: 0.5; } 1363 1364 .deadlink { 1365 text-decoration: line-through; 1366 } 1367 1368 .pointer { 1369 cursor: pointer; 1370 } 1371 1372 /***************************************************************/ 1373 1374 /* The Click Me */ 1375 #first-run { 1376 border-radius: 5px; 1377 margin-top: 5px; 1378 margin-left: -7px; 1379 padding: 2px 5px; 1380 position: absolute; 1381 font-weight: bold; 1382 color: #C5C8C6; 1383 background-color: #282A2E; 1384 border: 2px solid #111; 1385 } 1386 1387 #first-run:before { 1388 content: ""; 1389 border-width: 0 6px 6px; 1390 border-style: solid; 1391 left: 50%; 1392 margin-left: -6px; 1393 position: absolute; 1394 width: 0; 1395 height: 0; 1396 top: -6px; 1397 border-color: #111 transparent; 1398 } 1399 1400 #first-run:after { 1401 content: ""; 1402 border-width: 0 4px 4px; 1403 top: -4px; 1404 display: block; 1405 left: 50%; 1406 margin-left: -4px; 1407 position: absolute; 1408 width: 0; 1409 height: 0; 1410 border-color: #282A2E transparent; 1411 border-style: solid; 1412 } 1413 1414 /* Tooltips */ 1415 #post-preview { 1416 position: absolute; 1417 background-color: #000; 1418 border-radius: 3px; 1419 padding: 5px 8px 4px 8px; 1420 z-index: 100000; 1421 word-wrap: break-word; 1422 white-space: pre-line; 1423 max-width: 500px; 1424 color: #dedede; 1425 font-family: arial, helvetica, sans-serif; 1426 font-size: 10pt; 1427 } 1428 1429 .post-author { 1430 color: #00A550; 1431 font-weight: bold; 1432 } 1433 1434 .post-subject { 1435 color: #B294BB; 1436 font-weight: bold; 1437 } 1438 1439 .post-tripcode { 1440 color: #00A550; 1441 font-weight: normal; 1442 } 1443 1444 .post-teaser { 1445 margin: 3px 0 0 0; 1446 padding: 0; 1447 } 1448 1449 .post-page { 1450 font-size: 90%; 1451 color: #7d807e; 1452 display: inline-block; 1453 white-space: nowrap; 1454 word-wrap: normal; 1455 max-width: 100px; 1456 overflow: hidden; 1457 text-overflow: ellipsis; 1458 vertical-align: text-top; 1459 margin-left: 3px; 1460 } 1461 1462 .post-page:before { 1463 content: '('; 1464 } 1465 1466 .post-page:after { 1467 content: ')'; 1468 } 1469 1470 .post-last { 1471 color: #bbbfbd; 1472 font-size: 90%; 1473 margin-top: 3px; 1474 } 1475 1476 .admin-capcode { 1477 color: #FF0000; 1478 } 1479 1480 .founder-capcode { 1481 color: #117743; 1482 } 1483 1484 .mod-capcode { 1485 color: #800080; 1486 } 1487 1488 .developer-capcode { 1489 color: #0000F0; 1490 } 1491 1492 .manager-capcode { 1493 color: #FF0080; 1494 } 1495 1496 .verified-capcode { 1497 color: #007FFF; 1498 } 1499 1500 #enable-mobile { 1501 font-size: small !important; 1502 } 1503 1504 #disable-mobile { 1505 font-size: small !important; 1506 display: none !important; 1507 } 1508 1509 /* Post form */ 1510 table { 1511 border-spacing: 1px; 1512 1513 margin-left: auto; 1514 margin-right: auto; 1515 } 1516 1517 table.postForm > tbody > tr > td:first-child { 1518 background-color: #282a2e; 1519 color: #c5c8c6; 1520 font-weight: bold; 1521 border: 1px solid #111; 1522 padding: 0 5px; 1523 font-size: 10pt; 1524 } 1525 1526 tr.rules td { 1527 border: 0px !important; 1528 background-color: transparent !important; 1529 font-weight: normal !important; 1530 } 1531 1532 td { 1533 margin: 0px; 1534 padding: 0px; 1535 1536 font-size: 10pt; 1537 } 1538 1539 #postForm input[type="text"], 1540 #postForm input[type="password"], 1541 table.postForm > tbody textarea, 1542 #recaptcha_response_field { 1543 margin: 0px; 1544 margin-right: 2px; 1545 padding: 2px 4px 3px 4px; 1546 1547 border: 1px solid #AAA; 1548 outline: none; 1549 1550 font-family: arial, helvetica, sans-serif; 1551 font-size: 10pt; 1552 } 1553 1554 #recaptcha_response_field:not(:focus) { 1555 border: 1px solid #AAA !important; 1556 } 1557 1558 table.postForm > tbody > tr > td > input[type=text] { 1559 width: 244px; 1560 } 1561 1562 table.postForm > tbody > tr > td > input[name="subject"] { 1563 width: 300px; 1564 } 1565 1566 .postblock { 1567 color: #c5c8c6; 1568 font-weight: bold; 1569 padding: 0 5px; 1570 font-size: 10pt; 1571 } 1572 1573 .passNotice { 1574 font-size: smaller; 1575 padding-left: 6px; 1576 } 1577 1578 .password { 1579 font-size: smaller; 1580 } 1581 1582 input[type="password"] { 1583 text-align: center; 1584 width: 50px; 1585 } 1586 1587 .rules { 1588 margin-top: 5px; 1589 } 1590 1591 .rules li { 1592 font-size: 11px; 1593 list-style: none outside none; 1594 } 1595 1596 .rules li:before { 1597 content: "• "; 1598 } 1599 1600 #togglePostForm { 1601 text-align: center; 1602 margin-top: 5px; 1603 font-size: 24px; 1604 font-weight: bold; 1605 } 1606 1607 @media screen and (-webkit-min-device-pixel-ratio:0) { 1608 tbody textarea { 1609 margin-bottom: -3px !important; 1610 } 1611 } 1612 1613 .text_only #threads table { 1614 width: 80%; 1615 border-collapse: separate; 1616 border-spacing: 2px; 1617 } 1618 1619 .text_only #threads th { 1620 font-weight: bold; 1621 padding: 4px 2px; 1622 text-align: center; 1623 } 1624 1625 .text_only #threads td { 1626 padding: 4px 2px; 1627 } 1628 1629 .text_only #threads .txt-sub { 1630 text-align: left; 1631 } 1632 1633 .text_only .hl { 1634 border: none; 1635 } 1636 1637 .text_only .pinned td:first-child { 1638 box-shadow: -1px 0 #000; 1639 } 1640 1641 .txt-ctrl { width: 25px; } 1642 .txt-no { width: 20px; } 1643 .txt-rep { width: 100px; } 1644 .txt-date { width: 200px; } 1645 1646 @media only screen and (max-width: 480px) { 1647 .txt-ctrl, 1648 .txt-date { display: none } 1649 .text_only #threads table { 1650 width: 100%; 1651 } 1652 } 1653 1654 .postMenuBtn { 1655 margin-left: 5px; 1656 text-decoration: none; 1657 line-height: 1em; 1658 display: inline-block; 1659 -webkit-transition: -webkit-transform 0.1s; 1660 -moz-transition: -moz-transform 0.1s; 1661 transition: transform 0.1s; 1662 width: 1em; 1663 height: 1em; 1664 text-align: center; 1665 outline: none; 1666 opacity: 0.5; 1667 } 1668 1669 .postMenuBtn:hover{ 1670 opacity: 1; 1671 } 1672 1673 .postMenuBtn { 1674 color: #5F89AC; 1675 } 1676 1677 .menuOpen { 1678 -webkit-transform: rotate(90deg); 1679 -moz-transform: rotate(90deg); 1680 -ms-transform: rotate(90deg); 1681 transform: rotate(90deg); 1682 } 1683 1684 .dd-menu { 1685 position: absolute; 1686 font-size: 12px; 1687 line-height: 1.3em; 1688 } 1689 .dd-menu a { 1690 text-decoration: none; 1691 color: inherit !important; 1692 display: block; 1693 } 1694 .dd-menu ul { 1695 background-color: #282A2E; 1696 border: 1px solid #000; 1697 border-bottom: none; 1698 list-style: none; 1699 padding: 0; 1700 margin: 0; 1701 white-space: nowrap; 1702 } 1703 .dd-menu ul ul { 1704 display: none; 1705 position: absolute; 1706 } 1707 .dd-menu li { 1708 cursor: pointer; 1709 position: relative; 1710 padding: 2px 4px; 1711 vertical-align: middle; 1712 border-bottom: 1px solid #000; 1713 } 1714 .dd-menu li:hover { 1715 background-color: #1D1F21; 1716 } 1717 .dd-menu li:hover ul { 1718 display: block; 1719 left: 100%; 1720 margin-top: -3px; 1721 } 1722 .dd-menu.dd-menu-left li:hover ul { 1723 left: auto; 1724 right: 100%; 1725 } 1726 1727 .ad-plea { 1728 margin-top: 2px; 1729 text-align: center; 1730 font-size: smaller; 1731 } 1732 1733 #customMenu { 1734 width: 400px; 1735 left: 50%; 1736 margin-left: -200px; 1737 padding: 2px; 1738 } 1739 #customMenu .reply { border: 0 } 1740 #customMenuBox { 1741 margin: 0px auto 5px; 1742 width: 385px; 1743 padding: 2px 4px 3px; 1744 font-size: 10pt; 1745 } 1746 1747 .boardSelect .customBoardList, 1748 .boardSelect .custom-menu-ctrl, 1749 .boardSelect .customBoardList { margin-left: 10px; } 1750 .boardSelect .custom-menu-ctrl { display: none; } 1751 .boardSelect:hover .custom-menu-ctrl { display: inline; } 1752 .persistentNav .boardList a, 1753 .persistentNav .customBoardList a, 1754 #boardNavMobile .boardSelect a { text-decoration: none; } 1755 1756 #blotter { 1757 width: 468px; 1758 margin: auto; 1759 } 1760 #blotter td { 1761 vertical-align: top; 1762 font-size: 11px; 1763 } 1764 .blotter-date { 1765 width: 50px; 1766 text-align: center; 1767 } 1768 #blotter tfoot { 1769 text-align: right; 1770 } 1771 .redtxt { 1772 color: red; 1773 } 1774 #blotter-msgs s { 1775 background-color: inherit !important; 1776 color: inherit !important; 1777 text-decoration: line-through; 1778 } 1779 #postForm { 1780 width: 468px; 1781 display: none; 1782 } 1783 1784 #togglePostFormLink { 1785 font-size: 22px; 1786 font-weight: bold; 1787 text-align: center; 1788 } 1789 #postForm textarea { 1790 width: 292px; 1791 }