Twitch Clean Theater Mode by icedcaffelatte

/* ==UserStyle==
@name         TwitchCleanTheaterMode
@version      20240526.11.33
@namespace    https://userstyles.world/user/icedcaffelatte
@description  You can see the Twitch theater mode on a wider screen.트위치 극장모드를 더 넓은 화면으로 볼 수 있습니다.
@author       icedcaffelatte
@license      No License
==/UserStyle== */

@-moz-document domain("twitch.tv") {
.tw-root--theme-dark {
    --color-text-base: #FFFFFF;
    --color-text-alt: #FFFFFF;
}
.font-scale--small {
    --font-size-text: 1.5rem;
    --font-size-id: 1.3rem;
    --margin-emote: -0.19rem;
    line-height: 1.3;
}
.font-scale--default {
    --font-size-text: 1.9rem;
    --font-size-id: 1.5rem;
    --margin-emote: -0.24rem;
    line-height: 1.3;
}
.font-scale--bigger {
    --font-size-text: 2.2rem;
    --font-size-id: 1.7rem;
    --margin-emote: -0.28rem;
    line-height: 1.3;
}
.font-scale--biggest {
    --font-size-text: 2.4rem;
    --font-size-id: 1.9rem;
    --margin-emote: -0.30rem;
    line-height: 1.3;
}

/*--새 메시지 도착 애니메이션--*/
@keyframes newMessage {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        will-change: transform;
        opacity: 1;
        transform: translateX(0px);
    }
}
.chat-line__message:not(.special-message),
.vod-message:not(.special-message),
.user-notice-line:not(.special-message) {
    color: inherit;
    position: relative;
    box-sizing: border-box;
    opacity: 1;
    animation: newMessage 200ms forwards;
}
/*--채팅창 투명화 (right-column--theatre: <= 극장 모드)--*/
.tw-root--theme-dark .channel-root__right-column {
    background: transparent;
}
/*채팅창 배경*/
.right-column--theatre .chat-room {
    background: transparent!important;
}
.right-column--theatre.right-column--beside .channel-root__right-column > div {
    background-color: transparent!important;
    border-left: 1px solid transparent!important;
}
/*의도는 채팅 기간 지난 클립 채팅창 투명하게 바꾸는 용도*/
.right-column--theatre .video-chat__message-list-wrapper > div > div {
    background-color: transparent!important;
}
/*채팅방 배경있는 채팅 불투명하게*/
.user-notice-line {
    background-color: transparent!important;
}
/*플레이어 전체로 확장*/
.persistent-player.persistent-player--theatre {
    width: 100%!important;
}
/*방송, 광고 영상 왼쪽 정렬과 풀스크린(video and ad video left align & full screen)*/
div.video-player div.video-player__container--theatre video {
    max-height: 100%!important;
    max-width: 100%;
    width: auto!important;
    height: 100%!important;
    position: absolute;
}
/*광고 남은 시간(ad countdown)*/
.video-player__container--theatre div[data-a-target="video-ad-countdown"] {
    margin-right: 360px!important;
}
/*--극장 모드에서 플레이어 내부 우측 여백 생기게 하기--*/
@media screen and (min-width: 920px) {
    .video-player__container--theatre div[data-a-target="player-controls"],
    .video-player__container--theatre .top-bar {
        padding-right: 340px!important;
    }
    .video-player__container--theatre .player-overlay-background--sidebar {
        width: calc(320px + 340px);
        padding-right: 340px!important;
    }
    .video-player__container--theatre .player-overlay-background {
        padding-right: 360px!important;
        width: auto!important;
    }
    .video-player__container--theatre .other-vods__container {
        margin-right: 360px!important;
    }
    /*플레이어 내의 설정 팝업*/
    .video-player__container--theatre .tw-dialog-layer > div[style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px;"] {
        top: auto!important;
        left: auto!important;
    }
    .video-player__container--theatre .tw-dialog-layer div[data-popper-placement="top-start"] {
        transform: translate(calc(100vw - 720px), -45px)!important;
    }
}
/*--채팅창 관련 숨기기--*/
/*로그인 아이디*/
.chat-author__intl-login,
/*VOD에서 나의 로그인 아이디*/
.chat-author__intl-login--highlighted {
    display: none;
}
/*접힌 상태의 리더보드 안보이게*/
.channel-leaderboard-header-rotating__users,
.channel-leaderboard [data-test-selector="rotate-arrow-reverse"],
.channel-leaderboard-marquee [data-test-selector="rotate-arrow-reverse"],
.channel-leaderboard [data-test-selector="rotate-arrow-forward"],
.channel-leaderboard-marquee [data-test-selector="rotate-arrow-forward"],
.right-column--theatre [data-test-selector="channel-leaderboard-container"],
/*VOD 채팅방 상단*/
.right-column--theatre .video-chat__header,
/*극장모드시 리더보드 안보이게*/
.right-column--theatre .channel-leaderboard,
.right-column--theatre .channel-leaderboard-marquee {
    display: none!important;
}
/*채널 리더보드 높이*/
.channel-leaderboard,
.channel-leaderboard-header-rotating {
    height: auto;
}
/*LIVE 채팅방 타임스탬프*/
span.chat-line__timestamp {
    font-size: var(--font-size-id);
    margin-right: 1.2rem;
}
/*--채팅 내용 내부--*/
.right-column--theatre .chat-scrollable-area__message-container,
.right-column--theatre .video-chat__message-list-wrapper,
.right-column--theatre .chat-input-tray__open {
    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;
}
.right-column--theatre.right-column--beside .chat-line__message,
.right-column--theatre.right-column--beside .chat-line__status,
.right-column--theatre.right-column--beside .vod-message {
    text-align: right;
}
.chat-line__message,
.chat-line__status {
    font-size: var(--font-size-text);
}
.vod-message {
    font-size: 19px;
    line-height: 1.3;
}
/*--채팅 강조하기--*/
.chat-line__message-body--highlighted {
    border: 0px;
}
/*벳지 여백*/
.chat-badge {
    margin-bottom: 0rem;
}
/*채팅 내용*/
.text-fragment {
    font-weight: 550;
    display: inline;
}
/*채팅 간격*/
.chat-line__message,
.chat-line__moderation,
.chat-line__status {
    padding: .2rem 1.7rem;
}
.vod-message {
    padding: .2rem 1.7rem!important;
}
/*닉네임*/
.chat-author__display-name,
.chat-author__intl-login {
    font-size: var(--font-size-id);
}
.video-chat__message-author {
    font-size: 15px;
}
/*ID와 채팅 사이 줄 바꾸기*/
.chat-line__message-container > div > div > span[aria-hidden="true"]:after,
.video-chat__message-author::after,
.chat-line__no-background > span[data-test-selector="chat-message-separator"]::after {
    white-space: pre;
    font-size: 0px;
    content: "\A";
}
/*":" 지우기*/
.video-chat__message > :first-child {
    display: none;
}
.vod-message--user-notice .video-chat__message > :first-child {
    display: inline;
    /* 구독메시지 예외*/
}
.chat-line__message-container > div > div > span[aria-hidden="true"],
.chat-line__no-background > span[data-test-selector="chat-message-separator"] {
    font-size: 0px;
}
/*누가 나 부름*/
.right-column--theatre .mention-fragment--recipient {
    text-shadow: none;
}
/*vod 타임 스탬프*/
.vod-message__header {
    height: 0px!important;
    text-align: right;
    display: block!important;
}
.vod-message--timestamp {
    display: block !important
}
.vod-message {
    display: block!important;
}
.right-column--theatre.right-column--beside .vod-message__header,
.video-chat__message-menu {
    display: none!important;
}
/*----툴팁 관련----*/
.tw-tooltip {
    text-shadow: none;
    color: var(--color-text-tooltip);
}
/*VOD 타임 스탬프 툴팁*/
.vod-message__header > div > div > .tw-tooltip {
    left: 0;
    transform: translateX(calc(-61%));
}
.vod-message__header > div > div > .tw-tooltip::after {
    left: calc(80%);
}
/*생방송 채팅창 상단*/
.right-column--theatre .stream-chat-header {
    height: 30px !important;
    background-color: transparent!important;
}
/*채팅창 보이기 토글 버튼*/
.right-column--theatre .right-column__toggle-visibility {
    top: 0rem;
}
/*--채팅창 입력 칸--*/
div[data-test-selector="chat-private-callout-queue__callout-container"] {
    margin: 0!important;
}
.chat-input .tw-textarea,
.chat-wysiwyg-input__editor {
    background-color: rgba(128, 128, 128, 0.2);
    font-size: 14px !important;
}
.chat-input__textarea > div > div {
    background-color: transparent!important;
}
.chat-wysiwyg-input__editor:focus-within {
    background-color: var(--color-background-input-focus);
}
.tw-root--theme-dark .chat-wysiwyg-input__editor:focus-within {
    background-color: rgba(0, 0, 0, 0.5);
}
/*LIVE 이모티콘 간격*/
.chat-line__message--emote,
.chat-line__message--emote-button {
    margin: 0 var(--margin-emote) 0 var(--margin-emote);
}
/*vod 이모티콘*/
.video-chat .chat-image__container {
    margin: -0.3rem -0.24rem 0.3rem -0.24rem;
}
/*잘 안보이는 트위치 기본 닉네임 컬러 수정*/
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(255, 0, 0);'] {
    color: #ff5f5f!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(0, 0, 255);'] {
    color: #8181ff!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(0, 128, 0);'] {
    color: #81b081!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(178, 34, 34);'] {
    color: #d68484!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(255, 127, 80);'] {
    color: #ffb094!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(154, 205, 50);'] {
    color: #c3ec88!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(255, 69, 0);'] {
    color: #ff9e91!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(46, 139, 87);'] {
    color: #87b898!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(218, 165, 32);'] {
    color: #f7cc84!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(210, 105, 30);'] {
    color: #f0a284!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(95, 158, 160);'] {
    color: #9cc6c8!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(30, 144, 255);'] {
    color: #84bcff!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(255, 105, 180);'] {
    color: #ffa2d7!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(138, 43, 226);'] {
    color: #b787fe!important;
}
.tw-root--theme-dark .chat-author__display-name[style='color: rgb(0, 255, 127);'] {
    color: #81ffb0!im...