philomena/assets/css/views/_images.scss
David Joseph Guzsik 8d47f56917
Build assets using Webpack ()
* Build assets using webpack

* Change webpack bundling method, add path aliases, restore deploy script

* Remove babel dependencies

* Add buble rollup plugin and always attach promise polyfill to window

* Fix object formatting for buble rollup plugin config

* Remove reference to setImmediate from promise polyfill
2020-06-28 14:53:19 -04:00

318 lines
No EOL
5.8 KiB
SCSS

.image-flex-grid {
padding-right: 0;
padding-bottom: 0;
}
.media-box__header {
span.favorites,
span.comments_count {
padding-left: 4px;
}
span.score {
padding: 0 4px;
}
}
.media-box__header--small {
span.favorites,
span.comments_count {
padding-left: 2px;
}
span.score {
padding: 0 2px;
}
}
a.interaction--fave {
color: $fave_color;
&.active,
&:hover {
background: $fave_color;
color: $text_light_color;
}
}
a.interaction--upvote {
color: $vote_up_color;
&.active,
&:hover {
background: $vote_up_color;
color: $text_light_color;
}
}
a.interaction--downvote {
color: $vote_down_color;
&.active,
&:hover {
background: $vote_down_color;
color: $text_light_color;
}
}
a.interaction--hide {
color: $hide_color;
&.active,
&:hover {
background: $hide_color;
color: $text_light_color;
}
}
a.interaction--comments {
color: $link_hover_color;
&:hover {
background: $link_hover_color;
color: $background_color;
}
}
/* Disable spoilered image downvoting (see the interactions script) */
.interaction--downvote.disabled,
.interaction--downvote.disabled:hover {
cursor: default;
color: $downvote_disabled_color;
background: $media_box_color;
}
.tag-info__image {
border: $border;
text-align: center;
font-size: 12px;
}
/* Images rendered using the 'images/image_container' partial (image lists, comment list previews, gallery thumbs) */
div.image-container {
position: relative;
display: inline-block;
overflow: hidden;
/* prevent .media-box__overlay from overflowing the container */
text-align: center;
a::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img,
video {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
/* Make the link cover the whole container if the image is oblong */
a {
width: 100%;
height: 100%;
display: inline-block;
text-align: center;
vertical-align: middle;
}
}
/* spoilered images inside communications */
span.spoiler div.image-container {
display: block;
}
/* .image-container sizes, set by the partial. */
.thumb {
max-width: 250px;
max-height: 250px;
}
.thumb_small {
max-width: 150px;
max-height: 150px;
}
.thumb_tiny {
width: 50px;
height: 50px;
}
/* Used for elements that wrap .image-container */
.thumb-tiny-container {
width: 50px;
height: 50px;
}
//embedded images. kinda like image-container, but this one also shows a text, link to filter page, etc
.image-show-container {
color: $foreground_color;
display: inline-block;
max-width: 100%;
padding-bottom: 6px;
span.spoileredtag,
span.hiddentag {
font-weight: bold;
}
a {
color: $image_show_link_color;
}
&:hover a:hover {
color: $image_show_link_hover_color;
}
}
/* This and the one above needed for older browsers for some reason, appears to be a bug */
#image_target {
max-width: 100%;
}
/* Resizes large images to fit in a smaller container; width and height are defined inline */
.image-constrained {
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 100%;
max-height: 100%;
}
}
.image-scaled {
max-width: 100%;
max-height: 100%;
/* Due to the address bar hiding/reappearing in mobile browsers, viewport
* units are only reliable in desktop browsers. */
@media (min-width: $min_px_width_for_desktop_layout) {
max-height: 80vh;
}
}
.image-partscaled {
max-width: 100%;
}
.image-description {
margin-bottom: 5px;
overflow: auto;
img {
max-width: 100%;
}
background: $background_odd_color;
border: $border;
}
.image-description__text {
padding: 0 6px;
margin-bottom: 2px;
}
.image-size {
white-space: nowrap;
}
.js-source-link {
word-wrap: anywhere;
}
.interaction-user-list-item {
display: inline-block;
padding: 2px;
padding-right: 7px;
}
.image_menu {
padding-left: 0;
margin: 1em 0 0 0;
}
.horizontal-list {
margin: 0;
padding-left: 0;
list-style: none;
li {
display: inline-block;
}
li+li {
margin-left: 1em;
}
}
.dnp-warning {
padding: 0.5em;
border: 3px solid $vote_down_color;
background: $admin_links_color;
a {
color: $vote_down_color;
font-weight: bold;
&:hover {
color: $dnp_warning_hover_color;
}
}
h4 {
margin-top: 0.3em;
margin-bottom: 0.2em;
}
}
.derpy__2fa {
width: 25%;
min-width: 200px;
}
.derpy__login {
margin-left: 8px;
align-self: flex-end;
}
#js-image-upload-previews {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
&:empty {
display: none;
}
img {
max-height: 200px;
max-width: 200px;
}
.scraper-preview--label {
cursor: pointer;
margin: 0 8px 8px 0;
.scraper-preview--image-wrapper {
display: inline-block;
padding: 9px;
border: 1px solid transparent;
opacity: .6;
}
.scraper-preview--image {
background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPjxyZWN0IGZpbGw9IiNFRkVGRUYiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiLz48cmVjdCBmaWxsPSIjRUZFRkVGIiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4PSI4IiB5PSI4Ii8+PC9zdmc+Cg==) repeat top left;
background-size: 16px;
}
.scraper-preview--input {
display: none;
}
&.checked>.scraper-preview--image-wrapper,
.scraper-preview--input:checked+.scraper-preview--image-wrapper {
opacity: 1;
border-color: $input_border_active;
background-color: $input_color_active;
}
}
}
.detail-link {
margin-right: 8px;
}
.full-height {
height: 100%;
}