philomena/assets/css/views/_images.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 {
  overflow: auto;

  img {
    max-width: 100%;
  }
}

.image-size {
  white-space: nowrap;
}

.js-source-link {
  word-wrap: break-word;
}

#image-source > p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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, video {
    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%;
}

.image_sources {
  display: grid;
  grid-template-columns: 2em auto;
}

.image_source__icon, .image_source__link {
  padding: 0.5em;
  overflow: hidden;
}

.image_source__icon {
  justify-self: center;
}