8f2f47e8aa
Added the IsoCode field to phrase files.
Rewrote a good portion of the widget system logic.
Added some tests for the widget system.
Added the Online Users widget.
Added a few sealed incomplete widgets like the Search & Filter Widget.
Added the AllUsers method to WsHubImpl for Online Users. Please don't abuse it.
Added the optional *DBTableKey field to AddColumn.
Added the panel_analytics_time_range template to reduce the amount of duplication.
Failed registrations now show up in red in the registration logs for Nox.
Failed logins now show up in red in the login logs for Nox.
Added basic h2 CSS to the other themes.
Added .show_on_block_edit and .hide_on_block_edit to the other themes.
Updated contributing.
Updated a bunch of dates to 2019.
Replaced tblKey{} with nil where possible.
Switched out some &s for &s to reduce the number of possible bugs.
Fixed a bug with selector messages where the inspector would get really jittery due to unnecessary DOM updates.
Moved header.Zone and associated fields to the bottom of ViewTopic to reduce the chances of problems arising.
Added the ZoneData field to *Header.
Added IDs to the items in the forum list template.
Split the fetchPhrases function into the initPhrases and fetchPhrases functions in init.js
Added .colstack_sub_head.
Fixed the CSS in the menu list.
Removed an inline style from the simple topic like and unlike buttons.
Removed an inline style from the simple topic IP button.
Simplified the LoginRequired error handler.
Fixed a typo in the comment prior to DatabaseError()
Reduce the number of false leaves for WebSocket page transitions.
Added the error zone.
De-duped the logic in WsHubImpl.getUsers.
Fixed a potential widget security issue.
Added twenty new phrases.
Added the wid column to the widgets table.
You will need to run the patcher / updater for this commit.
1159 lines
21 KiB
CSS
1159 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: "{{lang "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, .rowitem h2 {
|
|
font-size: 16px;
|
|
display: inline;
|
|
}
|
|
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;
|
|
font-weight: normal;
|
|
}
|
|
.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: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;
|
|
}
|
|
|
|
.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: "{{lang "topic.plus_one" . }}";
|
|
}{{$out := .}}
|
|
{{range (toArr "edit" "delete" "pin" "lock" "unlock" "unpin" "ip" "flag")}}
|
|
.{{.}}_label:before {
|
|
content: "{{lang (concat "topic." . "_button_text") ($out) }}";
|
|
}{{end}}
|
|
|
|
.like_count_label, .like_count {
|
|
display: none;
|
|
}
|
|
.like_count_label:before {
|
|
content: "{{lang "topics_likes_suffix" . }}";
|
|
}
|
|
.has_likes .like_count_label, .has_likes .like_count {
|
|
font-size: 12px;
|
|
display: block;
|
|
float: left;
|
|
line-height: 19px;
|
|
}
|
|
.has_likes .like_count {
|
|
margin-right: 2px;
|
|
}
|
|
.like_count:before {
|
|
content: "{{lang "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;
|
|
}
|
|
.elapsed {
|
|
display: none;
|
|
}
|
|
#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: "{{lang "topics_click_topics_to_select" . }}";
|
|
font-size: 14px;
|
|
}
|
|
.create_topic_opt a:before {
|
|
content: "{{lang "topics_new_topic" . }}";
|
|
margin-left: 3px;
|
|
}
|
|
.locked_opt a:before {
|
|
content: "{{lang "forum_locked" . }}";
|
|
}
|
|
.mod_opt a {
|
|
margin-left: 4px;
|
|
}
|
|
.mod_opt a:after {
|
|
content: "{{lang "topics_moderate" . }}";
|
|
padding-left: 1px;
|
|
}
|
|
.create_topic_opt {
|
|
order: 1;
|
|
}
|
|
.mod_opt {
|
|
order: 2;
|
|
}
|
|
.pre_opt {
|
|
order: 3;
|
|
margin-left: auto;
|
|
margin-right: 12px;
|
|
}
|
|
.filter_opt {
|
|
display: none;
|
|
}
|
|
|
|
@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_sticky .topic_left .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: "{{lang "topics_last" . }}: ";
|
|
}
|
|
.topic_list .starter:before {
|
|
content: "{{lang "topics_starter" . }}: ";
|
|
}
|
|
.topic_middle {
|
|
display: none;
|
|
}
|
|
|
|
.more_topic_block_initial {
|
|
display: none;
|
|
}
|
|
.more_topic_block_active {
|
|
display: block;
|
|
}
|
|
|
|
.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: "{{lang "topic.report_button_text" . }}";
|
|
}
|
|
#profile_left_lane .profileName {
|
|
font-size: 18px;
|
|
}
|
|
#profile_right_lane {
|
|
width: calc(100% - 245px);
|
|
}
|
|
#profile_right_lane .rowitem,
|
|
#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;
|
|
}
|
|
|
|
.level_complete, .level_future, .level_inprogress {
|
|
display: flex;
|
|
}
|
|
.progressWrap {
|
|
margin-left: auto;
|
|
width: auto !important;
|
|
}
|
|
|
|
.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 .rowitem h1 {
|
|
font-size: 15px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
}
|