<commit_before>@import "app.css";

#show-info-header {
  margin-bottom: var(--spacing-xxl);

  h1 {
    margin-bottom: 0;
  }

  #episode-choices,
  #season-choices,
  #season-line,
  #episode-line,
  #episode-name {
    display: flex;
    align-items: center;
  }

  #season-line,
  #episode-line {
    padding: var(--spacing-s) 0;

    span {
      width: 85px;
      font-size: 0.65rem;
    }

    .choice {
      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;
      margin-right: var(--spacing-xxs);

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

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

  #season-line {
    padding-top: 0;
    border-bottom: 1px solid var(--color-gray-divisions);
  }

  #episode-line {
    padding-bottom: 0;
  }

  #episode-name,
  #show-name {
    flex: 1;
    padding: var(--spacing-xxs) 0;
    display: flex;
    align-items: center;

    &.can-edit-properties {
      border: 1px solid transparent;
      cursor: pointer;

      i {
        margin-right: var(--spacing-xxs);
        font-size: 0.9rem;
        color: var(--color-blue-c);
      }

      &:hover {
        padding: var(--spacing-xxs) var(--spacing-xs);
        border: 1px solid var(--color-gray-d);
        border-radius: var(--standard-border-radius);

        i {
          color: var(--color-blue-a);
        }
      }

      &:active {
        border: 1px solid var(--color-gray-c);
        border-radius: var(--standard-border-radius);
      }
    }

    h3 {
      margin-bottom: 0;
      margin-right: var(--spacing-xxs);
    }

    div {
      margin-top: 3px;
    }
  }

  #episode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-s);

    #episode-name {
      margin-right: var(--spacing-m);
      margin-bottom: 0;
    }

    #episode-buttons {
      .episode-button {
        border: 1px solid var(--color-blue-a);
        padding: 0.5rem 1rem;
        border-radius: 0.6rem;
        color: var(--color-blue-a) !important;

        &:not(:last-child) {
          margin-right: var(--spacing-xs);
        }

        &:hover {
          background-color: var(--color-blue-a);
          color: var(--color-offwhite) !important;
        }
      }
    }
  }
}

