Skip to content

Twitch Clean Theater Mode by icedcaffelatte

Screenshot of Twitch Clean Theater Mode

Details

Authoricedcaffelatte

LicenseNo License

Categoryuserstyles

Created

Updated

Size12 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

!!! No More Update !!!
You can see the Twitch theater mode on a wider screen.
트위치 극장모드를 더 넓은 화면으로 볼 수 있습니다.

Notes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==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...

Reviews

No reviews yet.