cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="row">
  <div class="large-4 medium-6 small-12 large-centered medium-centered columns">
    <div id="flat-black-player-container">
      <div id="list-screen" class="slide-in-top">

        <div id="list-screen-header" class="hide-playlist">
          <img id="up-arrow" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/up.svg" /> Hide Playlist
        </div>

        <div id="list">
          <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="0">
            <span class="song-number-now-playing">
                    <span class="number">1</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">Risin' High (feat Raashan Ahmad)</span>
              <span class="song-artist-album">Ancient Astronauts - We Are to Answer</span>
            </div>

            <span class="song-duration">
                    3:30
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="1">
                  <span class="song-number-now-playing">
                    <span class="number">2</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">The Gun</span>
              <span class="song-artist-album">Lorn - Ask The Dust</span>
            </div>

            <span class="song-duration">
                    3:16
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="2">
                  <span class="song-number-now-playing">
                    <span class="number">3</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">Anvil</span>
              <span class="song-artist-album">Lorn - Anvil</span>
            </div>

            <span class="song-duration">
                    3:32
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="3">
                  <span class="song-number-now-playing">
                    <span class="number">4</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">I Came Running</span>
              <span class="song-artist-album">Ancient Astronauts - We Are to Answer</span>
            </div>

            <span class="song-duration">
                    3:30
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="4">
                  <span class="song-number-now-playing">
                    <span class="number">5</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">First Snow</span>
              <span class="song-artist-album">Emancipator - Soon It Will Be Cold Enough</span>
            </div>

            <span class="song-duration">
                    5:12
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="5">
                  <span class="song-number-now-playing">
                    <span class="number">6</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">Terrain</span>
              <span class="song-artist-album">pgs.lost - Key</span>
            </div>

            <span class="song-duration">
                    5:29
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="6">
                  <span class="song-number-now-playing">
                    <span class="number">7</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">Vorel</span>
              <span class="song-artist-album">Russian Circles - Guidance</span>
            </div>

            <span class="song-duration">
                    5:29
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="7">
                  <span class="song-number-now-playing">
                    <span class="number">8</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">Intro / Sweet Glory</span>
              <span class="song-artist-album">Jimkata - Die Digital</span>
            </div>

            <span class="song-duration">
                    2:39
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="8">
                  <span class="song-number-now-playing">
                    <span class="number">9</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">Offcut #6</span>
              <span class="song-artist-album">Little People - We Are But Hunks of Wood Remixes</span>
            </div>

            <span class="song-duration">
                    1:00
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="9">
                  <span class="song-number-now-playing">
                    <span class="number">10</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">Dusk To Dawn</span>
              <span class="song-artist-album">Emancipator - Dusk To Dawn</span>
            </div>

            <span class="song-duration">
                    5:25
                  <span>
                </div>
                <div class="song amplitude-song-container amplitude-play-pause" amplitude-song-index="10">
                  <span class="song-number-now-playing">
                    <span class="number">11</span>
            <img class="now-playing" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/now-playing.svg" />
            </span>

            <div class="song-meta-container">
              <span class="song-name">Anthem</span>
              <span class="song-artist-album">Emancipator - Soon It Will Be Cold Enough</span>
            </div>

            <span class="song-duration">
                    5:40
                  <span>
                </div>
              </div>

              <div id="list-screen-footer">
                <div id="list-screen-meta-container">
                  <span amplitude-song-info="name" amplitude-main-song-info="true" class="song-name"></span>

            <div class="song-artist-album">
              <span amplitude-song-info="artist" amplitude-main-song-info="true"></span>
            </div>
          </div>
          <div class="list-controls">
            <div class="list-previous amplitude-prev"></div>
            <div class="list-play-pause amplitude-play-pause" amplitude-main-play-pause="true"></div>
            <div class="list-next amplitude-next"></div>
          </div>
        </div>
      </div>
      <div id="player-screen">
        <div class="player-header down-header">
          <img id="down" src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/down.svg" /> Show Playlist
        </div>
        <div id="player-top">
          <img amplitude-song-info="cover_art_url" amplitude-main-song-info="true" />
        </div>
        <div id="player-progress-bar-container">
          <progress id="song-played-progress" class="amplitude-song-played-progress" amplitude-main-song-played-progress="true"></progress>
          <progress id="song-buffered-progress" class="amplitude-buffered-progress" value="0"></progress>
        </div>
        <div id="player-middle">
          <div id="time-container">
            <span class="amplitude-current-time time-container" amplitude-main-current-time="true"></span>
            <span class="amplitude-duration-time time-container" amplitude-main-duration-time="true"></span>
          </div>
          <div id="meta-container">
            <span amplitude-song-info="name" amplitude-main-song-info="true" class="song-name"></span>

            <div class="song-artist-album">
              <span amplitude-song-info="artist" amplitude-main-song-info="true"></span>
            </div>
          </div>
        </div>
        <div id="player-bottom">
          <div id="control-container">

            <div id="shuffle-container">
              <div class="amplitude-shuffle amplitude-shuffle-off" id="shuffle"></div>
            </div>

            <div id="prev-container">
              <div class="amplitude-prev" id="previous"></div>
            </div>

            <div id="play-pause-container">
              <div class="amplitude-play-pause" amplitude-main-play-pause="true" id="play-pause"></div>
            </div>

            <div id="next-container">
              <div class="amplitude-next" id="next"></div>
            </div>

            <div id="repeat-container">
              <div class="amplitude-repeat" id="repeat"></div>
            </div>

          </div>

          <div id="volume-container">
            <img src="https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/volume.svg" /><input type="range" class="amplitude-volume-slider" step=".1" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
            
          
