729 lines
11 KiB
CSS
729 lines
11 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;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.topic_sticky_head {
|
|
}
|
|
.topic_closed_head {
|
|
}
|
|
|
|
.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";
|
|
}
|
|
.unpin_label:before {
|
|
content: "Unpin";
|
|
}
|
|
.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 {
|
|
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;
|
|
clear: both;
|
|
height: 32px;
|
|
}
|
|
.pageitem {
|
|
background-color: rgb(61,61,61);
|
|
padding: 10px;
|
|
margin-right: 4px;
|
|
font-size: 13px;
|
|
float: left;
|
|
}
|
|
|
|
.rowlist.bgavatars .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;
|
|
}
|
|
|
|
/* Forum View */
|
|
.rowhead {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.has_opt {
|
|
margin-right: 0px;
|
|
display: inline-block;
|
|
float: left;
|
|
padding-right: 0px;
|
|
}
|
|
.rowhead .rowitem:not(.has_opt) {
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
/* TO-DO: 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|