#languages {
  margin-bottom: var(--spacing-l);

  #languages-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-s);
    justify-content: space-between;

    h4 {
      margin-bottom: 0;
    }
  }

  .language-container {
    background-color: var(--color-offwhite);
    padding: var(--spacing-m);
    border-radius: var(--standard-border-radius);
    position: relative;
    margin-bottom: var(--spacing-m);

    .language-name {
      cursor: pointer;
      position: relative;

      &::before {
        position: absolute;
        content: "";
        padding: var(--spacing-m);
        top: calc(0px - var(--spacing-m));
        left: calc(0px - var(--spacing-m));
        width: 100%;
        height: 100%;
      }
    }

    .collapser-button {
      position: absolute;
      top: var(--spacing-m);
      right: var(--spacing-m);
    }

    .language-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), margin 0.45s ease,
        padding 0.2s 0.2s ease;

      &.expanded {
        max-height: 9999px;
        margin-top: var(--spacing-s);
        margin-bottom: var(--spacing-s);
        transition: max-height 0.3s cubic-bezier(1, 0, 1, 0), margin 0.45s ease;
      }

      &.overflow {
        overflow: visible;
      }

      .version-container {
        border-bottom: 1px solid var(--color-gray-divisions-lighter);
        padding: var(--spacing-m) 0;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          padding-bottom: 0;
          border-bottom: none;
        }

        p:first-child {
          margin-top: var(--spacing-xxs);
          color: var(--color-gray-d);
        }

        .version-info {
          display: flex;
          align-items: center;
          margin-top: var(--spacing-s);
          flex-shrink: 0;

          .version-buttons {
            display: flex;
            align-items: center;

            a:hover {
              * {
                transition: all 0.3s ease;
              }

              &:not(.unavailable) * {
                color: var(--color-blue-b) !important;
              }

              .edit-button {
                border-color: var(--color-blue-b);
              }
            }

            .download-button {
              color: var(--color-gray-d);
              font-size: 1.8rem;
              height: 1.8rem;
              width: 1.8rem;
              padding: 0;
              margin-right: var(--spacing-xs);
              margin-top: -3px;

              &.unavailable {
                opacity: 0.4;
              }
            }

            .edit-button {
              color: var(--color-gray-d);
              font-size: 1.1rem;
              position: relative;
              border: 3px solid var(--color-gray-d);
              height: 1.3rem;
              width: 1.3rem;
              border-radius: 50%;

              i {
                position: absolute;
                top: -2px;
                right: -2px;
                text-shadow: 0px -3px var(--color-offwhite), 0px 3px var(--color-offwhite);
              }
            }
          }

          .progress-bar-container {
            flex: 1;
            margin: 0 var(--spacing-m);

            .subtitle-uploader {
              margin-bottom: var(--spacing-xxs);

              span:first-child {
                margin-right: var(--spacing-xs);
              }

              i {
                margin-right: var(--spacing-xxs);
              }
            }

            .progress-bar {
              background-color: var(--color-gray-divisions-lighter);
              height: 6px;
              border-radius: 3px;
              width: 100%;
              margin-bottom: var(--spacing-xxs);

              .progress {
                height: 100%;

                &.progress_100 {
                  background-color: var(--color-green);
                  border-radius: 3px;
                }

                &.progress_9099 {
                  background-color: #7eb360;
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_8089 {
                  background-color: #96b360;
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_7079 {
                  background-color: #bec533;
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_5069 {
                  background-color: var(--color-yellow);
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_2049 {
                  background-color: var(--color-orange);
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_019 {
                  background-color: var(--color-red);
                  border-radius: 3px 0px 0px 3px;
                }
              }
            }

            &.paused {
              .progress_9099 {
                background: linear-gradient(
                  to right,
                  var(--color-green) 0%,
                  var(--color-orange) 100%
                );
              }

              .progress_100 {
                background: linear-gradient(
                  to right,
                  var(--color-green) 0%,
                  var(--color-orange) 100%
                );
              }
            }

            .more-info {
              .fa-comment {
                margin-right: var(--spacing-xxs);
              }
            }
          }
        }

        .more-options {
          position: relative;

          .ellipsis-wrapper {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

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

            &:active {
              background-color: var(--color-gray-c);
            }
          }

          .more-options-list {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: var(--color-offwhite);
            border-radius: var(--standard-border-radius);
            z-index: 100;
            overflow: hidden;
            max-height: 0px;
            transition: max-height 0.2s cubic-bezier(0, 1, 0, 1);
            width: 0px;

            &.open {
              max-height: 9999px;
              width: 130px;
              transition: max-height 0.2s cubic-bezier(1, 0, 1, 0);
            }

            a {
              cursor: pointer;

              .option {
                font-size: 0.9rem;
                padding: var(--spacing-xs) var(--spacing-s);
                border-bottom: 1px solid var(--color-gray-divisions-lighter);

                &:hover {
                  padding-left: var(--spacing-m);
                }
              }

              &:last-of-type .option {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }
}

#comments-container {
  .comment-header {
    padding-left: var(--spacing-xxs);
  }

  .comment {
    padding: var(--spacing-m);
    border-bottom: 1px solid var(--color-gray-divisions);
    display: flex;
    align-items: center;

    &:last-of-type {
      border-bottom: none;
    }

    .role-tt {
      color: var(--color-green) !important;
    }

    .role-mod {
      color: var(--color-blue-b) !important;
    }

    .pin {
      color: var(--color-gray-c);
      flex-shrink: 0;
    }

    &.comment-pinned {
      background-color: var(--color-gray-e);
    }

    .by-special-user-icon {
      width: 20px;
      flex-shrink: 0;
      margin-right: var(--spacing-xs);
    }

    .comment-body {
      flex: 1;

      .comment-info {
        margin-bottom: var(--spacing-xxs);

        *:not(:last-child) {
          margin-right: var(--spacing-xxs);
        }

        .comment-date {
          color: var(--color-gray-c);
          margin-right: var(--spacing-s);
        }
      }

      .comment-content {
        margin-bottom: var(--spacing-xxs);

        p {
          white-space: pre-wrap;
          word-break: break-word;
        }
      }

      .comment-actions {
        span {
          cursor: pointer;
          margin-right: var(--spacing-xs);
          color: var(--color-gray-b);
        }
      }
    }
  }

  .newcomment-box {
    position: sticky;
    top: var(--spacing-s);
    margin-bottom: var(--spacing-m);

    &::before {
      content: "";
      width: 100%;
      height: var(--spacing-s);
      position: absolute;
      background-color: var(--color-bg);
      top: calc(0px - var(--spacing-s));
      left: 0;
    }
  }
}

.open-comment {
  background-color: var(--color-offwhite);
  border-radius: var(--standard-border-radius);
  padding: var(--standard-padding);

  textarea {
    width: 100%;
    resize: none;
  }

  .save-comment {
    display: flex;
    align-items: center;
    color: var(--color-blue-a);
    font-size: 1.1rem;
    margin-left: auto;

    i {
      margin-right: var(--spacing-xxs);
    }

    &:disabled {
      color: var(--color-gray-c);
    }
  }
}

.newcomment-box {
  .comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-xs);

    .comment-char-counter {
      left: var(--spacing-s);
      bottom: var(--spacing-s);
      color: var(--color-gray-c);

      &.too-many {
        color: var(--color-red);
      }
    }
  }
}

.input-auto-sizer {
  display: inline-grid;
  vertical-align: top;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;

  &.stacked {
    align-items: stretch;

    &::after,
    input,
    textarea {
      grid-area: 2 / 1;
    }
  }

  &::after,
  textarea {
    width: 100%;
    height: 100%;
    min-width: 1em;
    grid-area: 1 / 2;
    font: inherit;
    margin: 0;
    resize: none;
    border: none;
    overflow: hidden;
  }

  &::after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: break-spaces;
  }

  &:focus-within {
    textarea:focus,
    input:focus {
      outline: none;
    }
  }
}
<commit_msg>Fix too large gap between language name and first version<commit_after>@import "app.css";

#show-info-header {
  margin-bottom: var(--spacing-xxl);

  h1 {
    margin-bottom: 0;
  }

  #episode-choices,
  #season-choices,
  #season-line,
  #episode-line,
  #episode-name {
    display: flex;
    align-items: center;
  }

  #season-line,
  #episode-line {
    padding: var(--spacing-s) 0;

    span {
      width: 85px;
      font-size: 0.65rem;
    }

    .choice {
      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;
      margin-right: var(--spacing-xxs);

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

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

  #season-line {
    padding-top: 0;
    border-bottom: 1px solid var(--color-gray-divisions);
  }

  #episode-line {
    padding-bottom: 0;
  }

  #episode-name,
  #show-name {
    flex: 1;
    padding: var(--spacing-xxs) 0;
    display: flex;
    align-items: center;

    &.can-edit-properties {
      border: 1px solid transparent;
      cursor: pointer;

      i {
        margin-right: var(--spacing-xxs);
        font-size: 0.9rem;
        color: var(--color-blue-c);
      }

      &:hover {
        padding: var(--spacing-xxs) var(--spacing-xs);
        border: 1px solid var(--color-gray-d);
        border-radius: var(--standard-border-radius);

        i {
          color: var(--color-blue-a);
        }
      }

      &:active {
        border: 1px solid var(--color-gray-c);
        border-radius: var(--standard-border-radius);
      }
    }

    h3 {
      margin-bottom: 0;
      margin-right: var(--spacing-xxs);
    }

    div {
      margin-top: 3px;
    }
  }

  #episode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-s);

    #episode-name {
      margin-right: var(--spacing-m);
      margin-bottom: 0;
    }

    #episode-buttons {
      .episode-button {
        border: 1px solid var(--color-blue-a);
        padding: 0.5rem 1rem;
        border-radius: 0.6rem;
        color: var(--color-blue-a) !important;

        &:not(:last-child) {
          margin-right: var(--spacing-xs);
        }

        &:hover {
          background-color: var(--color-blue-a);
          color: var(--color-offwhite) !important;
        }
      }
    }
  }
}

