<commit_before>@import '../../utils/common.scss';

.results-view{
  display: flex;
  .sidebar{
    width: 330px;
    height: calc(100vh - 60px);
    border: 1px solid #d3d3d3;
    border-radius: 7px;
    display: flex;
    position: sticky;
    top: 55px;
    overflow: hidden;
    flex-direction: column;
    .loading-container{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    header{
      padding: 15px;
    }
    h5{
      font-weight: normal;
    }
    &>ul{
      background-color: #f7f7f7;
      // padding: 10px 15px 0;
      margin-bottom: 0;
      overflow-y: scroll;
      &>li{
        padding: 10px 15px;
        &.active{
          background-color: #f1f6f9;
        }
        &:not(:last-child){
          border-bottom: 1px solid #d3d3d3;
          padding-bottom: 0px;
        }
        &>.label{
          background-color: #e3eef3;
          border-bottom-right-radius: 7px;
          border-top-left-radius: 7px;
          line-height: 28px;
          padding: 0 10px;
          text-transform: uppercase;
          font-size: 11px;
          display: inline-block;
          color: #7fc1e6;
        }
        &>.count-label{
          color: #7fc1e6;
          margin-left: 10px;
          line-height: 28px;
          font-weight: 500;
          display: inline-block;
          font-size: 12px;
        }
        ul{
          padding-top: 10px;
          li{
            padding-left: 25px;
            cursor: pointer;
            padding-top: 10px;
            padding-bottom: 10px;
            position: relative;
            &:not(:last-child){
              border-bottom: 1px solid #d3d3d3;
              padding-bottom: 10px;
              // margin-bottom: 5px;
            }
            &>a{
              display: flex;
              align-items: center;
              div, i{
                color: #000;
              }
            }
            &>div:first-of-type{
              padding-right: 5px;
            }
            .anticon{
              font-size: 18px;
            }
            &:hover{
              background-color: #e3eef3b6;
              &:after{
                content: " ";
                width: 15px;
                height: 100%;
                background-color: #e3eef3b6;
                position: absolute;
                right: -15px;
                top: 0;
              }
              &:before{
                content: " ";
                width: 15px;
                height: 100%;
                background-color: #e3eef3b6;
                position: absolute;
                left: -15px;
                top: 0;
              }
            }
            &.active{
              background-color: #b7d3df;
              position: relative;
              &:before{
                position: absolute;
                content: " ";
                height: 100%;
                width: 30px;
                left: -30px;top: 0;
                background-color: #b7d3df;
              }
              &:after{
                position: absolute;
                content: " ";
                height: 100%;
                width: 30px;
                right: -30px;top: 0;
                background-color: #b7d3df;
              }
              a{
                h5{
                  color: #376881;
                }
                div, i{
                  color: #fff;
                  opacity: 1;
                }
              }
            }
          }
          .label{
            display: inline-block;
            text-transform: capitalize;
            opacity: 0.5;
            font-size: 13px;
          }
          .count-label{
            display: inline-block;<commit_msg>[#3998] sidebar fade<commit_after>@import '../../utils/common.scss';

.results-view{
  display: flex;
  .sidebar{
    width: 330px;
    height: calc(100vh - 60px);
    border: 1px solid #d3d3d3;
    border-radius: 7px;
    display: flex;
    position: sticky;
    top: 55px;
    overflow: hidden;
    flex-direction: column;
    .loading-container{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    header{
      padding: 15px;
    }
    h5{
      font-weight: normal;
    }
    li:not(.active){
      opacity: 0.33;
      transition: opacity 0.23s ease-out;
    }
    &:hover li{
      opacity: 1;
    }
    &>ul{
      background-color: #f7f7f7;
      // padding: 10px 15px 0;
      margin-bottom: 0;
      overflow-y: scroll;
      &>li{
        padding: 10px 15px;
        &.active{
          background-color: #f1f6f9;
        }
        &:not(:last-child){
          border-bottom: 1px solid #d3d3d3;
          padding-bottom: 0px;
        }
        &>.label{
          background-color: #e3eef3;
          border-bottom-right-radius: 7px;
          border-top-left-radius: 7px;
          line-height: 28px;
          padding: 0 10px;
          text-transform: uppercase;
          font-size: 11px;
          display: inline-block;
          color: #7fc1e6;
        }
        &>.count-label{
          color: #7fc1e6;
          margin-left: 10px;
          line-height: 28px;
          font-weight: 500;
          display: inline-block;
          font-size: 12px;
        }
        ul{
          padding-top: 10px;
          li{
            padding-left: 25px;
            cursor: pointer;
            padding-top: 10px;
            padding-bottom: 10px;
            position: relative;
            &:not(:last-child){
              border-bottom: 1px solid #d3d3d3;
              padding-bottom: 10px;
              // margin-bottom: 5px;
            }
            &>a{
              display: flex;
              align-items: center;
              div, i{
                color: #000;
              }
            }
            &>div:first-of-type{
              padding-right: 5px;
            }
            .anticon{
              font-size: 18px;
            }
            &:hover{
              background-color: #e3eef3b6;
              &:after{
                content: " ";
                width: 15px;
                height: 100%;
                background-color: #e3eef3b6;
                position: absolute;
                right: -15px;
                top: 0;
              }
              &:before{
                content: " ";
                width: 15px;
                height: 100%;
                background-color: #e3eef3b6;
                position: absolute;
                left: -15px;
                top: 0;
              }
            }
            &.active{
              background-color: #b7d3df;
              position: relative;
              &:before{
                position: absolute;
                content: " ";
                height: 100%;
                width: 30px;
                left: -30px;top: 0;
                background-color: #b7d3df;
              }
              &:after{
                position: absolute;
                content: " ";
                height: 100%;
                width: 30px;
                right: -30px;top: 0;
                background-color: #b7d3df;
              }
              a{
                h5{
                  // color: #376881;
                }
                div, i{
                  color: #fff;
                  opacity: 1;
                }
              }
            }
          }
          .label{
            display: inline-block;
            text-transform: capitalize;
            opacity: 0.5;
            font-size: 13px;
          }
          .count-label{
            display: inline-block;
{'fraction_non_alphanumeric': 0.1070489216201999, 'fraction_numerical': 0.040373487638085216, 'mean_word_length': 0.9565217391304348, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, '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': '517939', 'n_tokens_mistral': 2449, 'n_tokens_neox': 2173, 'n_words': 456}