:root { --header-border-color: hsl(0,0%,80%); --element-border-color: hsl(0,0%,85%); --element-background-color: white; --replies-lang-string: "{{index .Phrases "topics_replies_suffix"}}"; --topics-lang-string: "{{index .Phrases "forums_topics_suffix"}}"; --likes-lang-string: "{{index .Phrases "topics_gap_likes_suffix"}}"; --primary-link-color: hsl(0,0%,40%); --primary-text-color: hsl(0,0%,20%); --lightened-primary-text-color: hsl(0,0%,30%); --extra-lightened-primary-text-color: hsl(0,0%,40%); --inverse-primary-text-color: white; --light-text-color: hsl(0,0%,55%); --lighter-text-color: hsl(0,0%,65%); /*background-color: hsl(0,0%,97%);*/ --tinted-background-color: hsl(0,0%,98%); } * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } @font-face { font-family: 'FontAwesome'; src: url('../font-awesome-4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../font-awesome-4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../font-awesome-4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../font-awesome-4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../font-awesome-4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../font-awesome-4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } body { font-size: 16px; font-family: arial; margin: 0px; color: var(--lightened-primary-text-color); } a { text-decoration: none; color: var(--primary-link-color); } body, #main { background-color: var(--tinted-background-color); } #back { padding: 8px; padding-top: 0px; display: flex; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } .footBlock { padding-left: 8px; padding-right: 8px; } .container { background-color: var(--element-background-color); } #main { width: 100%; padding-top: 14px; padding-left: 8px; padding-right: 8px; padding-bottom: 14px; } .sidebar { width: 200px; display: none; } .nav { padding-top: 16px; border-bottom: 1.5px solid var(--header-border-color); } li { margin-right: 12px; } .menu_left:not(:last-child):after, .menu_alerts:after { content: ""; margin-left: 11px; width: 1px; display: inline-block; height: 15px; position: relative; top: 2px; border-right: 1px solid var(--header-border-color); } #menu_overview { font-size: 22px; margin-right: 12px; letter-spacing: 1px; } #menu_overview:after { margin-right: 5px !important; height: 20px !important; } #menu_forums a:before, .menu_topics a:before, .alert_bell:before, .menu_account a:before, .menu_profile a:before, .menu_panel a:before, .menu_logout a:before { font: normal normal normal 14px/1 FontAwesome; } #menu_forums a:before { content: "\f03a"; margin-right: 6px; } .menu_topics a:before { margin-right: 4px; content: "\f27b"; position: relative; top: -2px; } .menu_alerts { color: var(--primary-link-color); display: flex; } .alert_bell:before { content: "\f01c"; } .menu_alerts:not(.has_alerts) .alert_counter { display: none; } .alert_counter { width: 4px; height: 4px; overflow: hidden; background-color: red; opacity: 0.7; border-radius: 30px; position: relative; top: 2px; left: -1px; } .alert_aftercounter:before { content: "{{index .Phrases "menu_alerts"}}"; margin-left: 4px; } .menu_account a:before { content: "\f2c3"; margin-right: 6px; } .menu_profile a:before { content: "\f2c0"; margin-right: 5px; position: relative; top: -1px; font-size: 14px; } .menu_panel a:before { margin-right: 6px; content: "\f108"; } .menu_logout a:before { content: "\f08b"; margin-right: 3px; } ul { display: flex; list-style-type: none; padding: 0px; margin-left: 14px; margin-bottom: 12px; margin-top: 0px; } .menu_alerts:not(.selectedAlert) .alertList { display: none; } .alertList { position: fixed; top: 54px; left: 0px; z-index: 50; background: var(--element-background-color); border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); } .alertList .alertItem { padding: 12px; } .alertItem.withAvatar { background-image: none !important; padding-left: 12px; font-size: 15px; display: flex; } .alertItem.withAvatar .text { margin-top: 8px; } .alertItem.withAvatar:not(:last-child) .text { border-bottom: 1px solid var(--element-border-color); padding-bottom: 16px; } .alertItem .bgsub { width: 32px; height: 32px; border-radius: 30px; margin-right: 12px; } .alertItem.withAvatar:not(:first-child) { padding-top: 0px; } .rowblock, .rowitem, .colstack_head, .colstack_item { position: sticky; } .rowblock, .colstack_head { margin-bottom: 12px; border: 1px solid var(--header-border-color); border-bottom: 2px solid var(--header-border-color); margin-left: 12px; } /* TODO: Reduce the number of nots */ /* TODO: Apply the property to the rowitem on the colstack_head rather than the container itself */ .rowblock:not(.topic_list):not(.forum_list):not(.post_container):not(.topic_reply_container), .colstack_head, .topic_row .rowitem, .forum_list .rowitem { background-color: var(--element-background-color); } .rowblock { margin-right: 12px; } .colstack_right { padding-right: 12px; } .rowhead, .opthead, .colstack_head { padding: 13px; padding-top: 14px; padding-bottom: 14px; } .rowhead:not(:first-child), .opthead:not(:first-child), .colstack_head:not(:first-child) { margin-top: 8px; } .rowhead h1, .opthead h1, .colstack_head h1 { font-size: 19px; font-weight: normal; color: var(--lightened-primary-text-color); display: inline-block; } .colstack_head a h1 { color: var(--primary-link-color); } .colstack_head.menuhead a h1 { font-size: 16px; } .colstack_head h1 { font-size: 18px; } h1, h3 { -webkit-margin-before: 0; -webkit-margin-after: 0; margin-block-start: 0; margin-block-end: 0; margin-top: 0px; margin-bottom: 0px; } .rowmsg.rowitem { padding: 12px; } .topic_list .rowmsg.rowitem, .forum_list .rowmsg.rowitem { border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); } .colstack { display: flex; } .colstack:not(#profile_container) .colstack_left { width: 300px; } .colstack:not(#profile_container) .colstack_right { width: 100%; } .extra_little_row_avatar { height: 38px; width: 38px; margin-right: 8px; } .little_row_avatar { height: 48px; width: 48px; } .extra_little_row_avatar, .little_row_avatar { border-radius: 30px; } .mod_floater { position: fixed; bottom: 15px; right: 15px; width: 200px; height: 115px; background-color: var(--inverse-primary-text-color); border: 1px solid var(--header-border-color); border-bottom: 2px solid var(--header-border-color); z-index: 9999; animation: fadein 0.8s; } .mod_floater_head { display: flex; border-bottom: 1px solid var(--element-border-color); margin-left: 16px; margin-right: 16px; margin-bottom: 10px; } .mod_floater_head span { color: hsl(0,0%,55%); font-size: 14px; padding-top: 12px; padding-bottom: 12px; } .mod_floater_body { display: flex; } .mod_floater_body select { margin-left: auto; border-bottom: 1px solid var(--header-border-color); outline: none; } .mod_floater_body button { margin-left: 10px; margin-right: auto; outline: none; padding-left: 10px; background: hsl(9, 97%, 56%); border-radius: 2px; padding-right: 10px; padding-top: 6px; padding-bottom: 6px; color: var(--inverse-primary-text-color); font-size: 13px; font-weight: bold; margin-top: -2px; } .modal_pane { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: var(--inverse-primary-text-color); border: 1px solid var(--header-border-color); border-bottom: 2px solid var(--header-border-color); /*padding: 8px;*/ padding-left: 24px; padding-right: 24px; z-index: 9999; animation: fadein 0.8s; } .pane_header { color: hsl(0,0%,55%); padding-top: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--element-border-color); margin-bottom: 2px; } .pane_header h3 { font-size: 14px; font-weight: normal; } .pane_row { color: var(--light-text-color); border-bottom: 1px solid var(--element-border-color); font-size: 13px; padding-top: 12px; padding-bottom: 12px; margin-bottom: 3px; cursor: pointer; } .pane_selected { font-weight: bold; } .pane_buttons { padding-top: 12px; padding-bottom: 16px; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .topic_list_title_block { display: flex; } .topic_list_title_block .pre_opt { border-left: 1px solid var(--element-border-color); padding-left: 11px; height: 20px; color: var(--light-text-color); margin-right: 9px; } .topic_list_title_block .pre_opt:before { content: "{{index .Phrases "topics_click_topics_to_select"}}"; font-size: 14px; } .topic_list_title, .forum_title { margin-right: auto; } .mod_opt .moderate_link { border-left: 1px solid var(--element-border-color); padding-left: 12px; height: 20px; color: hsl(0,0%,65%); } .mod_opt .moderate_link:hover { color: var(--light-text-color); } .mod_opt .moderate_link:before { content: "\f0e3"; font: normal normal normal 14px/1 FontAwesome; font-size: 18px; } .mod_opt .moderate_open { display: none; } .topic_create_form { display: flex !important; padding-bottom: 12px; } .topic_create_form .main_form { width: 100%; margin-right: 25px; } .topic_create_form.selectedInput .main_form { margin-right: 50px; margin-left: 18px; } .topic_create_form .topic_meta { display: flex; } .topic_create_form img { display: inline-block; margin-top: 12px; margin-left: 8px; } .topic_board_row, .topic_create_form .quick_button_row { display: none; } .topic_name_row { margin-top: 20px; margin-left: 12px; width: 100%; } #forum_topic_create_form.selectedInput .topic_name_row { margin-left: 20px; } .topic_content_row { display: none; margin-left: 12px; width: 100%; min-width: 0; } .selectedInput .topic_board_row { display: inline-block; margin-top: 16px; margin-left: 12px; } .selectedInput .topic_name_row { margin-top: 16px; margin-bottom: 8px; margin-left: 8px; } .selectedInput .topic_content_row { display: inline-block; } .topic_create_form.selectedInput .quick_button_row { display: inline-block; width: 100%; } .topic_board_row select { height: 27px; width: 100px; margin-left: 10px; } .topic_name_row input, .ip_search_input { width: 100%; display: inline-block; padding-left: 8px; } input, select { border: none; border-bottom: 1px solid var(--header-border-color); outline: none; } .topic_content_row textarea { min-height: 80px; width: 100%; } input[type=checkbox] { display: none; } input[type=checkbox] + label { display: inline-block; width: 12px; height: 12px; margin-bottom: -2px; border: 1px solid var(--element-border-color); background-color: var(--element-background-color); } input[type=checkbox]:checked + label .sel { display: inline-block; width: 5px; height: 5px; background: var(--element-border-color); } .poll_content_row { padding-left: 20px; padding-top: 4px; padding-bottom: 2px; } .poll_content_row .formitem { display: flex; flex-direction: column; } .pollinput:not(:only-child):not(:first-child) { margin-bottom: 5px; } .auto_hide, .show_on_edit:not(.edit_opened), .hide_on_edit.edit_opened { display: none; } input[type=checkbox] + label.poll_option_label { width: 18px; height: 18px; } input[type=checkbox]:checked + label.poll_option_label .sel { display: inline-block; width: 10px; height: 10px; margin-left: 3px; background: var(--element-border-color); } /*.poll_option { margin-bottom: 3px; }*/ .poll_option_text { display: inline-block; margin-left: 3px; font-size: 15px; /*font-weight: bold;*/ position: relative; top: -1px; color: var(--light-text-color); } #poll_option_text_0 { color: #d70206; } #poll_option_text_1 { color: #f05b4f; } .poll_buttons { display: flex; margin-top: 8px; } .poll_buttons button { margin-right: 5px; } .topic_reply_form .pollinput { margin-left: 16px; margin-top: 4px; } .formbutton { margin-top: 12px; margin-left: auto; margin-right: auto; } .quick_button_row .formitem { display: flex; margin-left: 2px; } .quick_button_row button, .quick_button_row label, .ip_search_search, .formbutton, button { padding-left: 10px; padding-right: 10px; padding-top: 6px; padding-bottom: 6px; color: var(--inverse-primary-text-color); font-size: 13px; font-weight: bold; border-width: initial; border-style: none; border-color: initial; border-image: initial; outline: none; background: hsl(209, 97%, 56%); border-radius: 2px; } .quick_button_row button, .quick_button_row label, .ip_search_search { margin-right: 0px; } .quick_button_row button, .quick_button_row label { margin-left: 10px; margin-top: 8px; } .quick_button_row #add_poll_button { background: hsl(209, 47%, 56%); } .quick_button_row .add_file_button { background: hsl(129, 57%, 56%); } .quick_button_row .close_form { background: hsl(9, 0%, 56%); } .quick_button_row #upload_file_dock { display: flex; } label.uploadItem { background-size: 25px 30px; background-repeat: no-repeat; padding-left: 33px; } select, input, textarea { background: var(--element-background-color); padding: 5px; color: hsl(0,0%,30%); } input, select { color: var(--primary-text-color); } input:not(:focus):not([type="submit"]), select:not(:focus) { color: var(--light-text-color); } textarea { outline: none; border: 1px solid var(--header-border-color); } .topic_reply_container { display: flex; border: 0; } .topic_reply_form { margin: 0px; width: 100%; height: min-content; } .topic_reply_form .formrow { padding: 0px !important; } .topic_reply_form .trumbowyg-button-pane:after { display: none; } .topic_reply_form .trumbowyg-box { min-height: auto; } .topic_reply_form .trumbowyg-editor { border-left: none; border-right: none; min-height: 103px; max-height: 200px; overflow-y: scroll; } .topic_reply_form .quick_button_row { margin-bottom: 7px; } #prevFloat, #nextFloat { display: none; } .topic_list { border: none; } .topic_list .topic_row { display: flex; flex-wrap: wrap; } .topic_list .topic_row:last-child .rowitem { margin-bottom: 0px; } #forum_topic_list .topic_inner_left .starter { display: inline-block; width: 200px; } .rowlist .rowitem, .topic_left, .topic_right { margin-bottom: 8px; padding: 4px; display: flex; border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); } .topic_row.new_item .topic_left, .topic_row.new_item .topic_right { background-color: rgb(239, 255, 255); border: 1px solid rgb(187, 217, 217); border-bottom: 2px solid rgb(187, 217, 217); } .topic_row.new_item .topic_left { border-right: none; } .topic_row.new_item .topic_right { border-left: none; } .hide_ajax_topic { display: none !important; } .topic_middle { display: none; } .rowlist .rowitem { background-color: var(--element-background-color); padding: 12px; } .rowlist.bgavatars { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fill, 150px); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 6px 12px; border: none; background: none !important; } .rowlist .rowitem { display: flex; } .bgavatars .rowitem { background-image: none !important; } .rowlist.bgavatars .rowitem { flex-direction: column; } .rowlist.bgavatars .rowitem { padding-top: 16px; padding-bottom: 10px; } .bgavatars .bgsub { border-radius: 30px; height: 48px; width: 48px; margin-top: 8px; margin-left: 4px; } .rowlist.bgavatars .bgsub { height: 80px; width: 80px; border-radius: 48px; margin-top: 4px; margin-bottom: 8px; } .rowlist.bgavatars .bgsub, .rowlist.bgavatars .rowitem > a, .rowlist.bgavatars .rowitem > span { margin-left: auto; margin-right: auto; } .rowlist .rowTitle { font-size: 20px; margin-bottom: 3px; } .rowlist .panel_compactrow { padding: 16px; } .topic_list .rowtopic { font-size: 16px; margin-right: 1px; white-space: nowrap; display: inline-block; } .topic_list .rowtopic span { max-width: 162px; overflow: hidden; color: var(--primary-text-color); } .topic_list .rowsmall { font-size: 15px; } .topic_list .rowsmall.starter:before { content: "\f007"; font: normal normal normal 14px/1 FontAwesome; margin-right: 5px; font-size: 15px; } .topic_list .lastReplyAt { font-size: 14px; } .topic_list .topic_status_e { display: none; } .topic_left { flex: 1 1 calc(100% - 380px); border-right: none; } .topic_inner_right { margin-left: 15%; margin-right: auto; font-size: 17px; } .rowsmall { font-size: 14px; } .topic_inner_right.rowsmall { margin-top: 15px; } /* Experimenting here */ .topic_inner_right { margin-top: 12px; } .topic_inner_right span { font-size: 16px; } .topic_inner_right span:after { font-size: 13.5px; } /* End Experiment */ .topic_inner_right .replyCount:after { content: var(--replies-lang-string); color: var(--lightened-primary-text-color); } .topic_inner_right .topicCount:after { content: var(--topics-lang-string); color: var(--lightened-primary-text-color); } .topic_inner_right .likeCount:after { content: var(--likes-lang-string); color: var(--lightened-primary-text-color); } .parent_forum { color: var(--lightened-primary-text-color); } .topic_right { flex: 1 1 0px; border-left: none; } .topic_right_inside { display: flex; } .topic_left img { border-radius: 30px; height: 48px; width: 48px; margin-top: 8px; margin-left: 4px; } .topic_right_inside img { border-radius: 30px; height: 42px; width: 42px; margin-top: 10px; } .topic_left .topic_inner_left { margin-top: 12px; margin-left: 8px; margin-bottom: 14px; width: 220px; } .topic_right_inside > span { margin-top: 12px; margin-left: 8px; } .topic_sticky .topic_left, .topic_sticky .topic_right { border-bottom: 2px solid hsl(51, 60%, 70%); } .topic_selected .topic_left, .topic_selected .topic_right { background-color: hsl(81, 60%, 95%); } @element .topic_left .rowtopic and (min-width: 160px) { $this, $this span, $this + .parent_forum { float: left; } $this + .parent_forum { margin: 2px; margin-left: 3px; } $this:after { content: "..."; float: left; } } @element .topic_list and (min-width: 738px) { .topic_left .topic_inner_left { width: calc(240px + 1%); } } @element .topic_list and (min-width: 875px) { .topic_left .topic_inner_left { width: calc(240px + 10%); } } .more_topic_block_initial { display: none; } .more_topic_block_active { display: block; } .forum_list, .post_container { border: none; } .forum_list .rowitem { display: flex; margin-bottom: 8px; border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); padding: 14px; } .forum_list .forum_nodesc { font-style: italic; } .forum_right { display: flex; } .forum_right span { margin-top: 1px; } .shift_right { margin-left: auto; margin-right: 8px; } .topic_item { display: flex; } .topic_item .topic_name_input { width: 100%; padding-left: 12px; margin-right: 12px; } .topic_item .formbutton { margin-top: 0px; } .topic_block { padding-bottom: 10px; } .topic_name_forum_sep { margin-left: 6px; margin-right: 6px; line-height: 26px; font-size: 18px; } .topic_forum { line-height: 23px; } .topic_view_count { display: none; } .postImage { width: 100%; max-width: 240px; } .post_item { display: flex; margin-bottom: 16px; } .userinfo, .content_container { background-color: var(--element-background-color); border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); } .userinfo { margin-right: 16px; display: flex; flex-direction: column; padding-top: 30px; padding-left: 42px; padding-right: 42px; padding-bottom: 18px; height: min-content; /*overflow: hidden; text-overflow: ellipsis;*/ } .user_meta { display: flex; flex-direction: column; } .content_container { width: 100%; padding: 17px; display: flex; flex-direction: column; } .avatar_item { border-radius: 50px; width: 84px; height: 84px; margin-bottom: 12px; background-size: 120px; } .the_name, .userinfo .tag_block { margin-left: auto; margin-right: auto; } .the_name { font-size: 18px; color: var(--lightened-primary-text-color); } .action_item .userinfo { display: none; } .action_item .content_container { display: flex; flex-direction: row; } .action_item .action_icon { display: none; } .userinfo .tag_block { color: var(--extra-lightened-primary-text-color); } .post_item .user_content { margin-bottom: 10px; } .button_container { margin-top: auto; display: flex; } .action_button { margin-right: 5px; color: var(--light-text-color); font-size: 14px; display: inline-block; } .action_button_left { display: flex; } .action_button_right { display: inline-flex; margin-left: auto; } .like_count { display: none; } .has_likes .like_count { display: block; } .like_count:after { content: "{{index .Phrases "topic.like_count_suffix"}}"; margin-right: 6px; } .post_item .add_like:after, .post_item .remove_like:after, .created_at:before, .ip_item:before { border-left: 1px solid var(--element-border-color); content: ""; margin-top: 1px; margin-bottom: 1px; } .created_at:before, .ip_item:before { margin-right: 10px; } .post_item .add_like:after, .post_item .remove_like:after { margin-left: 10px; margin-right: 5px; } /* TODO: Use a less bold bold */ .post_item .remove_like:before { font-weight: bold; } .created_at { margin-right: 10px; } .add_like:before, .remove_like:before { content: "{{index .Phrases "topic.plus_one"}}"; } .button_container .open_edit:after, .edit_item:after{ content: "{{index .Phrases "topic.edit_button_text"}}"; } .delete_item:after { content: "{{index .Phrases "topic.delete_button_text"}}"; } .ip_item_button:after { content: "{{index .Phrases "topic.ip_button_text"}}"; } .lock_item:after { content: "{{index .Phrases "topic.lock_button_text"}}"; } .unlock_item:after { content: "{{index .Phrases "topic.unlock_button_text"}}"; } .pin_item:after { content: "{{index .Phrases "topic.pin_button_text"}}"; } .unpin_item:after { content: "{{index .Phrases "topic.unpin_button_text"}}"; } .report_item:after { content: "{{index .Phrases "topic.report_button_text"}}"; } #ip_search_container .rowlist .rowitem { padding-top: 16px; padding-bottom: 10px; } .ip_search_block .rowitem { padding: 8px; padding-left: 12px; padding-right: 12px; } .ip_search_input { margin-right: 12px; } .ip_search_block .rowitem, #profile_left_pane .topBlock { display: flex; } #profile_left_lane { margin-left: 8px; margin-right: 4px; } #profile_left_pane .topBlock { flex-direction: column; padding-bottom: 12px; border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); background-color: var(--element-background-color); } #profile_left_pane .avatarRow { padding: 28px; padding-bottom: 4px; padding-top: 22px; } #profile_left_pane .avatar { border-radius: 80px; height: 100px; width: 100px; } #profile_left_pane .nameRow { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; } #profile_left_pane .nameRow .username { text-align: center; } #profile_left_pane .profileName { font-size: 19px; } .rowmenu .passive { border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); background-color: var(--element-background-color); margin-top: 6px; padding: 12px; padding-top: 10px; padding-bottom: 10px; } .colstack:not(#profile_container) .rowmenu { padding-left: 12px; } .colstack:not(#profile_container) .rowmenu .passive { margin-top: 0px; border-bottom: none; } .colstack:not(#profile_container) .rowmenu .passive:last-child { border-bottom: 2px solid var(--element-border-color); } #profile_left_pane .passiveBlock .passive { padding-left: 12px; } #profile_right_lane { width: 100%; margin-right: 12px; } .colstack_right .colstack_item:not(.rowlist):not(#profile_comments), #profile_comments .comment, .alert { border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); background-color: var(--element-background-color); } .alert { padding: 12px; margin-top: -3px; margin-bottom: 8px; margin-left: 12px; margin-right: 12px; } .colstack_right .alert { margin-left: 16px; margin-right: 0px; } .colstack_right .colstack_item, .colstack_right .colstack_grid { margin-left: 16px; } #profile_right_lane .topic_reply_form { width: auto; } #profile_comments .topRow { display: flex; } #profile_comments .topRow .controls { padding-top: 16px; padding-right: 16px; } #profile_comments .content_column { margin-bottom: 16px; } #profile_comments button { background: inherit; color: var(--lighter-text-color); padding-left: 8px; padding-right: 8px; cursor: pointer; } #profile_comments button:hover { color: var(--light-text-color); } #profile_comments button.edit_item:after, #profile_comments button.delete_item:after, #profile_comments button.report_item:after { font: normal normal normal 14px/1 FontAwesome; } #profile_comments button.edit_item:after { content: "\f040"; } #profile_comments button.delete_item:after { content: "\f1f8"; } #profile_comments button.report_item:after { content: "\f024"; } #profile_comments_head { margin-top: 6px; } #profile_comments { margin-bottom: 12px; } #profile_comments:empty { display: none !important; } #profile_comments .rowitem { background-image: none !important; } #profile_comments .comment:not(:last-child) { margin-bottom: 8px; } #profile_comments .comment .userbit { display: flex; margin-left: 14px; margin-top: 14px; margin-bottom: 8px; } #profile_comments .comment img { width: 40px; height: 40px; border-radius: 62px; margin-right: 8px; } #profile_comments .comment .nameAndTitle { display: flex; flex-direction: column; margin-top: 2px; } #profile_comments .comment .nameAndTitle .user_tag { font-size: 15px; } #profile_comments .comment .content_column { padding-left: 14px; padding-right: 14px; display: flex; width: 100% } #profile_comments .comment .controls { margin-left: auto; } #profile_comments_form .topic_reply_form { border-top: 1px solid var(--element-border-color) !important; } .formitem:only-child { width: 100%; display: flex; } .the_form .formitem:only-child button { margin-left: auto; margin-right: auto; } .quick_reply_form, .topic_reply_form, .the_form { background: var(--element-background-color); } .formrow { border-right: none !important; } .to_right { float: right; margin-left: auto; } #account_edit_avatar .avatar_box { margin-bottom: 10px; } #create_topic_page .close_form, #create_topic_page .formlabel, #login_page .formlabel { display: none; } .formrow:not(:first-child):not(:last-child) { margin-top: 4px; } .formrow:not(:first-child) { padding-top: 3px; } .formrow { padding: 16px; } .formrow:not(:last-child) { padding-bottom: 4px; } #login_page .formrow:not(:last-child) { padding-bottom: 0px; } .formlabel { display: block; font-size: 15px; } .quick_create_form .formrow { padding: 0px; } #register_page .register_button_row { padding: 12px !important; padding-top: 0px !important; margin-top: -2px !important; } #register_page .register_button_row .formbutton { margin-left: 2px; } /* TODO: Add a generic button_row class and add this to them all? */ .login_button_row { display: flex; } .dont_have_account { color: var(--primary-link-color); font-size: 12px; margin-left: auto; margin-top: 23px; } /* TODO: Highlight the one we're currently on? */ .pageset { display: flex; margin-left: 14px; } .pageitem { padding: 8px; padding-left: 10px; padding-right: 10px; background: var(--element-background-color); border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); border-left: none; border-right: none; } .pageitem:first-child { border-left: 1px solid var(--element-border-color); } .pageitem:last-child { border-right: 1px solid var(--element-border-color); } /* TODO: Make widget_about's CSS less footer centric */ .footerBit, .footer .widget { border-top: 1px solid var(--element-border-color); padding: 12px; padding-top: 10px; padding-bottom: 10px; margin-left: -8px; margin-right: -8px; background-color: var(--element-background-color); display: flex; } #poweredByHolder { border-bottom: 2px solid var(--element-border-color); } .about, #poweredBy { font-size: 17px; display: flex; flex-direction: column; } #poweredBy { margin-right: auto; } #poweredBy span { font-size: 16px; } #aboutTitle { font-size: 17px; margin: 8px; margin-bottom: 4px; } #poweredByName { font-size: 17px; margin: 4px; } #aboutDesc { margin-left: 8px; margin-top: 8px; width: 60%; font-size: 16px; } #aboutDesc p { -webkit-margin-before: 12px; -webkit-margin-after: 12px; } #aboutDesc p:last-child { -webkit-margin-after: 8px; } #aboutDesc p:first-child { -webkit-margin-before: 0px; } #poweredByDash, #poweredByMaker { display: none; } #themeSelectorSelect { padding: 3px; margin-top: 0px; } .colstack_grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; } .grid_item { background: var(--element-background-color); border: 1px solid var(--element-border-color); border-bottom: 2px solid var(--element-border-color); margin: 0px; padding: 16px; padding-left: 0px; display: flex; padding-top: 0px; padding-bottom: 0px; padding-right: 10px; } .grid_item span { margin-top: 16px; margin-bottom: 16px; margin-left: auto; margin-right: auto; text-align: center; } /* TODO: Move these to panel.css */ #dash-version:before, #dash-cpu:before, #dash-ram:before, #dash-totonline:before, #dash-gonline:before, #dash-uonline:before, #dash-reqs:before, #dash-postsperday:before, #dash-topicsperday:before { display: inline-block; background: var(--tinted-background-color); font: normal normal normal 14px/1 FontAwesome; font-size: 20px; padding-left: 17px; padding-top: 16px; padding-right: 19px; color: hsl(0,0%,20%); } #dash-version:before { content: "\f126"; } #dash-cpu:before { content: "\f2db"; } #dash-ram:before { content: "\f233"; } #dash-totonline:before, #dash-gonline:before, #dash-uonline:before { content: "\f007"; } #dash-reqs:before { content: "\f080"; } #dash-postsperday:before, #dash-topicsperday:before { content: "\f27b"; } @media(min-width: 1000px) { .footer { margin-left: -8px; margin-right: -8px; } .footerBit, .footer .widget { border-top: 1px solid var(--header-border-color); border-left: 1px solid var(--header-border-color); border-right: 1px solid var(--header-border-color); } #poweredByHolder { border-bottom: 2px solid var(--header-border-color); } #main { max-width: 1000px; margin-left: auto; margin-right: auto; } .footer { max-width: 1000px; margin-left: auto; margin-right: auto; } #main { padding-top: 18px; padding-left: 16px; padding-right: 16px; border-left: 1px solid hsl(20,0%,95%); border-right: 1px solid hsl(20,0%,95%); } .footer { padding-left: 8px; padding-right: 8px; } #back, .footer, .footBlock { background-color: hsl(0,0%,95%); } #back:not(.zone_panel) .footBlock { display: flex; } } @media(min-width: 721px) { .hide_on_big { display: none; } } @media(max-width: 720px) { .menu_profile, .ip_item { display: none; } .like_count { margin-right: 1px; } .like_count:after { margin-right: 6px; } .created_at:before, .ip_item:before { margin-right: 6px; } } @media(max-width: 670px) { .topic_inner_right { display: none; } } @media(max-width: 620px) { .userinfo .avatar_item { width: 72px; height: 72px; } } @media(max-width: 610px) { .userinfo { padding-top: 24px; padding-left: 34px; padding-right: 34px; padding-bottom: 14px; } .userinfo .avatar_item { height: 64px; width: 64px; /*background-size: 82px;*/ } } @media(max-width: 590px) { #main { padding-left: 4px; padding-right: 4px; } .post_item { margin-bottom: 12px; } .userinfo { margin-right: 12px; padding-top: 20px; padding-left: 24px; padding-right: 24px; padding-bottom: 12px; } .userinfo .avatar_item { width: 52px; height: 52px; margin-bottom: 10px; background-size: 72px; margin-left: auto; margin-right: auto; } .post_tag { font-size: 15px; } .content_container { padding: 15px; } } @media(max-width: 550px) { .nav { border-bottom: 1px solid var(--header-border-color); } .menu_profile { display: block; } #menu_overview { font-size: 18px; background-color: hsl(0,0%,97%); margin-top: -16px; margin-bottom: -11px; margin-left: -14px; margin-right: 16px; padding-top: 16px; padding-left: 14px; padding-right: 4px; } #menu_overview::after { height: 16px !important; } .menu_left a:after { content: "" !important; } .menu_left:not(:last-child):after, .menu_alerts:after { margin-left: 4px; border-right: none; } .menu_alerts { margin-right: 16px; } .alert_bell { position: relative; bottom: -1px; } .alert_bell:before { font-size: 17px; } .alert_aftercounter { display: none; } #back { padding-top: 0px; } .rowhead h1, .opthead h1, .colstack_head h1 { font-size: 18px; } main > .rowhead, #main > .rowhead { border: none; border-bottom: 2px solid var(--header-border-color); } #main { padding-top: 0px; } main > .rowhead, #main > .rowhead, main > .opthead, #main > .opthead { margin-left: -3px; margin-right: -3px; } .topic_list { display: flex; flex-wrap: wrap; } .topic_list .topic_row { display: block; width: calc(50% - 6px); float: left; } .topic_list .topic_row:nth-child(odd) { margin-right: 12px; } .topic_left { margin-bottom: 0px; border-bottom: none; border-right: 1px solid var(--element-border-color); } .topic_left .parent_forum { display: none; } .topic_right.rowitem { border-top: none; border-left: 1px solid var(--element-border-color); background-color: hsl(0,0%,95%); } .topic_right_inside br, .topic_right_inside img { display: none; } .topic_sticky .topic_right { border-bottom: 2px solid var(--element-border-color); } .topic_right_inside > span { margin-top: 6px; margin-bottom: 6px; } .topic_name_forum_sep { line-height: 22px; font-size: 18px; } .topic_forum { line-height: 20px; } .button_container { border-top: 1px solid var(--element-border-color); } .action_button { padding-bottom: 15px; padding-left: 10px; padding-right: 8px; padding-top: 15px; font-size: 12px; } .action_button:not(.add_like):not(.remove_like) { font: normal normal normal 14px/1 FontAwesome; } .has_likes .action_button_right { margin-left: 0px; width: 100%; } .like_item { background-color: hsl(0,0%,97%); } .post_item:not(.top_post) .like_item { border-bottom: 1px solid var(--element-border-color); } .post_item .add_like:after, .post_item .remove_like:after { border-left: none; margin: inherit; } .content_container { padding: 0px; } .post_item .user_content { padding: 12px; margin-bottom: 0px; } .button_container .open_edit:after, .edit_item:after{ content: "\f040"; } .delete_item:after { content: "\f014"; } .ip_item_button:after { content: "\f0ac"; } .lock_item:after { content: "\f023"; } .unlock_item:after { content: "\f09c"; } .pin_item:after, .unpin_item:after { content: "\f08d"; } .report_item:not(.profile_menu_item):after { content: "\f024"; } .unpin_item, .unlock_item { background-color: hsl(80,50%,97%); } .like_count, .like_count:before { font-family: arial; } .like_count:after { content: ""; } .like_count:before { content: "{{index .Phrases "topic.plus"}}"; font-weight: normal; } .created_at { margin-left: auto; } .created_at:before { border-left: none; margin: inherit; } .topic_reply_form .trumbowyg-editor { padding: 15px; } .trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before { font-size: 15px; } .trumbowyg-button-pane .trumbowyg-button-group:first-child { margin-left: 0px !important; } .trumbowyg-button-pane .trumbowyg-button-group:after, .trumbowyg-button-pane .trumbowyg-button-group:first-child:before { margin: inherit !important; border: none !important; } } @media(min-width: 521px) { .button_menu { display: none; } } @media(max-width: 520px) { .edit_item, .button_container .open_edit, .delete_item, .pin_item, .unpin_item, .lock_item, .unlock_item, .ip_item_button, .report_item:not(.profile_menu_item) { display: none; } .button_menu:after { content: "\f013"; } .button_menu_pane { display: flex; flex-direction: column; background-color: var(--element-background-color); border: 2px solid var(--element-border-color); position: fixed; left: 50%; top: 110px; width: 300px; transform: translateX(-50%); z-index: 200; } .button_menu_pane > *:not(:last-child) { border-bottom: 1px solid var(--element-border-color); } .button_menu_pane .userinfo { display: flex; flex-direction: row; width: 100%; padding-top: 12px; } .button_menu_pane .avatar_item { width: 42px; height: 42px; background-size: 62px; margin-left: 0px; margin-right: 10px; margin-bottom: 0px; } .button_menu_pane .userinfo .the_name { margin-right: 0px; } /* TODO: Make this grid more flexible so that plugins can add new items more easily */ .button_menu_pane .buttonGrid { display: grid; grid-template-columns: repeat(8, 1fr); border-left: 1px solid var(--element-border-color); border-bottom: 1px solid var(--element-border-color); } .button_menu_pane .action_button { display: flex; margin: 0px; padding-left: 0px; padding-right: 0px; background-color: var(--element-background-color); margin-left: auto; margin-right: auto; width: 42px; height: 42px; font-size: 15px; border-right: 1px solid var(--element-border-color); border-bottom: 1px solid var(--element-border-color); } .button_menu_pane .action_button:nth-child(8n) { border-right: none; } .button_menu_pane .action_button:nth-last-child(-n+8) { border-bottom: none; } .button_menu_pane .action_button:after, .button_menu_pane .add_like:before, .button_menu_pane .remove_like:before { margin-left: auto; margin-right: auto; } .button_menu_pane .open_edit:after { content: "\f040"; } .button_menu_pane .gridFiller { background-color: var(--tinted-background-color); } } @media(max-width: 450px) { .topic_list .topic_row { display: block; width: 100%; float: none; } .topic_list .topic_row:nth-child(odd) { margin-right: 0px; } } @media(max-width: 440px) { #main { padding-left: 0px; padding-right: 0px; } .userinfo { padding-left: 18px; padding-right: 18px; margin-right: 10px; } .the_name { font-size: 17px; } }