Youtube Theater Fix by saara-saara

/* ==UserStyle==
@name         Youtube Theater Fix
@version      20211012.15.22
@namespace    userstyles.world/user/saara-saara
@description  内輪向け フルスクリーンで詳細を表示しようとするとバグる事があります（F11で抜けてください）
@author       saara-saara
@license      No License
==/UserStyle== */

@-moz-document domain("youtube.com") {
:root{
    --movie-width: calc(min(100vw, (100vh - 56px) * (16 / 9)));
    --movie-height:  calc(min((9 / 16) * 100vw, 100vh - 56px));
}
ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy {
    position: fixed;
    z-index: 2;
    top: 56px;
    margin-left: auto !important;
    margin-right: auto !important;
    left: calc((100vw - var(--movie-width)) / 2);
    width: var(--movie-width);
    height: var(--movie-height);
    max-height: calc(100vh - 56px);
    min-height: 240px;
}
ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy{
    position: fixed;
    z-index: 2;
    top: 0px;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-height: unset;
    min-height: unset;
    max-width: unset;
    min-width: unset;
}
ytd-watch-flexy[theater] #player-theater-container ~ #columns {
    max-width: unset;
    margin-top: calc(min((9 / 16) * 100vw, 100vh - 56px));
    background: #FFFFFFCB;
    z-index: 3;
    position: relative;
    padding-left: 96px;
    padding-right: 96px;
    padding-top: 30px;
}
html[dark] ytd-watch-flexy[theater] #player-theater-container ~ #columns {
    background: linear-gradient(to bottom,
#00000000 0px,
#0000000F 7px,
#0000003B 29px,
#00000078 62px,
#000000B0 104px,
#000000C8 150px,
#000000CB calc(150px + 150vh));
}
ytd-watch-flexy[fullscreen] #player-theater-container ~ #columns {
    margin-top: 100vh;
}
#player-theater-container:empty ~ #columns {
    margin-top: 0;
    background: unset;
    padding-top: 0px;
    mix-blend-mode: normal;
}
ytd-watch-flexy[theater]{
    background-color: #000;
}
ytd-watch-flexy[theater] #player-theater-container .html5-video-player .video-click-tracking{
    position: relative;
    width: var(--movie-width) !important;
    height: var(--movie-height) !important;
    max-height: calc(100vh - 56px);
    min-height: 240px;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto;
}
ytd-watch-flexy[fullscreen] #player-theater-container .html5-video-player .video-click-tracking{
    position: relative;
    width: 100vw !important;
    height: 100vh !important;
    max-height: unset;
    min-height: unset;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto;
}
:not(.ytp-mweb-player) .html5-endscreen {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
}
}