YouTube Real Cinema Mode (Tested 2023-09-22) by Orangestar12

/* ==UserStyle==
@name         YouTube Real Cinema Mode
@namespace    orangestar
@author       HorsyNox, Orangestar
@description  This is a cannibalized version of HorsyNox's original "YouTube Real Cinema Mode" to work once again on YouTube after its most recent updates.<br><strong>Original description:</strong><br>Don't like these small videos on YouTube pages? Me too. So one day I decided to change that and created this userstyle.  <br><strong>This style expands video to fill all free space inside browser window. Like a fullscreen YouTube but not fullscreen. You'll like it!</strong>  <br>Scroll YouTube page down to see comments and other stuff.  Move cursor to top and the top bar with search will appear.
@version      2023.09.22
@license      CC0-1.0
==/UserStyle== */
@-moz-document domain(youtube.com) {

ytd-app:not([guide-persistent-and-visible]) ytd-page-manager {
  margin-top: 0!important;
}

ytd-app:not([guide-persistent-and-visible]) #player-theater-container:empty~#columns #primary,
ytd-app:not([guide-persistent-and-visible]) #player-theater-container:empty~#columns #secondary{
    padding-top: 56px;
}

ytd-app:not([guide-persistent-and-visible]) ytd-masthead,
ytd-app:not([guide-persistent-and-visible]) #masthead-container.ytd-app::after {
  transform: translateY(-56px);
  transition: transform .1s .5s ease-out;
}
ytd-app:not([guide-persistent-and-visible]) #masthead-container:hover ytd-masthead,
ytd-app:not([guide-persistent-and-visible]) #masthead-container:hover.ytd-app::after {
  transform: translateY(0px);
}

ytd-app:not([guide-persistent-and-visible]) [theater] #player.ytd-watch {
  height: 100vh!important;
  max-height: 100vh!important;
}

ytd-app:not([guide-persistent-and-visible]) .ytp-chrome-top.ytp-share-button-visible,
ytd-app:not([guide-persistent-and-visible]) #iv-drawer .iv-drawer-header,
ytd-app:not([guide-persistent-and-visible]) #iv-drawer .iv-drawer-content {
  margin-top: 30px;
}

ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-chrome-top.ytp-share-button-visible,
ytd-app:not([guide-persistent-and-visible]) [theater] #iv-drawer .iv-drawer-header,
ytd-app:not([guide-persistent-and-visible]) [theater] #iv-drawer .iv-drawer-content,
ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-multicam-menu-header,
ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-multicam-menu-items,
ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-playlist-menu-header,
ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-playlist-menu-items,
ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-share-panel-close {
  margin-top: 56px;
}

ytd-app:not([guide-persistent-and-visible]) .ytp-tooltip.ytp-tooltip-opaque.ytp-bottom {
  right: 60px!important;
  top: 35px!important;
}

ytd-app:not([guide-persistent-and-visible]) [theater] .ytp-tooltip.ytp-tooltip-opaque.ytp-bottom {
  right: 60px!important;
  top: 60px!important;
}

    /* Quickfix June 29 */
    /* TODO: Review the code and make it properly */
    ytd-watch-flexy[theater] #player-wide-container.ytd-watch-flexy, ytd-watch-flexy[fullscreen] #player-wide-container.ytd-watch-flexy {
        height: 100vh;
        max-height: 100vh;
    }

ytd-watch-flexy[full-bleed-player] #full-bleed-container.ytd-watch-flexy {
    max-height: 100vh;
    height: 100%;
}

#full-bleed-container {
    min-height: auto !important;
}

.html5-video-container { position: static; }

.html5-video-player .video-click-tracking, .html5-video-player .video-stream {
    height: 100% !important;
    width: 100% !important;
    left: 0 !important; right: 0 !important;
    top: 0 !important; bottom: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
}

/*[[scrollbar]]*/

}