Voice reactive image css for streamkit.discord.com/overlay

discord-streamkit-overlay-voice-reactive-image-en.css

/* Voice reactive image css for streamkit.discord.com/overlay */
/* Go to voice widget tab, and specify server and voice channel then copy url. */
/* Modified by Crete Park */
/* Original CSS : https://retroheart.net/blog/2022/04/adding-discord-voice-reactive-images-to-obs/ */

:root {
    
    /* Animated bounce movement's maximum height. */
    --bounce-height: 20px;
    
    /* Please set image url that corresponding state by name. (i.e. url("https://..."); */
    --silence: url("use url from image host service or site like imgur");
    --talking: url("use url from image host service or site like imgur");
}

/* Please set Discord UID that you want to applied with. (Replace <Discord UID> part to your ID) */
/* Learn more : https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID- */
img.Voice_avatar__htiqH:not([src*="<Discord UID>"]) { display: none; }

/* Additional visual options */
/* Learn more : https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics */

/* Setup additional style when silence. */
/* Default style is make it darker.     */
img.Voice_avatar__htiqH {
    
    filter: brightness(50%);
}

/* Setup additional style when talking.         */
/* Default style is make it not darker anymore. */
img.Voice_avatarSpeaking__lE\+4m {
    
    filter: brightness(100%);
}

/* Below are internal css, DO NOT touch if you don't know what are you doing it. */

img.Voice_avatar__htiqH {

    content: var(--silence);
    height: auto !important;
    width: auto !important;
    border-radius: 0% !important;
    border: none;
    margin: 0;
    padding: 0;
}

img.Voice_avatarSpeaking__lE\+4m {

    content: var(--talking);
    border-color: rgba(0, 0, 0, 0) !important;
    position: relative;
    animation-name: speak-now;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

body {
    
    background-color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
}

@keyframes speak-now {

    0% {
        bottom: 0px;
    }

    15% {
        bottom: var(--bounce-height);
    }

    30% {
        bottom: 0px;
    }

}

li.Voice_voiceState__OCoZh {

    position: absolute;
    top: var(--bounce-height);
    left: 0;

}

div.Voice_user__8fGwX {
    position: absolute;
    left: 40%;
    bottom: 5%;
}

span.Voice_name__TALd9 {
    display: none;
}