<commit_before>@mixin classifier-unit {
  @include box-sizing(border-box);
  background: $black;
  border: 2px solid $gray {radius: 2px};
}

.bat-detective.app [data-page="classify"] {
  > .interface {
    @include clearfix;
    position: relative;

    > .player {
      @include classifier-unit;
      float: left;
      width: $three-quarters;

      .spectrogram {
        .scale {
          .axis {
            @include box-sizing(border-box);
            color: transparentize($white, 0.25);
            font-size: 9px;
            height: 100%;
            margin-right: $gutter-size / 2;
            opacity: 0.33;
            position: absolute;
            right: 100%;
            top: 0;
            width: $gutter-size;

            .space {
              @include box-sizing(border-box);
              border-top: 1px solid;
              height: (100% / 16); // Number of spaces minus one!
              margin-left: 25%;
              position: relative;
              width: 50%;

              &:first-child,
              &:last-child {
                margin-left: 0;
                width: 100%;
              }

              .label {
                line-height: 1;
                margin-right: 5px;
                position: absolute;
                right: 100%;
                top: -0.5em;
                white-space: nowrap;
              }
            }

            // Vertical line through the center
            &:after {
              border-right: 1px solid;
              content: " ";
              display: block;
              height: 100%;
              left: 0;
              position: absolute;
              top: 0;
              width: 50%;
            }
          }
        }

        img {
          cursor: ns-resize;
          width: 100%;
          height: 519px;
        }

        .seek-line {
          background: $gold;
        }

        // Used in tutorial.
        .highlighter {
          background: transparentize($gold, 0.67);
          border-radius: 3px;
          box-shadow: 0 0 3px $gold inset;
          position: absolute;
        }

        .frequency-selector {
          $handle-thickness: 6px;

          height: 100%;
          left: 0;
          top: 0;
          width: 100%;

          .delete {
            bottom: $handle-thickness;
            height: 20px;
            position: absolute;
            right: 0;
            text-align: center;
            width: 20px;
          }

          .cover {
            background: transparentize($black, 0.25);
            display: none;
            left: 0;
            position: absolute;
            width: 100%;

            > .handle {
              background: $gray;
              cursor: ns-resize;
              height: $handle-thickness;
              left: 0;
              position: absolute;
              width: 100%;
            }

            &.high {
              top: 0;

              .handle {
                bottom: 0;
              }
            }

            &.low {
              bottom: 0;

              .handle {
                top: 0;
              }
            }
          }

          .times {
            background: transparentize($black, 0.99); // IE needs some background to pick up mouse events.
            cursor: ew-resize;
            left: 0;
            pointer-events: none;
            position: absolute;
            width: 100%;

            > .handle {
              background: $gray;
              bottom: -$handle-thickness;
              cursor: move;
              display: none;
              position: absolute;
              top: -$handle-thickness;
              width: $handle-thickness;

              &.start {
                right: 100%;
              }

              &.end {
                left: 100%;
              }
            }

            .time-selector {
              @include box-sizing(border-box);
              background: transparentize($white, 0.9);
              border: 1px solid $white;
              cursor: move;
              height: 100%;
              pointer-events: all;
              position: absolute;
              top: 0;

              .delete {
                bottom: auto;
                height: 20px;
                position: absolute;
                right: $handle-thickness;
                top: 0;
                width: 20px;
              }

              > .handle {
                @include transition(width 0.125s ease-in-out);
                background: transparentize($white, 0.5);
                cursor: ew-resize;
                height: 100%;
                position: absolute;
                top: 0;
                width: 0;

                &.start {
                  left: 0;
                }

                &.end {
                  right: 0;
                }
              }
            }
          }

          &.selected {
            position: absolute;

            .cover {<commit_msg>Delete buttons only on hover<commit_after>@mixin classifier-unit {
  @include box-sizing(border-box);
  background: $black;
  border: 2px solid $gray {radius: 2px};
}

.bat-detective.app [data-page="classify"] {
  > .interface {
    @include clearfix;
    position: relative;

    > .player {
      @include classifier-unit;
      float: left;
      width: $three-quarters;

      .spectrogram {
        .scale {
          .axis {
            @include box-sizing(border-box);
            color: transparentize($white, 0.25);
            font-size: 9px;
            height: 100%;
            margin-right: $gutter-size / 2;
            opacity: 0.33;
            position: absolute;
            right: 100%;
            top: 0;
            width: $gutter-size;

            .space {
              @include box-sizing(border-box);
              border-top: 1px solid;
              height: (100% / 16); // Number of spaces minus one!
              margin-left: 25%;
              position: relative;
              width: 50%;

              &:first-child,
              &:last-child {
                margin-left: 0;
                width: 100%;
              }

              .label {
                line-height: 1;
                margin-right: 5px;
                position: absolute;
                right: 100%;
                top: -0.5em;
                white-space: nowrap;
              }
            }

            // Vertical line through the center
            &:after {
              border-right: 1px solid;
              content: " ";
              display: block;
              height: 100%;
              left: 0;
              position: absolute;
              top: 0;
              width: 50%;
            }
          }
        }

        img {
          cursor: ns-resize;
          width: 100%;
          height: 519px;
        }

        .seek-line {
          background: $gold;
        }

        // Used in tutorial.
        .highlighter {
          background: transparentize($gold, 0.67);
          border-radius: 3px;
          box-shadow: 0 0 3px $gold inset;
          position: absolute;
        }

        .frequency-selector {
          $handle-thickness: 6px;

          height: 100%;
          left: 0;
          top: 0;
          width: 100%;

          .delete {
            bottom: $handle-thickness;
            height: 20px;
            position: absolute;
            right: 0;
            text-align: center;
            width: 20px;
          }

          .cover {
            background: transparentize($black, 0.25);
            display: none;
            left: 0;
            position: absolute;
            width: 100%;

            > .handle {
              background: $gray;
              cursor: ns-resize;
              height: $handle-thickness;
              left: 0;
              position: absolute;
              width: 100%;
            }

            &.high {
              top: 0;

              .handle {
                bottom: 0;
              }
            }

            &.low {
              bottom: 0;

              .handle {
                top: 0;
              }
            }
          }

          .times {
            background: transparentize($black, 0.99); // IE needs some background to pick up mouse events.
            cursor: ew-resize;
            left: 0;
            pointer-events: none;
            position: absolute;
            width: 100%;

            > .handle {
              background: $gray;
              bottom: -$handle-thickness;
              cursor: move;
              display: none;
              position: absolute;
              top: -$handle-thickness;
              width: $handle-thickness;

              &.start {
                right: 100%;
              }

              &.end {
                left: 100%;
              }
            }

            .time-selector {
              @include box-sizing(border-box);
              background: transparentize($white, 0.9);
              border: 1px solid $white;
              cursor: move;
              height: 100%;
              pointer-events: all;
              position: absolute;
              top: 0;

              .delete {
                @include transition(opacity 0.25s ease-in-out);
                bottom: auto;
                height: 20px;
                opacity: 0;
                position: absolute;
                right: $handle-thickness;
                top: 0;
                width: 20px;
              }

              > .handle {
                @include transition(width 0.125s ease-in-out);
                background: transparentize($white, 0.5);
                cursor: ew-resize;
                height: 100%;
                position: absolute;
                top: 0;
                width: 0;

                &.start {
                  left: 0;
                }

                &.end {
                  right: 0;
                }
              }

              &:hover {
                .delete {
                  opacity: 1;
                }
              }
            }
          }

          &.selected {
            position: absolute;

            .cover {
{'fraction_non_alphanumeric': 0.09905100830367734, 'fraction_numerical': 0.025405298536971134, 'mean_word_length': 0.8721317542561066, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, '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': '3188543', 'n_tokens_mistral': 2875, 'n_tokens_neox': 2492, 'n_words': 624}