gosora/themes/cosora/public/main.css
Azareal e22ddfec40 Added support for password resets.
Sha256 hashes are now stored in the SFile structures, this will come of use later.
Rows should be properly closed in DefaultTopicStore.BulkGetMap.
All errors should be properly reported now in DefaultTopicStore.BulkGetMap.
Rows should be properly closed in DefaultUserStore.BulkGetMap.
All errors should be properly reported now in DefaultUserStore.BulkGetMap.
Don't have an account on the login page should now be linkified.
Renamed tempra-simple to tempra_simple to avoid breaking the template transpiler.
Fixed up bits and pieces of login.html on every theme.
Removed an old commented code chunk from template_init.go
widget_wol widgets should now get minified.
bindToAlerts() should now unbind the alert items before attempting to bind to them.
Tweaked the SendValidationEmail phrase.
Removed a layer of indentation from DefaultAuth.ValidateMFAToken and added the ErrNoMFAToken error for when MFA isn't setup on the specified account.
Email validation now uses a constant time compare to mitigate certain classes of timing attacks.

Added the /accounts/password-reset/ route.
Added the /accounts/password-reset/submit/ route.
Added the /accounts/password-reset/token/ route.
Added the /accounts/password-reset/token/submit/ route.
Added the password_resets table.

Added the password_reset_email_fail phrase.
Added the password_reset phrase.
Added the password_reset_token phrase.
Added the password_reset_email_sent phrase.
Added the password_reset_token_token_verified phrase.
Added the login_forgot_password phrase.
Added the password_reset_head phrase.
Added the password_reset_username phrase.
Added the password_reset_button phrase.
Added the password_reset_subject phrase.
Added the password_reset_body phrase.
Added the password_reset_token_head phrase.
Added the password_reset_token_password phrase.
Added the password_reset_token_confirm_password phrase.
Added the password_reset_mfa_token phrase.
Added the password_reset_token_button phrase.

You will need to run the updater or patcher for this commit.
2019-03-11 18:47:45 +10:00

1965 lines
39 KiB
CSS

:root {
--header-border-color: hsl(0,0%,80%);
--element-border-color: hsl(0,0%,85%);
--element-background-color: white;
--replies-lang-string: "{{lang "topics_replies_suffix" . }}";
--topics-lang-string: "{{lang "forums.topics_suffix" . }}";
--likes-lang-string: "{{lang "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: "{{lang "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,
.rowhead h2, .opthead h2, .colstack_head h2 {
font-size: 19px;
font-weight: normal;
color: var(--lightened-primary-text-color);
display: inline-block;
}
.rowhead h2, .opthead h2, .colstack_head h2 {
font-size: 17px;
}
.colstack_head a h1 {
color: var(--primary-link-color);
}
.colstack_head.menuhead a h1 {
font-size: 16px;
}
.colstack_head h1 {
font-size: 18px;
}
h1, h2, 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: "{{lang "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;
}
.filter_opt {
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,
.show_on_block_edit:not(.edit_opened),
.hide_on_block_edit.edit_opened,
.link_select:not(.link_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%);
}
.level_complete, .level_future, .level_inprogress {
display: flex;
}
.progressWrap {
margin-left: auto;
width: auto !important;
}
@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: 24px;
}
.topic_view_count {
margin-left: 6px;
font-size: 14px;
margin-top: 4px;
}
.topic_view_count:before {
content: "("
}
.topic_view_count:after {
content: "{{lang "topic.view_count_suffix" . }})";
}
.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;
}
.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: "{{lang "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: "{{lang "topic.plus_one" . }}";
}
.button_container .open_edit:after, .edit_item:after{
content: "{{lang "topic.edit_button_text" . }}";
}
.delete_item:after {
content: "{{lang "topic.delete_button_text" . }}";
}
.ip_item_button:after {
content: "{{lang "topic.ip_button_text" . }}";
}
.lock_item:after {
content: "{{lang "topic.lock_button_text" . }}";
}
.unlock_item:after {
content: "{{lang "topic.unlock_button_text" . }}";
}
.pin_item:after {
content: "{{lang "topic.pin_button_text" . }}";
}
.unpin_item:after {
content: "{{lang "topic.unpin_button_text" . }}";
}
.report_item:after {
content: "{{lang "topic.report_button_text" .}}";
}
.attach_edit_bay {
display: none;
}
.zone_view_topic .pageset {
margin-bottom: 14px;
}
#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, .forgot_password {
color: var(--primary-link-color);
font-size: 12px;
margin-top: 23px;
}
.dont_have_account {
margin-left: auto;
}
.dont_have_account:after {
content: "|";
margin-left: 5px;
margin-right: 5px;
}
/* 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);
}
.pagefirst, .pagenext, .pageprev, .pagelast {
padding-top: 5px;
}
.pagefirst a, .pagenext a, .pageprev a, .pagelast a {
font-size: 18px;
}
/* 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;
}
.elapsed {
display: none;
}
#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: "{{lang "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;
}
}