<commit_before>@import './variables.scss';
@import './mixins.scss';

div#bottom {
  $progressbar-height: 4px;
  border-top: 2px solid black;
  background-color: #222;
  position: absolute;
  bottom: 0;
  height: $bottom-row-height;
  left: $left-column-width;
  right: 0;
  color: white;

  .hover-show {
    opacity: 0;
    @include fade-in(opacity);
  }

  &:hover {
    .hover-show {
      opacity: 1;
    }
  }

  div.bottom-container {
    height: 100%;
  }

  div.now-playing {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;

    div.controls {
      padding-right: 10px;
      display: flex;
      align-items: center;

      span.glyphicon {
        margin: 8px;
        @include user-select(none);
        @include fade-in(color);

        &.glyphicon-step-forward, &.glyphicon-step-backward {
          font-size: 16px;
          line-height: 34px;
          color: #666;
          top: -3px;

          &.enabled {
            color: white;

            &:hover {
              color: lighten($light-blue, 10);
            }
          }
        }

        &.glyphicon-play, &.glyphicon-pause {
          font-size: 28px;
          line-height: 34px;
          height: 34px;
          width: 34px;
          margin-right: 4px;
          margin-top: 0px;
          padding: 8px 3px 8px 13px;
          border: 2px solid #666;
          border-radius: 50%;
          @include fade-in(border-color, 50ms);
          background-color: #444;
          color: #eee;

          &:hover {
            color: lighten($light-blue, 10);
            border-color: lighten($light-blue, 30);
          }
        }
      }
    }

    div.right {
      display: flex;
      justify-content: flex-end;
      flex: 1;
    }

    div.now-playing-track {
      display: flex;
      vertical-align: top;
      margin-right: 5px;
      flex: 1;

      img.artwork {
        float: left;
        display: none;
        margin-right: 5px;

        &.visible {
          display: inline;
          max-height: $bottom-row-height - $progressbar-height;
        }
      }<commit_msg>Fix issue where long track name would squash artwork<commit_after>@import './variables.scss';
@import './mixins.scss';

div#bottom {
  $progressbar-height: 4px;
  border-top: 2px solid black;
  background-color: #222;
  position: absolute;
  bottom: 0;
  height: $bottom-row-height;
  left: $left-column-width;
  right: 0;
  color: white;

  .hover-show {
    opacity: 0;
    @include fade-in(opacity);
  }

  &:hover {
    .hover-show {
      opacity: 1;
    }
  }

  div.bottom-container {
    height: 100%;
  }

  div.now-playing {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;

    div.controls {
      padding-right: 10px;
      display: flex;
      align-items: center;

      span.glyphicon {
        margin: 8px;
        @include user-select(none);
        @include fade-in(color);

        &.glyphicon-step-forward, &.glyphicon-step-backward {
          font-size: 16px;
          line-height: 34px;
          color: #666;
          top: -3px;

          &.enabled {
            color: white;

            &:hover {
              color: lighten($light-blue, 10);
            }
          }
        }

        &.glyphicon-play, &.glyphicon-pause {
          font-size: 28px;
          line-height: 34px;
          height: 34px;
          width: 34px;
          margin-right: 4px;
          margin-top: 0px;
          padding: 8px 3px 8px 13px;
          border: 2px solid #666;
          border-radius: 50%;
          @include fade-in(border-color, 50ms);
          background-color: #444;
          color: #eee;

          &:hover {
            color: lighten($light-blue, 10);
            border-color: lighten($light-blue, 30);
          }
        }
      }
    }

    div.right {
      display: flex;
      justify-content: flex-end;
      flex: 1;
    }

    div.now-playing-track {
      display: flex;
      vertical-align: top;
      margin-right: 5px;
      flex: 1;

      img.artwork {
        float: left;
        display: none;
        margin-right: 5px;

        &.visible {
          display: inline;
          flex-shrink: 0;
          max-height: $bottom-row-height - $progressbar-height;
        }
      }
{'fraction_non_alphanumeric': 0.12843390467245833, 'fraction_numerical': 0.030758393989199342, 'mean_word_length': 1.5326991676575505, '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': '914552', 'n_tokens_mistral': 1535, 'n_tokens_neox': 1370, 'n_words': 300}