!
            
              body {
  background-color: rgba(0, 0, 0, 0.8);
}

div#flat-black-player-container {
  position: relative;
  max-width: 400px;
  margin: auto;
}
div#flat-black-player-container div#list-screen {
  background-color: #141920;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
}
div#flat-black-player-container div#list-screen div#list-screen-header {
  background-color: #141920;
  padding: 15px;
  text-align: center;
  height: 55px;
  position: relative;
  color: white;
  font-family: "Lato", sans-serif;
  cursor: pointer;
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-header
  img#up-arrow {
  position: absolute;
  top: 23px;
  left: 15px;
  cursor: pointer;
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-header
  span.list-active-song-name {
  color: #fff;
  line-height: 25px;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  letter-spacing: 0.5px;
}
div#flat-black-player-container div#list-screen div#list {
  overflow-y: scroll;
}
div#flat-black-player-container div#list-screen div#list div.song {
  padding: 15px;
  background-color: #242b33;
  margin-bottom: 1px;
  cursor: pointer;
  line-height: 24px;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song
  span.song-number-now-playing {
  display: inline-block;
  width: 24px;
  text-align: center;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song
  span.song-number-now-playing
  span.number {
  opacity: 0.5;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.5px;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song
  span.song-number-now-playing
  img.now-playing {
  display: none;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song.amplitude-active-song-container {
  background-color: #30363e;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song.amplitude-active-song-container
  span.song-number-now-playing
  img.now-playing {
  display: inline-block;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song.amplitude-active-song-container
  span.song-number-now-playing
  span.number {
  display: none;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song
  div.song-meta-container {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  width: calc(100% - 80px);
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song
  div.song-meta-container
  span.song-name {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 16px;
  color: #55b560;
  letter-spacing: 0.47px;
  display: block;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song
  span.song-duration {
  display: inline-block;
  opacity: 0.5;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.5px;
  width: 35px;
  text-align: center;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song
  span.song-artist-album {
  color: #5277b0;
}
div#flat-black-player-container
  div#list-screen
  div#list
  div.song
  div.song-meta-container
  span.song-artist-album {
  font-family: "Lato", sans-serif;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  letter-spacing: 0.47px;
  display: block;
}
div#flat-black-player-container div#list-screen div#list-screen-footer {
  height: 80px;
  padding: 15px;
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-footer
  div#list-screen-meta-container {
  width: calc(100% - 123px);
  float: left;
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-footer
  div#list-screen-meta-container
  span.song-name {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 24px;
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-footer
  div#list-screen-meta-container
  div.song-artist-album {
  opacity: 0.5;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 16px;
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-footer
  div.list-controls {
  width: 90px;
  float: right;
  margin-top: 8px;
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-footer
  div.list-controls
  div.list-previous {
  cursor: pointer;
  width: 15px;
  height: 17px;
  background-image: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/small-previous.svg");
  background-repeat: no-repeat;
  float: left;
  margin-right: 15px;
  margin-top: 4px;
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-footer
  div.list-controls
  div.list-play-pause {
  cursor: pointer;
  width: 17px;
  height: 24px;
  background-repeat: no-repeat;
  float: left;
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-footer
  div.list-controls
  div.list-play-pause.amplitude-playing {
  background-image: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/small-pause.svg");
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-footer
  div.list-controls
  div.list-play-pause.amplitude-paused {
  background-image: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/small-play.svg");
}
div#flat-black-player-container
  div#list-screen
  div#list-screen-footer
  div.list-controls
  div.list-next {
  cursor: pointer;
  width: 15px;
  height: 17px;
  background-image: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/small-next.svg");
  background-repeat: no-repeat;
  float: left;
  margin-left: 15px;
  margin-top: 4px;
}
div#flat-black-player-container div.player-header {
  background-color: #141920;
  padding: 15px;
  text-align: center;
  height: 55px;
  position: relative;
  margin-top: 40px;
  cursor: pointer;
  color: white;
  font-family: "Lato", sans-serif;
}
div#flat-black-player-container div.player-header img#down {
  position: absolute;
  top: 23px;
  left: 15px;
  cursor: pointer;
}
div#flat-black-player-container div#player-top {
  position: relative;
}
div#flat-black-player-container
  div#player-top
  img[amplitude-main-song-info="true"] {
  width: 100%;
  height: 370px;
}
div#flat-black-player-container div#player-progress-bar-container {
  width: 100%;
  height: 4px;
  background-color: #000;
  position: relative;
}
div#flat-black-player-container
  div#player-progress-bar-container
  progress#song-played-progress {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 4px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  border: none;
  cursor: pointer;
  background: transparent;
}
div#flat-black-player-container
  div#player-progress-bar-container
  progress#song-played-progress[value]::-webkit-progress-bar {
  background: none;
}
div#flat-black-player-container
  div#player-progress-bar-container
  progress#song-played-progress[value]::-webkit-progress-value {
  background: white;
}
div#flat-black-player-container
  div#player-progress-bar-container
  progress#song-played-progress[value]::-moz-progress-bar {
  background: white;
}
div#flat-black-player-container
  div#player-progress-bar-container
  progress#song-buffered-progress {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 4px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  border: none;
  background: transparent;
}
div#flat-black-player-container
  div#player-progress-bar-container
  progress#song-buffered-progress[value]::-webkit-progress-bar {
  background: none;
}
div#flat-black-player-container
  div#player-progress-bar-container
  progress#song-buffered-progress[value]::-webkit-progress-value {
  background-color: rgba(255, 255, 255, 0.5);
  transition: width 0.1s ease;
}
div#flat-black-player-container
  div#player-progress-bar-container
  progress#song-buffered-progress[value]::-moz-progress-bar {
  background: rgba(255, 255, 255, 0.5);
}
div#flat-black-player-container div#player-middle {
  background-color: #000;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  position: relative;
}
div#flat-black-player-container div#player-middle div#time-container {
  color: white;
  width: 100%;
  background-color: #000;
  font-size: 14px;
  font-weight: bold;
}
div#flat-black-player-container
  div#player-middle
  div#time-container
  span.amplitude-duration-time {
  position: absolute;
  top: 0px;
  right: 5px;
}
div#flat-black-player-container
  div#player-middle
  div#time-container
  span.amplitude-current-time {
  position: absolute;
  top: 0px;
  left: 5px;
}
div#flat-black-player-container div#player-middle span.song-name {
  font-family: Lato, sans-serif;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 24px;
  display: block;
}
div#flat-black-player-container div#player-middle div.song-artist-album {
  /* Coldplay - Ghost Sto: */
  opacity: 0.5;
  font-family: Lato, sans-serif;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 16px;
}
div#flat-black-player-container div#player-bottom {
  background-color: #192029;
  padding-left: 25px;
  padding-right: 25px;
}
div#flat-black-player-container div#player-bottom div#control-container {
  height: 140px;
  padding-top: 40px;
  padding-bottom: 40px;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#shuffle-container {
  float: left;
  width: 20%;
  height: 60px;
  padding-top: 21px;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#shuffle-container
  div#shuffle {
  width: 16px;
  height: 17px;
  cursor: pointer;
  margin: auto;
  opacity: 0.7;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#shuffle-container
  div#shuffle.amplitude-shuffle-off {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/shuffle.svg");
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#shuffle-container
  div#shuffle.amplitude-shuffle-off:hover {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/shuffle-on.svg");
  opacity: 0.8;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#shuffle-container
  div#shuffle.amplitude-shuffle-on {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/shuffle-on.svg");
  opacity: 1;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#shuffle-container
  div#shuffle.amplitude-shuffle-on:hover {
  opacity: 1;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#prev-container {
  width: 20%;
  float: left;
  height: 60px;
  padding-top: 18px;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#prev-container
  div#previous {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/previous.svg");
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin: auto;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#prev-container
  div#previous:hover {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/previous-hover.svg");
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#play-pause-container {
  width: 20%;
  float: left;
  height: 60px;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#play-pause-container
  div#play-pause {
  width: 60px;
  height: 60px;
  cursor: pointer;
  margin: auto;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#play-pause-container
  div#play-pause.amplitude-playing {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/pause.svg");
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#play-pause-container
  div#play-pause.amplitude-paused {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/play.svg");
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#next-container {
  width: 20%;
  float: left;
  height: 60px;
  padding-top: 18px;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#next-container
  div#next {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/next.svg");
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin: auto;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#next-container
  div#next:hover {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/next-hover.svg");
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#repeat-container {
  float: left;
  width: 20%;
  height: 60px;
  padding-top: 20px;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#repeat-container
  div#repeat {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/repeat.svg");
  width: 18px;
  height: 20px;
  cursor: pointer;
  margin: auto;
  opacity: 0.7;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#repeat-container
  div#repeat:hover {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/repeat-on.svg");
  opacity: 0.8;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#repeat-container
  div#repeat.amplitude-repeat-on {
  background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/flat-black/repeat-on.svg");
  opacity: 1;
}
div#flat-black-player-container
  div#player-bottom
  div#control-container
  div#repeat-container
  div#repeat.amplitude-repeat-on:hover {
  opacity: 1;
}
div#flat-black-player-container div#player-bottom div#control-container::after {
  content: "";
  display: table;
  clear: both;
}
div#flat-black-player-container div#player-bottom div#volume-container {
  padding-bottom: 20px;
  text-align: center;
  /*
   IE 11
   */
}
div#flat-black-player-container div#player-bottom div#volume-container img {
  display: block;
  float: left;
  margin-top: -9px;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider {
  width: calc(100% - 30px);
  -webkit-appearance: none;
  display: block;
  margin-left: 10px;
  float: left;
}
@-moz-document url-prefix() {
  div#flat-black-player-container
    div#player-bottom
    div#volume-container
    input[type="range"].amplitude-volume-slider {
    margin-top: 0px;
  }
}
@supports (-ms-ime-align: auto) {
  div#flat-black-player-container
    div#player-bottom
    div#volume-container
    input[type="range"].amplitude-volume-slider {
    margin-top: -4px;
    height: 30px;
    background-color: #192029 !important;
  }
}
@media all and (-ms-high-contrast: none) {
  div#flat-black-player-container
    div#player-bottom
    div#volume-container
    *::-ms-backdrop,
  div#flat-black-player-container
    div#player-bottom
    div#volume-container
    input[type="range"].amplitude-volume-slider {
    margin-top: -8px;
    background-color: #192029 !important;
    background: #192029 !important;
  }
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider:focus {
  outline: none;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-webkit-slider-runnable-track {
  width: 75%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: #cfd8dc;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-webkit-slider-thumb {
  height: 18px;
  width: 18px;
  background-color: white;
  cursor: pointer;
  margin-top: -8px;
  -webkit-appearance: none;
  border-radius: 20px;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
  background: #cfd8dc;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  background: #cfd8dc;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-moz-range-thumb {
  height: 18px;
  width: 18px;
  background-color: white;
  cursor: pointer;
  margin-top: -8px;
  -webkit-appearance: none;
  border-radius: 20px;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: #cfd8dc;
  border-width: 15px 0;
  color: transparent;
  border-color: #192029;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-ms-fill-lower {
  background: transparent;
  border-radius: 2.6px;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-ms-fill-upper {
  background: transparent;
  border-radius: 2.6px;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-ms-thumb {
  height: 18px;
  width: 18px;
  background-color: white;
  cursor: pointer;
  margin-top: 0px;
  border: 20px;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider:focus::-ms-fill-lower {
  background: #cfd8dc;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-ms-fill-upper {
  background: #cfd8dc;
}
div#flat-black-player-container
  div#player-bottom
  div#volume-container
  input[type="range"].amplitude-volume-slider::-ms-tooltip {
  display: none;
}
div#flat-black-player-container div#player-bottom div#volume-container:after {
  content: "";
  display: table;
  clear: both;
}

            
          
!
            
              // https://521dimensions.com/open-source/amplitudejs/examples/flat-black-playlist

Amplitude.init({
  bindings: {
    37: "prev",
    39: "next",
    32: "play_pause"
  },
  songs: [
    {
      name: "Risin' High (feat Raashan Ahmad)",
      artist: "Ancient Astronauts",
      album: "We Are to Answer",
      url: "https://521dimensions.com/songs/Ancient Astronauts - Risin' High (feat Raashan Ahmad).mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-to-answer.jpg"
    },
    {
      name: "The Gun",
      artist: "Lorn",
      album: "Ask The Dust",
      url: "https://521dimensions.com/songs/08 The Gun.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/ask-the-dust.jpg"
    },
    {
      name: "Anvil",
      artist: "Lorn",
      album: "Anvil",
      url: "https://521dimensions.com/songs/LORN - ANVIL.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/anvil.jpg"
    },
    {
      name: "I Came Running",
      artist: "Ancient Astronauts",
      album: "We Are to Answer",
      url: "https://521dimensions.com/songs/ICameRunning-AncientAstronauts.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-to-answer.jpg"
    },
    {
      name: "First Snow",
      artist: "Emancipator",
      album: "Soon It Will Be Cold Enough",
      url: "https://521dimensions.com/songs/FirstSnow-Emancipator.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
    },
    {
      name: "Terrain",
      artist: "pg.lost",
      album: "Key",
      url: "https://521dimensions.com/songs/Terrain-pglost.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/key.jpg"
    },
    {
      name: "Vorel",
      artist: "Russian Circles",
      album: "Guidance",
      url: "https://521dimensions.com/songs/Vorel-RussianCircles.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/guidance.jpg"
    },
    {
      name: "Intro / Sweet Glory",
      artist: "Jimkata",
      album: "Die Digital",
      url: "https://521dimensions.com/songs/IntroSweetGlory-Jimkata.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/die-digital.jpg"
    },
    {
      name: "Offcut #6",
      artist: "Little People",
      album: "We Are But Hunks of Wood Remixes",
      url: "https://521dimensions.com/songs/Offcut6-LittlePeople.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-but-hunks-of-wood.jpg"
    },
    {
      name: "Dusk To Dawn",
      artist: "Emancipator",
      album: "Dusk To Dawn",
      url: "https://521dimensions.com/songs/DuskToDawn-Emancipator.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/from-dusk-to-dawn.jpg"
    },
    {
      name: "Anthem",
      artist: "Emancipator",
      album: "Soon It Will Be Cold Enough",
      url: "https://521dimensions.com/songs/Anthem-Emancipator.mp3",
      cover_art_url: "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
    }
  ]
});

window.onkeydown = function(e) {
  return !(e.keyCode == 32);
};

  $(".down-header").on("click", function() {
    console.log('true');
    /*
      Sets the list's height;
    */
    $("#list").css(
      "height",
      parseInt($("#flat-black-player-container").height()) - 135 + "px"
    );

    /*
      Slides down the playlist.
    */
    $("#list-screen").slideDown(500, function() {
      $(this).show();
    });

  /*
    Handles a click on the up arrow to hide the list screen.
  */
  $(".hide-playlist").on("click", function() {
    $("#list-screen").slideUp(500, function() {
      $(this).hide();
    });
  });

  /*
    Handles a click on the song played progress bar.
  */
  document
    .getElementById("song-played-progress")
    .addEventListener("click", function(e) {
      var offset = this.getBoundingClientRect();
      var x = e.pageX - offset.left;

      Amplitude.setSongPlayedPercentage(
        parseFloat(x) / parseFloat(this.offsetWidth) * 100
      );
    });

  $('img[amplitude-song-info="cover_art_url"]').css(
    "height",
    $('img[amplitude-song-info="cover_art_url"]').width() + "px"
  );
});

$(window).on("resize", function() {
  $('img[amplitude-song-info="cover_art_url"]').css(
    "height",
    $('img[amplitude-song-info="cover_art_url"]').width() + "px"
  );
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console