Un Streamkit Overlay Discord [updated]

Besoin d’un Overlay stylé qui anime votre stream ? Un streamkit est disponible.

Que ce soit pour afficher une source qui met en avant votre serveur discord ou un overlay qui affiche les messages envoyés sur un channel de votre serveur discord sur votre overlay comme un t’chat plus communautaire…

C’est possible avec ce stream kit disponible sur ce site.

https://streamkit.discord.com/overlay

body {
    --width: 100;

    --widthPX: calc(var(--width) * 1px);
    --height: calc(var(--widthPX) * 1.25);
    --nameHeight: calc(var(--height) - var(--widthPX));
    --fontSize: calc((var(--widthPX) / 100) * 15);

    width: 100%;
    overflow: hidden;
}

ul {
    margin-block-start: 0;
    margin-block-end: 0;
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    left: 50%;
}

.voice-container .voice-states .voice-state .avatar.speaking {
    opacity: 1;
    filter: grayscale(0%);
    outline: calc(var(--widthPX) / 20) solid #43b581;
    outline-offset: calc(var(--widthPX) / 20 * -1);

}

.voice-container .voice-states {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.voice-container .voice-states .voice-state {
    width: var(--widthPX);
    height: var(--height);
    margin: 0px 5px;
    background-color: black;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.8);
    position: relative;
    text-align: center;
}

.voice-container .voice-states .voice-state .avatar {
    height: var(--widthPX);
    width: 100%;
    border-radius: 0;
    border-width: 0;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: filter 0.15s, opacity 0.15s;
    border:0;
}

.voice-container .voice-states .voice-state .user {
    background-color: #1e2124;
    position: absolute;
    bottom: 0px;
    padding: 0px;
    height: var(--nameHeight);
    width: 100%;
}

.voice-container .voice-states .voice-state .user .name {
    font-size: var(--fontSize) !important;
    background-color: red !important;
    padding: 0px;
    margin: 0px;
    height:0;
    position: relative;
    display: inline-block;
    transform: translateY(calc(var(--nameHeight) / 2 - var(--fontSize) / 2));
}

https://pastebin.com/76Tiea9R