<commit_before><polymer-element name="media-bar">
  
  <template>
    <style>
      
      button {
        border: none;
        background: transparent;
        padding: 0;
        margin: 0 5px 0 0;
        cursor: pointer;
      }
      
      #toggleSound {
        float: left;
        border-right: 1px solid #444;
      }
      
      img {
        border: none;
        background: none;
        width: 40px;
        height: 40px;
        padding: 5px;
      }
      
      #volumeSlider {
        width: calc(100% - 160px);
        float: right;
        margin-right: 25px;
        margin-top: 20px;

        height: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #4a4a4a;
        border: none;
      }
      #volumeSlider::-moz-range-track {
        width: calc(100% - 160px);
        float: right;
        margin-right: 25px;
        margin-top: 20px;

        height: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #4a4a4a;
        border: none;
      }
      #volumeSlider:focus {
        outline: none;
      }
      #volumeSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 12px;
        width: 12px;
        background: rgb(51, 181, 229);
      }
      #volumeSlider::-moz-range-thumb {
        -moz-appearance: none;
        height: 12px;
        width: 12px;
        background: rgb(51, 181, 229);
        border-radius: 0px;
        border: none;
      }
      
      #progressSlider {
        display: block;
        padding: 7px 0;
        margin: 0;
        height: 3px;
        padding: 0;
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #333;
        border: none;
      }
      #progressSlider::-moz-range-track {
        display: block;
        padding: 7px 0;
        margin: 0;
        height: 3px;
        padding: 0;
        width: 100%;
        //border-top: 1px solid green;
        -webkit-appearance: none;
        background-color: #4a4a4a;
        border: none;
      }
      #progressSlider:focus {
        outline: none;
      }      
      #progressSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 5px;
        width: 5px;
        background: rgb(51, 181, 229);
        border-radius: 50%;
      }
      #progressSlider::-moz-range-thumb {
        -moz-appearance: none;
        height: 5px;
        width: 5px;
        background: rgb(51, 181, 229);
        border-radius: 50%;
      }
      
    </style>
    
    <div>
      <audio id="audioElement" autoplay loop>
        <source src="/stream" type="audio/ogg">
      </audio>
      
      <input type="range" min="0" step="0.0001" id="progressSlider" value="0" />
      
      <button id="toggleSound" on-click="{{toggleSound}}">
        <img id="restImg" src="../img/rest.svg">
      </button>
      <img src="../img/volume.svg" id="volume">
      <input type="range" min="0" max="1" step="0.0001" value="0.5" id="volumeSlider" />
    </div>
    
  </template>
  
  <script type="application/dart" src="../dart/media-bar.dart"></script>  
</polymer-element><commit_msg>and what I did was a little silly too<commit_after><polymer-element name="media-bar">
  
  <template>
    <style>
      
      button {
        border: none;
        background: transparent;
        padding: 0;
        margin: 0 5px 0 0;
        cursor: pointer;
      }
      
      #toggleSound {
        float: left;
        border-right: 1px solid #444;
      }
      
      img {
        border: none;
        background: none;
        width: 40px;
        height: 40px;
        padding: 5px;
      }
      
      #volumeSlider {
        width: calc(100% - 160px);
        float: right;
        margin-right: 25px;
        margin-top: 20px;

        height: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #4a4a4a;
        border: none;
      }
      #volumeSlider::-moz-range-track {
        width: calc(100% - 160px);
        float: right;
        margin-right: 25px;
        margin-top: 20px;

        height: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #4a4a4a;
        border: none;
      }
      #volumeSlider:focus {
        outline: none;
      }
      #volumeSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 12px;
        width: 12px;
        background: rgb(51, 181, 229);
      }
      #volumeSlider::-moz-range-thumb {
        -moz-appearance: none;
        height: 12px;
        width: 12px;
        background: rgb(51, 181, 229);
        border-radius: 0px;
        border: none;
      }
      
      #progressSlider {
        display: block;
        padding: 7px 0;
        margin: 0;
        height: 3px;
        padding: 0;
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #333;
        border: none;
      }
      #progressSlider::-moz-range-track {
        display: block;
        padding: 7px 0;
        margin: 0;
        height: 3px;
        padding: 0;
        width: 100%;
        //border-top: 1px solid green;
        -webkit-appearance: none;
        background-color: #4a4a4a;
        border: none;
      }
      #progressSlider:focus {
        outline: none;
      }      
      #progressSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 3px;
        width: 3px;
        background: rgb(51, 181, 229);
        //border-radius: 50%;
      }
      #progressSlider::-moz-range-thumb {
        -moz-appearance: none;
        height: 5px;
        width: 5px;
        background: rgb(51, 181, 229);
        border-radius: 50%;
      }
      
    </style>
    
    <div>
      <audio id="audioElement" autoplay loop>
        <source src="/stream" type="audio/ogg">
      </audio>
      
      <input type="range" min="0" step="0.0001" id="progressSlider" value="0" />
      
      <button id="toggleSound" on-click="{{toggleSound}}">
        <img id="restImg" src="../img/rest.svg">
      </button>
      <img src="../img/volume.svg" id="volume">
      <input type="range" min="0" max="1" step="0.0001" value="0.5" id="volumeSlider" />
    </div>
    
  </template>
  
  <script type="application/dart" src="../dart/media-bar.dart"></script>  
</polymer-element>
{'fraction_non_alphanumeric': 0.13375990249847655, 'fraction_numerical': 0.04021937842778794, 'mean_word_length': 1.5856636471051595, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, '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': '2226194', 'n_tokens_mistral': 2299, 'n_tokens_neox': 2090, 'n_words': 457}