Twitch-Style YouTube Livechat

youtube-chat.css

@-moz-document domain("www.youtube.com") {
/* Don't think [theater] is used anymore, but it is in the YT CSS */
@media (max-height: 1439px) {
    ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy,
    /*ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy,*/
    ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy .ytp-chrome-bottom {
        max-height: 1080px;
        max-width: 1920px;
    }
    
    ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy ~ #columns #chat,
    ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy ~ #columns #chat {
        height: 1080px;
        width: calc(100vw - 1920px - var(--ytd-scrollbar-width));
    }    
}

#player-theater-container video {
    left: 0!important; /* this is in a style attribute, need !imp */
}

ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy ~ #columns #chat,
ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy ~ #columns #chat {
    position: absolute;
    top: 56px; /* from #container.ytd-masthead */
    right: 0;
    
    border: 0; /* remove 1px border */
}

ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy ~ #columns #chat {
    height: 100vh;
    top: 0;
}

.ytp-ad-action-interstitial-slot {
    background-color: rgba(0, 0, 0, .69);
}
}