Android Music

/*Downloaded from https://www.codeseek.co/-J0hn-/android-music-RoQNeq */
body{
  display:flex;
  justify-content:center;
  align-items:center;
/*   background:rgb(255, 51, 0); */
  background:lightgrey;
  overflow:hidden;
  height:100vh;
}
::-webkit-scrollbar{
  width:0;
}
.container{
  margin:1em 0 0 0;
  padding-bottom:1em;
/*   border:solid 1px black; */
  width:400px;
  height:600px;
  overflow-y:scroll;
}
.img{
  width:400px;
  height:350px;
  background-color:rgb(255, 51, 0);
  position:fixed;
/*   top:0; */
  z-index:-1;
}
.img img{
  width:100%;
  height:100%;
  z-index:-1;
}
nav{
  z-index:100;
  position:absolute;
/*   background:red; */
  top:0;
  left:0;
  right:0;
  width:auto;
/*   margin:auto 1em; */
  padding:1.2em 1em;
  color:rgb(255,255,255);
}
nav .fa-search{
  float:right;
}
.gradient{
  width:auto;
  height:70px;
  background:linear-gradient(to bottom,rgba(50,50,50,.3),transparent); 
  position:absolute;
  top:0;
  left:0;
  right:0;
}
.content{
  background:white;
  margin-top:21.8em;
  z-index:400;
  width:400px;
/*   height:700px;  */
}
h2:nth-of-type(1){
  text-transform:capitalize;
  font-family:'Arial';
  font-weight:500;
  font-size:1.4em;
  color:black;
  margin-left:.6em;
  padding-top:.6em;
  margin-bottom:0;
}
.uppercase{
  text-transform:uppercase;
}
/* .content h4{
  font-family:'Helvetica';
  margin-left:.80em;
  margin-bottom:0;
  padding-top:1em;
} */
.fa-bookmark{
  color:rgb(255, 51, 0);
  float:right;
  margin-right:.70em;
}
 h5{
  font-family:'Arial';
  margin-top:.60em;
  margin-bottom:0;
  font-weight:bold;
}
.release h6{
  font-family:'Arial';
  color:rgb(100,100,100);
  font-weight:500;
  margin-top:1.2em;
}
.release{
  margin-left:1em;
  margin-bottom:.55em;
  margin-top:1em;
  line-height:0;
  width:170px;
  height:60px;
/*   border:solid 1px red; */
  display:flex;
  align-items:center;
}
.release  div:not(.circle){
/*   border:solid 1px green; */
  align-self:flex-end;
  margin-top:0;
}
.release .circle{
  border:solid 1px transparent;
  background:red url('data:image/jpeg;base64,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');
  background-size:cover;
  width:50px;
  height:50px;
  border-radius:50%;
  margin-right:1em;
/*   transform:translate(-58px,32px); */
}
/*BUTTONS*/
.buttons{
  display:flex;
  justify-content:center;
}
button{
/*   flex:1; */
  flex-basis:43%;
  margin:auto .50em .15em .50em;
  padding:9px 10px;
  border-radius:4px;
  cursor:pointer;
}
button:nth-of-type(1){
  background:none;
  border:solid 2px rgb(255, 51, 0);
  color:rgb(255, 51, 0);
  font-weight:600;
  transition-duration:.2s;
}
button:nth-of-type(1):hover{
  background:rgb(255, 51, 0);
  color:rgb(255,255,255);
}
button:nth-of-type(2){
  background:rgb(255, 51, 0);
  border:solid 2px rgb(255, 51, 0);
  color:rgb(255,255,255);
}

hr{
/*   margin:.85em 1.3em; */
  border-color:rgb(255,255,255);
  margin-left:1em;
  margin-right:1em;
}

/*INFO*/
.info{
  display:flex;
  justify-content:center;
  margin:1.2em auto 0 auto;
}
.info .circle{
  width:60px;
  height:60px;
  border-radius:50%;
  margin:auto .85em;
  box-shadow:0 1px 2px rgb(90,90,90);
  background:rgb(255, 51, 0);
}
.info  h3{
  margin:auto;
  padding:auto;
  transform:translate(17px, 15px);
  margin-bottom:10px;
  color:rgb(255,255,255);
  font-family:sans-serif;
}
.circle .fa{
  color:rgb(255,255,255); 
}
.circle .fa-star, .fa-star-half{
  
  font-size:.30em;
  transform:translateX(8px);
}
.circle .fa-music{
  font-size:1.6em;
  transform:translate(17px,17px);
}
.circle .fa-clone{
  font-size:1.6em;
  transform:translate(18px,18px);
}
.info p{
  font-family:'Arial';
  font-size:.80em;
/*   padding-left:1em; */
/*   padding-right:1em; */
/*   margin:.80em auto 0 auto; */
/*   background:red; */
/*   width:50px; */
  text-align:center;
}
p .fa-user{
  font-size:.85em;
  color:rgb(90,90,90);
}

a{
  color:rgb(255, 51, 0);
  text-decoration:none;
  display:block;
  text-align:center;
  text-transform:uppercase;
  font-family:'Arial';
  margin:1.3em auto;
  width:150px;
  padding:.30em .80em;
}

