gosora/themes/shadow/public/main.css
Azareal 74e09efb63 Fixed a bug where it would use the wrong templates for Tempra Simple, Tempra Cursive, and Shadow
Likes are now done over AJAX.
Posts you have liked are now visually differentiated from those which you have not.
Added support for OR to the where parser.
|| and && now get translated to OR and AND in the where parser.
Added support for ( and ) in the where parser.
Added an adapter and builder method for getting the database version.
Multiple wheres can now be chained with the micro and accumulator builders.
Added the In method to the accumulator select builder.
Added the GetConn method to the builder.
/uploads/ files should now get cached properly.
Added more tooltips for topic titles and usernames.

Fixed a bug in the runners where old stale templates would be served.
Fixed a bug where liking topics didn't work.
Began moving the database initialisation logic out of {adapter}.go and into querygen.
Tweaked the alert direction to show the newest alerts rather than the oldest.
Tweaked the WS JS to have it handle messages more efficiently.
Partially fixed an issue where inline edited posts would lack newlines until the page is refreshed.
Used arrow functions in a few places in global.js to save a few characters.

Schema:
Added the liked, oldestItemLikedCreatedAt and lastLiked columns to the users table.
Added the createdAt column to the likes table.

MySQL Update Queries:
ALTER TABLE `users` ADD COLUMN `liked` INT NOT NULL DEFAULT '0' AFTER `topics`;
ALTER TABLE `users` ADD COLUMN `oldestItemLikedCreatedAt` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP AFTER `liked`;
ALTER TABLE `users` ADD COLUMN `lastLiked` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP AFTER `oldestItemLikedCreatedAt`;
ALTER TABLE `likes` ADD COLUMN `createdAt` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP AFTER `sentBy`;
delete from `likes`;
delete from `activity_stream` where `event` = 'like';
delete from `activity_stream_matches` where `asid` not in(select `asid` from `activity_stream`);
update `topics` set `likeCount` = 0;
update `replies` set `likeCount` = 0;
2018-03-31 06:25:27 +01:00

1064 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, .like_count {
display: none;
}
.like_count_label:before {
content: "{{index .Phrases "topics_likes_suffix"}}";
}
.has_likes .like_count_label {
font-size: 12px;
display: block;
float: left;
line-height: 19px;
}
.has_likes .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;
}
}