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

div.playlist {
  flex: 1;
  background-color: $darker-background;

  div.no-items {
    padding: 20px;
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    text-align: center;

    .icon {
      font-size: 28px;
      margin-right: 10px;
    }
  }

  div.group {
    font-size: 12px;

    div.group {
      div.group-info-container {
        img.visible {
          display: none;
        }
      }
    }

    div.group-info-container {
      display: flex;
      border-top: 1px solid #333;

      div.group-info {
        display: flex;
        flex: 1;

        margin-top: 5px;
        margin-left: 15px;
        margin-bottom: 5px;

        .group-details {
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex: 1;
        }

        .controls {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin-right: 9px;
        }

        .name {
          color: white;
          font-weight: 200;
          font-size: 14px;
        }
      }

      img {
        display: none;

        &.visible {
          max-height: 80px;
          float: left;
          display: block;
        }
      }

      .attributes {
        margin-top: 2px;
        color: #888;

        a:hover {
          color: #ccc;
          text-decoration: none;
        }

        span {
          font-weight: 200;

          &.bull {
            margin-left: 4px;
            margin-right: 4px;
            color: #444;
          }
        }
      }
    }

    span.info {
      float: right;
    }

    span.icon {
      color: #666;;

      &:hover {
        color: #ddd;
      }
    }
  }

  span.icon {
    float: right;
    margin-left: 5px;
    color: #333;
    cursor: pointer;

    &:hover {
      color: #ccc;
    }
  }

  div.tracks {
    text-align: left;
    width: 100%;

    ol {
      margin: 0;
      padding-left: 0px;
      list-style: none;
      counter-reset: li;
      border-top: 1px solid #232323;

      &.upper-roman li::before {
        content: counter(li, upper-roman) ".";
      }

      li {
        font-size: 11px;
        line-height: 20px;
        padding: 6px;
        border-bottom: 1px solid #232323;
        color: #bbb;<commit_msg>Fix "Empty Playlist" icon position.<commit_after>@import '../mixins.scss';
@import '../variables.scss';

div.playlist {
  flex: 1;
  background-color: $darker-background;

  span.icon {
    float: right;
    margin-left: 5px;
    color: #333;
    cursor: pointer;

    &:hover {
      color: #ccc;
    }
  }

  div.no-items {
    padding: 20px;
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    text-align: center;

    .icon {
      font-size: 28px;
      margin-right: 10px;
      color: #fff;
      margin-left: 0;
      cursor: inherit;

      &:hover {
        color: inherit;
      }
    }
  }

  div.group {
    font-size: 12px;

    div.group {
      div.group-info-container {
        img.visible {
          display: none;
        }
      }
    }

    div.group-info-container {
      display: flex;
      border-top: 1px solid #333;

      div.group-info {
        display: flex;
        flex: 1;

        margin-top: 5px;
        margin-left: 15px;
        margin-bottom: 5px;

        .group-details {
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex: 1;
        }

        .controls {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin-right: 9px;
        }

        .name {
          color: white;
          font-weight: 200;
          font-size: 14px;
        }
      }

      img {
        display: none;

        &.visible {
          max-height: 80px;
          float: left;
          display: block;
        }
      }

      .attributes {
        margin-top: 2px;
        color: #888;

        a:hover {
          color: #ccc;
          text-decoration: none;
        }

        span {
          font-weight: 200;

          &.bull {
            margin-left: 4px;
            margin-right: 4px;
            color: #444;
          }
        }
      }
    }

    span.info {
      float: right;
    }

    span.icon {
      color: #666;;

      &:hover {
        color: #ddd;
      }
    }
  }

  div.tracks {
    text-align: left;
    width: 100%;

    ol {
      margin: 0;
      padding-left: 0px;
      list-style: none;
      counter-reset: li;
      border-top: 1px solid #232323;

      &.upper-roman li::before {
        content: counter(li, upper-roman) ".";
      }

      li {
        font-size: 11px;
        line-height: 20px;
        padding: 6px;
        border-bottom: 1px solid #232323;
        color: #bbb;
{'fraction_non_alphanumeric': 0.12236113957778233, 'fraction_numerical': 0.03094896495183439, 'mean_word_length': 1.2416169039963252, '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': '4549056', 'n_tokens_mistral': 1772, 'n_tokens_neox': 1582, 'n_words': 342}