YouTube Fullscreen Theater Mode by reezavt

/* ==UserStyle==
@name           YouTube Fullscreen Theater Mode
@namespace      github.com/reezavt
@version        1.1.4
@description    Makes YouTube's theater mode take up the whole page, with option to show live chat on the side.
@author         ReezaVT
@preprocessor   stylus
@var checkbox   show-chat           "Show Chat"                 1
@var checkbox   new-layout          "New YouTube Layout"        1
@var range      chat-size           "Chat Size"                 [330, 280, 600, 10, "px"]
@var checkbox   chat-left-side      "Left Side Chat"            0
==/UserStyle== */

@-moz-document domain("youtube.com") {
    ytd-watch-flexy[theater]:not([fullscreen]) {
        --theater-top-offset: var(--ytd-masthead-height, 56px);
    }
    
    /* Player Size */
    ytd-watch-flexy[theater]:not([fullscreen]) #player-wide-container.ytd-watch-flexy {
        height: calc(100vh - var(--theater-top-offset));
        min-height: 0;
        max-height: none;
    }
    
    /* TODO: 1 column mode
    if show-chat {
        ytd-watch-flexy[theater][is-two-columns_][should-stamp-chat]:not([fullscreen]) {
            --theater-chat-size: chat-size;
        }
    
        ytd-watch-flexy[theater][is-two-columns_][should-stamp-chat]:not([fullscreen]) #player-wide-container.ytd-watch-flexy {
            width: calc(100% - var(--theater-chat-size));
        }
        
        ytd-watch-flexy[theater][is-two-columns_][should-stamp-chat]:not([fullscreen]) #secondary.ytd-watch-flexy {
            width: unset !important;   
        }
        
        ytd-watch-flexy[theater][is-two-columns_][should-stamp-chat]:not([fullscreen]) #chat.ytd-watch-flexy.ytd-watch-flexy {
            position: absolute;
            top: calc(-1 * (100vh - 32px));
            right: 0px;
            width: var(--theater-chat-size);
        }
        
        ytd-watch-flexy[flexy][js-panel-height_][theater][is-two-columns_][should-stamp-chat]:not([fullscreen]) #chat.ytd-watch-flexy.ytd-watch-flexy {
            height: calc(100vh - var(--theater-top-offset));
            min-height: 0;
        }
        
        if chat-left-side {
            ytd-watch-flexy[theater][is-two-columns_][should-stamp-chat]:not([fullscreen]) #player-wide-container.ytd-watch-flexy {
                left: var(--theater-chat-size);
            }
            
            ytd-watch-flexy[theater][is-two-columns_][should-stamp-chat]:not([fullscreen]) #chat.ytd-watch-flexy.ytd-watch-flexy {
                right: auto;
                left: 0px;
            }
        }
    } */
}