Simple YouTube Music overlay for OBS

Free Simple YouTube Music overlay for OBS 2.2.0

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>
not.okidd
not.okidd
I love it! This year I will work a little more on this tool and add your design if you allow me.
This is so well made and simple to use and install. Thank your so much for that!
not.okidd
not.okidd
Thank you for giving my work a chance <3
Top