47963e10a9
Renamed the rrow_assign hook to topic_reply_row_assign and gave it access to more data. Fixed a bug where the topic store wouldn't fetch the last reply time for a topic. Refactored the process of adding and removing topics from and to a *Forum. Fixed a bug where editing the opening post of a topic would yield a vast number of <br>s instead of blank lines. Selecting text in Shadow now has it's own CSS instead of falling back onto the browser defaults. Fixed a bug in Shadow where not all the headers filled up the space they should. Fixed a bug in Shadow where the footer is broken on mobile. Added an ARIA Label to the topic list. Refactored the last poster logic to reduce the number of bugs. Renamed ReplyShort to Reply and Reply to ReplyUser. Added a Copy method to Reply, Group, Forum, User, and Topic. Rewrote Hello World into something slightly more useful for new plugin devs to learn off. Added the GetLength() method to ForumCache.
842 lines
14 KiB
CSS
842 lines
14 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; } }
|
|
|
|
body {
|
|
font-family: arial;
|
|
color: white;
|
|
background-color: #222222;
|
|
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: #333333;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
background-color: rgb(61,61,61);
|
|
border-bottom: 1px solid #222222;
|
|
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: "Alerts";
|
|
}
|
|
|
|
.menu_alerts .alertList {
|
|
display: none;
|
|
}
|
|
|
|
.selectedAlert .alertList {
|
|
display: block;
|
|
position: absolute;
|
|
top: 44px;
|
|
float: left;
|
|
width: 200px;
|
|
z-index: 50;
|
|
right: 15%;
|
|
font-size: 13px;
|
|
background-color: #333333;
|
|
}
|
|
|
|
.alertItem {
|
|
margin-bottom: 2px;
|
|
}
|
|
.alertItem.withAvatar {
|
|
height: 40px;
|
|
background-size: 48px;
|
|
background-repeat: no-repeat;
|
|
background-color: rgb(61,61,61);
|
|
padding-left: 56px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
.alert {
|
|
padding-bottom: 12px;
|
|
background-color: rgb(61,61,61);
|
|
padding: 12px;
|
|
display: block;
|
|
}
|
|
|
|
.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: rgb(61,61,61);
|
|
margin-top: 8px;
|
|
padding: 12px;
|
|
}
|
|
.rowitem h1 {
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
-webkit-margin-before: 0;
|
|
-webkit-margin-after: 0;
|
|
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: rgb(61,61,61);
|
|
margin-top: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Algin to right in a flex head */
|
|
.to_right {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Topic View */
|
|
|
|
/* TODO: How should we handle the sticky headers? */
|
|
.topic_sticky_head {
|
|
}
|
|
|
|
/* 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: rgb(205,205,205);
|
|
}
|
|
|
|
.real_username {
|
|
float: left;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.mod_button {
|
|
margin-right: 5px;
|
|
display: block;
|
|
float: left;
|
|
}
|
|
.mod_button button {
|
|
border: none;
|
|
background: none;
|
|
color: white;
|
|
font-size: 12px;
|
|
padding: 0;
|
|
}
|
|
|
|
.like_label:before {
|
|
content: "+1";
|
|
}
|
|
.edit_label:before {
|
|
content: "Edit";
|
|
}
|
|
.trash_label:before {
|
|
content: "Delete";
|
|
}
|
|
.pin_label:before {
|
|
content: "Pin";
|
|
}
|
|
.lock_label:before {
|
|
content: "Lock";
|
|
}
|
|
.unlock_label:before {
|
|
content: "Unlock";
|
|
}
|
|
.unpin_label:before {
|
|
content: "Unpin";
|
|
}
|
|
.ip_label:before {
|
|
content: "IP";
|
|
}
|
|
.flag_label:before {
|
|
content: "Flag";
|
|
}
|
|
.level_label:before {
|
|
content: "Level";
|
|
}
|
|
|
|
.like_count_label:before {
|
|
content: "likes";
|
|
}
|
|
.like_count_label {
|
|
font-size: 12px;
|
|
display: block;
|
|
float: left;
|
|
line-height: 19px;
|
|
}
|
|
.like_count {
|
|
font-size: 12px;
|
|
display: block;
|
|
float: left;
|
|
line-height: 19px;
|
|
margin-right: 2px;
|
|
}
|
|
.like_count:before {
|
|
content: "|";
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.level_label, .level {
|
|
color: rgb(205,205,205);
|
|
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;
|
|
}
|
|
|
|
textarea {
|
|
background-color: #444444;
|
|
border-color: #555555;
|
|
color: #999999;
|
|
width: calc(100% - 15px);
|
|
min-height: 80px;
|
|
}
|
|
|
|
textarea:focus, input:focus, select:focus {
|
|
outline-color: rgb(95,95,95);
|
|
}
|
|
|
|
textarea.large {
|
|
min-height: 120px;
|
|
margin-top: 1px;
|
|
padding: 5px;
|
|
display: block;
|
|
}
|
|
|
|
.topic_reply_form textarea {
|
|
width: calc(100% - 5px);
|
|
min-height: 80px;
|
|
}
|
|
|
|
.formitem button, .formbutton {
|
|
background-color: #444444;
|
|
border: 1px solid #555555;
|
|
color: #999999;
|
|
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: rgb(61,61,61);
|
|
padding: 10px;
|
|
margin-right: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.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: #444444;
|
|
border: 1px solid #555555;
|
|
color: #999999;
|
|
padding-bottom: 6px;
|
|
font-size: 13px;
|
|
|
|
padding: 5px;
|
|
width: calc(100% - 16px);
|
|
}
|
|
|
|
.formitem select {
|
|
background-color: #444444;
|
|
border: 1px solid #555555;
|
|
color: #999999;
|
|
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;
|
|
}
|
|
|
|
.footer {
|
|
background-color: rgb(61,61,61);
|
|
margin-top: 5px;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
padding-left: 13px;
|
|
padding-right: 13px;
|
|
clear: left;
|
|
height: 25px;
|
|
}
|
|
.footer select {
|
|
background-color: #444444;
|
|
border: 1px solid #555555;
|
|
color: #999999;
|
|
font-size: 13px;
|
|
padding: 4px;
|
|
}
|
|
#poweredBy {
|
|
float: left;
|
|
margin-top: 4px;
|
|
}
|
|
#poweredBy span {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Forum View */
|
|
.rowhead, .opthead, .colstack_head, .rowhead .rowitem {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.has_opt {
|
|
margin-right: 0px;
|
|
display: inline-block;
|
|
float: left;
|
|
padding-right: 0px;
|
|
}
|
|
.rowhead .rowitem:not(.has_opt), .opthead .rowitem, .colstack_head .rowitem {
|
|
width: 100%;
|
|
}
|
|
|
|
.opt {
|
|
float: left;
|
|
margin-top: 8px;
|
|
height: 30.4px;
|
|
padding-left: 5px;
|
|
width: 100%;
|
|
background-color: rgb(61,61,61);
|
|
padding-top: 11px;
|
|
}
|
|
.opt a {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.create_topic_opt a:before {
|
|
content: "New Topic";
|
|
}
|
|
.locked_opt a:before {
|
|
content: "Locked";
|
|
}
|
|
|
|
/* 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: calc(100% - 284px);
|
|
}
|
|
.topic_list .topic_right {
|
|
height: 35px;
|
|
margin-left: 8px;
|
|
width: 108px;
|
|
}
|
|
.topic_list .rowitem:last-child {
|
|
margin-bottom: 10px;
|
|
}
|
|
.topic_list .lastReplyAt {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.topic_name_input {
|
|
width: 100%;
|
|
margin-right: 10px;
|
|
background-color: #444444;
|
|
border: 1px solid #555555;
|
|
color: #999999;
|
|
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;
|
|
}
|
|
|
|
/* Profiles */
|
|
#profile_left_lane {
|
|
width: 220px;
|
|
margin-top: 5px;
|
|
}
|
|
#profile_left_lane .avatarRow {
|
|
overflow: hidden;
|
|
max-height: 220px;
|
|
}
|
|
#profile_left_lane .avatar {
|
|
width: 100%;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
#profile_left_lane .username {
|
|
font-size: 14px;
|
|
display: block;
|
|
margin-top: 3px;
|
|
}
|
|
#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: #444444;
|
|
border: 1px solid #555555;
|
|
color: #999999;
|
|
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: rgb(61,61,61);
|
|
}
|
|
|
|
#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 .topic_inner_right {
|
|
display: block;
|
|
}
|
|
.topic_list .rowitem {
|
|
float: none;
|
|
}
|
|
.topic_list .topic_left {
|
|
width: calc(100% - 84px);
|
|
}
|
|
.topic_list .topic_right {
|
|
display: none;
|
|
}
|
|
#poweredBy span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 470px) {
|
|
.menu_create_topic, .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;
|
|
}
|
|
}
|