gosora/themes/shadow/public/main.css

1061 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;
}
#menu_forums a:after {
content: "{{index .Phrases "menu_forums"}}";
}
.menu_topics a:after {
content: "{{index .Phrases "menu_topics"}}";
}
.menu_account a:after {
content: "{{index .Phrases "menu_account"}}";
}
.menu_profile a:after {
content: "{{index .Phrases "menu_profile"}}";
}
.menu_panel a:after {
content: "{{index .Phrases "menu_panel"}}";
}
.menu_logout a:after {
content: "{{index .Phrases "menu_logout"}}";
}
.menu_login a:after {
content: "{{index .Phrases "menu_login"}}";
}
.menu_register a:after {
content: "{{index .Phrases "menu_register"}}";
}
.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:before {
content: "{{index .Phrases "topics_likes_suffix"}}";
}
.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: "{{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-family: monospace;
}
.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% - 5px);
min-height: 80px;
}
.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: 8px;
padding-top: 8px;
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;
}
}