#languages {
  margin-bottom: var(--spacing-l);

  #languages-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-s);
    justify-content: space-between;

    h4 {
      margin-bottom: 0;
    }
  }

  .language-container {
    background-color: var(--color-offwhite);
    padding: var(--spacing-m);
    border-radius: var(--standard-border-radius);
    position: relative;
    margin-bottom: var(--spacing-m);

    .language-name {
      cursor: pointer;
      position: relative;

      &::before {
        position: absolute;
        content: "";
        padding: var(--spacing-m);
        top: calc(0px - var(--spacing-m));
        left: calc(0px - var(--spacing-m));
        width: 100%;
        height: 100%;
      }
    }

    .collapser-button {
      position: absolute;
      top: var(--spacing-m);
      right: var(--spacing-m);
    }

    .language-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), margin 0.45s ease,
        padding 0.2s 0.2s ease;

      &.expanded {
        max-height: 9999px;
        margin-top: var(--spacing-s);
        margin-bottom: var(--spacing-s);
        transition: max-height 0.3s cubic-bezier(1, 0, 1, 0), margin 0.45s ease;
      }

      &.overflow {
        overflow: visible;
      }

      .version-container {
        border-bottom: 1px solid var(--color-gray-divisions-lighter);
        padding: var(--spacing-m) 0;

        &:first-of-type {
          padding-top: 0;
        }

        &:last-child {
          padding-bottom: 0;
          border-bottom: none;
        }

        p:first-child {
          margin-top: var(--spacing-xxs);
          color: var(--color-gray-d);
        }

        .version-info {
          display: flex;
          align-items: center;
          margin-top: var(--spacing-s);
          flex-shrink: 0;

          .version-buttons {
            display: flex;
            align-items: center;

            a:hover {
              * {
                transition: all 0.3s ease;
              }

              &:not(.unavailable) * {
                color: var(--color-blue-b) !important;
              }

              .edit-button {
                border-color: var(--color-blue-b);
              }
            }

            .download-button {
              color: var(--color-gray-d);
              font-size: 1.8rem;
              height: 1.8rem;
              width: 1.8rem;
              padding: 0;
              margin-right: var(--spacing-xs);
              margin-top: -3px;

              &.unavailable {
                opacity: 0.4;
              }
            }

            .edit-button {
              color: var(--color-gray-d);
              font-size: 1.1rem;
              position: relative;
              border: 3px solid var(--color-gray-d);
              height: 1.3rem;
              width: 1.3rem;
              border-radius: 50%;

              i {
                position: absolute;
                top: -2px;
                right: -2px;
                text-shadow: 0px -3px var(--color-offwhite), 0px 3px var(--color-offwhite);
              }
            }
          }

          .progress-bar-container {
            flex: 1;
            margin: 0 var(--spacing-m);

            .subtitle-uploader {
              margin-bottom: var(--spacing-xxs);

              span:first-child {
                margin-right: var(--spacing-xs);
              }

              i {
                margin-right: var(--spacing-xxs);
              }
            }

            .progress-bar {
              background-color: var(--color-gray-divisions-lighter);
              height: 6px;
              border-radius: 3px;
              width: 100%;
              margin-bottom: var(--spacing-xxs);

              .progress {
                height: 100%;

                &.progress_100 {
                  background-color: var(--color-green);
                  border-radius: 3px;
                }

                &.progress_9099 {
                  background-color: #7eb360;
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_8089 {
                  background-color: #96b360;
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_7079 {
                  background-color: #bec533;
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_5069 {
                  background-color: var(--color-yellow);
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_2049 {
                  background-color: var(--color-orange);
                  border-radius: 3px 0px 0px 3px;
                }

                &.progress_019 {
                  background-color: var(--color-red);
                  border-radius: 3px 0px 0px 3px;
                }
              }
            }

            &.paused {
              .progress_9099 {
                background: linear-gradient(
                  to right,
                  var(--color-green) 0%,
                  var(--color-orange) 100%
                );
              }

              .progress_100 {
                background: linear-gradient(
                  to right,
                  var(--color-green) 0%,
                  var(--color-orange) 100%
                );
              }
            }

            .more-info {
              .fa-comment {
                margin-right: var(--spacing-xxs);
              }
            }
          }
        }

        .more-options {
          position: relative;

          .ellipsis-wrapper {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

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

            &:active {
              background-color: var(--color-gray-c);
            }
          }

          .more-options-list {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: var(--color-offwhite);
            border-radius: var(--standard-border-radius);
            z-index: 100;
            overflow: hidden;
            max-height: 0px;
            transition: max-height 0.2s cubic-bezier(0, 1, 0, 1);
            width: 0px;

            &.open {
              max-height: 9999px;
              width: 130px;
              transition: max-height 0.2s cubic-bezier(1, 0, 1, 0);
            }

            a {
              cursor: pointer;

              .option {
                font-size: 0.9rem;
                padding: var(--spacing-xs) var(--spacing-s);
                border-bottom: 1px solid var(--color-gray-divisions-lighter);

                &:hover {
                  padding-left: var(--spacing-m);
                }
              }

              &:last-of-type .option {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }
}

#comments-container {
  .comment-header {
    padding-left: var(--spacing-xxs);
  }

  .comment {
    padding: var(--spacing-m);
    border-bottom: 1px solid var(--color-gray-divisions);
    display: flex;
    align-items: center;

    &:last-of-type {
      border-bottom: none;
    }

    .role-tt {
      color: var(--color-green) !important;
    }

    .role-mod {
      color: var(--color-blue-b) !important;
    }

    .pin {
      color: var(--color-gray-c);
      flex-shrink: 0;
    }

    &.comment-pinned {
      background-color: var(--color-gray-e);
    }

    .by-special-user-icon {
      width: 20px;
      flex-shrink: 0;
      margin-right: var(--spacing-xs);
    }

    .comment-body {
      flex: 1;

      .comment-info {
        margin-bottom: var(--spacing-xxs);

        *:not(:last-child) {
          margin-right: var(--spacing-xxs);
        }

        .comment-date {
          color: var(--color-gray-c);
          margin-right: var(--spacing-s);
        }
      }

      .comment-content {
        margin-bottom: var(--spacing-xxs);

        p {
          white-space: pre-wrap;
          word-break: break-word;
        }
      }

      .comment-actions {
        span {
          cursor: pointer;
          margin-right: var(--spacing-xs);
          color: var(--color-gray-b);
        }
      }
    }
  }

  .newcomment-box {
    position: sticky;
    top: var(--spacing-s);
    margin-bottom: var(--spacing-m);

    &::before {
      content: "";
      width: 100%;
      height: var(--spacing-s);
      position: absolute;
      background-color: var(--color-bg);
      top: calc(0px - var(--spacing-s));
      left: 0;
    }
  }
}

.open-comment {
  background-color: var(--color-offwhite);
  border-radius: var(--standard-border-radius);
  padding: var(--standard-padding);

  textarea {
    width: 100%;
    resize: none;
  }

  .save-comment {
    display: flex;
    align-items: center;
    color: var(--color-blue-a);
    font-size: 1.1rem;
    margin-left: auto;

    i {
      margin-right: var(--spacing-xxs);
    }

    &:disabled {
      color: var(--color-gray-c);
    }
  }
}

.newcomment-box {
  .comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-xs);

    .comment-char-counter {
      left: var(--spacing-s);
      bottom: var(--spacing-s);
      color: var(--color-gray-c);

      &.too-many {
        color: var(--color-red);
      }
    }
  }
}

.input-auto-sizer {
  display: inline-grid;
  vertical-align: top;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;

  &.stacked {
    align-items: stretch;

    &::after,
    input,
    textarea {
      grid-area: 2 / 1;
    }
  }

  &::after,
  textarea {
    width: 100%;
    height: 100%;
    min-width: 1em;
    grid-area: 1 / 2;
    font: inherit;
    margin: 0;
    resize: none;
    border: none;
    overflow: hidden;
  }

  &::after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: break-spaces;
  }

  &:focus-within {
    textarea:focus,
    input:focus {
      outline: none;
    }
  }
}

{'fraction_non_alphanumeric': 0.13960080770425598, 'fraction_numerical': 0.020425598011804907, 'mean_word_length': 1.2489738887433413, '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': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '249251', 'n_tokens_mistral': 8864, 'n_tokens_neox': 7993, 'n_words': 1481}