overleaf/services/web/frontend/stylesheets/app/templates-v2.less

.gallery-item-title {
  * {
    vertical-align: middle;
  }
  margin-top: @line-height-computed; // match h1 header margin-top
  margin-bottom: @margin-xl;
  h1 {
    display: inline;
    margin: 0;
  }
}
.gallery-official {
  margin-left: @margin-sm;
  &:extend(.label);
  &:extend(.label-info);
  cursor: default;
  font-size: 14px;
  padding: 3px 8px;
}

.field-title {
  font-weight: bold;
}

.filters {
  float: right;
  margin-bottom: @margin-lg;

  @media (max-width: @screen-md-min) {
    float: none;
  }
}

.cta-links {
  .cta-link.btn {
    margin: 0 @margin-sm @margin-sm 0;
  }
}

.popular-tags {
  .gallery-thumbnail {
    margin: 0 0 1em 0 !important;
  }
}

.tag-link {
  margin: 0 @margin-xs @margin-sm 0;
  max-width: 100%;
  white-space: inherit;
}

.gallery-abstract {
  word-break: break-word;
  hyphens: auto;
  a {
    hyphens: none;
  }
}

.gallery-thumbnail {
  display: inline-block;
  margin: 0 0 2em;
  width: 100%;

  .thumbnail {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0 0 @margin-sm 0;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;

    h3 {
      color: @link-color-alt;
      margin: 10px 0px 10px 20px;
    }

    &.thumbnail-tag {
      height: 100px;
    }
  }

  .caption {
    // Override Server Pro template styles
    background: none;
    border: none;
    text-align: center;
  }

  .caption__description {
    font-style: italic;
    padding: 0 0 5px 0;
    .text-overflow();
  }

  .gallery-list-item-title {
    display: flex;
    align-items: center;
    justify-content: center;
    * {
      flex-basis: content;
      cursor: inherit;
    }
  }

  .caption__title {
    text-align: center;
    .text-overflow();
  }

  a {
    &:hover {
      text-decoration: none; // disable underlining label
      .caption__title {
        text-decoration: underline;
      }
    }
  }
}

.gallery-large-pdf-preview {
  border: solid 1px @gray-lightest;
  margin-top: @margin-lg;
  img {
    max-width: 100%;
  }
}

@top-picks-banner-extra-width: 50px;
.top-picks-banner {
  padding: 0px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  @media (min-width: (@screen-lg-min + @top-picks-banner-extra-width)) {
    width: @container-lg + @top-picks-banner-extra-width;
  }

  @media (max-width: (@screen-lg-min + @top-picks-banner-extra-width - 1)) {
    border-radius: 0;
  }
}

.gallery-top-pick-badge {
  margin-left: @margin-sm;
  &:extend(.label);
  &:extend(.label-primary);
  cursor: default;
  font-size: 14px;
  padding: 3px 8px;
}

/* Media Queries */
@media (max-width: @screen-xs-max) {
  .gallery-container {
    column-count: 2;
    column-gap: 2em;
  }
}
@media (min-width: @screen-sm-min) {
  .gallery-container {
    &.use-column {
      column-count: 3;
      column-gap: 3em;
    }
    &.use-percent {
      margin: 0 -1.5em;
      .gallery-thumbnail {
        width: 33.3333333%;
        padding: 0 1.5em;
      }
    }
  }
}
@media (min-width: @screen-md-min) {
  .gallery-large-pdf-preview {
    margin-top: 0;
  }
}

.section-tags {
  margin-bottom: @margin-xl;
  margin-top: @margin-md;
}