PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-02-01 03:46:44 +01:00
Code Issues Projects Releases Packages Wiki Activity

spoilered images inside comments/posts

Browse source
This commit is contained in:
byte[] 2019-12-06 10:47:56 -05:00
parent ae6e282424
commit 90bb70a527
1 changed files with 39 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
assets/css/views/images.scss
View file

@ -1,11 +1,11 @@
.image-flex-grid { .image-flex-grid {
padding-right: 0; padding-right: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.media-box__header { .media-box__header {
span.favorites, span.comments_count { span.favorites,
span.comments_count {
padding-left: 4px; padding-left: 4px;
} }
span.score { span.score {
@ -14,7 +14,8 @@
} }
.media-box__header--small { .media-box__header--small {
span.favorites, span.comments_count { span.favorites,
span.comments_count {
padding-left: 2px; padding-left: 2px;
} }
span.score { span.score {
@ -24,7 +25,8 @@
a.interaction--fave { a.interaction--fave {
color: $fave_color; color: $fave_color;
&.active, &:hover { &.active,
&:hover {
background: $fave_color; background: $fave_color;
color: $text_light_color; color: $text_light_color;
} }
@ -32,7 +34,8 @@ a.interaction--fave {
a.interaction--upvote { a.interaction--upvote {
color: $vote_up_color; color: $vote_up_color;
&.active, &:hover { &.active,
&:hover {
background: $vote_up_color; background: $vote_up_color;
color: $text_light_color; color: $text_light_color;
} }
@ -40,7 +43,8 @@ a.interaction--upvote {
a.interaction--downvote { a.interaction--downvote {
color: $vote_down_color; color: $vote_down_color;
&.active, &:hover { &.active,
&:hover {
background: $vote_down_color; background: $vote_down_color;
color: $text_light_color; color: $text_light_color;
} }
@ -48,7 +52,8 @@ a.interaction--downvote {
a.interaction--hide { a.interaction--hide {
color: $hide_color; color: $hide_color;
&.active, &:hover { &.active,
&:hover {
background: $hide_color; background: $hide_color;
color: $text_light_color; color: $text_light_color;
} }
@ -62,7 +67,9 @@ a.interaction--comments {
} }
} }
/* Disable spoilered image downvoting (see the interactions script) */ /* Disable spoilered image downvoting (see the interactions script) */
.interaction--downvote.disabled, .interaction--downvote.disabled,
.interaction--downvote.disabled:hover { .interaction--downvote.disabled:hover {
cursor: default; cursor: default;
@ -76,11 +83,14 @@ a.interaction--comments {
font-size: 12px; font-size: 12px;
} }
/* Images rendered using the 'images/image_container' partial (image lists, comment list previews, gallery thumbs) */ /* Images rendered using the 'images/image_container' partial (image lists, comment list previews, gallery thumbs) */
div.image-container { div.image-container {
position: relative; position: relative;
display: inline-block; display: inline-block;
overflow: hidden; /* prevent .media-box__overlay from overflowing the container */ overflow: hidden;
/* prevent .media-box__overlay from overflowing the container */
text-align: center; text-align: center;
a::before { a::before {
content: ""; content: "";
@ -88,7 +98,8 @@ div.image-container {
height: 100%; height: 100%;
vertical-align: middle; vertical-align: middle;
} }
img, video { img,
video {
vertical-align: middle; vertical-align: middle;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
@ -103,7 +114,16 @@ div.image-container {
} }
} }
/* spoilered images inside communications */
span.spoiler div.image-container {
display: block;
}
/* .image-container sizes, set by the partial. */ /* .image-container sizes, set by the partial. */
.thumb { .thumb {
max-width: 250px; max-width: 250px;
max-height: 250px; max-height: 250px;
@ -119,7 +139,9 @@ div.image-container {
height: 50px; height: 50px;
} }
/* Used for elements that wrap .image-container */ /* Used for elements that wrap .image-container */
.thumb-tiny-container { .thumb-tiny-container {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -143,12 +165,16 @@ div.image-container {
} }
} }
/* This and the one above needed for older browsers for some reason, appears to be a bug */ /* This and the one above needed for older browsers for some reason, appears to be a bug */
#image_target { #image_target {
max-width: 100%; max-width: 100%;
} }
/* Resizes large images to fit in a smaller container; width and height are defined inline */ /* Resizes large images to fit in a smaller container; width and height are defined inline */
.image-constrained { .image-constrained {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -214,7 +240,7 @@ div.image-container {
li { li {
display: inline-block; display: inline-block;
} }
li + li { li+li {
margin-left: 1em; margin-left: 1em;
} }
} }
@ -251,20 +277,16 @@ div.image-container {
flex-flow: row wrap; flex-flow: row wrap;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
&:empty { &:empty {
display: none; display: none;
} }
img { img {
max-height: 200px; max-height: 200px;
max-width: 200px; max-width: 200px;
} }
.scraper-preview--label { .scraper-preview--label {
cursor: pointer; cursor: pointer;
margin: 0 8px 8px 0; margin: 0 8px 8px 0;
.scraper-preview--image-wrapper { .scraper-preview--image-wrapper {
display: inline-block; display: inline-block;
padding: 9px; padding: 9px;
@ -278,8 +300,8 @@ div.image-container {
.scraper-preview--input { .scraper-preview--input {
display: none; display: none;
} }
&.checked > .scraper-preview--image-wrapper, &.checked>.scraper-preview--image-wrapper,
.scraper-preview--input:checked + .scraper-preview--image-wrapper { .scraper-preview--input:checked+.scraper-preview--image-wrapper {
opacity: 1; opacity: 1;
border-color: $input_border_active; border-color: $input_border_active;
background-color: $input_color_active; background-color: $input_color_active;