<commit_before>@import 'open-color/open-color.css';
@import "../../../style/base.css";

.card {
  border-radius: 3px;
  transition: box-shadow 0.2s;
  box-shadow: var(--shadow-1);


  &:hover {
    box-shadow: var(--shadow-4);
  }
}

.info_card {
  border: 1px solid transparent;
  background-color: var(--oc-white);
}

.github_info_container {
}

.github_calendar {
  border-color: transparent;
  background-color: var(--oc-white);

  & h2:first-child {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 300;
  }
}

.info_card_container {
  font-size: 16px;
  color: var(--oc-gray-7);
  margin: 10px 0 20px;

  & p:first-child {
    line-height: 50px;
  }

  & .info_header {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid var(--oc-gray-3);

    & .info_avator {
      width: 80px;

      & img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }

    & .info_user {
      flex: 1;

      & a {
        font-size: 1.3em;
        display: block;
        margin-bottom: 10px;
        text-decoration: none;
        color: var(--oc-gray-7);
        transition: color 0.2s;

        &:hover {
          color: var(--oc-blue-5);
        }
      }

      & span {
        font-size: 12px;
      }

      & blockquote {
        padding: 0 1em;
        border-left: 0.25em solid var(--oc-gray-5);
        margin: 15px 0;
      }
    }
  }

  & .info_content {
    display: flex;

    & .info_social {
      flex: 1;
      min-height: 90px;
      transition: color 0.2s, box-shadow 0.2s;
      display: block;
      text-decoration: none;
      text-align: center;
      border-radius: 3px;
      margin: 15px 7.5px;

      &:first-child {
        margin-left: 15px;
      }

      &:last-child {
        margin-right: 15px;
      }

      &:hover {
        color: var(--oc-white);
        box-shadow: var(--shadow-card);

        & span {
          color: var(--oc-white);

          &:first-child {
            color: var(--oc-white);
          }
        }
      }

      & span {
        transition: color 0.2s;
        color: rgba(255, 255, 255, 0.5);

        &:first-child {
          line-height: 90px;
          font-size: 2.5em;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}

.chart_card_container {
  & #repos_review {
    width: 100%;
  }

  & .repos_show_container,
  & .repos_chart_container {
    width: 95%;
    margin-left: 2.5%;
    padding: 15px 0;
    min-height: 80px;
    display: flex;
    border-top: 1px solid var(--oc-gray-3);

    & .repos_chart {
      flex: 1;

      & #repos_chart {
        width: 300px !important;
        height: 300px !important;
      }
    }
  }

  & .repos_show_container {
    display: block;

    & .repos_show_title {
      padding-left: 10px;
      margin-left: 10px;
      font-size: 1.5em;
      border-left: 3px solid var(--oc-gray-5);
      line-height: 40px;
    }

    & .repos_show {
      display: flex;
      padding: 10px;
      border-radius: 3px;
      position: relative;
      transition: background-color 0.2s;

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

      & .repos_info {
        padding-right: 50px;
        width: 100%;

        & .repos_info_name {
          text-decoration: none;
          color: var(--oc-gray-7);
          line-height: 1.5em;
          font-size: 16px;

          &:hover {
            color: var(--oc-blue-5);
          }
        }

        & span {
          font-size: 14px;
        }

        & .repos_info_forked {
          display: inline-block;
          background-color: var(--oc-gray-5);
          color: var(--oc-white);
          margin-left: 8px;
          padding: 3px 4px;
          border-radius: 2px;
        }
      }

      & .repos_star {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);

        &.active {
          color: var(--oc-blue-5);
        }
      }
    }
  }
}

/* chosed repos */
.repos_timeline_container {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.repos_dates {
  display: flex;
  color: var(--oc-gray-5);
  font-size: 12px;

  & .repos_date {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: left;

    &:last-child {
      text-align: right;
    }
  }
}

.repos_timelines {
  display: flex;
  flex-direction: column;

  & .repos_timeline_wrapper {
    height: 25px;
    margin-bottom: 15px;
    position: relative;

    &:hover {
      & .repos_tipso {
        opacity: 1;
        visibility: visible;
      }
    }

    &.active {
      & .repos_timeline {
        opacity: 1;
        box-shadow: var(--shadow-card);
      }
    }
  }

  & .repos_timeline {
    opacity: 0.6;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s, box-shadow 0.2s;
    cursor: pointer;
  }

  & .repos_tipso {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 1;
    z-index: 9;
    visibility: hidden;
    transition: opacity 0.2s;
  }

  & .tipso_container {
    background-color: var(--oc-white);
    border-radius: 3px;
    border: 1px solid rgba(155, 155, 155, 0.3);
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
    padding: 15px;
    font-size: 12px;
    color: rgba(74, 74, 74, 0.6);
    line-height: 1.5em;
    min-width: 200px;
    margin-top: 12px;

    &::before {
      width: 0;
      height: 0;
      content: '';
      display: block;
      position: absolute;
      left: 10px;
      top: 0;
      border-left: 17px solid transparent;
      border-right: 17px solid transparent;
      border-bottom: 12px solid var(--oc-gray-3);
    }

    & .tipso_title {
      font-size: 14px;
      color: var(--oc-gray-7);
    }

    & p {
      line-height: 2em;
    }
  }
}

.repos_intros {
  display: flex;
  flex-direction: column;

  & .repos_intro {
    margin-bottom: 25px;
    display: flex;

    & .intro_line {
      width: 8px;
      border-radius: 3px;
      margin-right: 15px;
    }

    & .intro_info_wrapper {
      display: flex;
      flex-direction: column;
      flex: 1;
      max-width: 90%;
    }

    & .intro_info {
      font-size: 14px;
      color: rgba(74, 74, 74, 0.6);
      line-height: 1.7em;

      & .intro_title {
        font-size: 18px;
        color: var(--oc-gray-7);
        line-height: 1.5em;
      }

      &.with_readme {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--oc-gray-3);
      }
    }

    & .readme_container {
      padding: 10px 20px;
      min-height: 100px;
      max-height: 300px;
      margin-top: 20px;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}
<commit_msg>change style<commit_after>@import 'open-color/open-color.css';
@import "../../../style/base.css";

.card {
  border-radius: 3px;
  transition: box-shadow 0.2s;
  box-shadow: var(--shadow-1);


  &:hover {
    box-shadow: var(--shadow-4);
  }
}

.info_card {
  border: 1px solid transparent;
  background-color: var(--oc-white);
}

.github_info_container {
}

.github_calendar {
  border-color: transparent;
  background-color: var(--oc-white);

  & h2:first-child {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 300;
  }
}

.info_card_container {
  font-size: 16px;
  color: var(--oc-gray-7);
  margin: 10px 0 20px;

  & p:first-child {
    line-height: 50px;
  }

  & .info_header {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid var(--bg-deep);

    & .info_avator {
      width: 80px;

      & img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }

    & .info_user {
      flex: 1;

      & a {
        font-size: 1.3em;
        display: block;
        margin-bottom: 10px;
        text-decoration: none;
        color: var(--oc-gray-7);
        transition: color 0.2s;

        &:hover {
          color: var(--oc-blue-5);
        }
      }

      & span {
        font-size: 12px;
      }

      & blockquote {
        padding: 0 1em;
        border-left: 0.25em solid var(--oc-gray-5);
        margin: 15px 0;
      }
    }
  }

  & .info_content {
    display: flex;

    & .info_social {
      flex: 1;
      min-height: 90px;
      transition: color 0.2s, box-shadow 0.2s;
      display: block;
      text-decoration: none;
      text-align: center;
      border-radius: 3px;
      margin: 15px 7.5px;

      &:first-child {
        margin-left: 15px;
      }

      &:last-child {
        margin-right: 15px;
      }

      &:hover {
        color: var(--oc-white);
        box-shadow: var(--shadow-card);

        & span {
          color: var(--oc-white);

          &:first-child {
            color: var(--oc-white);
          }
        }
      }

      & span {
        transition: color 0.2s;
        color: rgba(255, 255, 255, 0.5);

        &:first-child {
          line-height: 90px;
          font-size: 2.5em;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}

.chart_card_container {
  & #repos_review {
    width: 100%;
  }

  & .repos_show_container,
  & .repos_chart_container {
    width: 95%;
    margin-left: 2.5%;
    padding: 15px 0;
    min-height: 80px;
    display: flex;
    border-top: 1px solid var(--bg-deep);

    & .repos_chart {
      flex: 1;

      & #repos_chart {
        width: 300px !important;
        height: 300px !important;
      }
    }
  }

  & .repos_chart_container {
    width: auto;
    margin-left: 0;
    padding: 15px;
  }

  & .repos_show_container {
    display: block;

    & .repos_show_title {
      padding-left: 10px;
      margin-left: 10px;
      font-size: 1.5em;
      border-left: 3px solid var(--oc-gray-5);
      line-height: 40px;
    }

    & .repos_show {
      display: flex;
      padding: 10px;
      border-radius: 3px;
      position: relative;
      transition: background-color 0.2s;

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

      & .repos_info {
        padding-right: 50px;
        width: 100%;

        & .repos_info_name {
          text-decoration: none;
          color: var(--oc-gray-7);
          line-height: 1.5em;
          font-size: 16px;

          &:hover {
            color: var(--oc-blue-5);
          }
        }

        & span {
          font-size: 14px;
        }

        & .repos_info_forked {
          display: inline-block;
          background-color: var(--oc-gray-5);
          color: var(--oc-white);
          margin-left: 8px;
          padding: 3px 4px;
          border-radius: 2px;
        }
      }

      & .repos_star {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);

        &.active {
          color: var(--oc-blue-5);
        }
      }
    }
  }
}

/* chosed repos */
.repos_timeline_container {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.repos_dates {
  display: flex;
  color: var(--oc-gray-5);
  font-size: 12px;

  & .repos_date {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: left;

    &:last-child {
      text-align: right;
    }
  }
}

.repos_timelines {
  display: flex;
  flex-direction: column;

  & .repos_timeline_wrapper {
    height: 25px;
    margin-bottom: 15px;
    position: relative;

    &:hover {
      & .repos_tipso {
        opacity: 1;
        visibility: visible;
      }
    }

    &.active {
      & .repos_timeline {
        opacity: 1;
        box-shadow: var(--shadow-card);
      }
    }
  }

  & .repos_timeline {
    opacity: 0.6;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s, box-shadow 0.2s;
    cursor: pointer;
  }

  & .repos_tipso {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 1;
    z-index: 9;
    visibility: hidden;
    transition: opacity 0.2s;
  }

  & .tipso_container {
    background-color: var(--oc-white);
    border-radius: 3px;
    border: 1px solid rgba(155, 155, 155, 0.3);
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
    padding: 15px;
    font-size: 12px;
    color: rgba(74, 74, 74, 0.6);
    line-height: 1.5em;
    min-width: 200px;
    margin-top: 12px;

    &::before {
      width: 0;
      height: 0;
      content: '';
      display: block;
      position: absolute;
      left: 10px;
      top: 0;
      border-left: 17px solid transparent;
      border-right: 17px solid transparent;
      border-bottom: 12px solid var(--oc-gray-3);
    }

    & .tipso_title {
      font-size: 14px;
      color: var(--oc-gray-7);
    }

    & p {
      line-height: 2em;
    }
  }
}

.repos_intros {
  display: flex;
  flex-direction: column;

  & .repos_intro {
    margin-bottom: 25px;
    display: flex;

    & .intro_line {
      width: 8px;
      border-radius: 3px;
      margin-right: 15px;
    }

    & .intro_info_wrapper {
      display: flex;
      flex-direction: column;
      flex: 1;
      max-width: 90%;
    }

    & .intro_info {
      font-size: 14px;
      color: rgba(74, 74, 74, 0.6);
      line-height: 1.7em;

      & .intro_title {
        font-size: 18px;
        color: var(--oc-gray-7);
        line-height: 1.5em;
      }

      &.with_readme {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--oc-gray-3);
      }
    }

    & .readme_container {
      padding: 10px 20px;
      min-height: 100px;
      max-height: 300px;
      margin-top: 20px;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}

{'fraction_non_alphanumeric': 0.14349675397358405, 'fraction_numerical': 0.0448473994478024, 'mean_word_length': 1.5947725072604066, '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': '7539850', 'n_tokens_mistral': 5515, 'n_tokens_neox': 4821, 'n_words': 980}