@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Permanent+Marker&display=swap");
@import url(https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.pro_ads_img {
position: relative;
max-width: 100%;
text-align: center;
}
.pro_ads_img img {
filter: blur(0.9px);
width: 100%;
}
.pro_ads_img::before {
content: "This option available in Pro Version only";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
font-size: 20px;
max-width: 80%;
font-weight: bold;
} .elementor-element .icon {
position: relative;
}
.elementor-element .icon .bl_icon::after {
content: "MP";
font-size: 11px;
position: absolute;
right: 5px;
top: 5px;
background: #4527A4;
color: #fff;
padding: 2px 5px 3px 5px;
border-radius: 3px;
font-family: monospace;
text-align: center;
line-height: 1;
vertical-align: middle;
}
.art-video-player {
max-width: 100% !important;
height: 600px !important;
}
:root {
--light-clr: #e5e5e5;
--primary-clr: #6490f6;
--secondary-clr: #c1daff;
--active-clr: rgba(149, 153, 186, 0.4);
--player-bg: rgba(5, 9, 51, 0.4);
--scrollbar-track: rgb(79, 78, 78);
--scrollbar-thumb: rgb(116, 116, 116);
}
.playlist-wrapper {
font-family: "Nunito", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.playlist-container {
position: relative;
width: 90%;
min-height: 80vh;
background: #00112473;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
border-radius: 15px;
overflow: hidden;
}
.playlist-container::after,
.playlist-container::before {
content: "";
position: absolute;
width: 250px;
aspect-ratio: 1/1;
border-radius: 50%;
transition: 5s ease-in-out;
}
.playlist-container::after {
top: -3%;
left: -5%;
transform: scale(1);
background-color: #5768af;
}
.playlist-container:hover::after {
left: 85%;
transform: scale(1.2);
background-color: #a0acbd;
}
.playlist-container::before {
bottom: -3%;
right: -5%;
transform: scale(1);
background-color: #ab4c72;
}
.playlist-container:hover::before {
right: 85%;
transform: scale(1.2);
background-color: #bda5ad;
} .playlist-container .content {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100%;
place-items: center;
background: rgba(53, 54, 72, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: inherit;
box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.2) inset,
0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 10;
color: var(--light-clr);
overflow-y: auto;
padding: 30px 30px 10px;
}
.playlist-container .content::-webkit-scrollbar {
width: 7px;
}
.playlist-container .content::-webkit-scrollbar-track {
box-shadow: inset 0 0 0.3rem var(--scrollbar-track);
border-radius: 40px;
margin: 18px 0;
}
.playlist-container .content::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0.5rem var(--scrollbar-thumb);
background-color: var(--primary-clr);
outline: none;
border-radius: 40px;
} .slider-playlist {
display: grid;
grid-template-columns: 45% 55%;
align-items: center;
} .playlist-container .swiper {
width: 300px;
height: auto;
display: flex;
}
.playlist-container .swiper-slide {
display: grid;
grid-template-rows: 4fr 1fr;
padding: 15px;
border-radius: 10px;
background-color: #d3d2d6;
box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.2) inset,
0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.1);
user-select: none;
}
.playlist-container .swiper-slide img {
aspect-ratio: 1/1;
border-radius: 5px;
margin-bottom: 14px;
pointer-events: none;
}
.playlist-container .swiper-slide h1 {
width: max-content;
font-family: "Permanent Marker", serif;
font-size: 18px;
letter-spacing: 2px;
color: #222224;
text-transform: uppercase;
transform: rotate(-3deg);
margin: auto;
} .playlist {
width: 100%;
}
.playlist-item {
display: grid;
grid-template-columns: 15% 65% 15% 5%;
align-items: center;
width: 100%;
height: auto;
padding: 8px 10px;
margin-bottom: 15px;
border-bottom: 2px solid var(--primary-clr);
color: var(--light-clr);
cursor: pointer;
user-select: none;
}
.playlist-item img {
width: 70%;
aspect-ratio: 1/1;
border-radius: 5px;
overflow: hidden;
}
.playlist-item .song p:nth-child(1) {
font-weight: 500;
margin-bottom: 3px;
}
.playlist-item .song p:nth-child(2) {
font-weight: 300;
opacity: 0.5;
}
.playlist-item i {
font-size: 1.2rem;
color: var(--light-clr);
}
.active-playlist-item {
background-color: var(--active-clr);
border-radius: 5px;
} .playlist-container .player {
position: sticky;
left: 0;
bottom: 0;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
background: var(--player-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0 5px;
z-index: 15;
overflow: hidden;
} .controls {
display: flex;
justify-content: center;
align-items: center;
column-gap: 25px;
}
.controls svg {
width: 24px;
height: 24px;
cursor: pointer;
transform: scale(1);
will-change: transform;
}
.controls #shuffleBtn path {
stroke: #fff;
}
.controls #nextBtn path,
.controls #prevBtn path {
fill: #fff;
}
#playPauseBtn {
width: 45px;
aspect-ratio: 1/1;
margin: 5px 0;
color: var(--primary-clr);
outline: 0;
background: var(--light-clr);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
box-shadow: 0 10px 20px rgba(5, 36, 28, 0.3);
font-size: 1.5rem;
transform: scale(1);
will-change: transform;
}
#playPauseIcon {
display: flex;
align-items: center;
justify-content: center;
}
#playPauseIcon::before {
content: ' ' !important;
}
#playPauseIcon.fa-pause svg.pause {
display: block;
}
#playPauseIcon.fa-pause svg.play {
display: none;
}
#playPauseIcon.fa-play svg.pause {
display: none;
}
#shuffleBtn:hover,
#prevBtn:hover,
#nextBtn:hover,
#playPauseBtn:hover {
transform: scale(1.05);
} .volume {
position: relative;
display: flex;
align-items: center;
}
.volume svg path {
stroke: #fff;
}
#volume-range {
position: absolute;
left: 30px;
top: 9px;
appearance: none;
-webkit-appearance: none;
width: 120px;
height: 4px;
background: var(--primary-clr);
border-radius: 4px;
cursor: pointer;
padding: 0;
}
#volume-range::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background: var(--light-clr);
width: 12px;
aspect-ratio: 1/1;
border-radius: 50%;
} #progress-bar {
appearance: none;
-webkit-appearance: none;
width: 90%;
height: 5px;
background: linear-gradient(90deg,
var(--light-clr),
var(--secondary-clr),
var(--primary-clr),
var(--secondary-clr),
var(--light-clr));
border-radius: 4px;
margin: 12px 0 16px;
cursor: pointer;
padding: 0;
}
#progress-bar::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background: var(--light-clr);
width: 15px;
aspect-ratio: 1/1;
border-radius: 50%;
}
.plyr--html5 .plyr__volume {
justify-content: flex-end;
}
.plyr--html5 .plyr__progress input {
width: 100%;
} @media (max-width: 1300px) {
.playlist-container .swiper {
width: 270px;
}
}
@media (max-width: 1100px) {
.playlist-container .content {
padding: 40px 20px 20px;
}
.playlist-container .swiper {
width: 240px;
}
.slider-playlist {
grid-template-columns: 50% 50%;
}
}
@media (max-width: 900px) {
.playlist-container .content {
padding: 30px 40px 20px;
overflow-x: hidden;
}
.playlist {
margin-bottom: 60px;
}
.slider-playlist {
grid-template-columns: 100%;
}
.playlist-container.swiper {
margin: 30px auto 50px;
}
.playlist-container .player {
width: 110%;
}
#volume-range {
width: 50px;
}
}
@media (max-width: 580px) {
.playlist-container .content {
overflow-x: hidden;
}
.playlist-container.swiper {
width: 220px;
margin: 20px auto 35px;
}
.playlist-item {
margin-bottom: 10px;
}
.playlist-container .player {
width: 115%;
}
.controls {
column-gap: 15px;
}
.controls i {
font-size: 1.3rem;
}
#playPauseBtn {
width: 40px;
font-size: 1.2rem;
}
.volume i {
font-size: 0.9rem;
}
#volume-range {
left: 20px;
top: 6px;
width: 40px;
}
} .classic-playlist-container {
width: min(100%, 900px);
overflow: hidden;
margin: auto auto;
}
.classic-playlist-container .album-art {
width: 220px;
height: 220px;
border-radius: 12px;
overflow: hidden;
transition: transform 0.4s ease;
}
.classic-playlist-container .album-art:hover {
transform: scale(1.05);
}
.classic-playlist-container .album-art img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.classic-playlist-container .track-info h2 {
font-size: 1.6rem;
margin-bottom: 8px;
}
.classic-playlist-container .track-info p {
color: #a0a0c0;
font-size: 1.2rem;
}
.classic-playlist-container .progress-container {
width: 100%;
height: 6px;
background: #32364394;
border-radius: 10px;
margin: 20px 0;
cursor: pointer;
position: relative;
}
.classic-playlist-container .progress {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #6a5acd, #00d4ff);
border-radius: 10px;
transition: width 0.1s linear;
}
.classic-playlist-container .time {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 0.9rem;
color: #a0a0c0;
}
.classic-playlist-container .controls {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: 26px;
}
.classic-playlist-container .btn {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 4px;
color: #32364394;
border: 1px solid #32364394;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.classic-playlist-container .btn:hover {
background: linear-gradient(90deg, #6a5acd, #00d4ff);
transform: translateY(-3px);
color: #F7F7F7;
}
.classic-playlist-container .btn.play-pause {
color: #F7F7F7;
background: linear-gradient(90deg, #6a5acd, #00d4ff);
}
.classic-playlist-container .btn.play-pause:hover {
background: linear-gradient(90deg, #6a5acd, #00d4ff);
}
.classic-playlist-container .volume-container {
display: flex;
align-items: center;
gap: 10px;
width: 200px;
}
.classic-playlist-container .volume-icon {
cursor: pointer;
font-size: 1.2rem;
color: #32364394;
transition: color 0.3s ease;
}
.classic-playlist-container .volume-icon:hover {
color: #00d4ff;
} .classic-playlist-container .volume-slider {
-webkit-appearance: none;
width: 120px;
height: 6px;
background: #32364394;
border-radius: 10px;
outline: none;
cursor: pointer;
}
.classic-playlist-container .volume-slider::-webkit-slider-runnable-track {
height: 6px;
border-radius: 10px;
background: #32364394;
}
.classic-playlist-container .volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;  } .classic-playlist-container .volume-slider::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #6a5acd, #00d4ff) 0% 0% / 100% 100% no-repeat, #333;
background-size: var(--volume-percent, 100%) 100%;
background-position: left center;
} .classic-playlist-container .volume-slider::-moz-range-progress {
background: linear-gradient(90deg, #6a5acd, #00d4ff);
border-radius: 10px 0 0 10px;
height: 6px;
}
.classic-playlist-container .volume-slider::-moz-range-track {
background: #32364394;
border-radius: 10px;
height: 6px;
}
.classic-playlist-container .volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
background: #00d4ff;
border-radius: 50%;
border: none;
}
.classic-playlist-container .playlist {
width: 100%;
max-height: 376px;
overflow-y: auto;
}
.classic-playlist-container .playlist-item {
display: flex;
align-items: center;
padding: 12px 14px;
gap: 15px;
cursor: pointer;
margin: 0;
transition: all 0.3s ease;
border-bottom: 1px solid #60647076;
}
.classic-playlist-container .playlist-item:first-child {
border-top: 1px solid #60647076;
}
.classic-playlist-container .playlist-item:hover {
background: rgba(96, 100, 112, 0.25);
}
.classic-playlist-container .playlist-item.active {
background: rgba(96, 100, 112, 0.25);
}
.classic-playlist-container .playlist-item img {
width: 50px;
height: 50px;
border-radius: 8px;
object-fit: cover;
}
.classic-playlist-container .playlist-item-info {
flex: 1;
}
.classic-playlist-container .playlist-item-info h4 {
font-size: 1rem;
margin-bottom: 4px;
color: #333;
}
.classic-playlist-container .playlist-item-info p {
font-size: 0.85rem;
color: #a0a0c0;
}
.classic-playlist-container .playlist-item-right {
display: flex;
align-items: center;
gap: 12px;
}
.classic-playlist-container .playlist-item-duration {
font-size: 0.9rem;
color: #a0a0c0;
min-width: 40px;
text-align: right;
}
.classic-playlist-container .playlist-sound-wave {
display: flex;
align-items: center;
gap: 3px;
height: 20px;
}
.classic-playlist-container .playlist-item .playlist-sound-wave span {
width: 3px;
background: #00d4ff;
border-radius: 2px;
animation: soundWave 1.2s infinite ease-in-out;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(1) {
height: 6px;
animation-delay: 0s;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(2) {
height: 12px;
animation-delay: 0.1s;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(3) {
height: 16px;
animation-delay: 0.2s;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(4) {
height: 10px;
animation-delay: 0.3s;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(5) {
height: 8px;
animation-delay: 0.4s;
}
@keyframes soundWave {
0%,
100% {
transform: scaleY(0.4);
opacity: 0.6;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
.classic-playlist-container .playlist::-webkit-scrollbar {
width: 6px;
}
.classic-playlist-container .playlist::-webkit-scrollbar-thumb {
background: #6a5acd;
border-radius: 10px;
}
.classic-playlist-container .player-container {
display: flex;
justify-content: space-between;
gap: 30px;
padding-bottom: 10px;
}
.classic-playlist-container .player-container .player-thumb {
max-width: 220px;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.classic-playlist-container .player-container .player-thumb img {
width: 100%;
height: 100%;
}
.classic-playlist-container .player-container .player-meta {
width: calc(100% - 250px);
}
.classic-playlist-container .player-meta-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.classic-playlist-container .player-meta-header .volume-container {
max-width: 200px;
width: 100%;
justify-content: flex-end;
}
.classic-playlist-container .player-meta-header .track-info {
width: calc(100% - 220px);
} .classic-playlist-container .progress-tooltip {
position: absolute;
bottom: 18px;
left: 0;
background: rgba(26, 26, 46, 0.9);
color: #e0e0e0;
padding: 6px 10px;
border-radius: 8px;
font-size: 0.85rem;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
transform: translateX(-50%);
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.classic-playlist-container .progress-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: rgba(26, 26, 46, 0.9);
}
.classic-playlist-container .progress-container:hover .progress-tooltip {
opacity: 1;
}
@media (max-width: 768px) {
.classic-playlist-container .player-container .player-thumb {
max-width: 180px;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.classic-playlist-container .player-container .player-meta {
width: calc(100% - 180px);
}
.classic-playlist-container .album-art {
width: 180px;
height: 180px;
}
.classic-playlist-container .volume-container {
width: 160px;
}
.classic-playlist-container .playlist-sound-wave span {
width: 2px;
}
.classic-playlist-container .progress-container {
margin: 16px 0;
}
.classic-playlist-container .controls {
margin-top: 18px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(1) {
height: 5px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(2) {
height: 10px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(3) {
height: 14px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(4) {
height: 9px;
}
.classic-playlist-container .playlist-sound-wave span:nth-child(5) {
height: 7px;
}
}
@media(max-width: 676px) {
.classic-playlist-container .player-container .player-thumb {
max-width: 150px;
width: 100%;
}
.classic-playlist-container .player-container .player-meta {
width: calc(100% - 150px);
}
.classic-playlist-container .album-art {
width: 150px;
height: 150px;
}
.classic-playlist-container .btn {
width: 40px;
height: 40px;
}
.classic-playlist-container .btn.play-pause {
width: 40px;
height: 40px;
}
.classic-playlist-container .controls {
gap: 8px;
}
.classic-playlist-container .player-meta-header .volume-container {
max-width: 152px;
}
.classic-playlist-container .player-meta-header .track-info {
width: calc(100% - 172px);
}
.classic-playlist-container .player-container {
gap: 20px;
}
}
@media(max-width: 540px) {
.classic-playlist-container .player-container {
flex-direction: column;
gap: 10px;
padding-bottom: 30px;
}
.classic-playlist-container .player-meta-header .volume-container {
max-width: 100%;
}
.classic-playlist-container .player-container .player-meta {
width: 100%;
}
.classic-playlist-container .album-art {
width: 100%;
}
.classic-playlist-container .player-container .player-thumb {
max-width: 100%;
width: 100%;
}
.classic-playlist-container .player-meta-header {
align-items: flex-start;
}
.classic-playlist-container .player-meta-header .volume-container {
max-width: 152px;
}
.classic-playlist-container .player-meta-header .track-info {
width: calc(100% - 172px);
}
}
@media(max-width: 400px) {
.classic-playlist-container .player-meta-header .volume-container {
width: 110px;
}
.classic-playlist-container .player-meta-header .volume-container input {
width: 100%;
}
.classic-playlist-container .player-meta-header .track-info {
width: calc(100% - 120px);
}
}