<!DOCTYPE html>
<html>
<head>
<title>AmplitudeJS Testing</title>
<!-- Include font -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i" rel="stylesheet">
</head>
<body>
<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" data-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" data-amplitude-song-info="name" data-amplitude-song-index="0"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="0"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="0"></span></span>
</div>
<span class="song-duration">
3:30
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="1"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="1"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="1"></span></span>
</div>
<span class="song-duration">
3:16
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="2"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="2"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="2"></span></span>
</div>
<span class="song-duration">
3:32
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="3"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="3"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="3"></span></span>
</div>
<span class="song-duration">
3:30
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="4"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="4"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="4"></span></span>
</div>
<span class="song-duration">
5:12
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="5"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="5"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="5"></span></span>
</div>
<span class="song-duration">
5:29
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="6"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="6"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="6"></span></span>
</div>
<span class="song-duration">
5:29
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="7"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="7"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="7"></span></span>
</div>
<span class="song-duration">
2:39
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="8"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="8"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="8"></span></span>
</div>
<span class="song-duration">
1:00
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="9"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="9"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="9"></span></span>
</div>
<span class="song-duration">
5:25
<span>
</div>
<div class="song amplitude-song-container amplitude-play-pause" data-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" data-amplitude-song-info="name" data-amplitude-song-index="10"></span>
<span class="song-artist-album"><span data-amplitude-song-info="artist" data-amplitude-song-index="10"></span> - <span data-amplitude-song-info="album" data-amplitude-song-index="10"></span></span>
</div>
<span class="song-duration">
5:40
<span>
</div>
</div>
<div id="list-screen-footer">
<div id="list-screen-meta-container">
<span data-amplitude-song-info="name" class="song-name"></span>
<div class="song-artist-album">
<span data-amplitude-song-info="artist"></span>
</div>
</div>
<div class="list-controls">
<div class="list-previous amplitude-prev"></div>
<div class="list-play-pause amplitude-play-pause"></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 data-amplitude-song-info="cover_art_url"/>
</div>
<div id="player-progress-bar-container">
<progress id="song-played-progress" class="amplitude-song-played-progress"></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"></span>
<span class="amplitude-duration-time time-container"></span>
</div>
<div id="meta-container">
<span data-amplitude-song-info="name" class="song-name"></span>
<div class="song-artist-album">
<span data-amplitude-song-info="artist"></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" 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>
<a href="https://serversideup.net/courses/amplitudejs-from-the-ground-up/" class="learn-more">Learn More on Server Side Up</a>
</body>
</html>
/*
1. Base
*/
/*
2. Components
*/
div#list-screen {
background-color: #141920;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 9999;
display: none; }
div#list-screen div#list-screen-header {
background-color: #141920;
padding: 15px;
text-align: center;
height: 25px;
position: relative;
color: white;
font-family: "Lato", sans-serif;
cursor: pointer; }
div#list-screen div#list-screen-header img#up-arrow {
position: absolute;
top: 23px;
left: 15px;
cursor: pointer; }
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#list-screen div#list {
overflow-y: scroll; }
div#list-screen div#list div.song {
padding: 15px;
background-color: #242b33;
margin-bottom: 1px;
cursor: pointer;
line-height: 24px; }
div#list-screen div#list div.song span.song-number-now-playing {
display: inline-block;
width: 24px;
text-align: center; }
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#list-screen div#list div.song span.song-number-now-playing img.now-playing {
display: none; }
div#list-screen div#list div.song.amplitude-active-song-container {
background-color: #30363e; }
div#list-screen div#list div.song.amplitude-active-song-container span.song-number-now-playing img.now-playing {
display: inline-block; }
div#list-screen div#list div.song.amplitude-active-song-container span.song-number-now-playing span.number {
display: none; }
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#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#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#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#list-screen div#list div.song span.song-artist-album {
color: #5277b0; }
div#list-screen div#list-screen-footer {
height: 80px;
padding: 15px; }
div#list-screen div#list-screen-footer div#list-screen-meta-container {
width: calc(100% - 123px);
float: left; }
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#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#list-screen div#list-screen-footer div.list-controls {
width: 90px;
float: right;
margin-top: 8px; }
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#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#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#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#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.player-header {
background-color: #141920;
padding: 15px;
text-align: center;
height: 25px;
position: relative;
margin-top: 40px;
cursor: pointer;
color: white;
font-family: "Lato", sans-serif; }
div.player-header img#down {
position: absolute;
top: 23px;
left: 15px;
cursor: pointer; }
div#player-top {
position: relative; }
div#player-top img[data-amplitude-song-info="cover_art_url"] {
width: 100%;
height: 370px; }
div#player-progress-bar-container {
width: 100%;
height: 4px;
background-color: #000;
position: relative;
margin-top: -6px; }
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#player-progress-bar-container progress#song-played-progress[value]::-webkit-progress-bar {
background: none; }
div#player-progress-bar-container progress#song-played-progress[value]::-webkit-progress-value {
background: white; }
div#player-progress-bar-container progress#song-played-progress[value]::-moz-progress-bar {
background: white; }
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#player-progress-bar-container progress#song-buffered-progress[value]::-webkit-progress-bar {
background: none; }
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#player-progress-bar-container progress#song-buffered-progress[value]::-moz-progress-bar {
background: rgba(255, 255, 255, 0.5); }
div#player-middle {
background-color: #000;
padding-left: 15px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
position: relative; }
div#player-middle div#time-container {
color: white;
width: 100%;
background-color: #000;
font-size: 14px;
font-weight: bold; }
div#player-middle div#time-container span.amplitude-duration-time {
position: absolute;
top: 0px;
right: 5px; }
div#player-middle div#time-container span.amplitude-current-time {
position: absolute;
top: 0px;
left: 5px; }
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#player-middle 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#player-bottom {
background-color: #192029;
padding-left: 25px;
padding-right: 25px; }
div#player-bottom div#control-container {
height: 60px;
padding-top: 40px;
padding-bottom: 40px; }
div#player-bottom div#control-container div#shuffle-container {
float: left;
width: 20%;
height: 60px;
padding-top: 21px; }
div#player-bottom div#control-container div#shuffle-container div#shuffle {
width: 16px;
height: 17px;
cursor: pointer;
margin: auto;
opacity: 0.7; }
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#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#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#player-bottom div#control-container div#shuffle-container div#shuffle.amplitude-shuffle-on:hover {
opacity: 1; }
div#player-bottom div#control-container div#prev-container {
width: 20%;
float: left;
height: 60px;
padding-top: 18px; }
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#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#player-bottom div#control-container div#play-pause-container {
width: 20%;
float: left;
height: 60px; }
div#player-bottom div#control-container div#play-pause-container div#play-pause {
width: 60px;
height: 60px;
cursor: pointer;
margin: auto; }
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#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#player-bottom div#control-container div#next-container {
width: 20%;
float: left;
height: 60px;
padding-top: 18px; }
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#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#player-bottom div#control-container div#repeat-container {
float: left;
width: 20%;
height: 60px;
padding-top: 20px; }
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#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#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#player-bottom div#control-container div#repeat-container div#repeat.amplitude-repeat-on:hover {
opacity: 1; }
div#player-bottom div#control-container::after {
content: "";
display: table;
clear: both; }
div#player-bottom div#volume-container {
padding-bottom: 20px;
text-align: center; }
div#player-bottom div#volume-container img {
display: block;
float: left;
margin-top: -9px; }
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; }
div#player-bottom div#volume-container input[type="range"].amplitude-volume-slider:focus {
outline: none; }
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#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#player-bottom div#volume-container input[type="range"].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
background: #cfd8dc; }
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#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#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#player-bottom div#volume-container input[type="range"].amplitude-volume-slider::-ms-fill-lower {
background: transparent;
border-radius: 2.6px; }
div#player-bottom div#volume-container input[type="range"].amplitude-volume-slider::-ms-fill-upper {
background: transparent;
border-radius: 2.6px; }
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#player-bottom div#volume-container input[type="range"].amplitude-volume-slider:focus::-ms-fill-lower {
background: #cfd8dc; }
div#player-bottom div#volume-container input[type="range"].amplitude-volume-slider::-ms-fill-upper {
background: #cfd8dc; }
div#player-bottom div#volume-container input[type="range"].amplitude-volume-slider::-ms-tooltip {
display: none; }
div#player-bottom div#volume-container:after {
content: "";
display: table;
clear: both; }
@-moz-document url-prefix() {
div#player-bottom div#volume-container input[type="range"].amplitude-volume-slider {
margin-top: 0px; } }
@supports (-ms-ime-align: auto) {
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#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; } }
/*
3. Layout
*/
body {
background-color: rgba(0, 0, 0, 0.8);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
font-family: "Lato", sans-serif; }
div#flat-black-player-container {
position: relative;
max-width: 400px;
margin: auto; }
/*
4. Pages
*/
/*
5. Themes
*/
/*
6. Utils
*/
/*
7. Vendors
*/
/*
8. Animations
*/
.slide-in-top {
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
/* ----------------------------------------------
* Generated by Animista on 2019-3-25 18:39:54
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-top
* ----------------------------------------
*/
@-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
opacity: 0; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1; } }
@keyframes slide-in-top {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
opacity: 0; }
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1; } }
.slide-out-top {
-webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; }
/* ----------------------------------------------
* Generated by Animista on 2019-3-25 18:45:17
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-out-top
* ----------------------------------------
*/
@-webkit-keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1; }
100% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
opacity: 0; } }
@keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1; }
100% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
opacity: 0; } }
/*# sourceMappingURL=app.css.map */
a.learn-more{
background-color: #141920;
display: block;
width: 300px;
color: white;
text-align: center;
margin: auto;
margin-top: 20px;
text-decoration: none;
padding: 10px;
}
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
/*
Handles a click on the down button to slide down the playlist.
*/
document.getElementsByClassName('down-header')[0].addEventListener('click', function(){
var list = document.getElementById('list');
list.style.height = ( parseInt( document.getElementById('flat-black-player-container').offsetHeight ) - 135 ) + 'px';
document.getElementById('list-screen').classList.remove('slide-out-top');
document.getElementById('list-screen').classList.add('slide-in-top');
document.getElementById('list-screen').style.display = "block";
});
/*
Handles a click on the up arrow to hide the list screen.
*/
document.getElementsByClassName('hide-playlist')[0].addEventListener('click', function(){
document.getElementById('list-screen').classList.remove('slide-in-top');
document.getElementById('list-screen').classList.add('slide-out-top');
document.getElementById('list-screen').style.display = "none";
});
/*
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 );
});
document.querySelector('img[data-amplitude-song-info="cover_art_url"]').style.height = document.querySelector('img[data-amplitude-song-info="cover_art_url"]').offsetWidth + 'px';
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/song/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/song/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/song/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/song/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/song/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/song/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/song/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/song/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/song/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/song/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/song/Anthem-Emancipator.mp3",
"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
}
]
});
This Pen doesn't use any external CSS resources.