.name{
/*   border:solid 1px red; */
  width:150px;
  height:110px;
  margin:1.3em auto auto auto;
  text-align:center;
  text-transform:capitalize;
}
.name .circle{
  width:50px;
  height:50px;
  border-radius:50%;
  background:rgb(133, 133, 173);
  border:solid 2px rgb(255,255,255);
  box-shadow:0 1px 2px rgb(0,0,0);
  color:rgb(250,250,250);
  font-size:1.8em;
  font-family:'Arial';
  margin:auto auto .30em auto;
}
.name .circle span{
/*   border:solid 1px red; */
  display:block;
  padding-top:.3em;
}
.name h6{
  font-family:'Arial';
  margin-top:.3em;
  font-weight:200;
  color:rgb(120,120,120);
}
.rate{
  text-align:center;
/*   border:solid 1px red; */
/*   width:250px; */
  margin:auto;
}
/* .rate i{
  font-size:1.6em;
  color:rgb(0,0,0);
  margin:.40em .80em;
} */
.rate .fa{
  font-size:1.6em;
  margin:.40em .80em;
}
.rate p{
  font-style:italic;
  color:rgb(150,150,150);
  font-family:'Arial';
  font-size:.80em;
  margin-top:.5em;
}
.flex{
  display:flex;
  justify-content:space-between;
/*   background:red; */
/*   height:65px; */
  margin:2.5em auto auto auto;
}
.flex h4{
  font-weight:200;
  font-family:'Arial';
  align-self:center;
  margin:0 0 0 1em;
}
.flex  button{
  padding:.50em .55em;
  flex-basis:20%;
  font-size:.75em;
/*   margin:0; */
  align-self:flex-end;
  outline:0;
}
ul{
  list-style:none;
/*   display:flex; */
  
/*   justify-content:space-around;
  justify-content:baseline;
  align-content:center;
  align-items:baseline; */
  padding-left:0;
}
ul .inline{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  align-content:center;
/*   background:red; */
  height:55px;
}
.inline span{
  margin-right:.70em;
  color:rgb(130,130,130);
}
.inline li{
  padding-left:.50em;
  align-self:center;
}
ul li {
  text-transform:capitalize;
  font-family:'Arial';
/*   margin:.20em 0; */
  margin:0;
  padding:0;
/*   border-bottom:solid 1px red; */
  
/*   height:50px; */
  
/*   background:green; */
}
ul .inline button{
/*   float:right; */
  flex-basis:15%;
  padding:auto;
  margin-right:.45em;
  margin-bottom:.65em;
  background:rgb(255,255,255);
}
ul .inline button:hover{
  border-color:rgb(255,255,255);
  background:white;
  border-color:rgb(255,51,0);
  color:rgb(255, 51, 0);
}
ul .inline button,.card:focus{
  outline:0;
}
.inline:hover{
  background:rgb(255, 51, 0);
  color:rgb(255,255,255);
}
.inline li{
  cursor:default;
}

section{
  background:rgb(225, 225, 208);
  width:auto;
  padding-bottom:.50em;
/*   height:290px; */
}
section h3{
  font-family:'Arial';
  font-weight:500;
  margin-left:.40em;
  
/*   border:solid 1px red; */
}
section h3:first-letter{
  text-transform:capitalize;
}
section .flex{
/*   border:solid 1px red; */
  justify-content:space-around;
  align-items:baseline;
  height:50px;
/*   margin:0; */
  margin:0 0 1em 0;
}
section .flex a{
  font-weight:bold;
  font-size:.85em;
  margin-right:1em;
/*   border:solid 1px red; */
  width:auto;
}
.variable-width{
/*   border:solid 1px red; */
/*   width:500px; */
  margin:auto auto 1em .40em;
}

.card{
  width:120px;
  height:180px;
/*   border:solid 1px gray; */
  background:white;
  margin-right:.25em;
}
.card .album{
  width:100%;
  height:115px;
/*   border-color:transparent; */
}
 .card .album img{
  width:100%;
  height:100%;
}

.card-info{
  font-family:'Arial';
  text-transform:capitalize;
  line-height:0;
  margin:.60em .20em 0 .20em;
  padding:0 .10em;
  width:auto;
  height:65px;
/*   border:solid 1px red; */
}
.card-info h5{
  margin-bottom:.1em;
}
.card-info h6{
  color:gray;
}
.align{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.align .price{
  color:rgb(255, 51, 0);
}
section .fa-flag{
  margin-right:.40em;
  margin-left:.60em;
}
section h5:last-child{
  font-weight:200;
}

/*Downloaded from https://www.codeseek.co/-J0hn-/android-music-RoQNeq */
$(document).ready(function() {
  
// WHEN HOVER THE TRACK NUMBER CHANGES TO A PLAY BUTTON
  $('.inline').each(function() {
      //get track number
      var $trackNumber = $(this).children().find('span').text();
      var $span = $(this).children().find('span');
    
      $(this).hover(function() {
          //replace track number with play icon
          $($span).text('').addClass('fa fa-play').css({
            'color': 'white',
            'cursor': 'pointer'
          });
        },
        function() {
          //replace play icon with track number
  $($span).text($trackNumber).removeClass('fa fa-play').css({
            'color': 'rgb(130,130,130)'
          });
        }
      );
    });
  
  // WHEN CLICKED, PLAY BUTTON CHANGES TO PAUSE BUTTON
  $('li span').on('click',function(){
    if($(this).hasClass('fa-play')){
      $(this).removeClass('fa-play').addClass('fa-pause');
    } else if($(this).hasClass('fa-pause')){
      $(this).removeClass('fa-pause').addClass('fa-play');
    }
  });
  
  //BOOTSTRAP RATING
  $('input').on('change', function() {
    alert('Rating: ' + $(this).val());
  });

  //SLICK CAROUSEL
  $('.variable-width').slick({
    arrows: false,
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 3,
    centerMode: false,
    variableWidth: true
  });
});