streamkit.discord.com/overlay 용 음성에 반응하는 이미지 CSS

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

/* streamkit.discord.com/overlay 용 음성에 반응하는 이미지 CSS */
/* Voice Widget 탭으로 이동한 후, 서버와 음성 채널을 지정한 다음 URL을 복사하세요. */
/* 수정한 이 : Crete Park */
/*  원본 CSS : https://retroheart.net/blog/2022/04/adding-discord-voice-reactive-images-to-obs/ */

:root {
    
    /* 애니메이션 바운스 동작의 최대 높이 */
    --bounce-height: 20px;
    
    /* 해당 상태에 맞는 이미지 URL을 설정하세요. (예: url("https://...");) */
    /* 말 안할 때 */ --silence: url("이미지 호스트 서비스 (imgur와 같은 사이트) URL 사용");
    /*    말할 때 */ --talking: url("이미지 호스트 서비스 (imgur와 같은 사이트) URL 사용");
}

/* 설정하고자 하는 디스코드 UID를 설정해 주세요. (<Discord UID> 부분을 아이디로 바꾸기) */
/* 자세히 알아보기 : https://support.discord.com/hc/ko/articles/206346498-Where-can-I-find-my-User-Server-Message-ID- */
img.Voice_avatar__htiqH:not([src*="<Discord UID>"]) { display: none; }

/* 추가 시각 옵션 */
/* 자세히 알아보기 : https://developer.mozilla.org/ko-KR/docs/Learn/Getting_started_with_the_web/CSS_basics */

/* 대화를 하지 않을 때의 추가 스타일을 설정합니다. */
/* 기본 스타일은 더 어둡게 설정합니다.             */
img.Voice_avatar__htiqH {
    
    filter: brightness(50%);
}

/* 말할 때 추가 스타일을 설정합니다.             */
/* 기본 스타일은 더 이상 어둡지 않게 설정합니다. */
img.Voice_avatarSpeaking__lE\+4m {
    
    filter: brightness(100%);
}

/* 아래는 내부 동작 CSS 입니다, 무엇을 하고 있는지 모른다면 건드리지 마세요. */

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;
}