gosora/themes/shadow/public/main.css
Azareal 0e9cebfa47 Overhauled the widget system. You can now specify more complex logic for where a widget can show up and you can now place widgets in the footer.
Added fsnotify as a dependency, we'll be using it, Rez, and Riot (maybe) soon.
Removed the intercept_build_widgets vhook.
You can now pass an ID to BlankReply() for mocking replies or whatever else you want to do with this.
Added the dock template function for widget docks.
Added the logf internal function to the template transpiler and did some minor clean-up.
Removed the Sidebars property from theme.json and added the more general Docks one.
Improved the footer and the associated CSS.
Added the about widget, previously the AboutSegment feature.
Removed the about_segment_title and about_segment_body settings.
Gosora now exits when it receives the appropriate OS signal.
Refactored the modlogs route.

More progress on the theme in the Control Panel.
2017-11-29 02:34:02 +00:00

933 lines
16 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;
}
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: "Alerts";
}
.menu_alerts .alertList, .auto_hide {
display: none;
}
.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);
}
.alert {
padding-bottom: 12px;
background-color: var(--main-block-color);
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: 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;
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;
}
/* 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: 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: "+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: 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;
}
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;
}
.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);
}
.formitem 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;
}
.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 {
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;
}
/* 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: var(--main-block-color);
padding-top: 11px;
}
.opt a {
font-size: 11px;
}
.create_topic_opt a:before {
content: "New Topic";
}
.locked_opt a:before {
content: "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_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: "Last: ";
}
.topic_list .starter:before {
content: "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_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 .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) {
.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;
}
}