gosora/themes/shadow/public/main.css
Azareal 5a43432b80 Replaced most of the uses of fmt with log.
Replaced the io.Writers with http.ResponseWriters.
Refactored the compiled template calls.
Redirect port 443 to port 80.
Catch more errors from templates.
Fixed a few mutexes which are never unlocked.
Eliminated an unnecessary parameter in InternalError()
Temporarily commented out users_penalties so that the installer will succeed.
A couple more template types can be remapped now.
Tweaked the theme.
2017-08-13 12:22:34 +01:00

666 lines
10 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 {
/* Coming Soon. Hidden so it doesn't distract me while I design this theme */
display: none;
}
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;
}
.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 {
display: none;
}
.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;
}
.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;
}
/* 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;
}
#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;
}
}