<commit_before>@import 'bootstrap/variables';
@import '_variables';
@import 'bootstrap/mixins/vendor-prefixes';
@import 'scss/sprites';
@import 'scss/visualization';

// Story New
.story-new{
  .story-new-selector > p{
    margin: 1.5*$grid-gutter-width 0;
  }

  .form-default{
    margin-bottom: 0;
  }
}

.story-select-visualization-list{
  background: $gray-lighter;
  padding: $grid-gutter-width/2 0;

  .visualization-item{
    display: block;
    background: $gray-lighter;
    border-bottom: 1px solid $gray-light;
    padding: 2*$grid-gutter-width/3 $grid-gutter-width/3;
    @include transition( background 0.3s ease-out );

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

    .item-type-icon,
    .item-info{
      display: inline-block;
    }

    .item-type-icon{
      position: relative;
      top: 3px;
      margin-right: $grid-gutter-width/3;
      @include retina-sprite( $icon-visualization-brand-group );
    }

    .item-info h3{
      color: $gray-dark;
      font-size: 0.857em;
      text-transform: uppercase;
      font-weight: 400;
      margin: 0;
    }

    .btn-invert{
      margin-top: -4px;
      background: transparent;
    }

    &:hover{
      background: white;
      text-decoration: none;

      .btn-invert{
        display: block;
        color: white;
        background: $brand-primary;
      }
    }
  }

  .pagination{
    margin-top: $grid-gutter-width;
  }
}


// Story Cover
.story-cover{
  position: absolute;
  top: 82px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  
  .item-preview{
    border-radius: 0;
    height: 100%;

    .item-info-container-inner{
      max-width: 560px;
    }

    .item-info{
      .item-title h3{
        font-size: 3.429em;
        margin: 0;
      }
      p{
        font-size: 1em;
        color: white;
      }
    }

    .item-type-icon{
      top: auto;
      bottom: $grid-gutter-width/2;
    }

    .item-picture {
      height: 100%;

      > img{
        height: 100%;
        width: auto;
      }
    }
  }
}

// Story Info
.story-info{
  @extend .visualization-graph-info;

  .panel-heading{
    color: $gray;
    line-height: 30px;

    .close{
      position: absolute;
      right: $grid-gutter-width/3;
      top: $grid-gutter-width/2;
      @include retina-sprite( $icon-close-brand-group );

      &:hover{
        background-color: mix( white, $gray-blue, 50% );
      }
    }

    .index-header{
      padding-left: $grid-gutter-width/2;
    }
    .chapter-header{
      text-align: center;
    }

    .index-back-btn{
      display: block;
      position: absolute;
      left: $grid-gutter-width/3;
      top: $grid-gutter-width/2;
      border: 2px solid $brand-primary;
      width: $grid-gutter-width;
      height: $grid-gutter-width;
      border-radius: $grid-gutter-width/2;
      text-indent: -9999px;
      overflow: hidden;

      .icon-story-index{
        display: block;
        margin-top: 7px;
        margin-left: 3px;
        @include retina-sprite( $icon-list-group );
      }

      &:hover{
        background: mix( white, $gray-blue, 50% );
      }
    }

    .chapters-navigation{
      margin-top: -10px;

      .chapters-tracker,
      .chapter-navigation{
        display: inline-block;
      }

      .chapter-navigation{
        position: relative;
        width: $grid-gutter-width;
        height: $grid-gutter-width;
        top: $grid-gutter-width/3;
        margin: 0 $grid-gutter-width/6;
        border-radius: $grid-gutter-width/2;
        text-indent: -9999px;
        overflow: hidden;
      }

      .prev-chapter-icon,
      .next-chapter-icon{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -3px;
        margin-top: -6px;
      }
      
      .prev-chapter-icon{
        @include retina-sprite( $icon-carousel-left-group );
      }
      .next-chapter-icon{
        @include retina-sprite( $icon-carousel-right-group );
      }

      .chapter-navigation-prev:hover .prev-chapter-icon{
        @include retina-sprite( $icon-carousel-left-hover-group );
      }
      .chapter-navigation-next:hover .next-chapter-icon{
        @include retina-sprite( $icon-carousel-right-hover-group );
      }
    }
  }

  .panel-body{
    padding: $grid-gutter-width/3;
  }

  .chapters-list{
    padding: 0;

    li{
      position: relative;
      list-style: none;

      .chapter{
        display: block;
        color: $text-color;
        font-weight: 300;
        padding: $grid-gutter-width/3;
        margin-bottom: $grid-gutter-width/6;
        border-left: 4px solid $brand-primary;
        background: $gray-blue-dark;
        @include transition( background 0.3s ease-out );

        .index{
          display: inline-block;
          color: $brand-primary;
          width: $grid-gutter-width;
          height: $grid-gutter-width;
          border-radius: $grid-gutter-width/2;
          line-height: -4 + $grid-gutter-width;
          margin-right: $grid-gutter-width/6;
          text-align: center;
          font-weight: 400;
          border: 2px solid $brand-primary;
        }

        &:hover,
        &:focus{
          color: white;
          text-decoration: none;
          background: $brand-primary;

          .index{
            color: white;
            border-color: white;
          }
        }
      }
    }
  }

  .chapter-content{
    padding: $grid-gutter-width/6;

    .actions{
      margin-top: $grid-gutter-width/2;
    }
  }
}


