overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss

.gallery.gallery-tagged {
  .gallery-title {
    display: block;
    text-align: left;
  }

  .gallery-summary {
    text-align: left;
    max-width: 828px;
  }

  .gallery-filters {
    @include media-breakpoint-down(lg) {
      margin-top: var(--spacing-06);
    }
  }

  h2 {
    margin-top: 0;
  }
}

.gallery {
  margin-top: var(--spacing-10);

  .gallery-tagged-tags-container-spacing {
    padding: 0 var(--spacing-09);
    margin-bottom: var(--spacing-16);

    h2 {
      margin-bottom: var(--spacing-09);
    }
  }

  .gallery-filters {
    float: right;
    margin-bottom: var(--spacing-11);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-04);

    @include media-breakpoint-down(lg) {
      float: none;
    }

    a {
      text-decoration: none;

      &:visited {
        color: var(--green-50);
      }

      &:hover {
        color: var(--green-60);
      }

      &.active {
        font-weight: 600;
        text-decoration: underline;
      }
    }
  }

  .gallery-header {
    margin-bottom: var(--spacing-09);

    @include media-breakpoint-up(lg) {
      max-width: $templates-search-max-width;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: auto;
      margin-right: auto;
    }
  }

  .gallery-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-06);
    text-align: center;
  }

  .gallery-summary {
    @include body-lg;

    text-align: center;
    margin-bottom: 0;
  }

  .tagged-header-container {
    margin-bottom: var(--spacing-16);
  }

  .top-picks-banner {
    padding: 0;
    margin: 0 auto var(--spacing-16) auto;

    h2 {
      @include heading-xl;
    }

    .doc-rows-container {
      margin-top: var(--spacing-09);
    }
  }

  .recent-templates-container {
    padding: 0 var(--spacing-09);
    margin-bottom: var(--spacing-16);

    h2 {
      margin-bottom: var(--spacing-09);

      @include heading-xl;
    }
  }

  .no-articles-matching {
    color: var(--neutral-90);
    font-weight: 600;

    @include heading-lg;
  }

  .template-summary {
    margin-top: var(--spacing-02);
    margin-bottom: var(--spacing-09);

    @include body-lg;
  }

  @mixin line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .popular-tags-list,
  .gallery-container {
    --bs-gutter-x: var(--spacing-09);

    row-gap: var(--spacing-11);
  }

  .gallery-container {
    align-items: baseline;
  }

  .gallery-thumbnail {
    a {
      @extend .link-black-text;

      display: inline-block;
      width: 100%;

      .thumbnail,
      .thumbnail-tag {
        position: relative;

        &::before {
          content: '';
          background: var(--neutral-90);
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transition: opacity 0.15s ease-in-out;
        }
      }

      .thumbnail-tag {
        &::before {
          border-radius: var(--border-radius-medium);
        }
      }

      .thumbnail {
        &::before {
          border-radius: var(--border-radius-base);
        }
      }

      &:hover {
        .thumbnail,
        .thumbnail-tag {
          &::before {
            transition: opacity 0.15s ease-in-out;
            opacity: 0.08;
          }
        }
      }
    }

    .thumbnail,
    .thumbnail-tag {
      margin: 0 0 var(--spacing-08) 0;

      img {
        width: 100%;
        display: inline-block;
      }
    }

    .thumbnail {
      img {
        @include shadow-lg;

        border-radius: var(--border-radius-base);
      }
    }

    .caption {
      // Override Server Pro template styles
      background: none;
      border: none;
      margin-top: var(--spacing-04);
    }

    .caption-description {
      color: var(--neutral-70);
      margin-bottom: 0;

      @include line-clamp;
    }

    .author-name {
      margin-top: var(--spacing-04);
      color: var(--neutral-70);
      font-weight: 600;
    }

    .gallery-list-item-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-04);

      .badge-container {
        display: inline-block;
        text-wrap: nowrap;

        .badge:not(:first-child) {
          margin-left: var(--spacing-04);
        }
      }

      * {
        flex-basis: content;
        cursor: inherit;
      }
    }

    .caption-title {
      color: var(--neutral-90);
      font-weight: 600;

      @include heading-md;
      @include line-clamp;
    }
  }

  .related-tags-top-spacing {
    margin-top: var(--spacing-16);
  }

  .gallery-tagged-template-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-05);

    .badge-content {
      padding-left: var(--spacing-02);
      padding-right: var(--spacing-02);
    }
  }

  .pagination {
    margin-top: var(--spacing-13);
  }

  .popular-tags {
    margin-top: 0;
    margin-bottom: var(--spacing-16);

    a {
      width: 100%;
    }
  }

  .popular-tags,
  .recent-docs,
  .featured-docs {
    h2 {
      margin-bottom: var(--spacing-09);
    }
  }

  .recent-docs + .featured-docs {
    margin-top: var(--spacing-16);
  }

  .gallery-item-title {
    * {
      vertical-align: middle;
    }

    h1 {
      display: inline;
      margin: unset;
    }

    h1:has(+ .gallery-item-title-badge-container) {
      margin-right: var(--spacing-06);
    }

    .gallery-item-title-badge-container {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: var(--spacing-04);

      .badge-content {
        font-size: var(--font-size-02);
        line-height: var(--line-height-02);
      }
    }
  }

  .template-details-container {
    @include heading-xs;

    gap: var(--spacing-04) var(--spacing-11);
    display: grid;
    grid-template-columns: auto auto;

    .template-detail {
      display: contents;

      &.tags > div {
        margin-top: var(--spacing-06);
      }
    }
  }

  .gallery-abstract {
    word-break: break-word;
    hyphens: auto;

    a {
      hyphens: none;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }

  .cta-links-container {
    margin-top: var(--spacing-09);
    margin-bottom: var(--spacing-09);

    .cta-links {
      display: inline-flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--spacing-06);

      .btn {
        margin: 0; // gap will handle spacing
      }
    }
  }

  .gallery-large-pdf-preview {
    img {
      width: 100%;
    }

    @include shadow-md;
  }

  .related-tags-header {
    margin-top: var(--spacing-16);
  }

  .related-tags {
    margin-top: var(--spacing-09);
    max-height: 61px;
    overflow: hidden;

    &.all-tags {
      max-height: none;

      // min-height prevents elements below the tags from moving upwards
      // when Show More is clicked
      min-height: 102px;
    }

    .badge-link {
      max-width: 200px;
    }
  }

  .show-more-tags {
    margin-top: var(--spacing-06);
  }

  @include media-breakpoint-up(lg) {
    .template-item-left-section {
      padding-right: var(--spacing-10);
    }

    .template-item-right-section {
      padding-left: var(--spacing-10);
    }
  }

  @include media-breakpoint-down(md) {
    .template-item-left-section {
      .badge-link-list {
        margin-top: var(--spacing-04);
      }
    }

    .template-item-right-section {
      margin-top: var(--spacing-11);
    }
  }
}