DeWebNer

Playtest et d’astuces avec Razi3L, TomuGame et moi-même !

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Astuces de Stream

Un Streamkit Overlay Discord [updated]

DeWebNer DeWebNer janvier 18, 2024 1 min de lecture

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

‹ Précédent Comment faire pour ne pas capturer les fenêtres d’OBS Suivant › Comment fonctionne un algorithme ? [update fuite doc tiktok]