CHZZK Clean Theater Mode by icedcaffelatte

/* ==UserStyle==
@name       CHZZK Clean Theater Mode
@version    20240811.13.43
@namespace  ?
==/UserStyle== */

@-moz-document url-prefix("https://chzzk.naver.com/live") {
/*--새 메시지 도착 애니메이션--*/
@keyframes newMessage
{
    from
    {
        opacity: 0;
    }
    to
    {
        will-change: transform;
        opacity: 1;
    }
}

div[class^="live_chatting_message_container__"]
{
    opacity: 1;
    animation: newMessage 200ms;
}

/*-- 가로모드일 때 --*/
@media (orientation: landscape)
{
    /*채팅창 오른쪽에 붙게*/
    section[class*="live_is_large__"] aside[class^="live_chatting_container__"]
    {
        position: fixed;
        right: 0px;
        top: 0px;
        height: 100%;
    }

    section[class*="live_is_large__"] div[class^="live_chatting_message_container__"] button[class^="live_chatting_message_wrapper__"]
    {
        text-align: right;
    }

    /*--채팅 내용 내부--*/
    section[class*="live_is_large__"] span[class^="live_chatting_username_nickname__"],
    section[class*="live_is_large__"] div[class^="live_chatting_guide_container__"]
    {
        text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000,
        0 -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000,
        -1px -1px 1px #000, 1px -1px 1px #000, 2px 2px 2px #000;
    }

    section[class*="live_is_large__"] span[class^="live_chatting_message_text__"]
    {
        text-shadow: 2px 0 1px #000, 0 2px 1px #000, -2px 0 1px #000,
        0 -2px 1px #000, 2px 2px 1px #000, -2px 2px 1px #000,
        -2px -2px 1px #000, 2px -2px 1px #000, 3px 3px 3px #000;
        
    }

    /*플레이어 버튼들*/
    section[class*="live_is_large__"] .pzp-pc__bottom,
    section[class*="live_is_large__"] div.pzp-pc__setting-quality-pane,
    section[class*="live_is_large__"] .player_header,
    section[class*="live_is_large__"] .pzp-pc-ui-bottom-shadow
    {
        margin-right: 350px;
    }

    /*채팅입력창*/
    section[class*="live_is_large__"] div[class^="live_chatting_area__"]
    {
        background-color: transparent;
    }

    section[class*="live_is_large__"] div[class*="live_chatting_input_is_active"]
    {
        background-color: #141517cc;
    }

    section[class*="live_is_large__"] div[class^="live_chatting_input_container__"]
    {
        background-color: #2e303366;
        transition: border .1s ease-in, background-color .1s ease-in;
    }

    section[class*="live_is_large__"] video.webplayer-internal-video
    {
        max-width: 100%;
        width: auto!important;
    }
    section[class*="live_is_large__"] div[class^="live_chatting_guide_inner__"],
    section[class*="live_is_large__"] button[class^="live_chatting_scroll_button_chatting__"]
    {
        background-color: #0e0f1088
    }
}

/*채팅창 배경 및 왼쪽 테두리*/
section[class*="live_is_large__"] aside[class^="live_chatting_container__"], 
section[class*="live_is_large__"] aside[class^="live_chatting_container__"]::before
{
    background-color: transparent;
}

/*채팅창 해더*/
section[class*="live_is_large__"] h2[class^="live_chatting_header_title__"]
{
    background-color: transparent;
    border: 0px;
    z-index: 0;
}

/*채팅창 상단 고정 메시지*/
section[class*="live_is_large__"] div[class^="live_chatting_list_fixed__"]{
    background-color: transparent;
}

span[class^="live_chatting_message_text__"]
{
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: bold;
    padding: 4px;
}

span[class^="live_chatting_username_container__"]
{
    padding: 2px 0px 2px 2px!important;
}

span[class^="live_chatting_username_nickname__"]
{
    font-size: 1rem;
}

/*ID와 채팅 사이 줄 바꾸기*/
span[class^="live_chatting_username_container__"],
span[class^="live_chatting_message_text__"]
{
    display: block;
}

/* 오른쪽 정렬이 이상해져서 추가 */
button[class^="live_chatting_message_wrapper__"],
/* 세로모드 때문에 추가 */
div[class^="live_chatting_list_wrapper__"]
{
    width: 100%;
}

section[class*="live_is_large__"] div[class^="live_chatting_ranking_container__"]
{
    display: none;
}

/* 상단 고정 메시지 뒷 배경 그라디언트 */
section[class*="live_is_large__"] div[class^="live_chatting_fixed_container"]::before
{
    background: transparent;
}
}