github.com/Azareal/Gosora@v0.0.0-20210729070923-553e66b59003/themes/shadow/public/main.css (about) 1 /* Patch for Edge, until they fix emojis in arial x.x */ 2 @supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } } 3 4 :root { 5 --main-block-color: rgb(61,61,61); 6 --main-text-color: white; 7 --dim-text-color: rgb(205,205,205); 8 --main-background-color: #222222; 9 --inner-background-color: #333333; 10 --input-background-color: #444444; 11 --input-border-color: #555555; 12 --input-text-color: #999999; 13 --bright-input-background-color: #555555; 14 --bright-input-border-color: #666666; 15 --input-text-color: #a3a3a3; 16 } 17 18 body { 19 font-family: arial; 20 color: var(--main-text-color); 21 background-color: var(--main-background-color); 22 margin: 0; 23 } 24 *::selection { 25 background-color: hsl(0,0%,75%); 26 color: hsl(0,0%,20%); 27 font-weight: 100; 28 } 29 30 #back { 31 margin-left: auto; 32 margin-right: auto; 33 width: 70%; 34 background-color: var(--inner-background-color); 35 position: relative; 36 top: -2px; 37 } 38 #main { 39 padding-bottom: 5px; 40 } 41 42 #main_menu { 43 list-style-type: none; 44 background-color: var(--main-block-color); 45 border-bottom: 1px solid var(--main-background-color); 46 padding-left: 15%; 47 padding-right: 15%; 48 margin: 0; 49 height: 41px; 50 } 51 52 .menu_left, .menu_right li { 53 float: left; 54 height: 29.5px; 55 padding-top: 12px; 56 margin: 0; 57 } 58 .menu_left { 59 margin-right: 10px; 60 } 61 .menu_right { 62 float: right; 63 } 64 65 #main_menu #menu_overview { 66 margin-right: 13px; 67 margin-left: 10px; 68 font-size: 16px; 69 } 70 71 #main_menu .menu_left:not(#menu_overview) { 72 font-size: 15px; 73 padding-top: 13px; 74 } 75 76 .alert_bell { 77 float: right; 78 } 79 .menu_alerts { 80 float: right; 81 padding-top: 14px; 82 } 83 .alert_counter { 84 background-color: rgb(200,0,0); 85 border-radius: 2px; 86 font-size: 11px; 87 padding: 3px; 88 float: right; 89 position: relative; 90 top: -1px; 91 } 92 .alert_aftercounter { 93 float: right; 94 margin-right: 4px; 95 font-size: 14px; 96 } 97 .alert_aftercounter:before { 98 content: "{{lang "menu_alerts" . }}"; 99 } 100 101 .menu_alerts .alertList, .hide_on_big, .show_on_mobile { 102 display: none; 103 } 104 .auto_hide { 105 display: none !important; 106 } 107 .selectedAlert .alertList { 108 display: block; 109 position: absolute; 110 top: 44px; 111 float: left; 112 width: 200px; 113 z-index: 50; 114 right: 15%; 115 font-size: 13px; 116 background-color: var(--inner-background-color); 117 } 118 119 .alertItem { 120 margin-bottom: 2px; 121 } 122 .alertItem.withAvatar { 123 height: 40px; 124 background-size: 48px; 125 background-repeat: no-repeat; 126 background-color: var(--main-block-color); 127 padding-left: 56px; 128 padding-top: 8px; 129 } 130 131 a { 132 text-decoration: none; 133 color: var(--main-text-color); 134 } 135 136 .alertbox { 137 display: flex; 138 } 139 .alert { 140 padding-bottom: 12px; 141 background-color: var(--main-block-color); 142 border-left: 4px solid hsl(21, 100%, 50%); 143 padding: 12px; 144 display: block; 145 margin-top: 8px; 146 margin-bottom: -3px; 147 margin-left: 8px; 148 margin-right: 8px; 149 width: 100%; 150 } 151 152 .rowblock { 153 margin-left: 8px; 154 margin-right: 8px; 155 } 156 157 .opthead, .rowhead, .colstack_head { 158 padding-bottom: 0px; 159 padding-top: 3px !important; 160 white-space: nowrap; 161 } 162 163 .rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem { 164 font-size: 15px; /*16px*/ 165 } 166 .rowblock:last-child, .colstack_item:last-child { 167 padding-bottom: 10px; 168 } 169 170 .rowitem, .formitem { 171 padding-bottom: 12px; 172 background-color: var(--main-block-color); 173 margin-top: 8px; 174 padding: 12px; 175 } 176 .rowitem h1, .rowitem h2 { 177 font-size: 16px; 178 display: inline; 179 } 180 h1, h2, h3, h4, h5 { 181 -webkit-margin-before:0; 182 -webkit-margin-after:0; 183 margin-block-start:0; 184 margin-block-end:0; 185 margin-top:0; 186 margin-bottom:0; 187 font-weight: normal; 188 } 189 .rowsmall { 190 font-size: 12px; 191 } 192 193 .colstack { 194 display: flex; 195 } 196 .colstack_left, .colstack_right { 197 margin-left: 8px; 198 } 199 .colstack_left { 200 float: left; 201 width: 30%; 202 } 203 .colstack_right { 204 float: left; 205 width: calc(70% - 24px); 206 } 207 .colstack_left:empty, 208 .colstack_right:empty, 209 .show_on_edit:not(.edit_opened), 210 .hide_on_edit.edit_opened, 211 .show_on_block_edit:not(.edit_opened), 212 .hide_on_block_edit.edit_opened, 213 .link_select:not(.link_opened) { 214 display: none; 215 } 216 217 .colline { 218 font-size: 14px; 219 background-color: var(--main-block-color); 220 margin-top: 5px; 221 padding: 10px; 222 } 223 224 /* Align to right in a flex head */ 225 .to_left { 226 float: left; 227 } 228 .to_right { 229 float: right; 230 margin-left: auto; 231 } 232 233 /* Topic View */ 234 235 /* TODO: How should we handle the sticky headers? */ 236 .topic_sticky_head {} 237 238 /* TODO: Add the avatars to the forum list */ 239 .forum_list .forum_nodesc { 240 font-style: italic; 241 } 242 .extra_little_row_avatar { 243 display: none; 244 } 245 .shift_left { 246 float: left; 247 } 248 .shift_right { 249 float: right; 250 } 251 252 .action_item .action_icon { 253 font-size: 18px; 254 padding-right: 5px; 255 } 256 257 /* TODO: Rewrite the closed topic header so that it looks more consistent with the rest of the theme */ 258 .topic_closed_head .topic_status_closed { 259 margin-bottom: -10px; 260 font-size: 19px; 261 } 262 263 .post_item { 264 background-size: 128px; 265 padding-left: calc(128px + 12px); 266 } 267 .user_content { 268 word-break: break-word; 269 } 270 .user_content h2 { 271 font-size: 18px; 272 } 273 .user_content h2, .user_content h3 { 274 margin-bottom: 12px; 275 display: block; 276 } 277 .user_content h4 { 278 margin-bottom: 8px; 279 display: block; 280 } 281 .user_content strong h2, .user_content strong h3, .user_content strong h4 { 282 font-weight: bold; 283 } 284 red { 285 color: red; 286 } 287 .update_buttons .add_file_button { 288 display: none; 289 } 290 291 .controls { 292 width: 100%; 293 display: inline-block; 294 margin-top: 20px; 295 } 296 297 .staff_post { 298 border: 1px solid rgb(101, 71, 101) 299 } 300 301 .user_tag { 302 float: right; 303 color: var(--dim-text-color); 304 } 305 .real_username { 306 float: left; 307 margin-right: 7px; 308 } 309 310 .mod_button { 311 margin-right: 5px; 312 display: block; 313 float: left; 314 } 315 .mod_button button { 316 border: none; 317 background: none; 318 color: var(--main-text-color); 319 font-size: 12px; 320 padding: 0; 321 } 322 323 .like_label:before { 324 content: "{{lang "topic.plus_one" . }}"; 325 }{{$out := .}} 326 {{range (toArr "quote" "edit" "delete" "pin" "lock" "unlock" "unpin" "ip" "flag")}} 327 .{{.}}_label:before { 328 content: "{{lang (concat "topic." . "_button_text") ($out) }}"; 329 }{{end}} 330 331 .like_count_label, .like_count { 332 display: none; 333 } 334 .like_count_label:before { 335 content: "{{lang "topics_likes_suffix" . }}"; 336 } 337 .has_likes .like_count_label, .has_likes .like_count { 338 font-size: 12px; 339 display: block; 340 float: left; 341 line-height: 19px; 342 } 343 .has_likes .like_count { 344 margin-right: 2px; 345 } 346 .like_count:before { 347 content: "{{lang "pipe" . }}"; 348 margin-right: 5px; 349 } 350 351 .level_label, .level { 352 color: var(--dim-text-color); 353 float: right; 354 } 355 .level_label:before { 356 content: "{{lang "topic.level_tooltip" . }}"; 357 } 358 .level { 359 margin-left: 3px; 360 } 361 362 .hide_spoil { 363 background-color: grey; 364 color: grey; 365 } 366 .hide_spoil img { 367 border: 0; 368 clip: rect(0 0 0 0); 369 height: 1px; 370 margin: -1px; 371 overflow: hidden; 372 padding: 50px; 373 white-space: nowrap; 374 width: 1px; 375 background-color: grey; 376 } 377 .hide_spoil img { 378 content: " "; 379 } 380 .attach_box { 381 background-color: #5a5555; 382 background-color: rgb(71,71,76); 383 border-radius: 3px; 384 padding: 16px; 385 overflow-wrap: break-word; 386 } 387 388 .formrow.real_first_child, .formrow:first-child { 389 margin-top: 8px; 390 } 391 .formrow.real_first_child .formitem, .formrow:first-child .formitem { 392 padding-top: 12px; 393 } 394 .formrow:last-child .formitem { 395 padding-bottom: 12px; 396 } 397 398 .login_button_row { 399 display: flex; 400 } 401 .login_button_row .formitem > * { 402 padding-top: 5px; 403 } 404 .fall_opts { 405 display: flex; 406 } 407 .dont_have_account { 408 margin-left: auto; 409 padding-right: 0px; 410 } 411 .dont_have_account:after { 412 content: "|"; 413 padding-left: 8px; 414 padding-right: 8px; 415 } 416 .forgot_password { 417 padding-left: 0px; 418 } 419 .formitem.dont_have_account, .formitem.forgot_password { 420 color: #909090; 421 font-size: 12px; 422 font-weight: normal; 423 padding-top: 11px; 424 } 425 426 textarea { 427 background-color: var(--input-background-color); 428 border-color: var(--input-border-color); 429 color: var(--input-text-color); 430 width: calc(100% - 15px); 431 min-height: 80px; 432 } 433 textarea:focus, input:focus, select:focus, button:focus { 434 outline-color: rgb(95,95,95); 435 } 436 textarea.large { 437 min-height: 120px; 438 margin-top: 1px; 439 padding: 5px; 440 display: block; 441 } 442 443 .formitem button, .formbutton, .mod_floater_submit, .pane_buttons button { 444 background-color: var(--input-background-color); 445 border: 1px solid var(--input-border-color); 446 color: var(--input-text-color); 447 padding: 7px; 448 padding-bottom: 6px; 449 font-size: 13px; 450 } 451 .mod_floater_submit { 452 padding: 5px; 453 padding-bottom: 4px; 454 margin-left: 2px; 455 } 456 .pane_buttons button { 457 padding: 5px; 458 padding-bottom: 4px; 459 } 460 461 .formrow { 462 flex-direction: row; 463 display: flex; 464 } 465 466 .formitem { 467 margin-top: 0px; 468 padding-bottom: 2px; 469 padding-top: 3px; 470 flex-grow: 2; 471 } 472 473 .formlabel { 474 flex-grow: 0; 475 width: 20%; 476 padding-top: 9px; 477 } 478 479 /* If the form label is on the right */ 480 .formlabel:not(:first-child) { 481 font-size: 15px; 482 flex-grow: 2; 483 } 484 485 .formrow.real_first_child .formlabel, .formrow:first-child .formlabel { 486 padding-top: 17px; 487 } 488 489 /* Too big compared to the other items in the Control Panel and Account Panel */ 490 /*.colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child { 491 margin-top: 8px; 492 }*/ 493 .colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child { 494 margin-top: 3px; 495 } 496 497 .thin_margins .formrow.real_first_child, .thin_margins .formrow:first-child { 498 margin-top: 5px; 499 } 500 501 .formitem a { 502 font-size: 14px; 503 } 504 .rowmenu .rowitem, .rowlist .rowitem, .rowlist .formitem { 505 margin-top: 3px; 506 font-size: 13px; 507 padding: 10px; 508 } 509 .menu_stats { 510 font-size: 12px; 511 } 512 513 /* Mini paginators aka panel paginators */ 514 .pageset { 515 margin-top: 4px; 516 display: flex; 517 flex-direction: row; 518 margin-left: 8px; 519 margin-bottom: 8px; 520 } 521 .pageitem { 522 background-color: var(--main-block-color); 523 padding: 10px; 524 margin-right: 4px; 525 font-size: 13px; 526 } 527 528 .bgsub { 529 display: none; 530 } 531 .rowlist.bgavatars .rowitem { 532 background-repeat: no-repeat; 533 background-size: 40px; 534 padding-left: 46px; 535 } 536 .bgavatars:not(.rowlist) .rowitem { 537 background-repeat: no-repeat; 538 background-size: 40px; 539 padding-left: 46px; 540 } 541 .rowlist .formrow, .rowlist .formrow:first-child { 542 margin-top: 0px; 543 } 544 .loglist .to_left small { 545 margin-left: 2px; 546 font-size: 12px; 547 } 548 .loglist .to_right span { 549 font-size: 14px; 550 } 551 552 input { 553 background-color: var(--input-background-color); 554 border: 1px solid var(--input-border-color); 555 color: var(--input-text-color); 556 padding-bottom: 6px; 557 font-size: 13px; 558 559 padding: 5px; 560 width: calc(100% - 16px); 561 } 562 select { 563 background-color: var(--input-background-color); 564 border: 1px solid var(--input-border-color); 565 color: var(--input-text-color); 566 font-size: 13px; 567 padding: 4px; 568 } 569 .rowlist .formitem select { 570 padding: 2px; 571 font-size: 11px; 572 margin-top: -5px; 573 } 574 575 input, select, textarea { 576 caret-color: rgb(95,95,95); 577 } 578 579 .form_middle_button { 580 margin-left: auto; 581 margin-right: auto; 582 display: block; 583 margin-top: 5px; 584 } 585 586 .little_row_avatar { 587 display: none; 588 } 589 .topic_create_form .topic_board_row .formitem, .topic_create_form .topic_name_row .formitem { 590 padding-bottom: 5px; 591 } 592 .topic_create_form input, .topic_create_form select { 593 padding: 7px; 594 font-size: 13px; 595 } 596 .topic_create_form select { 597 padding: 6px; 598 } 599 .topic_create_form input { 600 width: calc(100% - 14px); 601 } 602 .topic_create_form textarea, .topic_reply_form textarea { 603 width: calc(100% - 26px); 604 min-height: 80px; 605 font-family: arial; 606 font-size: 14px; 607 padding: 12px; 608 } 609 .topic_create_form textarea { 610 padding: 7px; 611 width: calc(100% - 14px); 612 } 613 614 .quick_button_row .formitem, .quick_create_form .upload_file_dock { 615 display: flex; 616 } 617 .quick_create_form .add_file_button, .quick_create_form #add_poll_button { 618 margin-left: 8px; 619 } 620 .quick_create_form .close_form { 621 margin-left: auto; 622 } 623 .quick_create_form .uploadItem { 624 display: inline-block; 625 margin-left: 8px; 626 background-size: 25px 30px; 627 background-repeat: no-repeat; 628 padding-left: 30px; 629 } 630 631 .footBlock { 632 margin-top: -2px; 633 display: flex; 634 } 635 .footer { 636 width: 70%; 637 margin-left: auto; 638 margin-right: auto; 639 } 640 .elapsed { 641 display: none; 642 } 643 #poweredByHolder { 644 background-color: var(--main-block-color); 645 padding: 10px; 646 font-size: 14px; 647 padding-left: 13px; 648 padding-right: 13px; 649 clear: left; 650 height: 25px; 651 } 652 #poweredByHolder select { 653 background-color: var(--input-background-color); 654 border: 1px solid var(--input-border-color); 655 color: var(--input-text-color); 656 font-size: 13px; 657 padding: 4px; 658 } 659 #poweredBy { 660 float: left; 661 margin-top: 4px; 662 } 663 #poweredBy span { 664 font-size: 12px; 665 } 666 #themeSelector { 667 float: right; 668 } 669 670 .poll_item { 671 display: flex; 672 } 673 .poll_option { 674 margin-bottom: 3px; 675 } 676 input[type=checkbox] { 677 display: none; 678 } 679 input[type=checkbox] + label { 680 display: inline-block; 681 width: 12px; 682 height: 12px; 683 margin-bottom: -2px; 684 border: 1px solid var(--bright-input-border-color); 685 background-color: var(--bright-input-background-color); 686 } 687 input[type=checkbox]:checked + label .sel { 688 display: inline-block; 689 width: 5px; 690 height: 5px; 691 background-color: var(--bright-input-background-color); 692 } 693 input[type=checkbox] + label.poll_option_label { 694 width: 14px; 695 height: 14px; 696 margin-right: 3px; 697 background-color: var(--bright-input-background-color); 698 border: 1px solid var(--bright-input-border-color); 699 color: var(--bright-input-text-color); 700 } 701 input[type=checkbox]:checked + label.poll_option_label .sel { 702 display: inline-block; 703 width: 10px; 704 height: 10px; 705 margin-left: 3px; 706 background: var(--bright-input-border-color); 707 } 708 .pollinput { 709 display: flex; 710 margin-bottom: 8px; 711 } 712 .quick_create_form .pollinputlabel { 713 display: none; 714 } 715 716 /*#poll_option_text_0 { 717 color: hsl(359,98%,43%); 718 }*/ 719 .poll_buttons { 720 margin-top: 12px; 721 } 722 .poll_buttons button { 723 background-color: var(--bright-input-background-color); 724 border: 1px solid var(--bright-input-border-color); 725 color: var(--bright-input-text-color); 726 padding: 7px; 727 padding-bottom: 6px; 728 font-size: 13px; 729 } 730 .poll_buttons > *:not(:first-child) { 731 margin-left: 5px; 732 } 733 .poll_results { 734 margin-left: auto; 735 max-height: 120px; 736 } 737 738 /* Forum View */ 739 .rowhead, .opthead, .colstack_head, .rowhead .rowitem { 740 display: flex; 741 flex-direction: row; 742 } 743 .rowhead:not(.has_opt) .rowitem, .opthead .rowitem, .colstack_head .rowitem { 744 width: 100%; 745 } 746 747 .optbox { 748 display: flex; 749 padding-left: 5px; 750 padding-top: 10.5px; 751 margin-top: 7px; 752 width: 100%; 753 background-color: var(--main-block-color); 754 } 755 .has_opt .rowitem { 756 margin-right: 0px; 757 display: inline-block; 758 padding-right: 0px; 759 margin-top: 7px; 760 padding-left: 12px; 761 padding-top: 12px; 762 } 763 .opt a { 764 font-size: 11px; 765 } 766 767 .topic_list_title_block .pre_opt:before { 768 content: "{{lang "topics_click_topics_to_select" . }}"; 769 font-size: 14px; 770 } 771 .create_topic_opt a:before { 772 content: "{{lang "topics_new_topic" . }}"; 773 margin-left: 3px; 774 } 775 .locked_opt a:before { 776 content: "{{lang "forum_locked" . }}"; 777 } 778 .mod_opt a { 779 margin-left: 4px; 780 } 781 .mod_opt a:after { 782 content: "{{lang "topics_moderate" . }}"; 783 padding-left: 1px; 784 } 785 .topic_list_title_block .moderate_link.moderate_open:after { 786 content: "{{lang "topic_list.cancel_mod" . }}"; 787 } 788 .create_topic_opt { 789 order: 1; 790 } 791 .mod_opt { 792 order: 2; 793 } 794 .pre_opt { 795 order: 3; 796 margin-left: auto; 797 margin-right: 12px; 798 } 799 .filter_opt { 800 display: none; 801 } 802 803 @keyframes fadein { 804 from { opacity: 0; } 805 to { opacity: 1; } 806 } 807 .mod_floater { 808 position: fixed; 809 bottom: 15px; 810 right: 15px; 811 width: 150px; 812 height: 65px; 813 font-size: 14px; 814 padding: 14px; 815 z-index: 9999; 816 animation: fadein 0.8s; 817 background-color: var(--main-block-color); 818 } 819 .mod_floater_head { 820 margin-bottom: 8px; 821 } 822 .modal_pane { 823 position: fixed; 824 left: 50%; 825 top: 50%; 826 transform: translate(-50%, -50%); 827 background-color: var(--main-block-color); 828 border: 2px solid #333333; 829 padding-left: 24px; 830 padding-right: 24px; 831 z-index: 9999; 832 animation: fadein 0.8s; 833 } 834 .pane_header { 835 font-size: 15px; 836 } 837 .pane_header h3 { 838 -webkit-margin-before: 0; 839 -webkit-margin-after: 0; 840 margin-block-start: 0; 841 margin-block-end: 0; 842 margin-top: 10px; 843 margin-bottom: 10px; 844 font-weight: normal; 845 } 846 .pane_row { 847 font-size: 14px; 848 margin-bottom: 1px; 849 } 850 .pane_selected { 851 font-weight: bold; 852 } 853 .pane_buttons { 854 margin-top: 7px; 855 margin-bottom: 8px; 856 } 857 858 .topic_list .topic_row { 859 display: flex; 860 } 861 .topics_moderate .topic_row:not(.can_mod) .rowitem { 862 background-color: hsla(0, 0%, 22%, 1); 863 } 864 .topics_moderate .can_mod .rowitem { 865 background-color: hsla(0, 0%, 25%, 1); 866 } 867 .topics_moderate .can_mod:hover .rowitem { 868 background-color: hsla(0, 0%, 29%, 1); 869 } 870 .topic_row.topic_selected .rowitem { 871 background-color: hsla(0, 0%, 31%, 1); 872 } 873 /* Temporary hack, so that I don't break the topic lists of the other themes */ 874 .topic_list .topic_inner_right { 875 display: none; 876 } 877 .topic_list .rowitem { 878 float: left; 879 overflow: hidden; 880 } 881 .topic_list .topic_left { 882 width: 100%; 883 height: 59px; 884 display: flex; 885 padding: 0px; 886 overflow: hidden; 887 } 888 .topic_sticky .topic_left .topic_inner_left { 889 border-top: 4px solid hsl(41, 100%, 50%); 890 padding-left: 10px; 891 padding-top: 10px; 892 margin-top: 0px; 893 margin-left: 0px; 894 width: 100%; 895 } 896 .topic_list .topic_right { 897 height: 59px; 898 margin-left: 8px; 899 display: flex; 900 width: 284px; 901 padding: 0px; 902 } 903 .topic_right_inside { 904 display: flex; 905 } 906 .topic_list .topic_left img, .topic_list .topic_right img { 907 width: 64px; 908 } 909 .topic_list .topic_inner_left, .topic_right_inside > span { 910 margin-left: 8px; 911 margin-top: 12px; 912 } 913 .topic_right_inside .lastName { 914 font-size: 14px; 915 } 916 .topic_list .topic_row:last-child { 917 margin-bottom: 10px; 918 } 919 .topic_list .lastReplyAt { 920 white-space: nowrap; 921 } 922 .topic_list .lastReplyAt:before { 923 content: "{{lang "topics_last" . }}: "; 924 } 925 .topic_list .starter:before { 926 content: "{{lang "topics_starter" . }}: "; 927 } 928 .topic_middle { 929 display: none; 930 } 931 932 .more_topic_block_initial { 933 display: none; 934 } 935 .more_topic_block_active { 936 display: block; 937 } 938 939 .topic_name_input { 940 width: 100%; 941 margin-right: 10px; 942 background-color: var(--input-background-color); 943 border: 1px solid var(--input-border-color); 944 color: var(--input-text-color); 945 padding-bottom: 6px; 946 font-size: 13px; 947 padding: 5px; 948 } 949 .topic_item .submit_edit { 950 margin-left: auto; 951 } 952 .topic_item .topic_status_closed { 953 margin-left: auto; 954 position: relative; 955 top: -5px; 956 } 957 958 .prev_link, .next_link { 959 display: none; 960 } 961 962 .postImage { 963 max-width: 100%; 964 max-height: 200px;/*300px;*/ 965 background-color: rgb(71,71,71); 966 padding: 10px; 967 } 968 video { 969 width: 100%; 970 } 971 blockquote { 972 background-color: rgb(71,71,71); 973 margin: 0px; 974 margin-top: 10px; 975 padding: 10px; 976 } 977 blockquote:first-child { 978 margin-top: 0px; 979 } 980 981 /* Profiles */ 982 #profile_left_lane { 983 width: 220px; 984 margin-top: 5px; 985 } 986 #profile_left_lane .avatarRow { 987 overflow: hidden; 988 max-height: 220px; 989 padding: 0; 990 } 991 #profile_left_lane .avatar { 992 width: 100%; 993 margin: 0; 994 display: block; 995 } 996 #profile_left_lane .username { 997 font-size: 14px; 998 display: block; 999 margin-top: 3px; 1000 } 1001 #profile_left_pane .nameRow .username { 1002 float: right; 1003 font-weight: normal; 1004 } 1005 #profile_left_pane .report_item:after { 1006 content: "{{lang "topic.report_button_text" . }}"; 1007 } 1008 #profile_left_lane .profileName { 1009 font-size: 18px; 1010 } 1011 #profile_right_lane { 1012 width: calc(100% - 245px); 1013 } 1014 #profile_right_lane .rowitem, 1015 #profile_right_lane .colstack_item .formrow.real_first_child, 1016 #profile_right_lane .colstack_item .formrow:first-child { 1017 margin-top: 5px; 1018 } 1019 .simple .user_tag { 1020 font-size: 14px; 1021 } 1022 /* TODO: Have a has_avatar class for profile comments and topic replies to allow posts without avatars? Won't that look inconsistent next to everything else for just about every theme though? */ 1023 #profile_comments .rowitem { 1024 background-repeat: no-repeat, repeat-y; 1025 background-size: 128px; 1026 padding-left: 136px; 1027 } 1028 1029 .ip_search_block .rowitem { 1030 display: flex; 1031 flex-direction: row; 1032 } 1033 .ip_search_block input { 1034 background-color: var(--input-background-color); 1035 border: 1px solid var(--input-border-color); 1036 color: var(--input-text-color); 1037 margin-top: -3px; 1038 margin-bottom: -3px; 1039 padding: 4px; 1040 padding-bottom: 3px; 1041 } 1042 .ip_search_input { 1043 font-size: 15px; 1044 width: 100%; 1045 margin-left: 0px; 1046 } 1047 .ip_search_search { 1048 font-size: 14px; 1049 margin-left: 8px; 1050 } 1051 1052 .level_complete, .level_future, .level_inprogress { 1053 display: flex; 1054 } 1055 .progressWrap { 1056 margin-left: auto; 1057 width: auto !important; 1058 } 1059 1060 .colstack_grid { 1061 display: grid; 1062 grid-template-columns: repeat(3, 1fr); 1063 margin-top: 3px; 1064 grid-gap: 3px; 1065 text-align: center; 1066 } 1067 1068 .grid_stat, .grid_istat { 1069 padding-top: 10px; 1070 padding-bottom: 10px; 1071 font-size: 13px; 1072 background-color: var(--main-block-color); 1073 } 1074 1075 @media(max-width: 935px) { 1076 .simple .user_tag { 1077 display: none; 1078 } 1079 #profile_left_lane { 1080 width: 160px; 1081 } 1082 #profile_left_lane .avatarRow { 1083 max-height: 160px; 1084 } 1085 #profile_left_lane .profileName { 1086 font-size: 16px; 1087 } 1088 #profile_right_lane { 1089 width: calc(100% - 185px); 1090 } 1091 } 1092 1093 @media(max-width: 830px) { 1094 #main_menu { 1095 padding-left: 10px; 1096 padding-right: 0px; 1097 height: 35px; 1098 } 1099 li { 1100 height: 26px; 1101 } 1102 1103 #menu_overview { 1104 margin-right: 9px; 1105 margin-left: 0px; 1106 font-size: 15px; 1107 width: 32px; 1108 text-align: center; 1109 } 1110 .menu_left { 1111 margin-right: 7px; 1112 } 1113 .menu_left:not(#menu_overview) { 1114 font-size: 13px; 1115 padding-top: 10px; 1116 } 1117 1118 .menu_alerts { 1119 padding-top: 9px; 1120 float: left; 1121 margin-right: 6px; 1122 } 1123 .alert_counter { 1124 border-radius: 8px; 1125 font-size: 0px; 1126 color: #c80000; 1127 left: 2px; 1128 } 1129 .alert_aftercounter { 1130 float: none; 1131 margin-right: 0px; 1132 font-size: 13px; 1133 padding-top: 1.5px; 1134 } 1135 .has_alerts .alert_aftercounter { 1136 position: relative; 1137 top: -5px; 1138 } 1139 .menu_alerts:not(.has_alerts) .alert_counter { 1140 display: none; 1141 } 1142 1143 .selectedAlert .alertList { 1144 right: 10px; 1145 top: 42px; 1146 white-space: nowrap; 1147 overflow: hidden; 1148 text-overflow: ellipsis; 1149 } 1150 .alertItem.withAvatar { 1151 height: 28px; 1152 background-size: 38px; 1153 padding-left: 46px; 1154 padding-top: 10px; 1155 overflow: hidden; 1156 text-overflow: ellipsis; 1157 } 1158 1159 #back, .footer { 1160 width: calc(100% - 20px); 1161 } 1162 .opthead, .rowhead, .colstack_head { 1163 padding-top: 0px !important; 1164 font-size: 15px; 1165 } 1166 .rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem { 1167 font-size: 14px; 1168 } 1169 .rowsmall { 1170 font-size: 11px; 1171 } 1172 1173 @media(min-width: 400px) { 1174 #main_menu { 1175 height: 40px; 1176 } 1177 #menu_overview { 1178 font-size: 16px; 1179 } 1180 .menu_left:not(#menu_overview) { 1181 font-size: 14px; 1182 padding-top: 13px; 1183 } 1184 .alert_aftercounter { 1185 font-size: 14px; 1186 padding-top: 4px; 1187 } 1188 } 1189 } 1190 1191 @media(max-width: 520px) { 1192 .user_tag, .level_label, .level { 1193 display: none; 1194 } 1195 #profile_left_lane { 1196 width: 100px; 1197 } 1198 #profile_comments .rowitem { 1199 background-size: 80px; 1200 padding-left: calc(80px + 12px); 1201 } 1202 #profile_left_lane .avatarRow { 1203 max-height: 100px; 1204 } 1205 #profile_right_lane { 1206 width: calc(100% - 125px); 1207 } 1208 } 1209 1210 @media(max-width: 500px) { 1211 .topic_list .rowitem { 1212 float: none; 1213 } 1214 .topic_list .topic_left { 1215 width: 100%; 1216 } 1217 .topic_list .topic_right, #poweredBy span { 1218 display: none; 1219 } 1220 } 1221 1222 @media(max-width: 470px) { 1223 .like_count_label, .like_count { 1224 display: none; 1225 } 1226 .post_item { 1227 background-size: 100px; 1228 padding-left: calc(100px + 12px); 1229 } 1230 } 1231 1232 @media(max-width: 370px) { 1233 .menu_profile { 1234 display: none; 1235 } 1236 .post_item { 1237 background-size: 80px; 1238 padding-left: calc(80px + 12px); 1239 } 1240 .controls { 1241 margin-top: 14px; 1242 } 1243 #profile_comments .rowitem { 1244 background-image: none !important; 1245 padding-left: 10px !important; 1246 } 1247 } 1248 1249 @media(max-width: 324px) { 1250 #main_menu { 1251 padding-left: 5px; 1252 } 1253 }