bd8672681f
Add upvote and downvote buttons beneath thumbnails on the post index page. This is disabled by default. To enable it, click the "..." menu in the top right of the page, then click "Show scores". This is currently a per-search setting, not an account setting. If you enable it in one tab, it won't be enabled in other tabs.
157 lines
4.4 KiB
SCSS
157 lines
4.4 KiB
SCSS
@import "../../javascript/src/styles/base/000_vars.scss";
|
|
|
|
article.post-preview {
|
|
width: 154px;
|
|
margin: 0 10px 10px 0;
|
|
text-align: center;
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: top;
|
|
|
|
a {
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
.post-animation-icon {
|
|
color: var(--preview-icon-color);
|
|
background: var(--preview-icon-background);
|
|
}
|
|
}
|
|
|
|
&.captioned {
|
|
height: auto;
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
&.post-preview-compact {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.desc {
|
|
font-size: var(--text-sm);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
img {
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
/* Avoid dead space around thumbnails in tables. */
|
|
table article.post-preview {
|
|
height: auto;
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.post-preview {
|
|
img {
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
&.post-status-has-children img {
|
|
border-color: var(--preview-has-children-color);
|
|
}
|
|
|
|
&.post-status-has-parent img {
|
|
border-color: var(--preview-has-parent-color);
|
|
}
|
|
|
|
&.post-status-has-children.post-status-has-parent img {
|
|
border-color: var(--preview-has-children-color) var(--preview-has-parent-color) var(--preview-has-parent-color) var(--preview-has-children-color);
|
|
}
|
|
|
|
&.post-status-deleted img {
|
|
border-color: var(--preview-deleted-color);
|
|
}
|
|
|
|
&.post-status-has-children.post-status-deleted img {
|
|
border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-children-color);
|
|
}
|
|
|
|
&.post-status-has-parent.post-status-deleted img {
|
|
border-color: var(--preview-has-parent-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
|
|
}
|
|
|
|
&.post-status-has-children.post-status-has-parent.post-status-deleted img {
|
|
border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
|
|
}
|
|
|
|
/* Pending and flagged posts have blue borders (except in the modqueue). */
|
|
&.post-status-pending:not(.mod-queue-preview) img,
|
|
&.post-status-flagged:not(.mod-queue-preview) img {
|
|
border-color: var(--preview-pending-color);
|
|
}
|
|
|
|
&.post-status-has-children.post-status-pending:not(.mod-queue-preview) img,
|
|
&.post-status-has-children.post-status-flagged:not(.mod-queue-preview) img {
|
|
border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-children-color);
|
|
}
|
|
|
|
&.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
|
|
&.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
|
|
border-color: var(--preview-has-parent-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
|
|
}
|
|
|
|
&.post-status-has-children.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
|
|
&.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
|
|
border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
|
|
}
|
|
}
|
|
|
|
/* Flagged posts have red borders for approvers. */
|
|
body[data-current-user-can-approve-posts="true"] .post-preview {
|
|
&.post-status-flagged img {
|
|
border-color: var(--preview-flagged-color);
|
|
}
|
|
|
|
&.post-status-has-children.post-status-flagged img {
|
|
border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-children-color);
|
|
}
|
|
|
|
&.post-status-has-parent.post-status-flagged img {
|
|
border-color: var(--preview-has-parent-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
|
|
}
|
|
|
|
&.post-status-has-children.post-status-has-parent.post-status-flagged img {
|
|
border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 660px) {
|
|
article.post-preview {
|
|
margin: 0;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
|
|
a {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
img {
|
|
max-width: 33.3vw;
|
|
max-height: 33.3vw;
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
.user-disable-cropped-false {
|
|
article.post-preview {
|
|
width: 33.3%;
|
|
height: 33.3vw;
|
|
overflow: hidden;
|
|
}
|
|
|
|
img {
|
|
width: 33.3vw;
|
|
height: 33.3vw;
|
|
|
|
&.has-cropped-false {
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|