Userstyle that makes Crunchyroll controls stay in place

crunchyroll-better-controls.user.css

/*
 * This userstyle don't works in the new Crunchyroll player and a new one can't be written
 * because the new player removes the interface elements from DOM instead of hiding those.
 */

@-moz-document url-prefix("https://static.crunchyroll.com/vilos/player.html") {
  .vjs-pause-screen.active {
    background: none!important;
  }
  .client .vjs-pause-screen {
    display: none!important;
  }
  @media all and not (display-mode: fullscreen) {
    .client .vjs-control-bar.paused.out {
      opacity: 1!important;
    }
    #player {
      background-color: #f2f2f2!important;
    }
    #player video {
      padding-bottom: 55px!important;
    }
    #miniProgressContainer {
      margin-top: -55px!important;
      opacity: 1!important;
    }
    canvas.libassjs-canvas {
      top: 0!important;
      height: calc(100vh - 55px) !important;
      object-fit: contain !important;
    }
  }
}
@-moz-document url-prefix("https://www.crunchyroll.com/") {
  #showmedia_video_box.player-container-16-9 {
    height: 415px!important; /* calc(360px + 55px) */
  }
  #showmedia_video_box_wide.wide-player-container-16-9 {
    height: 595px!important; /* calc(540px + 55px) */
  }
}