<commit_before>// Player-related CSS

.navbar-player {
  background-color: #eee;
  border-color: darken(#eee, 30%);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);

  .container-fluid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }

  .player-controls {
    order: 1;
    // Be a flex continer to align items
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    height: 64px; // Max height available

    padding-right: 15px;

    i.control {
      font-size: 1.8em;
      float: left;
      margin: 0 8px;

      &:hover {
        color: #333;
      }

      &#play, &#pause {
        font-size: 2.5em;
      }
    }
  }

  .player-progress {
    order: 2;
    width: 100%;
    margin: auto;
    padding: 1px 0px;

    // Be a flex continer to align items
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    height: 64px; // Max height available

    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;

    .current-time, .total-time {
      min-width: 80px;
      text-align: center;
    }

    .slider {
      width: 100%;
      height: 3px;

      .slider-track {
        position: relative;
        margin: 0;
        height: 3px;
        background: none;
        background-color: #cae6fc;
      }

      .slider-handle {
        display: none;
      }
    }

    &:hover {
      .slider-handle {
        display: block;
      }
    }
  }

  .player-volume {
    order: 3;
    max-width: 160px;
    width: 100%;
    height: 64px;

    display: flex;
    align-items: center;

    padding-left: 20px;
    padding-right: 5px;

    .slider {
      width: 100%;
      height: 3px;

      .slider-track {
        position: relative;
        margin: 0;
        height: 3px;
        background: none;
        background-color: #cae6fc;
      }

      .slider-handle {
        display: none;
      }
    }

    &:hover {
      .slider-handle {
        display: block;
      }<commit_msg>Fix slider responsive in mobiles.<commit_after>// Player-related CSS

.navbar-player {
  background-color: #eee;
  border-color: darken(#eee, 30%);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);

  .container-fluid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }

  .player-controls {
    order: 1;
    // Be a flex continer to align items
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    height: 64px; // Max height available

    padding-right: 15px;

    i.control {
      font-size: 1.8em;
      float: left;
      margin: 0 8px;

      &:hover {
        color: #333;
      }

      &#play, &#pause {
        font-size: 2.5em;
      }
    }
  }

  .player-progress {
    order: 2;
    width: 100%;
    margin: auto;
    padding: 1px 0px;

    // Be a flex continer to align items
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    height: 64px; // Max height available

    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;

    .current-time, .total-time {
      min-width: 80px;
      text-align: center;
    }

    .slider {
      width: 100%;
      height: 3px;

      .slider-track {
        position: relative;
        margin: 0;
        height: 3px;
        background: none;
        background-color: #cae6fc;
      }
    }
  }

  .player-volume {
    order: 3;
    max-width: 160px;
    width: 100%;
    height: 64px;

    display: flex;
    align-items: center;

    padding-left: 20px;
    padding-right: 5px;

    .slider {
      width: 100%;
      height: 3px;

      .slider-track {
        position: relative;
        margin: 0;
        height: 3px;
        background: none;
        background-color: #cae6fc;
      }
    }
  }
}

// Avoid double touch in slides on mobile devices
@media screen and (min-width: $screen-sm-min) {
  .navbar-player {
    .container-fluid {
      .player-volume {
        .slider-handle {
          display: none;
        }

        &:hover {
          .slider-handle {
            display: block;
          }
        }
      }

      .player-progress {
        .slider-handle {
          display: none;
        }

        &:hover {
          .slider-handle {
            display: block;
          }
        }
      }
{'fraction_non_alphanumeric': 0.12505612932195778, 'fraction_numerical': 0.0327795240233498, 'mean_word_length': 1.6283185840707965, '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': '6866750', 'n_tokens_mistral': 1684, 'n_tokens_neox': 1489, 'n_words': 379}