3465e4c08f
The update system now uses the database as the source of truth for the last version rather than lastSchema.json Refactored several structs and bits of code, so we can avoid allocations for contexts where we never use a relative time. Clicking on the relative times on the topic list and the forum page should now take you to the post on the last page rather than just the last page. Added the reltime template function. Fixed some obsolete bits of code. Fixed some spelling mistakes. Fixed a bug where MaxBytesReader was capped at the maxFileSize rather than r.ContentLength. All of the client side templates should work again now. Shortened some statement names to save some horizontal space. accUpdateBuilder and SimpleUpdate now use updatePrebuilder behind the scenes to simplify things. Renamed selectItem to builder in AccSelectBuilder. Added a Total() method to accCountBuilder to reduce the amount of boilerplate used for row count queries. The "_builder" strings have been replaced with empty strings to help save memory, to make things slightly faster and to open the door to removing the query name in many contexts down the line. Added the open_edit and close_edit client hooks. Removed many query name checks. Split the attachment logic into separate functions and de-duplicated it between replies and topics. Improved the UI for editing topics in Nox. Used type aliases to reduce the amount of boilerplate in tables.go and patches.go Reduced the amount of boilerplate in the action post logic. Eliminated a map and a slice in the topic page for users who haven't given any likes. E.g. Guests. Fixed some long out-dated parts of the update instructions. Updated the update instructions to remove mention of the obsolete lastSchema.json Fixed a bug in init.js where /api/me was being loaded for guests. Added the MiniTopicGet, GlobalCount and CountInTopic methods to AttachmentStore. Added the MiniAttachment struct. Split the mod floaters out into their own template to reduce duplication. Removed a couple of redundant ParseForms. Added the common.skipUntilIfExistsOrLine function. Added the NotFoundJS and NotFoundJSQ functions. Added the lastReplyID and attachCount columns to the topics table.
1235 lines
22 KiB
CSS
1235 lines
22 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;
|
|
}
|
|
.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;
|
|
}
|
|
.colstack_right .colstack_item:not(.colstack_head):not(.rowhead) .rowitem {
|
|
border-radius: 3px;
|
|
background-color: #444444;
|
|
padding: 16px;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
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, .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;
|
|
}
|
|
|
|
#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: 31px;
|
|
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;
|
|
}
|
|
.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, .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.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;
|
|
}
|
|
|
|
.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 {
|
|
display: none;
|
|
}
|
|
.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;
|
|
}
|
|
}
|