d9acf27c5b
Added AJAX Pagination for the Topic List and Forum Page. A new log file pair is now created every-time Gosora starts up. Added proper per-theme template overrides. Added EasyJSON to make JSON serialisation faster. Moved a bit of boilerplate into paginator.html Improved paginator.html with a richer template with first, last and symbols instead of text. Phased out direct access to Templates.ExecuteTemplate across the software. Fixed the Live Topic List so it should work again. Added MicroAvatar to WsJSONUser for topic list JSON requests. An instance of the plugin is now passed to plugin handlers rather than having the plugins manipulate the globals directly. Added the pre_render_panel_forum_edit and pre_render_panel_forum_edit_perms hooks to replace pre_render_panel_edit_forum. Renamed the pre_render_panel_edit_user hook to pre_render_panel_user_edit Reduced the amount of noise from fsnotify. Added RawPrepare() to qgen.Accumulator. Added a temporary phrase whitelist to the phrase endpoint. Moved the location of the zone data assignments in the topic list to reduce the chances of security issues in the future. Changed the signature of routes/panel/renderTemplate() requiring some changes across the panel routes. Removed bits of boilerplate in some of the panel routes with renderTemplate() Added a BenchmarkTopicsGuestJSRouteParallelWithRouter benchmark. Removed a fair bit of boilerplate for each page struct by generating a couple of interface casts for each template file instead. Added the profile_comments_row_alt template. Added the topics_quick_topic template to reuse part of the quick topic logic for both the topic list and forum page. Tweaked the CSS for the Online Users Widget. Tweaked the CSS for Widgets in every theme with a sidebar. Refactored the template initialisers to hopefully reduce the amount of boilerplate and make things easier to maintain and follow. Add genIntTmpl in the template initialiser file to reduce the amount of boilerplate needed for the fallback template bindings. Removed the topics_head phrase. Moved the paginator_ phrases into the paginator. namespace and renamed them accordingly. Added the paginator.first_page phrase. Added the paginator.first_page_aria phrase. Added the paginator.last_page phrase. Added the paginator.last_page_aria phrase. Added the panel_forum_delete_are_you_sure phrase. Fixed a data race in LogWarning()
1322 lines
24 KiB
CSS
1322 lines
24 KiB
CSS
:root {
|
|
--darkest-background: #222222;
|
|
--second-dark-background: #292929;
|
|
--third-dark-background: #333333;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
color: #AAAAAA;
|
|
background-color: var(--darkest-background);
|
|
font-family: "Segoe UI";
|
|
}
|
|
a {
|
|
color: #eeeeee;
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav.nav {
|
|
background: var(--darkest-background);
|
|
width: calc(100% - 200px);
|
|
float: left;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
clear: both;
|
|
}
|
|
li {
|
|
float: left;
|
|
margin-right: 12px;
|
|
}
|
|
li a {
|
|
padding-top: 35px;
|
|
padding-bottom: 22px;
|
|
font-size: 18px;
|
|
display: inline-block;
|
|
color: #aaaaaa;
|
|
}
|
|
#menu_overview {
|
|
margin-right: 24px;
|
|
}
|
|
#menu_overview a {
|
|
font-size: 22px;
|
|
padding-bottom: 21px;
|
|
color: rgb(221,221,221);
|
|
padding-top: 31px;
|
|
}
|
|
.menu_left.menu_active a {
|
|
border-bottom: 2px solid #777777;
|
|
padding-bottom: 21px;
|
|
color: #dddddd;
|
|
}
|
|
.menu_alerts .alert_bell,
|
|
.menu_alerts .alert_counter,
|
|
.menu_alerts:not(.selectedAlert) .alertList {
|
|
display: none;
|
|
}
|
|
.alertList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #444444;
|
|
position: absolute;
|
|
border: 1px solid #333333;
|
|
top: 82px;
|
|
border-top: none;
|
|
right: 0px;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
.alertItem {
|
|
padding: 10px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
.alertItem.withAvatar {
|
|
background: none !important;
|
|
height: 66px;
|
|
padding-top: 4px;
|
|
display: flex;
|
|
padding: 16px;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
.alertItem.withAvatar:not(:last-child) {
|
|
border-bottom: 1px solid #555555;
|
|
}
|
|
.alertItem.withAvatar .bgsub {
|
|
height: 36px;
|
|
width: 36px;
|
|
border-radius: 32px;
|
|
}
|
|
.alertItem.withAvatar .text {
|
|
margin-left: 12px;
|
|
padding-top: 5px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.right_of_nav {
|
|
float: left;
|
|
width: 200px;
|
|
background-color: var(--darkest-background);
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
.user_box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-radius: 3px;
|
|
background-color: var(--third-dark-background);
|
|
padding-top: 11px;
|
|
padding-bottom: 11px;
|
|
padding-left: 12px;
|
|
}
|
|
.user_box.has_alerts {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
border: 1px solid #444444;
|
|
}
|
|
.user_box img {
|
|
display: block;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 32px;
|
|
margin-right: 8px;
|
|
}
|
|
.user_box .username {
|
|
display: block;
|
|
font-size: 16px;
|
|
padding-top: 4px;
|
|
line-height: 10px;
|
|
}
|
|
.user_box .alerts {
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
}
|
|
.container {
|
|
clear: both;
|
|
}
|
|
#back {
|
|
background: var(--third-dark-background);
|
|
padding: 24px;
|
|
padding-top: 12px;
|
|
clear: both;
|
|
display: flex;
|
|
}
|
|
#main, #main .rowblock {
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 320px;
|
|
}
|
|
.widget_simple .rowitem {
|
|
line-height: 18px;
|
|
padding-top: 14px !important;
|
|
padding-bottom: 14px !important;
|
|
}
|
|
.the_form {
|
|
border-radius: 3px;
|
|
background-color: #444444;
|
|
padding: 16px;
|
|
}
|
|
.rowblock:not(.topic_list):not(.rowhead):not(.opthead) .rowitem:not(.post_item) {
|
|
border-radius: 3px;
|
|
background-color: #444444;
|
|
display: flex;
|
|
padding: 12px;
|
|
}
|
|
.sidebar .rowblock:not(.topic_list):not(.rowhead):not(.opthead) .rowitem {
|
|
margin-left: 12px;
|
|
}
|
|
.sidebar .search {
|
|
margin-left: 12px;
|
|
}
|
|
.widget_search:first-child {
|
|
margin-top: 36px;
|
|
}
|
|
.widget_search input {
|
|
width: 100%;
|
|
height: 30px;
|
|
margin-left: 0px;
|
|
}
|
|
.filter_list {
|
|
margin-top: 5px;
|
|
}
|
|
.colstack_right .colstack_item:not(.colstack_head):not(.rowhead) .rowitem {
|
|
border-radius: 3px;
|
|
background-color: #444444;
|
|
padding: 16px;
|
|
}
|
|
.filter_item {
|
|
margin-bottom: 5px;
|
|
padding: 4px;
|
|
}
|
|
.filter_item a {
|
|
color: #BBBBBB;
|
|
}
|
|
.colstack_right .colstack_item:not(.colstack_head):not(.rowhead) .rowitem:not(:last-child) {
|
|
margin-bottom: 8px;
|
|
}
|
|
.colstack_right .colstack_head:not(:first-child) {
|
|
margin-top: 16px;
|
|
}
|
|
.rowmsg {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
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;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* new */
|
|
.filter_list {
|
|
margin-top: 5px;
|
|
background-color: #444444;
|
|
margin-left: 12px;
|
|
border-radius: 3px;
|
|
}
|
|
.filter_item {
|
|
margin-left: 0px !important;
|
|
}
|
|
.filter_selected {
|
|
background-color: #555555 !important;
|
|
border-radius: 0px !important;
|
|
}
|
|
/* new end */
|
|
|
|
@keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.modal_pane {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #444444;
|
|
border: 2px solid #333333;
|
|
border-radius: 5px;
|
|
padding: 12px;
|
|
padding-top: 8px;
|
|
z-index: 9999;
|
|
animation: fadein 0.8s;
|
|
}
|
|
.pane_header {
|
|
margin-bottom: 2px;
|
|
}
|
|
.pane_row {
|
|
margin-top: 2px;
|
|
}
|
|
.pane_buttons {
|
|
margin-top: 8px;
|
|
}
|
|
.mod_floater {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
background: #444444;
|
|
border-radius: 5px;
|
|
padding: 12px;
|
|
padding-top: 8px;
|
|
width: 200px;
|
|
}
|
|
.mod_floater_head span {
|
|
margin-bottom: 6px;
|
|
display: block;
|
|
}
|
|
.mod_floater_body {
|
|
display: flex;
|
|
}
|
|
.mod_floater_options {
|
|
width: 100%;
|
|
margin-right: 10px;
|
|
padding: 4px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.rowhead, .opthead, .colstack_head {
|
|
margin-left: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.rowhead h1, .opthead h1, .colstack_head h1 {
|
|
font-size: 21px;
|
|
}
|
|
.sidebar .rowhead {
|
|
margin-left: 18px;
|
|
margin-top: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.sidebar .rowhead h1 {
|
|
font-size: 20px;
|
|
}
|
|
.sidebar .rowhead:not(:first-child) h1 {
|
|
margin-top: 12px;
|
|
font-size: 19px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 18px;
|
|
margin-top: 12px;
|
|
margin-bottom: 8px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.topic_create_form {
|
|
display: flex;
|
|
}
|
|
.quick_reply_form, .topic_reply_form, .topic_create_form {
|
|
background-color: #444444;
|
|
border-radius: 3px;
|
|
}
|
|
.quick_create_form {
|
|
margin-bottom: 8px;
|
|
padding: 16px;
|
|
}
|
|
.quick_create_form .little_row_avatar {
|
|
border-radius: 36px;
|
|
margin-left: 4px;
|
|
margin-right: 20px;
|
|
height: 48px;
|
|
width: 48px;
|
|
}
|
|
.quick_create_form .main_form {
|
|
width: 80%;
|
|
}
|
|
.quick_create_form .topic_meta {
|
|
display: flex;
|
|
}
|
|
.quick_create_form input, .quick_create_form select {
|
|
margin-left: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.quick_create_form .topic_meta .topic_name_row {
|
|
margin-bottom: 8px;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
}
|
|
.quick_create_form .topic_meta .topic_name_row:not(:only-child) {
|
|
margin-left: 6px;
|
|
}
|
|
.quick_create_form .topic_meta .topic_name_row:only-child input {
|
|
margin-left: 0px;
|
|
}
|
|
.quick_create_form .topic_meta .topic_name_row input {
|
|
width: 100%;
|
|
}
|
|
.quick_create_form .topic_content_row textarea {
|
|
width: 100%;
|
|
height: 60px;
|
|
resize: vertical;
|
|
}
|
|
.quick_create_form .quick_button_row .formitem {
|
|
display: flex;
|
|
margin-top: 6px;
|
|
}
|
|
.quick_create_form .quick_button_row button, .quick_create_form .quick_button_row label {
|
|
margin-right: 8px;
|
|
}
|
|
.quick_create_form #input_content {
|
|
width: 100%;
|
|
height: 100px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.more_topic_block_initial {
|
|
display: none;
|
|
}
|
|
.more_topic_block_active {
|
|
display: block;
|
|
}
|
|
|
|
.hide_ajax_topic,
|
|
.auto_hide,
|
|
.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 !important;
|
|
}
|
|
|
|
.topic_list_title_block {
|
|
display: flex;
|
|
margin-left: 8px;
|
|
}
|
|
.topic_list_title {
|
|
margin-left: 2px;
|
|
}
|
|
.topic_list_title_block .optbox {
|
|
display: flex;
|
|
font-size: 17px;
|
|
margin-top: 3.5px;
|
|
margin-right: 16px;
|
|
margin-right: 18px;
|
|
width: 100%;
|
|
}
|
|
.topic_list_title_block .pre_opt:before {
|
|
content: "{{lang "topics_click_topics_to_select" . }}";
|
|
font-size: 17px;
|
|
margin-right: 20px;
|
|
}
|
|
.topic_list_title_block .opt a {
|
|
color: #afafaf;
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
.topic_list_title_block .create_topic_opt a:before {
|
|
content: "{{lang "quick_topic.create_topic_button" . }}";
|
|
}
|
|
.topic_list_title_block .mod_opt a:before {
|
|
content: "{{lang "topic_list.moderate" . }}";
|
|
}
|
|
|
|
.filter_opt, .dummy_opt {
|
|
margin-right: auto;
|
|
}
|
|
.filter_opt.opt a.filter_opt_label {
|
|
font-size: 18px;
|
|
margin-left: 5px;
|
|
}
|
|
.filter_opt_pointy {
|
|
margin-left: -5px;
|
|
}
|
|
.link_select {
|
|
background: #333333;
|
|
background-color: #444444;
|
|
position: absolute;
|
|
border: 1px solid #333333;
|
|
padding: 16px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
.link_select .link_option a {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.topic_row:not(:last-child) {
|
|
margin-bottom: 8px;
|
|
}
|
|
.topic_row {
|
|
border-radius: 3px;
|
|
background-color: #444444;
|
|
display: flex;
|
|
}
|
|
.topic_left, .topic_right, .topic_middle {
|
|
padding: 16px;
|
|
padding-bottom: 10px;
|
|
padding-top: 16px;
|
|
display: flex;
|
|
width: 33%;
|
|
}
|
|
.topic_middle {
|
|
line-height: 20px;
|
|
}
|
|
.topic_left {
|
|
margin-right: auto;
|
|
}
|
|
.topic_sticky .topic_left {
|
|
border-left: 3px solid rgb(215, 155, 0);
|
|
border-radius: 3px;
|
|
}
|
|
.topic_closed .topic_left {
|
|
border-left: 3px solid grey;
|
|
border-radius: 3px;
|
|
}
|
|
.topic_closed {
|
|
background-color: #4b4b4b;
|
|
}
|
|
.topic_selected {
|
|
background-color: rgb(68, 68, 88);
|
|
}
|
|
.new_item .topic_left {
|
|
border-left: 3px solid rgb(215, 215, 215);
|
|
border-radius: 3px;
|
|
}
|
|
.topic_left img, .topic_right img {
|
|
border-radius: 24px;
|
|
height: 38px;
|
|
width: 38px;
|
|
margin-right: 10px;
|
|
}
|
|
.topic_inner_left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 92%;
|
|
}
|
|
.topic_inner_left .rowtopic {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.topic_inner_left .parent_forum {
|
|
display: none; /* Comment this until we figure out how to make it work */
|
|
}
|
|
.topic_right_inside {
|
|
display: flex;
|
|
margin-left: auto;
|
|
width: 180px;
|
|
}
|
|
.topic_right_inside .lastName, .topic_left .rowtopic {
|
|
font-size: 15px !important;
|
|
line-height: 22px;
|
|
margin-top: -2px;
|
|
}
|
|
.topic_right_inside .lastReplyAt, .topic_left .starter {
|
|
font-size: 14px;
|
|
line-height: 14px;
|
|
}
|
|
.topic_right_inside span {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.topic_inner_left br,
|
|
.topic_right_inside br,
|
|
.topic_inner_right,
|
|
.topic_list:not(.topic_list_mostviewed) .topic_middle .viewCount,
|
|
.topic_list_mostviewed .topic_middle .likeCount {
|
|
display: none;
|
|
}
|
|
.topic_middle_inside {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: -3px;
|
|
width: 80px;
|
|
}
|
|
.topic_status_e {
|
|
display: none;
|
|
}
|
|
|
|
/* TODO: Make a generic version of this so that we can have more blocks which are initially hidden but flip over to visible under certain conditions */
|
|
.more_topic_block_initial {
|
|
display: none;
|
|
}
|
|
.more_topic_block_active {
|
|
display: block;
|
|
}
|
|
|
|
input, select, button, .formbutton, .panel_right_button:not(.has_inner_button), textarea {
|
|
border-radius: 3px;
|
|
background: rgb(90,90,90);
|
|
color: rgb(200,200,200);
|
|
border: none;
|
|
padding: 4px;
|
|
}
|
|
input:focus, select:focus, textarea:focus {
|
|
outline: 1px solid rgb(120,120,120);
|
|
}
|
|
input:not(input[type=search]):not(input[type=submit]) {
|
|
background-image: url(./fa-svg/pencil-alt.svg);
|
|
background-size: 12px;
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px bottom 9px;
|
|
background-position-x: right 10px;
|
|
}
|
|
input {
|
|
padding: 5px;
|
|
padding-bottom: 3px;
|
|
font-size: 16px;
|
|
}
|
|
input, select {
|
|
margin-left: 3px;
|
|
margin-bottom: 4px;
|
|
}
|
|
button, .formbutton, .panel_right_button:not(.has_inner_button) {
|
|
background: rgb(110,110,210);
|
|
color: rgb(250,250,250);
|
|
font-family: "Segoe UI";
|
|
font-size: 15px;
|
|
text-align: center;
|
|
padding: 6px;
|
|
}
|
|
.formlabel {
|
|
margin-bottom: 4px;
|
|
}
|
|
/*.formlabel + .formitem {
|
|
margin-left: 4px;
|
|
}*/
|
|
.formrow {
|
|
margin-bottom: 6px;
|
|
}
|
|
.form_button_row {
|
|
margin-top: 10px;
|
|
}
|
|
.formitem a {
|
|
margin-bottom: 5px;
|
|
display: block;
|
|
}
|
|
|
|
.login_mfa_token_row .formlabel {
|
|
display: none;
|
|
}
|
|
|
|
.pageset {
|
|
display: flex;
|
|
margin-top: 8px;
|
|
}
|
|
.pageitem {
|
|
font-size: 17px;
|
|
border-radius: 3px;
|
|
background-color: #444444;
|
|
padding: 7px;
|
|
margin-right: 6px;
|
|
}
|
|
.pagefirst, .pagenext, .pageprev, .pagelast {
|
|
padding-top: 2px;
|
|
padding-bottom: 6px;
|
|
}
|
|
.pagefirst a, .pagenext a, .pageprev a, .pagelast a {
|
|
font-size: 22px;
|
|
}
|
|
|
|
#prevFloat, #nextFloat {
|
|
display: none;
|
|
}
|
|
.forum_list .rowitem {
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
}
|
|
.forum_list .forum_left {
|
|
margin-left: 8px;
|
|
}
|
|
.forum_list .forum_nodesc {
|
|
font-style: italic;
|
|
}
|
|
.forum_list .forum_right {
|
|
display: flex;
|
|
margin-left: auto;
|
|
margin-right: 8px;
|
|
padding-top: 2px;
|
|
width: 155px;
|
|
}
|
|
.forum_list .forum_right img {
|
|
margin-right: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
.forum_list .forum_right span {
|
|
line-height: 19px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.forum_list .forum_right span a {
|
|
white-space: nowrap;
|
|
}
|
|
.extra_little_row_avatar {
|
|
border-radius: 24px;
|
|
height: 36px;
|
|
width: 36px;
|
|
}
|
|
|
|
.colstack, .topic_item {
|
|
display: flex;
|
|
}
|
|
|
|
.topic_item .topic_name_forum_sep {
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
margin-left: 7px;
|
|
margin-right: 7px;
|
|
}
|
|
.topic_item .topic_forum {
|
|
font-size: 19px;
|
|
line-height: 30px;
|
|
color: #cccccc;
|
|
}
|
|
.topic_view_count {
|
|
font-size: 17px;
|
|
margin-left: auto;
|
|
margin-right: 20px;
|
|
margin-top: 6px;
|
|
}
|
|
.topic_view_count:after {
|
|
content: "{{lang "topic.view_count_suffix" . }}";
|
|
}
|
|
.edithead {
|
|
margin-left: 0px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.topic_name_input {
|
|
width: 100%;
|
|
margin-right: 10px;
|
|
margin-bottom: 0px;
|
|
margin-left: 0px;
|
|
margin-left: 0px;
|
|
}
|
|
.topic_item .submit_edit {
|
|
/*margin-right: 16px;*/
|
|
}
|
|
.zone_view_topic button, .zone_view_topic .formbutton {
|
|
padding: 5px;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
.postImage {
|
|
width: 100%;
|
|
max-width: 320px;
|
|
}
|
|
.post_item {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
}
|
|
.userinfo {
|
|
margin-right: 12px;
|
|
padding: 24px;
|
|
padding-bottom: 16px;
|
|
background-color: #444444;
|
|
border-radius: 3px;
|
|
width: 150px;
|
|
}
|
|
.userinfo, .user_meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.avatar_item {
|
|
border-radius: 36px;
|
|
height: 58px;
|
|
width: 58px;
|
|
background-size: 78px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.the_name {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
white-space: nowrap;
|
|
display: block;
|
|
font-size: 18px;
|
|
margin-top: 8px;
|
|
line-height: 16px;
|
|
}
|
|
.tag_block {
|
|
display: flex;
|
|
}
|
|
.post_tag {
|
|
white-space: nowrap;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
.post_item .topic_content_input {
|
|
resize: vertical;
|
|
height: 150px;
|
|
padding: 16px;
|
|
}
|
|
.post_item .content_container {
|
|
border-radius: 3px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #bbbbbb;
|
|
}
|
|
.action_item .content_container, .post_item .user_content, .post_item .button_container {
|
|
background-color: #444444;
|
|
border-radius: 3px;
|
|
padding: 16px;
|
|
}
|
|
.user_content.in_edit {
|
|
padding: 0px;
|
|
background: none;
|
|
}
|
|
.user_content textarea {
|
|
resize: vertical;
|
|
height: 150px;
|
|
width: 100% !important;
|
|
padding: 16px;
|
|
}
|
|
.user_content.in_edit a {
|
|
display: flex;
|
|
background-color: #444444;
|
|
border-radius: 4px;
|
|
margin-top: 4px; /*8 without <br>*/
|
|
padding: 6px;
|
|
}
|
|
.post_item .button_container {
|
|
display: flex;
|
|
margin-top: 8px;
|
|
margin-bottom: auto;
|
|
padding: 14px;
|
|
}
|
|
.post_item .action_button {
|
|
margin-right: 5px;
|
|
font-size: 15px;
|
|
color: #dddddd;
|
|
white-space: nowrap;
|
|
}
|
|
.post_item .action_button_left, .post_item .action_button_right {
|
|
display: flex;
|
|
}
|
|
.post_item .action_button_right {
|
|
margin-left: auto;
|
|
}
|
|
.post_item .controls:not(.has_likes) .like_count, .action_item .userinfo, .action_item .action_icon {
|
|
display: none;
|
|
}
|
|
.action_item .content_container {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
.action_item .content_container span {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
input[type=checkbox] + label {
|
|
display: inline-flex;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-bottom: -2px;
|
|
margin-right: 8px;
|
|
border: 1px solid rgb(120,120,120);
|
|
background-color: rgb(90,90,90);
|
|
padding-top: 1px;
|
|
border-radius: 2px;
|
|
}
|
|
input[type=checkbox]:checked + label .sel {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: rgb(160,160,160);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
border-radius: 2px;
|
|
}
|
|
.poll_option {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
.poll_option_text {
|
|
line-height: 14px;
|
|
}
|
|
.poll_buttons {
|
|
padding-top: 4px;
|
|
}
|
|
.poll_buttons button {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.ip_item {
|
|
display: none;
|
|
}
|
|
|
|
.add_like:before, .remove_like:before {
|
|
content: "{{lang "topic.plus_one" . }}";
|
|
}
|
|
.button_container .open_edit:after, .edit_item:after {
|
|
content: "{{lang "topic.edit_button_text" . }}";
|
|
}
|
|
.ip_item_button:after {
|
|
content: "{{lang "topic.ip_button_text" . }}";
|
|
}{{$p := .}}
|
|
{{range (toArr "delete" "lock" "unlock" "pin" "unpin" "report")}}
|
|
.{{.}}_item:after {
|
|
content: "{{lang (concat "topic." . "_button_text") ($p) }}";
|
|
}{{end}}
|
|
.like_count:after {
|
|
content: "{{lang "topic.like_count_suffix" . }}";
|
|
}
|
|
|
|
/*.attach_edit_bay {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}*/
|
|
.attach_item {
|
|
display: flex;
|
|
background-color: #444444;
|
|
border-radius: 4px;
|
|
margin-top: 8px;
|
|
padding: 6px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.attach_item_selected {
|
|
background-color: #446644
|
|
}
|
|
.attach_item img {
|
|
margin-right: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
.attach_image_holder span {
|
|
margin-bottom: 4px;
|
|
}
|
|
.attach_edit_bay button {
|
|
margin-top: 8px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* New */
|
|
.attach_item {
|
|
padding: 8px;
|
|
width: 100%;
|
|
}
|
|
.attach_image_holder span {
|
|
margin-right: auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 300px;
|
|
}
|
|
.attach_item button {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.zone_view_topic .pageset {
|
|
margin-bottom: 14px;
|
|
}
|
|
.topic_reply_container {
|
|
display: flex;
|
|
}
|
|
|
|
.rowlist.bgavatars:not(.not_grid), .micro_grid {
|
|
display: grid;
|
|
/*grid-gap: 16px;
|
|
grid-row-gap: 8px;*/
|
|
grid-gap: 24px;
|
|
grid-row-gap: 16px;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
}
|
|
.rowlist.bgavatars.micro_grid, .micro_grid {
|
|
grid-gap: 16px;
|
|
grid-row-gap: 4px;
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
}
|
|
.rowlist.bgavatars .rowitem, .micro_grid .rowitem {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/*width: 180px;*/
|
|
background-image: none !important;
|
|
margin-bottom: 10px;
|
|
padding: 16px;
|
|
}
|
|
.rowlist.not_grid .rowitem {
|
|
flex-direction: row;
|
|
}
|
|
.rowlist.bgavatars .bgsub, .rowlist.bgavatars .rowTitle {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.rowlist.bgavatars .bgsub {
|
|
border-radius: 32px;
|
|
height: 64px;
|
|
width: 64px;
|
|
}
|
|
.rowlist.bgavatars .rowTitle {
|
|
font-size: 18px;
|
|
margin-top: 4px;
|
|
}
|
|
.rowlist.bgavatars.not_grid .bgsub {
|
|
height: 28px;
|
|
width: 28px;
|
|
margin-left: 4px;
|
|
margin-right: 10px;
|
|
}
|
|
.rowlist.bgavatars.not_grid .rowTitle {
|
|
font-size: 17px;
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.ip_search_block {
|
|
margin-bottom: 12px;
|
|
}
|
|
.ip_search_input {
|
|
width: 100%;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.footer .widget, .elapsed {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #555555;
|
|
}
|
|
.elapsed {
|
|
padding: 6px;
|
|
background: rgb(82,82,82);
|
|
border-radius: 3px;
|
|
font-size: 13.5px;
|
|
color: rgb(200,200,200);
|
|
margin-top: 1px;
|
|
margin-bottom: 4px;
|
|
padding-bottom: 2px;
|
|
padding-top: 3px;
|
|
margin-right: 3px;
|
|
}
|
|
#poweredByHolder {
|
|
display: flex;
|
|
padding-top: 12px;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
padding-bottom: 8px;
|
|
}
|
|
#poweredBy {
|
|
margin-right: auto;
|
|
}
|
|
.footer .widget, #poweredByHolder {
|
|
background-color: #444444;
|
|
}
|
|
|
|
.level_complete, .level_future, .level_inprogress, .progressWrap {
|
|
display: flex;
|
|
}
|
|
.level_complete {
|
|
background-color: rgb(68, 93, 68) !important;
|
|
width: 100%;
|
|
}
|
|
.level_future {
|
|
background-color: rgb(88, 68, 68) !important;
|
|
width: 100%;
|
|
}
|
|
.progressWrap {
|
|
margin-left: auto;
|
|
}
|
|
.levelBit {
|
|
color: #dadada;
|
|
}
|
|
/* CSS behaves in stupid ways, so we need to be very specific about this */
|
|
.rowblock:not(.topic_list):not(.rowhead):not(.opthead) .rowitem.level_inprogress:not(.post_item),
|
|
.coldyn_item .rowitem.level_inprogress {
|
|
padding: 0px !important;
|
|
}
|
|
.level_inprogress > div {
|
|
display: flex;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
padding-left: 12px;
|
|
border-radius: 3px;
|
|
width: 100%;
|
|
background-color: rgb(68, 93, 68) !important;
|
|
}
|
|
.level_inprogress .levelBit {
|
|
display: inline;
|
|
}
|
|
.level_inprogress .levelBit a {
|
|
white-space: nowrap;
|
|
}
|
|
.level_inprogress .progressWrap {
|
|
width: 100%;
|
|
padding-left: 0px;
|
|
padding-right: 12px;
|
|
background-color: rgb(68, 68, 68) !important;
|
|
}
|
|
.level_inprogress .progressWrap div {
|
|
margin-left: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media(max-width: 600px) {
|
|
.rowhead h1, .opthead h1, .colstack_head h1 {
|
|
font-size: 19px;
|
|
}
|
|
.topic_list_title_block .opt {
|
|
margin-top: -1px;
|
|
}
|
|
.topic_list_title_block .opt a {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.topic_list .topic_middle {
|
|
display: none;
|
|
}
|
|
.topic_left, .topic_right, .topic_middle {
|
|
width: 50%;
|
|
}
|
|
.topic_right_inside .lastName, .topic_left .rowtopic {
|
|
margin-top: -4px;
|
|
}
|
|
.topic_left img, .topic_right img {
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
.topic_list .topic_right_inside .lastReplyAt, .topic_list .topic_left .starter {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.userinfo {
|
|
padding: 18px;
|
|
width: 140px;
|
|
}
|
|
.avatar_item {
|
|
height: 48px;
|
|
width: 48px;
|
|
background-size: 68px;
|
|
}
|
|
.the_name {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 500px) {
|
|
.sidebar, .topic_view_count {
|
|
display: none;
|
|
}
|
|
|
|
.post_item .button_container {
|
|
display: block;
|
|
margin-top: 8px;
|
|
background: transparent;
|
|
padding: 0px;
|
|
}
|
|
.post_item .action_button_left {
|
|
display: block;
|
|
background-color: #444444;
|
|
border-radius: 3px;
|
|
padding: 10px;
|
|
}
|
|
.post_item .action_button_right {
|
|
background-color: #444444;
|
|
border-radius: 3px;
|
|
padding: 10px;
|
|
padding-left: 14px;
|
|
/*padding-right: 12px;*/
|
|
margin-top: 8px;
|
|
}
|
|
.post_item .controls:not(.has_likes) .like_count {
|
|
display: inline;
|
|
}
|
|
.post_item .created_at {
|
|
margin-left: auto;
|
|
}
|
|
.post_item, .topic_reply_container {
|
|
flex-direction: column;
|
|
}
|
|
.userinfo {
|
|
margin-right: 0px;
|
|
width: auto;
|
|
flex-direction: row;
|
|
margin-bottom: 8px;
|
|
padding: 18px;
|
|
padding-bottom: 14px;
|
|
}
|
|
.avatar_item {
|
|
height: 46px;
|
|
width: 46px;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
.user_meta {
|
|
margin-left: 10px;
|
|
margin-top: -4px;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 460px) {
|
|
.topic_list_title, .filter_opt_sep {
|
|
display: none;
|
|
}
|
|
.topic_list_title_block .create_topic_opt a:before {
|
|
content: "{{lang "quick_topic.create_topic_button_short" . }}";
|
|
}
|
|
.topic_list_title_block .mod_opt a:before {
|
|
content: "{{lang "topic_list.moderate_short" . }}";
|
|
}
|
|
}
|
|
|
|
@media(max-width: 601px) {
|
|
ul {
|
|
padding-left: 14px;
|
|
}
|
|
li a {
|
|
padding-bottom: 6px;
|
|
font-size: 15px;
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
#menu_overview {
|
|
margin-right: 10px;
|
|
}
|
|
#menu_overview a {
|
|
font-size: 17px;
|
|
padding-bottom: 7px;
|
|
color: rgb(226,226,226);
|
|
padding-top: 12px;
|
|
}
|
|
.menu_left.menu_active a {
|
|
color: #cfcfcf;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 750px) and (min-width: 600px) {
|
|
ul {
|
|
padding-left: 16px;
|
|
}
|
|
#menu_overview {
|
|
margin-right: 12px;
|
|
}
|
|
#menu_overview a {
|
|
font-size: 19px;
|
|
padding-bottom: 5px;
|
|
color: rgb(231,231,231);
|
|
padding-top: 11px;
|
|
}
|
|
li a {
|
|
padding-bottom: 13px;
|
|
font-size: 16px;
|
|
color: #cfcfcf;
|
|
}
|
|
.menu_left.menu_active a {
|
|
color: #dddddd;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 750px) {
|
|
nav.nav {
|
|
background: #2a2a2a;
|
|
width: 100%;
|
|
}
|
|
ul {
|
|
display: flex;
|
|
padding-right: 0px;
|
|
}
|
|
li {
|
|
float: left;
|
|
margin-right: 6px;
|
|
}
|
|
li a {
|
|
padding-top: 14px;
|
|
display: inline-block;
|
|
}
|
|
.menu_left.menu_active a {
|
|
padding-bottom: 15px;
|
|
border: none;
|
|
}
|
|
|
|
.right_of_nav {
|
|
width: auto;
|
|
padding: 0px;
|
|
}
|
|
.user_box {
|
|
display: none;
|
|
}
|
|
#back {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.topic_item .topic_name_forum_sep {
|
|
font-size: 17px;
|
|
line-height: 28px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
.topic_item .topic_forum {
|
|
font-size: 17px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 751px) {
|
|
.menu_profile {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 850px) {
|
|
/**/
|
|
}
|
|
|
|
@media(min-width: 1010px) {
|
|
.container {
|
|
background-color: var(--second-dark-background);
|
|
}
|
|
#back, .footer {
|
|
width: 1000px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.footBlock {
|
|
display: flex;
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.userinfo {
|
|
width: 180px;
|
|
padding-bottom: 18px;
|
|
}
|
|
.userinfo .avatar_item {
|
|
height: 64px;
|
|
width: 64px;
|
|
background-size: 88px;
|
|
}
|
|
.userinfo .the_name {
|
|
font-size: 19px;
|
|
}
|
|
.userinfo .post_tag {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 1330px) {
|
|
nav.nav {
|
|
width: calc(85% - 200px)
|
|
}
|
|
ul {
|
|
margin-left: 205px;
|
|
}
|
|
.right_of_nav {
|
|
width: calc(15% + 200px);
|
|
}
|
|
.user_box {
|
|
width: 200px;
|
|
}
|
|
}
|