2be884edc1
Main Menu is now shown on the main menu in the menu list for extra clarity. Travis should now be able to run it's tests. Moved routeChangeTheme to the routes package. Moved routeShowAttachment to the routes package and partially refactored it. Moved routeLikeTopicSubmit to the routes package. Moved routeReplyLikeSubmit to the routes package and partially refactored it. Moved routeProfileReplyCreateSubmit to the routes package. Moved routeLogout to the routes package, now known as routes.AccountLogout. Moved the routeDynamic stub to the routes package, now known as routes.DynamicRoute. Moved the routeUploads stub to the routes package, now known as routes.UploadedFile. Moved the BadRoute stub to the routes package, now known as routes.BadRoute. All routes moved to the routes package have had the route prefix dropped from their name. Simplified the email token route to redirect back to the main email route instead of rendering the same template. Refactored the panel menus to use the new submenu system instead of the old one which had a lot of menu duplication. Added a stub directory for Nox, the next major theme after Cosora. Fixed a bug where the alerts wouldn't load outside of the index. Tweaked the CSS in the topic creation and reply forms on Shadow. Tweaked the padding on the stickies on Shadow. Improved the submenu CSS on every theme. Fixed the submitrow CSS on Shadow, Tempra Conflux. Fixed some double borders on Tempra Conflux. The frontend sidebar should no longer show up in the Control Panel in Tempra Conflux and Tempra Simple. Tweaked the title CSS on Cosora. Tweaked the user manager CSS on Cosora. Changed the primary text colour on Cosora. Fixed attachment images taking up too much space on Cosora. Run the patcher or update script for this commit.
1042 lines
19 KiB
CSS
1042 lines
19 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;
|
|
}
|
|
p::selection, span::selection, a::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 */
|
|
.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 {
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.create_topic_opt a:before {
|
|
content: "{{index .Phrases "topics_new_topic"}}";
|
|
}
|
|
.locked_opt a:before {
|
|
content: "{{index .Phrases "forum_locked"}}";
|
|
}
|
|
|
|
.topic_list .topic_row {
|
|
display: flex;
|
|
}
|
|
/* 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_list .topic_left img, .topic_list .topic_right img {
|
|
width: 64px;
|
|
}
|
|
.topic_list .topic_inner_left, .topic_right > 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_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;
|
|
}
|
|
}
|