We are a Music Platform and we CHnage the style for our style and we would like to share this with the developer
<style id="css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow: hidden;
user-select: none;
}
body {
font-family: 'Nunito', sans-serif;
background-color: #121212;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#container {
width: 350px;
padding: 20px;
background-color: #1e1e1e;
border-radius: 16px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
animation: fade-in 0.5s ease-in-out;
text-align: center;
}
#cover {
width: 200px;
height: 200px;
border-radius: 16px;
object-fit: cover;
margin: 0 auto 15px;
transition: transform 0.3s ease;
}
#cover:hover {
transform: scale(1.05);
}
#title {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#author {
font-size: 16px;
font-weight: 400;
color: #b1b1b1;
margin-bottom: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#seekbar {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
#seekbarPosition,
#duration {
width: 20%;
text-align: center;
font-size: 12px;
color: #b3b3b3;
}
#seekbarComplete {
width: 60%;
height: 6px;
background-color: #3a3a3a;
border-radius: 3px;
margin: 0 5px;
overflow: hidden;
position: relative;
}
#seekbarPercent {
width: 0%;
height: 100%;
background-color: #ff6a6a;
transition: width 0.3s ease;
}
</style>
