gosora/themes/tempra-simple/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

943 lines
16 KiB
CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
font-family: arial;
padding-bottom: 8px;
}
/* Patch for Edge, until they fix emojis in arial x.x */
@supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } }
ul {
padding-left: 0px;
padding-right: 0px;
height: 36px;
list-style-type: none;
border: 1px solid hsl(0, 0%, 80%);
background-color: rgb(252,252,252);
margin-bottom: 12px;
}
li {
height: 35px;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background: white;
border-bottom: 1px solid hsl(0, 0%, 80%);
}
li:hover { background: rgb(252,252,252); }
li a {
text-decoration: none;
color: black;
font-size: 17px;
}
.menu_left {
float: left;
border-right: 1px solid hsl(0, 0%, 80%);
padding-right: 10px;
}
.menu_right {
float: right;
border-left: 1px solid hsl(0, 0%, 80%);
padding-right: 10px;
}
#menu_overview {
background: none;
padding-right: 13px;
}
#menu_overview a {
padding-left: 3px;
}
#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:before {
content: '🔔︎';
}
.menu_bell {
cursor: default;
}
.menu_alerts {
/*padding-left: 7px;*/
font-size: 20px;
padding-top: 2px;
color: rgb(80,80,80);
}
.menu_alerts .alert_counter {
position: relative;
font-size: 8px;
top: -25px;
background-color: rgb(190,0,0);
color: white;
width: 14px;
left: 10px;
line-height: 8px;
padding-top: 2.5px;
height: 14px;
text-align: center;
border: white solid 1px;
}
.menu_alerts .alert_counter:empty {
display: none;
}
.selectedAlert {
background: white;
color: black;
}
.selectedAlert:hover {
background: white;
color: black;
}
.selectedAlert .alert_counter { display: none; }
.menu_alerts .alertList {
display: none;
z-index: 500;
}
.selectedAlert .alertList {
position: absolute;
top: 51px;
display: block;
background: white;
font-size: 10px;
line-height: 16px;
width: 300px;
right: calc(5% + 7px);
border-top: 1px solid hsl(0, 0%, 80%);
border-left: 1px solid hsl(0, 0%, 80%);
border-right: 1px solid hsl(0, 0%, 80%);
border-bottom: 1px solid hsl(0, 0%, 80%);
margin-bottom: 10px;
}
.alertItem {
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 17px;
padding-bottom: 16px;
}
.alertItem.withAvatar {
background-size: 60px;
background-repeat: no-repeat;
padding-right: 12px;
padding-left: 68px;
height: 50px;
}
.alertItem.withAvatar:not(:last-child) {
border-bottom: 1px solid rgb(230,230,230);
}
.alertItem.withAvatar .text {
overflow: hidden;
text-overflow: ellipsis;
float: right;
height: 40px;
width: 100%;
white-space: nowrap;
}
.alertItem .text {
font-size: 13px;
font-weight: normal;
margin-left: 5px;
}
.container {
width: 90%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.rowblock {
border: 1px solid hsl(0, 0%, 80%);
width: 100%;
padding: 0px;
padding-top: 0px;
}
.rowblock:empty {
display: none;
}
.rowmenu {
border: 1px solid hsl(0, 0%, 80%);
}
.rowsmall {
font-size: 12px;
}
.colstack_left {
float: left;
width: 30%;
margin-right: 8px;
}
.colstack_right {
float: left;
width: 65%;
width: calc(70% - 15px);
}
.colstack_item {
border: 1px solid hsl(0, 0%, 80%);
padding: 0px;
padding-top: 0px;
width: 100%;
margin-bottom: 12px;
overflow: hidden;
word-wrap: break-word;
}
.colstack_head {
margin-bottom: 0px;
}
.colstack_left:empty, .colstack_right:empty {
display: none;
}
.colstack_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 12px;
margin-left: 5px;
margin-top: 2px;
}
.grid_item {
border: 1px solid hsl(0, 0%, 80%);
word-wrap: break-word;
background-color: white;
width: 100%;
overflow: hidden;
}
.grid_stat, .grid_istat {
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
font-size: 16px;
}
.grid_istat {
margin-bottom: 5px;
}
.stat_green {
background-color: lightgreen;
border-color: lightgreen;
}
.stat_orange {
background-color: #ffe4b3;
border-color: #ffe4b3;
}
.stat_red {
background-color: #ffb2b2;
border-color: #ffb2b2;
}
.stat_disabled {
background-color: lightgray;
border-color: lightgray;
}
.rowhead .rowitem, .colstack_head .rowitem {
background-color: rgb(252,252,252);
}
.rowhead h1, .colstack_head h1 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-block-start: 0;
margin-block-end: 0;
font-weight: normal;
font-size: 16px;
}
.rowitem {
width: 100%;
padding-left: 10px;
padding-top: 14px;
padding-bottom: 12px;
padding-right: 10px;
background-color: white;
}
.rowitem:not(:last-child) {
border-bottom: 1px solid hsl(0,0%,85%);
}
.rowitem a {
text-decoration: none;
color: black;
}
.rowitem a:hover {
color: silver;
}
.top_post {
margin-bottom: 12px;
}
.opthead {
display: none;
}
.topic_list_title_block {
display: flex;
}
.has_opt {
border-bottom: 1px solid hsl(0, 0%, 80%);
}
.has_opt .rowitem {
border-right: 1px solid hsl(0, 0%, 80%);
border-bottom: none;
}
.optbox {
margin-left: auto;
}
.opt {
font-size: 32px;
background-color: white;
width: 50px;
text-align: center;
}
.create_topic_opt a.create_topic_link:before {
content: '🖊︎';
}
.create_topic_opt, .create_topic_opt a {
color: rgb(120,120,120);
text-decoration: none;
}
.locked_opt {
color: rgb(80,80,80);
}
.locked_opt:before {
content: '🔒︎';
}
/*.mod_opt a.moderate_link:before {
content: '🔨︎';
}
.mod_opt, .mod_opt a {
color: rgb(120,120,120);
text-decoration: none;
}*/
.to_right {
margin-left: auto;
float: right;
}
.rowlist {
font-size: 15px;
}
.datarow, .rowlist .rowitem {
padding-top: 10px;
padding-bottom: 10px;
}
.bgsub {
display: none;
}
.bgavatars .rowitem {
background-repeat: no-repeat;
background-size: 40px;
padding-left: 46px;
}
.formrow {
width: 100%;
background-color: white;
}
/* Clearfix */
.formrow:before, .formrow:after {
content: " ";
display: table;
}
.formrow:after { clear: both; }
.formrow:not(:last-child) { border-bottom: 1px dotted hsl(0, 0%, 80%); }
.formitem {
float: left;
padding: 10px;
min-width: 20%;
font-weight: normal;
}
.formitem:not(:last-child) {
border-right: 1px dotted hsl(0, 0%, 80%);
}
.formitem.invisible_border {
border: none;
}
input, select {
padding: 3px;
}
/* Mostly for textareas */
.formitem:only-child {
width: 100%;
}
.formitem:only-child select {
padding: 1px;
margin-top: -1px;
margin-bottom: -1px;
}
.formitem textarea {
width: 100%;
height: 100px;
outline-color: #8e8e8e;
}
.formitem:has-child() {
margin: 0 auto;
float: none;
}
.formitem:not(:only-child).formlabel {
padding-top: 15px;
padding-bottom: 12px;
}
.formbutton, button, input[type="submit"] {
background: white;
border: 1px solid #8e8e8e;
}
.formbutton {
padding: 7px;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
.formbutton, ip_search_search {
border-color: hsl(0, 0%, 80%);
}
.dont_have_account {
color: #505050;
font-size: 12px;
font-weight: normal;
float: right;
}
.ip_search_block {
border-bottom: none;
}
.ip_search_block .rowitem {
display: flex;
}
.ip_search_input {
width: 100%;
}
.ip_search_search {
margin-left: 10px;
}
/* TODO: Add the avatars to the forum list */
.extra_little_row_avatar {
display: none;
}
.shift_left {
float: left;
}
.shift_right {
float: right;
}
/* Topics */
.topic_list {
border-bottom: none;
}
.topic_list .topic_row {
display: grid;
grid-template-columns: calc(100% - 204px) 204px;
}
.topic_list .rowitem {
border-bottom: 1px solid hsl(0,0%,85%);
}
.topic_list .topic_inner_right {
display: none;
}
.topic_list .lastReplyAt {
white-space: nowrap;
}
.topic_list .lastReplyAt:before {
content: "{{index .Phrases "topics_last"}}: ";
}
.topic_list .starter:before {
content: "{{index .Phrases "topics_starter"}}: ";
}
@supports not (display: grid) {
.topic_list .rowitem {
float: left;
overflow: hidden;
}
.topic_list .topic_left {
width: calc(100% - 204px);
}
.topic_list .topic_right {
width: 204px;
}
}
.topic_left, .topic_right {
display: flex;
padding: 0px;
height: 58px;
overflow: hidden;
}
.topic_left img, .topic_right img {
width: 64px;
height: auto;
}
.topic_left .topic_inner_left, .topic_right > span {
margin-top: 10px;
margin-left: 8px;
}
.postImage {
max-width: 100%;
max-height: 200px;
background-color: white;
padding: 10px;
}
.little_row_avatar {
display: none;
}
.quick_create_form .quick_button_row .formitem {
display: flex;
}
.quick_create_form .formbutton:first-child {
margin-left: 0px;
margin-right: 5px;
}
.quick_create_form .formbutton:not(:first-child) {
margin-left: 0px;
margin-right: 5px;
}
.quick_create_form .formbutton:last-child {
margin-left: auto;
}
.quick_create_form .upload_file_dock {
display: flex;
}
.quick_create_form .uploadItem {
display: inline-block;
margin-left: 8px;
margin-right: 8px;
background-size: 25px 35px;
background-repeat: no-repeat;
padding-left: 30px;
}
.username, .panel_tag {
text-transform: none;
margin-left: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
color: #505050; /* 80,80,80 */
background-color: #FFFFFF;
border-style: solid;
border-color: hsl(0, 0%, 80%);
border-width: 1px;
font-size: 15px;
}
.topic_item {
display: flex;
}
.topic_status_sticky {
display: none;
}
.topic_status_closed {
margin-left: auto;
margin-top: -5px;
font-size: 0.90em;
margin-bottom: -2px;
}
.topic_sticky {
background-color: rgb(255,255,234);
}
.topic_closed {
background-color: rgb(248,248,248);
}
.topic_sticky_head {
background-color: #FFFFEA;
}
.topic_closed_head {
background-color: #eaeaea;
}
.topic_status {
text-transform: none;
margin-left: 8px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #E8E8E8; /* 232,232,232. All three RGB colours being the same seems to create a shade of gray */
color: #505050; /* 80,80,80 */
border-radius: 2px;
}
.topic_status:empty {
display: none;
}
button.username {
position: relative;
top: -0.25px;
}
.username.level {
color: #303030;
}
.username.real_username {
color: #404040;
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
}
.username.real_username:hover {
color: black;
}
.post_item > .username {
margin-top: 20px;
display: inline-block;
}
.post_item > .mod_button > button {
font-size: 15px;
color: #202020;
opacity: 0.7;
}
.post_item > .mod_button > button:hover {
opacity: 0.9;
}
.user_tag {
float: right;
color: #505050;
font-size: 16px;
}
.post_item {
background-size: 128px;
padding-left: 136px;
}
.staff_post {
background-color: #ffeaff;
}
.mod_button {
margin-right: 4px;
}
.like_count_label, .like_count {
display: none;
}
.has_likes .like_count_label, .has_likes .like_count {
display: block;
}
.like_label:before, .like_count_label:before {
content: "😀";
}
.like_count_label {
color: #505050;
float: right;
opacity: 0.85;
margin-left: 5px;
}
.like_count {
float: right;
color: #505050;
border-left: none;
padding-left: 5px;
padding-right: 5px;
font-size: 17px;
}
.edit_label:before {
content: "🖊️";
}
.trash_label:before {
content: "🗑️";
}
.pin_label:before, .unpin_label:before {
content: "📌";
}
.remove_like, .unpin_label, .unlock_label {
background-color: #D6FFD6;
}
.lock_label:before, .unlock_label:before {
content: "🔒";
}
.ip_label:before {
content: "🔍";
}
.flag_label:before {
content: "🚩";
}
.level_label:before {
content: "👑";
}
.level_label {
color: #505050;
opacity: 0.85;
}
.controls {
margin-top: 23px;
display: inline-block;
width: 100%;
}
.action_item {
padding: 14px;
text-align: center;
background-color: rgb(255,245,245);
}
.postQuote {
border: 1px solid hsl(0, 0%, 80%);
background: white;
padding: 5px;
margin: 0px;
display: inline-block;
width: 100%;
margin-bottom: 8px;
}
.level {
float: right;
color: #505050;
border-left: none;
padding-left: 5px;
padding-right: 5px;
font-size: 17px;
}
.mention {
font-weight: bold;
}
.show_on_edit, .auto_hide, .hide_on_big, .show_on_mobile {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
display: inline-block;
width: 12px;
height: 12px;
margin-bottom: -2px;
border: 1px solid hsl(0, 0%, 80%);
background-color: white;
}
input[type=checkbox]:checked + label .sel {
display: inline-block;
width: 5px;
height: 5px;
background-color: white;
}
input[type=checkbox] + label.poll_option_label {
width: 18px;
height: 18px;
margin-right: 2px;
background-color: white;
border: 1px solid hsl(0, 0%, 70%);
color: #505050;
}
input[type=checkbox]:checked + label.poll_option_label .sel {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 3px;
background: hsl(0,0%,70%);
}
.poll_option {
margin-bottom: 1px;
}
.poll_item {
display: flex;
padding-left: 8px;
background: none !important;
}
.poll_buttons button {
margin-top: 8px;
padding: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid hsl(0, 0%, 70%);
}
.poll_results {
margin-left: auto;
}
.quick_create_form .pollinputlabel {
display: none;
}
.alert {
display: block;
padding: 5px;
margin-bottom: 10px;
border: 1px solid hsl(0, 0%, 80%);
}
.alert_success {
display: block;
padding: 5px;
border: 1px solid A2FC00;
margin-bottom: 10px;
background-color: DAF7A6;
}
.alert_error {
display: block;
padding: 5px;
border: 1px solid #FF004B;
margin-bottom: 8px;
background-color: #FEB7CC;
}
.prev_button, .next_button {
position: fixed;
top: 50%;
font-size: 30px;
border-width: 1px;
background-color: #FFFFFF;
border-style: dotted;
border-color: #505050;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
z-index: 100;
}
.prev_button a, .next_button a {
line-height: 28px;
margin-top: 2px;
margin-bottom: 0px;
display: block;
text-decoration: none;
color: #505050;
}
.prev_button {
left: 14px;
}
.next_button {
right: 14px;
}
.head_tag_upshift {
float: right;
position: relative;
top: -2px;
}
#poweredByHolder {
border: 1px solid hsl(0, 0%, 80%);
margin-top: 12px;
clear: both;
height: 40px;
padding: 6px;
padding-left: 10px;
padding-right: 10px;
}
#poweredByHolder select {
padding: 2px;
margin-top: 1px;
}
#poweredBy {
float: left;
margin-top: 4px;
}
#poweredBy span {
font-size: 12px;
}
#poweredByName {
color: black;
text-decoration: none;
}
#profile_comments .rowitem {
background-repeat: no-repeat, repeat-y;
background-size: 128px;
padding-left: 136px;
}
/* Profiles */
#profile_left_lane {
width: 220px;
}
#profile_left_pane {
margin-bottom: 12px;
}
#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_left_lane .report_item:after {
content: "{{index .Phrases "topic_report_button_text"}}";
}
#profile_right_lane {
width: calc(100% - 245px);
}
#profile_comments {
overflow: hidden;
border-top: none;
margin-bottom: 0;
}
.simple .user_tag {
font-size: 14px;
}
.pageset {
display: flex;
margin-bottom: 10px;
margin-top: 8px;
}
.pageitem {
background-color: white;
padding: 5px;
margin-right: 5px;
padding-bottom: 4px;
border: 1px solid hsl(0, 0%, 80%);
}
.pageitem a {
color: black;
text-decoration: none;
}
.colstack_right .pageset {
margin-top: -5px;
}
{{template "media.partial.css" }}