23a686fe96
Removed the Tempra Cursive Theme. You can now do bulk moderation actions with Shadow. Added: Argon2 as a dependency. The EmailStore. The ReportStore. The Copy method to *Setting. The AddColumn method to the query builder and adapters. The textarea setting type. More logging to better debug issues. The GetOffset method to the UserStore. Removed: Sortable from Code Climate's Analysis. MemberCheck and memberCheck as they're obsolete now. The obsolete url_tags setting. The BcryptGeneratePasswordNoSalt function. Some redundant fields from some of the page structs. Revamped: The Control Panel Setting List and Editor. Refactored: The password hashing logic to make it more amenable to multiple hashing algorithms. The email portion of the Account Manager. The Control Panel User List. The report system. simplePanelUserCheck and simpleUserCheck to remove the duplicated logic as the two do the exact same thing. Fixed: Missing slugs in the profile links in the User Manager. A few template initialisers potentially reducing the number of odd template edge cases. Some problems with the footer. Custom selection colour not applying to images on Shadow. The avatars of the bottom row of the topic list on Conflux leaking out. Other: Moved the startTime variable into package common and exported it. Moved the password hashing logic from user.go to auth.go Split common/themes.go into common/theme.go and common/theme_list.go Replaced the SettingLabels phrase category with the more generic SettingPhrases category. Moved a load of routes, including panel ones into the routes and panel packages. Hid the notifications link from the Account Menu. Moved more inline CSS into the CSS files and made things a little more flexible here and there. Continued work on PgSQL, still a ways away. Guests now have a default avatar like everyone else. Tweaked some of the font sizes on Cosora to make the text look a little nicer. Partially implemented the theme dock override logic. Partially implemented a "symlink" like feature for theme directories. ... And a bunch of other things I might have missed. You will need to run this update script / patcher for this commit. Warning: This is an "unstable commit", therefore some things may be a little less stable than I'd like. For instance, the Shadow Theme is a little broken in this commit.
1141 lines
20 KiB
CSS
1141 lines
20 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;
|
|
}
|
|
|
|
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_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;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.formitem 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;
|
|
}
|
|
|
|
#poweredByHolder {
|
|
background-color: var(--main-block-color);
|
|
margin-top: 5px;
|
|
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 {
|
|
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;
|
|
}
|
|
}
|