f8f46b3c48
Added the Account Dashboard and merged a few account views into it. BREAKING CHANGE: We now use config/config.json instead of config/config.go, be sure to setup one of these files, you can config_default.json as an example of what a config.json should look like. If you don't have an existing installation, you can just rely on the installer to do this for you. CSS Changes (does not include Nox Theme): Sidebar should no longer show up in the account manager in some odd situations or themes. Made a few CSS rules more generic. Forms have a new look in Cosora now. Config Changes: Removed the DefaultRoute config field. Added the DefaultPath config field. Added the MaxRequestSizeStr config field to make it easier for users to input custom max request sizes without having to use a calculator or figure out how many bytes there are in a megabyte. Removed the CacheTopicUser config field. Added the UserCache config field. Added the TopicCache config field Phrases: Removed ten english phrases. Added 21 english phrases. Changed eleven english phrases. Removed some duplicate indices in the english phrase pack. Removed some old benchmark code. Tweaked some things to make the linter happy. Added comments for all the MemoryUserCache and MemoryTopicCache methods. Added a comment for the null caches, consult the other caches for further information on the methods. Added a client-side check to make sure the user doesn't upload too much data in a single post. The server already did this, but it might be a while before feedback arrives from it. Simplified a lot of the control panel route code with the buildBasePage function. Renamed /user/edit/critical/ to /user/edit/password/ Renamed /user/edit/critical/submit/ to /user/edit/password/submit/ Made some small improvements to SEO with a couple of meta tags. Renamed some of the control panel templates so that they use _ instead of -. Fixed a bug where notices were being moved to the wrong place in some areas in Cosora. Added the writeJsonError function to help abstract writing json errors. Moved routePanelUsers to panel.Users Moved routePanelUsersEdit to panel.UsersEdit Moved routePanelUsersEditSubmit to panel.UsersEditSubmit Renamed routes.AccountEditCritical to routes.AccountEditPassword Renamed routes.AccountEditCriticalSubmit to routes.AccountEditPasswordSubmit Removed the routes.AccountEditAvatar and routes.AccountEditUsername routes. Fixed a data race in MemoryTopicCache.Add which could lead to the capacity limit being bypassed. Tweaked MemoryTopicCache.AddUnsafe under the assumption that it's not going to be safe anyway, but we might as-well try in case this call is properly synchronised. Fixed a data race in MemoryTopicCache.Remove which could lead to the length counter being decremented twice. Tweaked the behaviour of MemoryTopicCache.RemoveUnsafe to mirror that of Remove. Fixed a data race in MemoryUserCache.Add which could lead to the capacity limit being bypassed. User can no longer change their usernames to blank. Made a lot of progress on the Nox theme. Added modified FA5 SVGs as a dependency for Nox. Be sure to run the patcher or update script and don't forget to create a customised config/config.json file.
1157 lines
21 KiB
CSS
1157 lines
21 KiB
CSS
/* Patch for Edge, until they fix emojis in arial x.x */
|
|
@supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } }
|
|
|
|
:root {
|
|
--main-block-color: rgb(61,61,61);
|
|
--main-text-color: white;
|
|
--dim-text-color: rgb(205,205,205);
|
|
--main-background-color: #222222;
|
|
--inner-background-color: #333333;
|
|
--input-background-color: #444444;
|
|
--input-border-color: #555555;
|
|
--input-text-color: #999999;
|
|
--bright-input-background-color: #555555;
|
|
--bright-input-border-color: #666666;
|
|
--input-text-color: #a3a3a3;
|
|
}
|
|
|
|
body {
|
|
font-family: arial;
|
|
color: var(--main-text-color);
|
|
background-color: var(--main-background-color);
|
|
margin: 0;
|
|
}
|
|
*::selection {
|
|
background-color: hsl(0,0%,75%);
|
|
color: hsl(0,0%,20%);
|
|
font-weight: 100;
|
|
}
|
|
|
|
#back {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 70%;
|
|
background-color: var(--inner-background-color);
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
#main {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
background-color: var(--main-block-color);
|
|
border-bottom: 1px solid var(--main-background-color);
|
|
padding-left: 15%;
|
|
padding-right: 15%;
|
|
margin: 0;
|
|
height: 41px;
|
|
}
|
|
|
|
li {
|
|
float: left;
|
|
height: 29.5px;
|
|
padding-top: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.menu_left {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.menu_right {
|
|
float: right;
|
|
}
|
|
|
|
#menu_overview {
|
|
margin-right: 13px;
|
|
margin-left: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.menu_left:not(#menu_overview) {
|
|
font-size: 15px;
|
|
padding-top: 13px;
|
|
}
|
|
|
|
.alert_bell {
|
|
float: right;
|
|
}
|
|
|
|
.menu_alerts {
|
|
float: right;
|
|
padding-top: 14px;
|
|
}
|
|
|
|
.alert_counter {
|
|
background-color: rgb(200,0,0);
|
|
border-radius: 2px;
|
|
font-size: 11px;
|
|
padding: 3px;
|
|
float: right;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.alert_aftercounter {
|
|
float: right;
|
|
margin-right: 4px;
|
|
font-size: 14px;
|
|
}
|
|
.alert_aftercounter:before {
|
|
content: "{{index .Phrases "menu_alerts"}}";
|
|
}
|
|
|
|
.menu_alerts .alertList, .hide_on_big, .show_on_mobile {
|
|
display: none;
|
|
}
|
|
.auto_hide {
|
|
display: none !important;
|
|
}
|
|
.selectedAlert .alertList {
|
|
display: block;
|
|
position: absolute;
|
|
top: 44px;
|
|
float: left;
|
|
width: 200px;
|
|
z-index: 50;
|
|
right: 15%;
|
|
font-size: 13px;
|
|
background-color: var(--inner-background-color);
|
|
}
|
|
|
|
.alertItem {
|
|
margin-bottom: 2px;
|
|
}
|
|
.alertItem.withAvatar {
|
|
height: 40px;
|
|
background-size: 48px;
|
|
background-repeat: no-repeat;
|
|
background-color: var(--main-block-color);
|
|
padding-left: 56px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--main-text-color);
|
|
}
|
|
|
|
.alertbox {
|
|
display: flex;
|
|
}
|
|
.alert {
|
|
padding-bottom: 12px;
|
|
background-color: var(--main-block-color);
|
|
border-left: 4px solid hsl(21, 100%, 50%);
|
|
padding: 12px;
|
|
display: block;
|
|
margin-top: 8px;
|
|
margin-bottom: -3px;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.rowblock {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.opthead, .rowhead, .colstack_head {
|
|
padding-bottom: 0px;
|
|
padding-top: 3px !important;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem {
|
|
font-size: 15px; /*16px*/
|
|
}
|
|
|
|
.rowblock:last-child, .colstack_item:last-child {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.rowitem, .formitem {
|
|
padding-bottom: 12px;
|
|
background-color: var(--main-block-color);
|
|
margin-top: 8px;
|
|
padding: 12px;
|
|
}
|
|
.rowitem h1 {
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
-webkit-margin-before: 0;
|
|
-webkit-margin-after: 0;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
display: inline;
|
|
}
|
|
.rowsmall {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.colstack {
|
|
display: flex;
|
|
}
|
|
.colstack_left, .colstack_right {
|
|
margin-left: 8px;
|
|
}
|
|
.colstack_left {
|
|
float: left;
|
|
width: 30%;
|
|
}
|
|
.colstack_right {
|
|
float: left;
|
|
width: calc(70% - 24px);
|
|
}
|
|
.colstack_left:empty, .colstack_right:empty, .show_on_edit {
|
|
display: none;
|
|
}
|
|
|
|
.colline {
|
|
font-size: 14px;
|
|
background-color: var(--main-block-color);
|
|
margin-top: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Align to right in a flex head */
|
|
.to_right {
|
|
float: right;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Topic View */
|
|
|
|
/* TODO: How should we handle the sticky headers? */
|
|
.topic_sticky_head {
|
|
}
|
|
|
|
/* TODO: Add the avatars to the forum list */
|
|
.forum_list .forum_nodesc {
|
|
font-style: italic;
|
|
}
|
|
.extra_little_row_avatar {
|
|
display: none;
|
|
}
|
|
.shift_left {
|
|
float: left;
|
|
}
|
|
.shift_right {
|
|
float: right;
|
|
}
|
|
|
|
/* TODO: Rewrite the closed topic header so that it looks more consistent with the rest of the theme */
|
|
.topic_closed_head .topic_status_closed {
|
|
margin-bottom: -10px;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.post_item {
|
|
background-size: 128px;
|
|
padding-left: calc(128px + 12px);
|
|
}
|
|
|
|
.controls {
|
|
width: 100%;
|
|
display: inline-block;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.staff_post {
|
|
border: 1px solid rgb(101, 71, 101)
|
|
}
|
|
|
|
.user_tag {
|
|
float: right;
|
|
color: var(--dim-text-color);
|
|
}
|
|
|
|
.real_username {
|
|
float: left;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.mod_button {
|
|
margin-right: 5px;
|
|
display: block;
|
|
float: left;
|
|
}
|
|
.mod_button button {
|
|
border: none;
|
|
background: none;
|
|
color: var(--main-text-color);
|
|
font-size: 12px;
|
|
padding: 0;
|
|
}
|
|
|
|
.like_label:before {
|
|
content: "{{index .Phrases "topic_plus_one"}}";
|
|
}
|
|
.edit_label:before {
|
|
content: "{{index .Phrases "topic_edit_button_text"}}";
|
|
}
|
|
.trash_label:before {
|
|
content: "{{index .Phrases "topic_delete_button_text"}}";
|
|
}
|
|
.pin_label:before {
|
|
content: "{{index .Phrases "topic_pin_button_text"}}";
|
|
}
|
|
.lock_label:before {
|
|
content: "{{index .Phrases "topic_lock_button_text"}}";
|
|
}
|
|
.unlock_label:before {
|
|
content: "{{index .Phrases "topic_unlock_button_text"}}";
|
|
}
|
|
.unpin_label:before {
|
|
content: "{{index .Phrases "topic_unpin_button_text"}}";
|
|
}
|
|
.ip_label:before {
|
|
content: "{{index .Phrases "topic_ip_button_text"}}";
|
|
}
|
|
.flag_label:before {
|
|
content: "{{index .Phrases "topic_flag_button_text"}}";
|
|
}
|
|
.level_label:before {
|
|
content: "{{index .Phrases "topic_level"}}";
|
|
}
|
|
|
|
.like_count_label, .like_count {
|
|
display: none;
|
|
}
|
|
.like_count_label:before {
|
|
content: "{{index .Phrases "topics_likes_suffix"}}";
|
|
}
|
|
.has_likes .like_count_label {
|
|
font-size: 12px;
|
|
display: block;
|
|
float: left;
|
|
line-height: 19px;
|
|
}
|
|
.has_likes .like_count {
|
|
font-size: 12px;
|
|
display: block;
|
|
float: left;
|
|
line-height: 19px;
|
|
margin-right: 2px;
|
|
}
|
|
.like_count:before {
|
|
content: "{{index .Phrases "pipe"}}";
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.level_label, .level {
|
|
color: var(--dim-text-color);
|
|
float: right;
|
|
}
|
|
.level {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.formrow.real_first_child, .formrow:first-child {
|
|
margin-top: 8px;
|
|
}
|
|
.formrow.real_first_child .formitem, .formrow:first-child .formitem {
|
|
padding-top: 12px;
|
|
}
|
|
.formrow:last-child .formitem {
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.dont_have_account {
|
|
color: #505050;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
float: right;
|
|
}
|
|
|
|
textarea {
|
|
background-color: var(--input-background-color);
|
|
border-color: var(--input-border-color);
|
|
color: var(--input-text-color);
|
|
width: calc(100% - 15px);
|
|
min-height: 80px;
|
|
}
|
|
textarea:focus, input:focus, select:focus, button:focus {
|
|
outline-color: rgb(95,95,95);
|
|
}
|
|
textarea.large {
|
|
min-height: 120px;
|
|
margin-top: 1px;
|
|
padding: 5px;
|
|
display: block;
|
|
}
|
|
|
|
.formitem button, .formbutton, .mod_floater_submit, .pane_buttons button {
|
|
background-color: var(--input-background-color);
|
|
border: 1px solid var(--input-border-color);
|
|
color: var(--input-text-color);
|
|
padding: 7px;
|
|
padding-bottom: 6px;
|
|
font-size: 13px;
|
|
}
|
|
.mod_floater_submit {
|
|
padding: 5px;
|
|
padding-bottom: 4px;
|
|
margin-left: 2px;
|
|
}
|
|
.pane_buttons button {
|
|
padding: 5px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.formrow {
|
|
flex-direction: row;
|
|
display: flex;
|
|
}
|
|
|
|
.formitem {
|
|
margin-top: 0px;
|
|
padding-bottom: 2px;
|
|
padding-top: 3px;
|
|
flex-grow: 2;
|
|
}
|
|
|
|
.formlabel {
|
|
flex-grow: 0;
|
|
width: 20%;
|
|
padding-top: 9px;
|
|
}
|
|
|
|
/* If the form label is on the right */
|
|
.formlabel:not(:first-child) {
|
|
font-size: 15px;
|
|
flex-grow: 2;
|
|
}
|
|
|
|
.formrow.real_first_child .formlabel, .formrow:first-child .formlabel {
|
|
padding-top: 17px;
|
|
}
|
|
|
|
/* Too big compared to the other items in the Control Panel and Account Panel */
|
|
/*.colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child {
|
|
margin-top: 8px;
|
|
}*/
|
|
.colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.thin_margins .formrow.real_first_child, .thin_margins .formrow:first-child {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.formitem a {
|
|
font-size: 14px;
|
|
}
|
|
.rowmenu .rowitem, .rowlist .rowitem, .rowlist .formitem {
|
|
margin-top: 3px;
|
|
font-size: 13px;
|
|
padding: 10px;
|
|
}
|
|
.menu_stats {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Mini paginators aka panel paginators */
|
|
.pageset {
|
|
margin-top: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-left: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.pageitem {
|
|
background-color: var(--main-block-color);
|
|
padding: 10px;
|
|
margin-right: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.bgsub {
|
|
display: none;
|
|
}
|
|
.rowlist.bgavatars .rowitem {
|
|
background-repeat: no-repeat;
|
|
background-size: 40px;
|
|
padding-left: 46px;
|
|
}
|
|
.bgavatars:not(.rowlist) .rowitem {
|
|
background-repeat: no-repeat;
|
|
background-size: 40px;
|
|
padding-left: 46px;
|
|
}
|
|
.rowlist .formrow, .rowlist .formrow:first-child {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
input {
|
|
background-color: var(--input-background-color);
|
|
border: 1px solid var(--input-border-color);
|
|
color: var(--input-text-color);
|
|
padding-bottom: 6px;
|
|
font-size: 13px;
|
|
|
|
padding: 5px;
|
|
width: calc(100% - 16px);
|
|
}
|
|
select {
|
|
background-color: var(--input-background-color);
|
|
border: 1px solid var(--input-border-color);
|
|
color: var(--input-text-color);
|
|
font-size: 13px;
|
|
padding: 4px;
|
|
}
|
|
.rowlist .formitem select {
|
|
padding: 2px;
|
|
font-size: 11px;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
input, select, textarea {
|
|
caret-color: rgb(95,95,95);
|
|
}
|
|
|
|
.form_middle_button {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.little_row_avatar {
|
|
display: none;
|
|
}
|
|
.topic_create_form .topic_board_row .formitem, .topic_create_form .topic_name_row .formitem {
|
|
padding-bottom: 5px;
|
|
}
|
|
.topic_create_form input, .topic_create_form select {
|
|
padding: 7px;
|
|
font-size: 13px;
|
|
}
|
|
.topic_create_form select {
|
|
padding: 6px;
|
|
}
|
|
.topic_create_form input {
|
|
width: calc(100% - 14px);
|
|
}
|
|
.topic_create_form textarea, .topic_reply_form textarea {
|
|
width: calc(100% - 26px);
|
|
min-height: 80px;
|
|
font-family: arial;
|
|
font-size: 14px;
|
|
padding: 12px;
|
|
}
|
|
.topic_create_form textarea {
|
|
padding: 7px;
|
|
width: calc(100% - 14px);
|
|
}
|
|
|
|
.quick_button_row .formitem, .quick_create_form .upload_file_dock {
|
|
display: flex;
|
|
}
|
|
.quick_create_form .add_file_button, .quick_create_form #add_poll_button {
|
|
margin-left: 8px;
|
|
}
|
|
.quick_create_form .close_form {
|
|
margin-left: auto;
|
|
}
|
|
.quick_create_form .uploadItem {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
background-size: 25px 30px;
|
|
background-repeat: no-repeat;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.footBlock {
|
|
margin-top: -2px;
|
|
display: flex;
|
|
}
|
|
.footer {
|
|
width: 70%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
#poweredByHolder {
|
|
background-color: var(--main-block-color);
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
padding-left: 13px;
|
|
padding-right: 13px;
|
|
clear: left;
|
|
height: 25px;
|
|
}
|
|
#poweredByHolder select {
|
|
background-color: var(--input-background-color);
|
|
border: 1px solid var(--input-border-color);
|
|
color: var(--input-text-color);
|
|
font-size: 13px;
|
|
padding: 4px;
|
|
}
|
|
#poweredBy {
|
|
float: left;
|
|
margin-top: 4px;
|
|
}
|
|
#poweredBy span {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.poll_item {
|
|
display: flex;
|
|
}
|
|
.poll_option {
|
|
margin-bottom: 3px;
|
|
}
|
|
input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
input[type=checkbox] + label {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-bottom: -2px;
|
|
border: 1px solid var(--bright-input-border-color);
|
|
background-color: var(--bright-input-background-color);
|
|
}
|
|
input[type=checkbox]:checked + label .sel {
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
background-color: var(--bright-input-background-color);
|
|
}
|
|
input[type=checkbox] + label.poll_option_label {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 3px;
|
|
background-color: var(--bright-input-background-color);
|
|
border: 1px solid var(--bright-input-border-color);
|
|
color: var(--bright-input-text-color);
|
|
}
|
|
input[type=checkbox]:checked + label.poll_option_label .sel {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-left: 3px;
|
|
background: var(--bright-input-border-color);
|
|
}
|
|
.pollinput {
|
|
display: flex;
|
|
margin-bottom: 8px;
|
|
}
|
|
.quick_create_form .pollinputlabel {
|
|
display: none;
|
|
}
|
|
|
|
/*#poll_option_text_0 {
|
|
color: hsl(359,98%,43%);
|
|
}*/
|
|
.poll_buttons {
|
|
margin-top: 12px;
|
|
}
|
|
.poll_buttons button {
|
|
background-color: var(--bright-input-background-color);
|
|
border: 1px solid var(--bright-input-border-color);
|
|
color: var(--bright-input-text-color);
|
|
padding: 7px;
|
|
padding-bottom: 6px;
|
|
font-size: 13px;
|
|
}
|
|
.poll_results {
|
|
margin-left: auto;
|
|
max-height: 120px;
|
|
}
|
|
|
|
/* Forum View */
|
|
.rowhead, .opthead, .colstack_head, .rowhead .rowitem {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.rowhead:not(.has_opt) .rowitem, .opthead .rowitem, .colstack_head .rowitem {
|
|
width: 100%;
|
|
}
|
|
|
|
.optbox {
|
|
display: flex;
|
|
padding-left: 5px;
|
|
padding-top: 10.5px;
|
|
margin-top: 7px;
|
|
width: 100%;
|
|
background-color: var(--main-block-color);
|
|
}
|
|
.has_opt .rowitem {
|
|
margin-right: 0px;
|
|
display: inline-block;
|
|
padding-right: 0px;
|
|
margin-top: 7px;
|
|
padding-left: 12px;
|
|
padding-top: 12px;
|
|
}
|
|
.opt a {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.topic_list_title_block .pre_opt:before {
|
|
content: "{{index .Phrases "topics_click_topics_to_select"}}";
|
|
font-size: 14px;
|
|
}
|
|
.create_topic_opt a:before {
|
|
content: "{{index .Phrases "topics_new_topic"}}";
|
|
margin-left: 3px;
|
|
}
|
|
.locked_opt a:before {
|
|
content: "{{index .Phrases "forum_locked"}}";
|
|
}
|
|
.mod_opt a {
|
|
margin-left: 4px;
|
|
}
|
|
.mod_opt a:after {
|
|
content: "{{index .Phrases "topics_moderate"}}";
|
|
padding-left: 1px;
|
|
}
|
|
.create_topic_opt {
|
|
order: 1;
|
|
}
|
|
.mod_opt {
|
|
order: 2;
|
|
}
|
|
.pre_opt {
|
|
order: 3;
|
|
margin-left: auto;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.mod_floater {
|
|
position: fixed;
|
|
bottom: 15px;
|
|
right: 15px;
|
|
width: 150px;
|
|
height: 65px;
|
|
font-size: 14px;
|
|
padding: 14px;
|
|
z-index: 9999;
|
|
animation: fadein 0.8s;
|
|
background-color: var(--main-block-color);
|
|
}
|
|
.mod_floater_head {
|
|
margin-bottom: 8px;
|
|
}
|
|
.modal_pane {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: var(--main-block-color);
|
|
border: 2px solid #333333;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
z-index: 9999;
|
|
animation: fadein 0.8s;
|
|
}
|
|
.pane_header {
|
|
font-size: 15px;
|
|
}
|
|
.pane_header h3 {
|
|
-webkit-margin-before: 0;
|
|
-webkit-margin-after: 0;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
font-weight: normal;
|
|
}
|
|
.pane_row {
|
|
font-size: 14px;
|
|
margin-bottom: 1px;
|
|
}
|
|
.pane_selected {
|
|
font-weight: bold;
|
|
}
|
|
.pane_buttons {
|
|
margin-top: 7px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.topic_list .topic_row {
|
|
display: flex;
|
|
}
|
|
.topic_selected .rowitem {
|
|
background-color: hsla(0, 0%, 29%, 1);
|
|
}
|
|
/* Temporary hack, so that I don't break the topic lists of the other themes */
|
|
.topic_list .topic_inner_right {
|
|
display: none;
|
|
}
|
|
.topic_list .rowitem {
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
.topic_list .topic_left {
|
|
width: 100%;
|
|
height: 59px;
|
|
display: flex;
|
|
padding: 0px;
|
|
overflow: hidden;
|
|
}
|
|
.topic_left.topic_sticky .topic_inner_left {
|
|
border-top: 4px solid hsl(41, 100%, 50%);
|
|
padding-left: 10px;
|
|
padding-top: 10px;
|
|
margin-top: 0px;
|
|
margin-left: 0px;
|
|
width: 100%;
|
|
}
|
|
.topic_list .topic_right {
|
|
height: 59px;
|
|
margin-left: 8px;
|
|
display: flex;
|
|
width: 284px;
|
|
padding: 0px;
|
|
}
|
|
.topic_right_inside {
|
|
display: flex;
|
|
}
|
|
.topic_list .topic_left img, .topic_list .topic_right img {
|
|
width: 64px;
|
|
}
|
|
.topic_list .topic_inner_left, .topic_right_inside > span {
|
|
margin-left: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
.topic_list .topic_row:last-child {
|
|
margin-bottom: 10px;
|
|
}
|
|
.topic_list .lastReplyAt {
|
|
white-space: nowrap;
|
|
}
|
|
.topic_list .lastReplyAt:before {
|
|
content: "{{index .Phrases "topics_last"}}: ";
|
|
}
|
|
.topic_list .starter:before {
|
|
content: "{{index .Phrases "topics_starter"}}: ";
|
|
}
|
|
.topic_middle {
|
|
display: none;
|
|
}
|
|
|
|
.topic_name_input {
|
|
width: 100%;
|
|
margin-right: 10px;
|
|
background-color: var(--input-background-color);
|
|
border: 1px solid var(--input-border-color);
|
|
color: var(--input-text-color);
|
|
padding-bottom: 6px;
|
|
font-size: 13px;
|
|
padding: 5px;
|
|
}
|
|
.topic_item .submit_edit {
|
|
margin-left: auto;
|
|
}
|
|
.topic_item .topic_status_closed {
|
|
margin-left: auto;
|
|
position: relative;
|
|
top: -5px;
|
|
}
|
|
|
|
.prev_link, .next_link {
|
|
display: none;
|
|
}
|
|
|
|
.postImage {
|
|
max-width: 100%;
|
|
max-height: 200px;/*300px;*/
|
|
background-color: rgb(71,71,71);
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Profiles */
|
|
#profile_left_lane {
|
|
width: 220px;
|
|
margin-top: 5px;
|
|
}
|
|
#profile_left_lane .avatarRow {
|
|
overflow: hidden;
|
|
max-height: 220px;
|
|
padding: 0;
|
|
}
|
|
#profile_left_lane .avatar {
|
|
width: 100%;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
#profile_left_lane .username {
|
|
font-size: 14px;
|
|
display: block;
|
|
margin-top: 3px;
|
|
}
|
|
#profile_left_pane .nameRow .username {
|
|
float: right;
|
|
font-weight: normal;
|
|
}
|
|
#profile_left_pane .report_item:after {
|
|
content: "{{index .Phrases "topic_report_button_text"}}";
|
|
}
|
|
#profile_left_lane .profileName {
|
|
font-size: 18px;
|
|
}
|
|
#profile_right_lane {
|
|
width: calc(100% - 245px);
|
|
}
|
|
#profile_right_lane .rowitem {
|
|
margin-top: 5px;
|
|
}
|
|
#profile_right_lane .colstack_item .formrow.real_first_child, #profile_right_lane .colstack_item .formrow:first-child {
|
|
margin-top: 5px;
|
|
}
|
|
.simple .user_tag {
|
|
font-size: 14px;
|
|
}
|
|
/* TODO: Have a has_avatar class for profile comments and topic replies to allow posts without avatars? Won't that look inconsistent next to everything else for just about every theme though? */
|
|
#profile_comments .rowitem {
|
|
background-repeat: no-repeat, repeat-y;
|
|
background-size: 128px;
|
|
padding-left: 136px;
|
|
}
|
|
|
|
.ip_search_block .rowitem {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.ip_search_block input {
|
|
background-color: var(--input-background-color);
|
|
border: 1px solid var(--input-border-color);
|
|
color: var(--input-text-color);
|
|
margin-top: -3px;
|
|
margin-bottom: -3px;
|
|
padding: 4px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.ip_search_input {
|
|
font-size: 15px;
|
|
width: 100%;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.ip_search_search {
|
|
font-size: 14px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.colstack_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
margin-top: 3px;
|
|
grid-gap: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.grid_stat, .grid_istat {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
font-size: 13px;
|
|
background-color: var(--main-block-color);
|
|
}
|
|
|
|
#panel_dashboard_right .colstack_head .rowitem {
|
|
padding: 10px;
|
|
}
|
|
|
|
#panel_dashboard_right .colstack_head a {
|
|
text-align: center;
|
|
width: 100%;
|
|
display: block;
|
|
font-size: 15px;
|
|
}
|
|
|
|
@media(max-width: 935px) {
|
|
.simple .user_tag {
|
|
display: none;
|
|
}
|
|
#profile_left_lane {
|
|
width: 160px;
|
|
}
|
|
#profile_left_lane .avatarRow {
|
|
max-height: 160px;
|
|
}
|
|
#profile_left_lane .profileName {
|
|
font-size: 16px;
|
|
}
|
|
#profile_right_lane {
|
|
width: calc(100% - 185px);
|
|
}
|
|
}
|
|
|
|
@media(max-width: 830px) {
|
|
ul {
|
|
padding-left: 10px;
|
|
padding-right: 0px;
|
|
height: 35px;
|
|
}
|
|
li {
|
|
height: 26px;
|
|
}
|
|
|
|
#menu_overview {
|
|
margin-right: 9px;
|
|
margin-left: 0px;
|
|
font-size: 15px;
|
|
width: 32px;
|
|
text-align: center;
|
|
}
|
|
.menu_left {
|
|
margin-right: 7px;
|
|
}
|
|
.menu_left:not(#menu_overview) {
|
|
font-size: 13px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.menu_alerts {
|
|
padding-top: 9px;
|
|
float: left;
|
|
margin-right: 6px;
|
|
}
|
|
.alert_counter {
|
|
border-radius: 8px;
|
|
font-size: 0px;
|
|
color: #c80000;
|
|
left: 2px;
|
|
}
|
|
.alert_aftercounter {
|
|
float: none;
|
|
margin-right: 0px;
|
|
font-size: 13px;
|
|
padding-top: 1.5px;
|
|
}
|
|
.has_alerts .alert_aftercounter {
|
|
position: relative;
|
|
top: -5px;
|
|
}
|
|
.menu_alerts:not(.has_alerts) .alert_counter {
|
|
display: none;
|
|
}
|
|
|
|
.selectedAlert .alertList {
|
|
right: 10px;
|
|
top: 42px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.alertItem.withAvatar {
|
|
height: 28px;
|
|
background-size: 38px;
|
|
padding-left: 46px;
|
|
padding-top: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#back, .footer {
|
|
width: calc(100% - 20px);
|
|
}
|
|
.opthead, .rowhead, .colstack_head {
|
|
padding-top: 0px !important;
|
|
font-size: 15px;
|
|
}
|
|
.rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem {
|
|
font-size: 14px;
|
|
}
|
|
.rowsmall {
|
|
font-size: 11px;
|
|
}
|
|
|
|
@media(min-width: 400px) {
|
|
ul {
|
|
height: 40px;
|
|
}
|
|
#menu_overview {
|
|
font-size: 16px;
|
|
}
|
|
.menu_left:not(#menu_overview) {
|
|
font-size: 14px;
|
|
padding-top: 13px;
|
|
}
|
|
.alert_aftercounter {
|
|
font-size: 14px;
|
|
padding-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(max-width: 520px) {
|
|
.user_tag, .level_label, .level {
|
|
display: none;
|
|
}
|
|
#profile_left_lane {
|
|
width: 100px;
|
|
}
|
|
#profile_comments .rowitem {
|
|
background-size: 80px;
|
|
padding-left: calc(80px + 12px);
|
|
}
|
|
#profile_left_lane .avatarRow {
|
|
max-height: 100px;
|
|
}
|
|
#profile_right_lane {
|
|
width: calc(100% - 125px);
|
|
}
|
|
}
|
|
|
|
@media(max-width: 500px) {
|
|
.topic_list .rowitem {
|
|
float: none;
|
|
}
|
|
.topic_list .topic_left {
|
|
width: 100%;
|
|
}
|
|
.topic_list .topic_right {
|
|
display: none;
|
|
}
|
|
#poweredBy span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 470px) {
|
|
.like_count_label, .like_count {
|
|
display: none;
|
|
}
|
|
.post_item {
|
|
background-size: 100px;
|
|
padding-left: calc(100px + 12px);
|
|
}
|
|
}
|
|
|
|
@media(max-width: 370px) {
|
|
.menu_profile {
|
|
display: none;
|
|
}
|
|
.post_item {
|
|
background-size: 80px;
|
|
padding-left: calc(80px + 12px);
|
|
}
|
|
.controls {
|
|
margin-top: 14px;
|
|
}
|
|
#profile_comments .rowitem {
|
|
background-image: none !important;
|
|
padding-left: 10px !important;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 324px) {
|
|
ul {
|
|
padding-left: 5px;
|
|
}
|
|
}
|