/* Patch for Edge, until they fix emojis in arial x.x */ @supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } } :root { --main-block-color: rgb(61,61,61); --main-text-color: white; --dim-text-color: rgb(205,205,205); --main-background-color: #222222; --inner-background-color: #333333; --input-background-color: #444444; --input-border-color: #555555; --input-text-color: #999999; --bright-input-background-color: #555555; --bright-input-border-color: #666666; --input-text-color: #a3a3a3; } body { font-family: arial; color: var(--main-text-color); background-color: var(--main-background-color); margin: 0; } *::selection { background-color: hsl(0,0%,75%); color: hsl(0,0%,20%); font-weight: 100; } #back { margin-left: auto; margin-right: auto; width: 70%; background-color: var(--inner-background-color); position: relative; top: -2px; } #main { padding-bottom: 5px; } #main_menu { list-style-type: none; background-color: var(--main-block-color); border-bottom: 1px solid var(--main-background-color); padding-left: 15%; padding-right: 15%; margin: 0; height: 41px; } .menu_left, .menu_right li { float: left; height: 29.5px; padding-top: 12px; margin: 0; } .menu_left { margin-right: 10px; } .menu_right { float: right; } #main_menu #menu_overview { margin-right: 13px; margin-left: 10px; font-size: 16px; } #main_menu .menu_left:not(#menu_overview) { font-size: 15px; padding-top: 13px; } .alert_bell { float: right; } .menu_alerts { float: right; padding-top: 14px; } .alert_counter { background-color: rgb(200,0,0); border-radius: 2px; font-size: 11px; padding: 3px; float: right; position: relative; top: -1px; } .alert_aftercounter { float: right; margin-right: 4px; font-size: 14px; } .alert_aftercounter:before { content: "{{lang "menu_alerts" . }}"; } .menu_alerts .alertList, .hide_on_big, .show_on_mobile { display: none; } .auto_hide { display: none !important; } .selectedAlert .alertList { display: block; position: absolute; top: 44px; float: left; width: 200px; z-index: 50; right: 15%; font-size: 13px; background-color: var(--inner-background-color); } .alertItem { margin-bottom: 2px; } .alertItem.withAvatar { height: 40px; background-size: 48px; background-repeat: no-repeat; background-color: var(--main-block-color); padding-left: 56px; padding-top: 8px; } a { text-decoration: none; color: var(--main-text-color); } .alertbox { display: flex; } .alert { padding-bottom: 12px; background-color: var(--main-block-color); border-left: 4px solid hsl(21, 100%, 50%); padding: 12px; display: block; margin-top: 8px; margin-bottom: -3px; margin-left: 8px; margin-right: 8px; width: 100%; } .rowblock { margin-left: 8px; margin-right: 8px; } .opthead, .rowhead, .colstack_head { padding-bottom: 0px; padding-top: 3px !important; white-space: nowrap; } .rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem { font-size: 15px; /*16px*/ } .rowblock:last-child, .colstack_item:last-child { padding-bottom: 10px; } .rowitem, .formitem { padding-bottom: 12px; background-color: var(--main-block-color); margin-top: 8px; padding: 12px; } .rowitem h1, .rowitem h2 { font-size: 16px; display: inline; } h1, h2, h3, h4, h5 { -webkit-margin-before: 0; -webkit-margin-after: 0; margin-block-start: 0; margin-block-end: 0; margin-top: 0px; margin-bottom: 0px; font-weight: normal; } .rowsmall { font-size: 12px; } .colstack { display: flex; } .colstack_left, .colstack_right { margin-left: 8px; } .colstack_left { float: left; width: 30%; } .colstack_right { float: left; width: calc(70% - 24px); } .colstack_left:empty, .colstack_right:empty, .show_on_edit:not(.edit_opened), .hide_on_edit.edit_opened, .show_on_block_edit:not(.edit_opened), .hide_on_block_edit.edit_opened, .link_select:not(.link_opened) { display: none; } .colline { font-size: 14px; background-color: var(--main-block-color); margin-top: 5px; padding: 10px; } /* Align to right in a flex head */ .to_right { float: right; margin-left: auto; } /* Topic View */ /* TODO: How should we handle the sticky headers? */ .topic_sticky_head { } /* TODO: Add the avatars to the forum list */ .forum_list .forum_nodesc { font-style: italic; } .extra_little_row_avatar { display: none; } .shift_left { float: left; } .shift_right { float: right; } .action_item .action_icon { font-size: 18px; padding-right: 5px; } /* TODO: Rewrite the closed topic header so that it looks more consistent with the rest of the theme */ .topic_closed_head .topic_status_closed { margin-bottom: -10px; font-size: 19px; } .post_item { background-size: 128px; padding-left: calc(128px + 12px); } .user_content { word-break: break-word; } .user_content h2 { font-size: 18px; } .user_content h2, .user_content h3 { margin-bottom: 12px; display: block; } .user_content h4 { margin-bottom: 8px; display: block; } .user_content strong h2, .user_content strong h3, .user_content strong h4 { font-weight: bold; } red { color: red; } .update_buttons .add_file_button { display: none; } .controls { width: 100%; display: inline-block; margin-top: 20px; } .staff_post { border: 1px solid rgb(101, 71, 101) } .user_tag { float: right; color: var(--dim-text-color); } .real_username { float: left; margin-right: 7px; } .mod_button { margin-right: 5px; display: block; float: left; } .mod_button button { border: none; background: none; color: var(--main-text-color); font-size: 12px; padding: 0; } .like_label:before { content: "{{lang "topic.plus_one" . }}"; }{{$out := .}} {{range (toArr "quote" "edit" "delete" "pin" "lock" "unlock" "unpin" "ip" "flag")}} .{{.}}_label:before { content: "{{lang (concat "topic." . "_button_text") ($out) }}"; }{{end}} .like_count_label, .like_count { display: none; } .like_count_label:before { content: "{{lang "topics_likes_suffix" . }}"; } .has_likes .like_count_label, .has_likes .like_count { font-size: 12px; display: block; float: left; line-height: 19px; } .has_likes .like_count { margin-right: 2px; } .like_count:before { content: "{{lang "pipe" . }}"; margin-right: 5px; } .level_label, .level { color: var(--dim-text-color); float: right; } .level_label:before { content: "{{lang "topic.level_tooltip" . }}"; } .level { margin-left: 3px; } .formrow.real_first_child, .formrow:first-child { margin-top: 8px; } .formrow.real_first_child .formitem, .formrow:first-child .formitem { padding-top: 12px; } .formrow:last-child .formitem { padding-bottom: 12px; } .login_button_row { display: flex; } .login_button_row .formitem > * { padding-top: 5px; } .fall_opts { display: flex; } .dont_have_account { margin-left: auto; padding-right: 0px; } .dont_have_account:after { content: "|"; padding-left: 8px; padding-right: 8px; } .forgot_password { padding-left: 0px; } .formitem.dont_have_account, .formitem.forgot_password { color: #909090; font-size: 12px; font-weight: normal; padding-top: 11px; } textarea { background-color: var(--input-background-color); border-color: var(--input-border-color); color: var(--input-text-color); width: calc(100% - 15px); min-height: 80px; } textarea:focus, input:focus, select:focus, button:focus { outline-color: rgb(95,95,95); } textarea.large { min-height: 120px; margin-top: 1px; padding: 5px; display: block; } .formitem button, .formbutton, .mod_floater_submit, .pane_buttons button { background-color: var(--input-background-color); border: 1px solid var(--input-border-color); color: var(--input-text-color); padding: 7px; padding-bottom: 6px; font-size: 13px; } .mod_floater_submit { padding: 5px; padding-bottom: 4px; margin-left: 2px; } .pane_buttons button { padding: 5px; padding-bottom: 4px; } .formrow { flex-direction: row; display: flex; } .formitem { margin-top: 0px; padding-bottom: 2px; padding-top: 3px; flex-grow: 2; } .formlabel { flex-grow: 0; width: 20%; padding-top: 9px; } /* If the form label is on the right */ .formlabel:not(:first-child) { font-size: 15px; flex-grow: 2; } .formrow.real_first_child .formlabel, .formrow:first-child .formlabel { padding-top: 17px; } /* Too big compared to the other items in the Control Panel and Account Panel */ /*.colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child { margin-top: 8px; }*/ .colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child { margin-top: 3px; } .thin_margins .formrow.real_first_child, .thin_margins .formrow:first-child { margin-top: 5px; } .formitem a { font-size: 14px; } .rowmenu .rowitem, .rowlist .rowitem, .rowlist .formitem { margin-top: 3px; font-size: 13px; padding: 10px; } .menu_stats { font-size: 12px; } /* Mini paginators aka panel paginators */ .pageset { margin-top: 4px; display: flex; flex-direction: row; margin-left: 8px; margin-bottom: 8px; } .pageitem { background-color: var(--main-block-color); padding: 10px; margin-right: 4px; font-size: 13px; } .bgsub { display: none; } .rowlist.bgavatars .rowitem { background-repeat: no-repeat; background-size: 40px; padding-left: 46px; } .bgavatars:not(.rowlist) .rowitem { background-repeat: no-repeat; background-size: 40px; padding-left: 46px; } .rowlist .formrow, .rowlist .formrow:first-child { margin-top: 0px; } input { background-color: var(--input-background-color); border: 1px solid var(--input-border-color); color: var(--input-text-color); padding-bottom: 6px; font-size: 13px; padding: 5px; width: calc(100% - 16px); } select { background-color: var(--input-background-color); border: 1px solid var(--input-border-color); color: var(--input-text-color); font-size: 13px; padding: 4px; } .rowlist .formitem select { padding: 2px; font-size: 11px; margin-top: -5px; } input, select, textarea { caret-color: rgb(95,95,95); } .form_middle_button { margin-left: auto; margin-right: auto; display: block; margin-top: 5px; } .little_row_avatar { display: none; } .topic_create_form .topic_board_row .formitem, .topic_create_form .topic_name_row .formitem { padding-bottom: 5px; } .topic_create_form input, .topic_create_form select { padding: 7px; font-size: 13px; } .topic_create_form select { padding: 6px; } .topic_create_form input { width: calc(100% - 14px); } .topic_create_form textarea, .topic_reply_form textarea { width: calc(100% - 26px); min-height: 80px; font-family: arial; font-size: 14px; padding: 12px; } .topic_create_form textarea { padding: 7px; width: calc(100% - 14px); } .quick_button_row .formitem, .quick_create_form .upload_file_dock { display: flex; } .quick_create_form .add_file_button, .quick_create_form #add_poll_button { margin-left: 8px; } .quick_create_form .close_form { margin-left: auto; } .quick_create_form .uploadItem { display: inline-block; margin-left: 8px; background-size: 25px 30px; background-repeat: no-repeat; padding-left: 30px; } .footBlock { margin-top: -2px; display: flex; } .footer { width: 70%; margin-left: auto; margin-right: auto; } .elapsed { display: none; } #poweredByHolder { background-color: var(--main-block-color); padding: 10px; font-size: 14px; padding-left: 13px; padding-right: 13px; clear: left; height: 25px; } #poweredByHolder select { background-color: var(--input-background-color); border: 1px solid var(--input-border-color); color: var(--input-text-color); font-size: 13px; padding: 4px; } #poweredBy { float: left; margin-top: 4px; } #poweredBy span { font-size: 12px; } #themeSelector { float: right; } .poll_item { display: flex; } .poll_option { margin-bottom: 3px; } input[type=checkbox] { display: none; } input[type=checkbox] + label { display: inline-block; width: 12px; height: 12px; margin-bottom: -2px; border: 1px solid var(--bright-input-border-color); background-color: var(--bright-input-background-color); } input[type=checkbox]:checked + label .sel { display: inline-block; width: 5px; height: 5px; background-color: var(--bright-input-background-color); } input[type=checkbox] + label.poll_option_label { width: 14px; height: 14px; margin-right: 3px; background-color: var(--bright-input-background-color); border: 1px solid var(--bright-input-border-color); color: var(--bright-input-text-color); } input[type=checkbox]:checked + label.poll_option_label .sel { display: inline-block; width: 10px; height: 10px; margin-left: 3px; background: var(--bright-input-border-color); } .pollinput { display: flex; margin-bottom: 8px; } .quick_create_form .pollinputlabel { display: none; } /*#poll_option_text_0 { color: hsl(359,98%,43%); }*/ .poll_buttons { margin-top: 12px; } .poll_buttons button { background-color: var(--bright-input-background-color); border: 1px solid var(--bright-input-border-color); color: var(--bright-input-text-color); padding: 7px; padding-bottom: 6px; font-size: 13px; } .poll_buttons > *:not(:first-child) { margin-left: 5px; } .poll_results { margin-left: auto; max-height: 120px; } /* Forum View */ .rowhead, .opthead, .colstack_head, .rowhead .rowitem { display: flex; flex-direction: row; } .rowhead:not(.has_opt) .rowitem, .opthead .rowitem, .colstack_head .rowitem { width: 100%; } .optbox { display: flex; padding-left: 5px; padding-top: 10.5px; margin-top: 7px; width: 100%; background-color: var(--main-block-color); } .has_opt .rowitem { margin-right: 0px; display: inline-block; padding-right: 0px; margin-top: 7px; padding-left: 12px; padding-top: 12px; } .opt a { font-size: 11px; } .topic_list_title_block .pre_opt:before { content: "{{lang "topics_click_topics_to_select" . }}"; font-size: 14px; } .create_topic_opt a:before { content: "{{lang "topics_new_topic" . }}"; margin-left: 3px; } .locked_opt a:before { content: "{{lang "forum_locked" . }}"; } .mod_opt a { margin-left: 4px; } .mod_opt a:after { content: "{{lang "topics_moderate" . }}"; padding-left: 1px; } .create_topic_opt { order: 1; } .mod_opt { order: 2; } .pre_opt { order: 3; margin-left: auto; margin-right: 12px; } .filter_opt { display: none; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .mod_floater { position: fixed; bottom: 15px; right: 15px; width: 150px; height: 65px; font-size: 14px; padding: 14px; z-index: 9999; animation: fadein 0.8s; background-color: var(--main-block-color); } .mod_floater_head { margin-bottom: 8px; } .modal_pane { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: var(--main-block-color); border: 2px solid #333333; padding-left: 24px; padding-right: 24px; z-index: 9999; animation: fadein 0.8s; } .pane_header { font-size: 15px; } .pane_header h3 { -webkit-margin-before: 0; -webkit-margin-after: 0; margin-block-start: 0; margin-block-end: 0; margin-top: 10px; margin-bottom: 10px; font-weight: normal; } .pane_row { font-size: 14px; margin-bottom: 1px; } .pane_selected { font-weight: bold; } .pane_buttons { margin-top: 7px; margin-bottom: 8px; } .topic_list .topic_row { display: flex; } .topic_selected .rowitem { background-color: hsla(0, 0%, 29%, 1); } /* Temporary hack, so that I don't break the topic lists of the other themes */ .topic_list .topic_inner_right { display: none; } .topic_list .rowitem { float: left; overflow: hidden; } .topic_list .topic_left { width: 100%; height: 59px; display: flex; padding: 0px; overflow: hidden; } .topic_sticky .topic_left .topic_inner_left { border-top: 4px solid hsl(41, 100%, 50%); padding-left: 10px; padding-top: 10px; margin-top: 0px; margin-left: 0px; width: 100%; } .topic_list .topic_right { height: 59px; margin-left: 8px; display: flex; width: 284px; padding: 0px; } .topic_right_inside { display: flex; } .topic_list .topic_left img, .topic_list .topic_right img { width: 64px; } .topic_list .topic_inner_left, .topic_right_inside > span { margin-left: 8px; margin-top: 12px; } .topic_right_inside .lastName { font-size: 14px; } .topic_list .topic_row:last-child { margin-bottom: 10px; } .topic_list .lastReplyAt { white-space: nowrap; } .topic_list .lastReplyAt:before { content: "{{lang "topics_last" . }}: "; } .topic_list .starter:before { content: "{{lang "topics_starter" . }}: "; } .topic_middle { display: none; } .more_topic_block_initial { display: none; } .more_topic_block_active { display: block; } .topic_name_input { width: 100%; margin-right: 10px; background-color: var(--input-background-color); border: 1px solid var(--input-border-color); color: var(--input-text-color); padding-bottom: 6px; font-size: 13px; padding: 5px; } .topic_item .submit_edit { margin-left: auto; } .topic_item .topic_status_closed { margin-left: auto; position: relative; top: -5px; } .prev_link, .next_link { display: none; } .postImage { max-width: 100%; max-height: 200px;/*300px;*/ background-color: rgb(71,71,71); padding: 10px; } blockquote { background-color: rgb(71,71,71); margin: 0px; margin-top: 10px; padding: 10px; } blockquote:first-child { margin-top: 0px; } /* Profiles */ #profile_left_lane { width: 220px; margin-top: 5px; } #profile_left_lane .avatarRow { overflow: hidden; max-height: 220px; padding: 0; } #profile_left_lane .avatar { width: 100%; margin: 0; display: block; } #profile_left_lane .username { font-size: 14px; display: block; margin-top: 3px; } #profile_left_pane .nameRow .username { float: right; font-weight: normal; } #profile_left_pane .report_item:after { content: "{{lang "topic.report_button_text" . }}"; } #profile_left_lane .profileName { font-size: 18px; } #profile_right_lane { width: calc(100% - 245px); } #profile_right_lane .rowitem, #profile_right_lane .colstack_item .formrow.real_first_child, #profile_right_lane .colstack_item .formrow:first-child { margin-top: 5px; } .simple .user_tag { font-size: 14px; } /* 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? */ #profile_comments .rowitem { background-repeat: no-repeat, repeat-y; background-size: 128px; padding-left: 136px; } .ip_search_block .rowitem { display: flex; flex-direction: row; } .ip_search_block input { background-color: var(--input-background-color); border: 1px solid var(--input-border-color); color: var(--input-text-color); margin-top: -3px; margin-bottom: -3px; padding: 4px; padding-bottom: 3px; } .ip_search_input { font-size: 15px; width: 100%; margin-left: 0px; } .ip_search_search { font-size: 14px; margin-left: 8px; } .level_complete, .level_future, .level_inprogress { display: flex; } .progressWrap { margin-left: auto; width: auto !important; } .colstack_grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3px; grid-gap: 3px; text-align: center; } .grid_stat, .grid_istat { padding-top: 10px; padding-bottom: 10px; font-size: 13px; background-color: var(--main-block-color); } @media(max-width: 935px) { .simple .user_tag { display: none; } #profile_left_lane { width: 160px; } #profile_left_lane .avatarRow { max-height: 160px; } #profile_left_lane .profileName { font-size: 16px; } #profile_right_lane { width: calc(100% - 185px); } } @media(max-width: 830px) { #main_menu { padding-left: 10px; padding-right: 0px; height: 35px; } li { height: 26px; } #menu_overview { margin-right: 9px; margin-left: 0px; font-size: 15px; width: 32px; text-align: center; } .menu_left { margin-right: 7px; } .menu_left:not(#menu_overview) { font-size: 13px; padding-top: 10px; } .menu_alerts { padding-top: 9px; float: left; margin-right: 6px; } .alert_counter { border-radius: 8px; font-size: 0px; color: #c80000; left: 2px; } .alert_aftercounter { float: none; margin-right: 0px; font-size: 13px; padding-top: 1.5px; } .has_alerts .alert_aftercounter { position: relative; top: -5px; } .menu_alerts:not(.has_alerts) .alert_counter { display: none; } .selectedAlert .alertList { right: 10px; top: 42px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alertItem.withAvatar { height: 28px; background-size: 38px; padding-left: 46px; padding-top: 10px; overflow: hidden; text-overflow: ellipsis; } #back, .footer { width: calc(100% - 20px); } .opthead, .rowhead, .colstack_head { padding-top: 0px !important; font-size: 15px; } .rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem { font-size: 14px; } .rowsmall { font-size: 11px; } @media(min-width: 400px) { #main_menu { height: 40px; } #menu_overview { font-size: 16px; } .menu_left:not(#menu_overview) { font-size: 14px; padding-top: 13px; } .alert_aftercounter { font-size: 14px; padding-top: 4px; } } } @media(max-width: 520px) { .user_tag, .level_label, .level { display: none; } #profile_left_lane { width: 100px; } #profile_comments .rowitem { background-size: 80px; padding-left: calc(80px + 12px); } #profile_left_lane .avatarRow { max-height: 100px; } #profile_right_lane { width: calc(100% - 125px); } } @media(max-width: 500px) { .topic_list .rowitem { float: none; } .topic_list .topic_left { width: 100%; } .topic_list .topic_right { display: none; } #poweredBy span { display: none; } } @media(max-width: 470px) { .like_count_label, .like_count { display: none; } .post_item { background-size: 100px; padding-left: calc(100px + 12px); } } @media(max-width: 370px) { .menu_profile { display: none; } .post_item { background-size: 80px; padding-left: calc(80px + 12px); } .controls { margin-top: 14px; } #profile_comments .rowitem { background-image: none !important; padding-left: 10px !important; } } @media(max-width: 324px) { #main_menu { padding-left: 5px; } }