// Hide Visualization Info at Story Cover
.stories.show .visualization-info,
.stories.show .visualization-description{
  display: none;
}

// Clear visualization-graph-info right transition
.stories .visualization-graph-info{
  @include transition( right 0s linear );
}
.stories .story-info{
  @include transition( right 0.5s ease-out );
}<commit_msg>Improve styles for visualizations selector message in Story New<commit_after>@import 'bootstrap/variables';
@import '_variables';
@import 'bootstrap/mixins/vendor-prefixes';
@import 'scss/sprites';
@import 'scss/visualization';

// Story New
.story-new{
  .story-new-selector > p{
    margin: 1.5*$grid-gutter-width 0;
  }

  .form-default{
    margin-bottom: 0;
  }
}

.story-select-visualization-list{
  background: $gray-lighter;
  padding: $grid-gutter-width/2 0;

  // No Visualizations Yet message
  > .container > .text-center{
    margin: $grid-gutter-width/2 0;

    > p{
      margin-bottom: $grid-gutter-width;
    }
  }

  .visualization-item{
    display: block;
    background: $gray-lighter;
    border-bottom: 1px solid $gray-light;
    padding: 2*$grid-gutter-width/3 $grid-gutter-width/3;
    @include transition( background 0.3s ease-out );

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

    .item-type-icon,
    .item-info{
      display: inline-block;
    }

    .item-type-icon{
      position: relative;
      top: 3px;
      margin-right: $grid-gutter-width/3;
      @include retina-sprite( $icon-visualization-brand-group );
    }

    .item-info h3{
      color: $gray-dark;
      font-size: 0.857em;
      text-transform: uppercase;
      font-weight: 400;
      margin: 0;
    }

    .btn-invert{
      margin-top: -4px;
      background: transparent;
    }

    &:hover{
      background: white;
      text-decoration: none;

      .btn-invert{
        display: block;
        color: white;
        background: $brand-primary;
      }
    }
  }

  .pagination{
    margin-top: $grid-gutter-width;
  }
}


// Story Cover
.story-cover{
  position: absolute;
  top: 82px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  
  .item-preview{
    border-radius: 0;
    height: 100%;

    .item-info-container-inner{
      max-width: 560px;
    }

    .item-info{
      .item-title h3{
        font-size: 3.429em;
        margin: 0;
      }
      p{
        font-size: 1em;
        color: white;
      }
    }

    .item-type-icon{
      top: auto;
      bottom: $grid-gutter-width/2;
    }

    .item-picture {
      height: 100%;

      > img{
        height: 100%;
        width: auto;
      }
    }
  }
}

