Un Streamkit Overlay Discord [updated]

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

Discord-Stream-Kit-Overlay

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

error

Vous avez aimé cet article ? Partagez-le

Mentions de Cookies WordPress par Real Cookie Banner