assets/scss/_custom_contributors.scss

.td-contributors {
  .page-title {
    margin-bottom: 0.5em;
  }
  .head-wrapper {
    display: flex;
    line-height: 40px;
    font-size: 15px;
    font-weight: bold;
    background-color: #f6f8fa;
    padding: 0 0.4em;
    position: sticky;

    .title {
      flex: 1;
      padding: 0.6em;

      &:nth-child(1) {
        flex: 1.8;
      }
    }
  }

  .contributors-wrapper {
    font-size: 14px;
    display: flex;
    flex-direction: column;

    .item-wrapper {
      min-height: 55px;
      flex-wrap: wrap;
      padding: 0 0.4em;
      display: none;

      &.show {
        display: flex;

        &:nth-child(even) {
          background-color: #f6f8fa;
        }
      }

      .item {
        flex: 1;
        padding: 0 0.6em;
        display: flex;
        align-items: center;

        &:nth-child(1) {
          flex: 0.9;
        }

        .total {
          font-size: 16px;
        }

        .item-text {
          display: flex;
          align-items: center;

          img {
            margin-right: 0.3rem;
          }
        }
      }
    }

    .item-contributors {
      flex: 1;

      .d-flex {
        align-items: center;
        .dn {
          display: none!important;
        }
        > div {
          line-height: 55px;
          padding: 0 0.6em;
          display: none;
          width: 50%;
        }
      }

      ul, li {
        margin: 0;
        padding: 0;
      }

      li {
        position: relative;
        border: 1px solid #eaecef;
        border-radius: 4px;
        padding: 4px 7px;
        box-shadow: #f8f9fa 0px 1px 2px 0px;

        a {
          color: #2c3e50;
        }

        .contributions-count {
          color: #999;
        }

        &.active {
          color: #1e80ff;
          background: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
          box-shadow: 0px 2px 6px #ABD1F2;

          .contributions-count {
            color: #666;
          }
        }

      }
    }

  }

  .search-tips {
    text-align: center;
    padding: 3em;
    font-size: 16px;
    color: #999;
  }

  @media (max-width: 992px) {
    .contributors-wrapper {
      .head-wrapper {
        .title {
          &:nth-child(1) {
            flex: 3.8;
          }
        }
      }
      img {
        display: none;
      }

      .item-contributors {
        .item {
          &:nth-child(1) {
            flex: 1.8;
          }
        }
      }
    }
  }
}