// Story Info
.story-info{
  @extend .visualization-graph-info;

  .panel-heading{
    color: $gray;
    line-height: 30px;

    .close{
      position: absolute;
      right: $grid-gutter-width/3;
      top: $grid-gutter-width/2;
      @include retina-sprite( $icon-close-brand-group );

      &:hover{
        background-color: mix( white, $gray-blue, 50% );
      }
    }

    .index-header{
      padding-left: $grid-gutter-width/2;
    }
    .chapter-header{
      text-align: center;
    }

    .index-back-btn{
      display: block;
      position: absolute;
      left: $grid-gutter-width/3;
      top: $grid-gutter-width/2;
      border: 2px solid $brand-primary;
      width: $grid-gutter-width;
      height: $grid-gutter-width;
      border-radius: $grid-gutter-width/2;
      text-indent: -9999px;
      overflow: hidden;

      .icon-story-index{
        display: block;
        margin-top: 7px;
        margin-left: 3px;
        @include retina-sprite( $icon-list-group );
      }

      &:hover{
        background: mix( white, $gray-blue, 50% );
      }
    }

    .chapters-navigation{
      margin-top: -10px;

      .chapters-tracker,
      .chapter-navigation{
        display: inline-block;
      }

      .chapter-navigation{
        position: relative;
        width: $grid-gutter-width;
        height: $grid-gutter-width;
        top: $grid-gutter-width/3;
        margin: 0 $grid-gutter-width/6;
        border-radius: $grid-gutter-width/2;
        text-indent: -9999px;
        overflow: hidden;
      }

      .prev-chapter-icon,
      .next-chapter-icon{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -3px;
        margin-top: -6px;
      }
      
      .prev-chapter-icon{
        @include retina-sprite( $icon-carousel-left-group );
      }
      .next-chapter-icon{
        @include retina-sprite( $icon-carousel-right-group );
      }

      .chapter-navigation-prev:hover .prev-chapter-icon{
        @include retina-sprite( $icon-carousel-left-hover-group );
      }
      .chapter-navigation-next:hover .next-chapter-icon{
        @include retina-sprite( $icon-carousel-right-hover-group );
      }
    }
  }

  .panel-body{
    padding: $grid-gutter-width/3;
  }

  .chapters-list{
    padding: 0;

    li{
      position: relative;
      list-style: none;

      .chapter{
        display: block;
        color: $text-color;
        font-weight: 300;
        padding: $grid-gutter-width/3;
        margin-bottom: $grid-gutter-width/6;
        border-left: 4px solid $brand-primary;
        background: $gray-blue-dark;
        @include transition( background 0.3s ease-out );

        .index{
          display: inline-block;
          color: $brand-primary;
          width: $grid-gutter-width;
          height: $grid-gutter-width;
          border-radius: $grid-gutter-width/2;
          line-height: -4 + $grid-gutter-width;
          margin-right: $grid-gutter-width/6;
          text-align: center;
          font-weight: 400;
          border: 2px solid $brand-primary;
        }

        &:hover,
        &:focus{
          color: white;
          text-decoration: none;
          background: $brand-primary;

          .index{
            color: white;
            border-color: white;
          }
        }
      }
    }
  }

  .chapter-content{
    padding: $grid-gutter-width/6;

    .actions{
      margin-top: $grid-gutter-width/2;
    }
  }
}


// Hide Visualization Info at Story Cover
.stories.show .visualization-info,
.stories.show .visualization-description{
  display: none;
}

// Clear visualization-graph-info right transition
.stories .visualization-graph-info{
  @include transition( right 0s linear );
}
.stories .story-info{
  @include transition( right 0.5s ease-out );
}
{'fraction_non_alphanumeric': 0.13799494524010109, 'fraction_numerical': 0.018534119629317607, 'mean_word_length': 1.8372370936902485, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 10, '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': '4811178', 'n_tokens_mistral': 4304, 'n_tokens_neox': 4014, 'n_words': 770}