Simple YouTube Real Cinema 2023 by random_fixme_dude

/* ==UserStyle==
@name         Simple_Youtube_Cinema_2023
@version      20230818.22.41
@namespace    ?
==/UserStyle== */

@-moz-document domain("youtube.com") {
/* Disclaimer - I do not plan to maintain this. It was simply created beacuse I couldn't find any working Real Cinema styles*/

/* theater use full space */
#page-manager > ytd-watch-flexy[theater] #player-full-bleed-container {
    width: 100vw !important;
    height: 100vh !important;
    background-color: black; /* fix alpha videos*/
}
    
/* move content to up by header height (56px) */
#page-manager > ytd-watch-flexy[theater]{
    position: absolute;
    top: 0px !important;
}
/* hide header by default (only in theater mode) */
#masthead-container > ytd-masthead[theater][is-watch-page] {
    opacity: 0;
    background-color: var(--yt-spec-base-background); /* reuse existing background */
    transition: opacity 0.2s
}
/* show header on hover (only in  theater mode) */
#masthead-container > ytd-masthead[theater]:hover {
    opacity: 0.95;
    transition: opacity 0.2s
}

/* fix spacing for title/comments and related videos*/
#page-manager > ytd-watch-flexy[theater] #columns{
    top: calc(100vh + 30px);
    position: absolute;
    width: 100vw;
}
    #panels-full-bleed-container {
        display:none;
    }
}

/* sticky expandable chapters (whole page)*/
ytd-engagement-panel-section-list-renderer.style-scope.ytd-watch-flexy {
  position: fixed;
  top: calc(100vh - 120px);
  right: 1vw;
  z-index: 301;
  background-color: #222 !important;
  opacity: 0.2;
  max-height: 60px !important;
  transition: all 0.3s;
  border-color: white;
}

ytd-engagement-panel-section-list-renderer.style-scope.ytd-watch-flexy:hover {
    opacity:1;
    max-height: 460px !important; /* same as the original */
    top: calc(100vh - 520px);
    height: 460px !important; /* to avoid expansion glitch or 1 - 3 moments */
}