/*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
});
});