YouTube Simple Cinema Mode

While video is playing the page will turn dark automatically, giving focus to the video.
換行
/* ==UserStyle==
@name YouTube Simple Cinema Mode
@namespace q1k
@type less
@description While video is playing the page will turn dark automatically, giving focus to the video.
@version 1.0.1
@advanced text opacity "Overlay opacity [0 - 1]" "0.85"
==/UserStyle== */

@-moz-document domain("youtube.com") {
  #movie_player.playing-mode, #movie_player, #movie_player.playing-mode > *, #movie_player > *, #movie_player.seeking-mode {
    z-index: 2000000000 !important; /*2147483646*/
  }
  #player .player-api {
    z-index: auto !important;
  }
  .ytp-contextmenu,
  .yt-uix-clickcard-card,
  #appbar-guide-menu,
  #movie_player > .ytp-tooltip,
  #yt-uix-videoactionmenu-menu,
  paper-dialog.ytd-popup-container[role="dialog"]
  {
    z-index: 2147483647 !important;
  }
  #movie_player:before {
    content: "";
    position: fixed !important;
    top: 0;
    left: 0;
    width: 110vw;
    height: 110vh;
    background: rgba(0, 0, 0, /*[[opacity]]*/);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    z-index: 1999999999; /*2147483645*/
  }
  #movie_player.playing-mode:before,
  #movie_player.seeking-mode:before {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
  }
  
  /*fix*/
  #movie_player {
    contain: none;
  }
  #movie_player {
    overflow: unset;
  }
  #movie_player.ended-mode .html5-video-container {
    visibility: hidden;
  }
  #player ~ #content,
  .ytp-iv-video-content {
    pointer-events: none;
  }
  #player ~ #content > *,
  .ytp-iv-video-content > * {
    pointer-events: auto;
  }
  
}