:root {
--a: 0;
}
.logo img {
width: 80px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-weight: 100;
}
body {
color: rgb(254, 254, 254);
background-color: black;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.container {
width: 100%;
max-width: 100vw;
}
.left {
width: 25vw;
padding: 10px;
}
.home {
display: flex;
gap: 10px;
padding: 20px;
}
.home ul li {
width: 1.2rem;
list-style: none;
display: flex;
gap: 20px;
padding-top: 4px;
font-weight: 300;
cursor: pointer;
color: #bfbebe;
}
.home ul li:hover {
color: white;
}
img {
cursor: pointer;
}
.font-16 {
font-size: 16px;
}
.invert {
filter: invert(1);
}
.right {
width: 75vw;
}
.heading {
width: 9.2rem;
list-style: none;
display: flex;
gap: 20px;
padding-top: 4px;
font-size: 10px;
align-items: center;
font-weight: 300;
cursor: pointer;
}
.heading img {
width: 1.28rem;
}
.library {
min-height: 82vh;
position: relative;
}
.library .heading {
color: #bfbebe;
}
.library .heading:hover {
color: white;
}
.footer {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
color: grey;
font-size: 12px;
gap: 14px;
padding: 10px 39px;
}
.footer div a {
list-style: none;
color: grey;
text-decoration: none;
}
/* right */
.right {
margin: 16px 0px;
margin-left: -8px;
position: relative;
}
.header {
display: flex;
justify-content: space-between;
margin: 40px 0px;
padding: 15px;
height: 66px;
align-items: center;
background-color: #121212;
box-shadow: 0 -15px 10px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.buttons {
display: flex;
gap: 29px;
height: 42px;
align-items: center;
}
.buttons button.btnn {
font-size: 16px;
font-weight: bold;
background: none;
color: #585858;
border: none;
cursor: pointer;
outline: none;
height: 40px;
}
.buttons button.btnn:hover {
color: #EEEEEE;
font-size: 16px;
}
.buttons button.btn {
font-size: 16px;
border-radius: 40px;
padding: 11px 20px;
background-color: #ffffff;
border: 2px solid white;
color: #121212;
outline: none;
cursor: pointer;
height: 40px;
}
.buttons button.btn:hover {
background-color: #191919;
color: #ffffff;
font-size: 16px;
}
.spotifyPlayist {
height: 86vh;
}
.spotifyPlayist h1 {
font-weight: 250;
font-size: 24px;
padding: 5px 9px;
margin: 10px;
}
.playSVG {
width: 50px;
height: 50px;
position: absolute;
top: 69px;
right: 11px;
opacity: var(--a);
}
.spotifyPlayist .card {
width: 210px;
padding: 15px 15px;
background-color: #161616;
border: 2px solid #161616;
border-radius: 10px;
margin: 3px;
transition: all 0.7s ease-in;
}
.spotifyPlayist .card:hover {
background-color: #343434;
cursor: pointer;
--a: 1;
transition: all 0.7s ease-out;
}
.spotifyPlayist .card>* {
padding-top: 2px;
}
.card img {
width: 100%;
object-fit: contain;
}
.cardContainer {
display: flex;
gap: 13px;
flex-wrap: wrap;
margin: 20px;
max-height: 76vh;
overflow-y: auto;
}
.card {
position: relative;
}
.svg {
width: 50px;
height: 50px;
position: absolute;
top: 69px;
right: 11px;
opacity: var(--a);
display: block;
}
.playBar {
position: fixed;
bottom: 18px;
background-color: rgb(17, 16, 16);
width: 73.3vw;
border-radius: 8px;
padding: 11px;
height: 90px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 2;
}
.invert {
filter: invert(1);
}
.songButtons {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.songButtons img {
height: 24px;
width: 24px;
}
.volumne1 {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
}
.range input[type=range] {
color: rgb(255, 115, 0);
cursor: pointer;
}
.volume {
display: flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
}
.songList {
margin-top: 20px;
height: 636px;
text-align: center;
overflow: auto;
}
.songList ul {
padding: 23px 12px;
}
.songList ul li {
list-style-type: none;
display: flex;
gap: 34px;
cursor: pointer;
justify-content: center;
align-items: center;
gap: 20px;
padding: 10px 6px;
border: 1px solid white;
margin: 18px 0;
}
.playnow {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* */
.songList ul {
padding: 0 12px;
}
.songList ul li {
list-style-type: decimal;
display: flex;
justify-content: space-between;
gap: 12px;
cursor: pointer;
padding: 12px 0;
border: 1px solid rgba(146, 143, 143, 0.491);
margin: 13px 0;
padding: 13px;
border-radius: 5px;
}
.songList .info {
font-size: 15px;
width: 344px;
}
.playnow span {
font-size: 15px;
width: 64px;
padding: 12px;
}
.seekar {
height: 2px;
/* width: calc(100vw - 3rem); */
width: 72.3vw;
height: 4px;
border: 2px solid #ffffff;
cursor: pointer;
position: absolute;
border-radius: 10px;
bottom: 0;
}
.seekar:hover {
border: 2px solid #1DB954;
}
.songsInfo {
width: 20%;
padding: 2px 20px;
}
.circle {
width: 13px;
height: 12px;
border-radius: 100px;
background-color: #ffffff;
position: relative;
bottom: 6px;
right: 2px;
left: -1;
}
.upperBAR {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 20px;
}
.hamburger {
display: none;
}
.left .close .invert {
display: none;
}
.playCONT {
display: flex;
align-items: center;
justify-content: center;
margin: 0px 30px;
padding: 0px 30px;
}
.cardContainer {
padding-bottom: 6vh;
}
@media (max-width:1400px) {
.left {
position: absolute;
left: -120%;
transition: all 0.3s ease-in;
z-index: 1;
width: 363px;
background-color: black;
padding: 1px;
}
.left .close .invert {
display: block;
position: absolute;
top: 21px;
right: 21px;
}
.right {
width: 100%;
}
.right {
margin: 0px 0px;
margin-left: 0px;
position: relative;
}
.playBar {
width: calc(100vw - 20px);
height: 15%;
padding: 11px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 7px;
text-align: center;
padding: 0 9px;
}
.seekar {
width: calc(100vw - 40px);
}
.volumne1 {
display: flex;
justify-content: space-between;
gap: 7px;
align-items: center;
flex-direction: column;
}
.upperBAR {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
margin: 0px 0px;
gap: 10px;
text-align: center;
}
.playCONT {
display: flex;
align-items: center;
justify-content: center;
margin-left: 30px;
margin-right: 30px;
}
.hamburger {
display: block;
cursor: pointer;
}
.nav>svg {
display: none;
}
.songsInfo {
width: 400px;
width: 378px;
padding: 0px 19px;
}
.songList {
margin-top: 20px;
height: 500px;
text-align: center;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
color: grey;
font-size: 11px;
gap: 14px;
padding: 13px 2px;
}
.spotifyPlayist .card {
width: 350px;
padding: 5px 5px;
background-color: #161616;
border: 2px solid #161616;
border-radius: 10px;
margin: 3px;
}
.cardContainer {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin: 20px;
max-height: unset;
overflow-y: unset;
margin-bottom: 20vh;
}
.svg {
display: none;
}
.playBar {
width: calc(100vw - 20px);
height: 20%;
padding: 11px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 14px;
text-align: center;
padding: 0 22px;
position: fixed;
bottom: 19px;
}
.cardContainer {
padding-bottom: 24vh;
}
}
@media (max-width:400px) {
.cardContainer {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin: 15px;
max-height: unset;
overflow-y: unset;
}
.spotifyPlayist .card {
width: 500px;
padding: 5px 5px;
background-color: #161616;
border: 2px solid #161616;
border-radius: 10px;
margin: 3px;
}
.cardContainer {
padding-bottom: 24vh;
}
}