<commit_before>/**
 * This file is covered by the AGPLv3 license, which can be found at the LICENSE file in the root of this project.
 * @copyright 2021 subtitulamos.tv
 */

@import "app.css";
@import "comment.scss";

.content {
  max-width: calc(1600px - var(--content-padding-x) * 2);
  margin: 0 auto;
}

#overview-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--spacing-m);

  .grid-cell {
    padding: var(--spacing-m);
    height: calc(100% - var(--spacing-m) * 2);
    background-color: var(--color-offwhite);
    border-radius: var(--standard-border-radius);
    position: relative;
    display: flex;
    flex-direction: column;

    .reload {
      position: absolute;
      right: var(--spacing-m);
      top: var(--spacing-m);
      color: var(--color-gray-c);
      cursor: pointer;

      &:hover {
        color: var(--color-gray-d);
      }

      &:active {
        color: var(--color-gray-b);
        animation: spin 0.3s linear;
      }
    }

    .grid-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        cursor: default;
        border-bottom: 1px solid var(--color-gray-divisions-lighter);
        padding: var(--spacing-xs);
        line-height: 1.3rem;
        animation: fade_in 0.5s ease-in;

        &:last-of-type {
          border-bottom: 0px;
        }

        .time-ago {
          color: var(--color-gray-c);
        }
      }
    }

    .pages {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .page-group {
        display: flex;
        align-items: center;
        justify-content: center;

        .page:first-child {
          margin-right: var(--spacing-xxs);
        }
      }

      .page {
        color: var(--color-gray-c);
        border-radius: 50%;
        height: 1.8rem;
        width: 1.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        font-size: 0.9rem;
        word-break: keep-all !important;

        &:hover {
          color: var(--color-blue-b);
          border: 1px solid var(--color-blue-b);
        }

        &:active {
          background-color: var(--color-blue-b);
          color: var(--color-offwhite) !important;
        }

        &.change-page * {
          color: var(--color-blue-b);
        }

        &.disabled,
        &.disabled * {
          background-color: transparent !important;
        }
      }
    }
  }

  #comments-container {
    flex: 1;
    display: flex;
    flex-direction: column;

    #comments-navigation-list {
      margin-bottom: var(--spacing-s);
    }

    #comments-spacer {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }
  }
}

@media all and (max-width: 1100px) {
  #overview-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--spacing-s);
  }
}

@media all and (max-width: 750px) {
  #overview-grid {
    grid-template-columns: repeat(1, 1fr);

    #last-comments {
      grid-column: span 1;
    }

    .grid-cell {
      .grid-cell-title {
        cursor: pointer;
        transition: margin 0.45s ease, padding-bottom 0.45s ease;
        margin-bottom: var(--spacing-s);
      }

      &.collapsed {
        padding: 0;
        height: 100%;
<commit_msg>Fix overview overflowing on mobile<commit_after>/**
 * This file is covered by the AGPLv3 license, which can be found at the LICENSE file in the root of this project.
 * @copyright 2021 subtitulamos.tv
 */

@import "app.css";
@import "comment.scss";

.content {
  max-width: calc(1600px - var(--content-padding-x) * 2);
  margin: 0 auto;
}

#overview-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--spacing-m);

  .grid-cell {
    padding: var(--spacing-m);
    background-color: var(--color-offwhite);
    border-radius: var(--standard-border-radius);
    position: relative;
    display: flex;
    flex-direction: column;

    .reload {
      position: absolute;
      right: var(--spacing-m);
      top: var(--spacing-m);
      color: var(--color-gray-c);
      cursor: pointer;

      &:hover {
        color: var(--color-gray-d);
      }

      &:active {
        color: var(--color-gray-b);
        animation: spin 0.3s linear;
      }
    }

    .grid-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        cursor: default;
        border-bottom: 1px solid var(--color-gray-divisions-lighter);
        padding: var(--spacing-xs);
        line-height: 1.3rem;
        animation: fade_in 0.5s ease-in;

        &:last-of-type {
          border-bottom: 0px;
        }

        .time-ago {
          color: var(--color-gray-c);
        }
      }
    }

    .pages {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .page-group {
        display: flex;
        align-items: center;
        justify-content: center;

        .page:first-child {
          margin-right: var(--spacing-xxs);
        }
      }

      .page {
        color: var(--color-gray-c);
        border-radius: 50%;
        height: 1.8rem;
        width: 1.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        font-size: 0.9rem;
        word-break: keep-all !important;

        &:hover {
          color: var(--color-blue-b);
          border: 1px solid var(--color-blue-b);
        }

        &:active {
          background-color: var(--color-blue-b);
          color: var(--color-offwhite) !important;
        }

        &.change-page * {
          color: var(--color-blue-b);
        }

        &.disabled,
        &.disabled * {
          background-color: transparent !important;
        }
      }
    }
  }

  #comments-container {
    flex: 1;
    display: flex;
    flex-direction: column;

    #comments-navigation-list {
      margin-bottom: var(--spacing-s);
    }

    #comments-spacer {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }
  }
}

@media all and (max-width: 1100px) {
  #overview-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--spacing-s);
  }
}

@media all and (max-width: 750px) {
  #overview-grid {
    grid-template-columns: repeat(1, 1fr);

    #last-comments {
      grid-column: span 1;
    }

    .grid-cell {
      .grid-cell-title {
        cursor: pointer;
        transition: margin 0.45s ease, padding-bottom 0.45s ease;
        margin-bottom: var(--spacing-s);
      }

      &.collapsed {
        padding: 0;

{'fraction_non_alphanumeric': 0.14420289855072463, 'fraction_numerical': 0.017826086956521738, 'mean_word_length': 1.7137239480928037, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7386222', 'n_tokens_mistral': 2424, 'n_tokens_neox': 2262, 'n_words': 486}