Centers the player in the middle of the screen with dark margins. The header is hidden, but appears when you scroll down.
Crunchyroll Dark Theater by Lumiere
Details
AuthorLumiere
LicenseNo License
Categorycrunchyroll
Created
Updated
Size2.0 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Update 1.1.0: Added graphical options to the style. Click on the Stylus extension icon, then on the cogwheel next to the style to access the options. You can change the "Screen size" to any integer number, from 0 to 100. The default is 90% of the screen height. You can also pick a different color for the margins surrounding the player.
Scroll down to the comments to see the header of the website.
Keywords: anime, crunchy, crunchyroll, theater, theatre.
Source code
/* ==UserStyle==
@name Crunchyroll Dark Theater
@namespace userstyles.world/user/Lumiere
@version 1.1.0
@description A theater mode for Crunchyroll.
@author Lumiere
@var number screenSize "Screen size" [90, 0, 100, 1]
@var color margin-color "Margin color" #191919
==/UserStyle== */
@-moz-document domain('crunchyroll.com') {
.video-player-wrapper {
/* Expand the player to fill most of the viewport */
width: 100% !important;
height: 100% !important;
/* Adjust the height as needed */
position: absolute !important;
margin: 0 !important;
/* Remove any default margin */
padding: 0 !important;
/* Remove any default padding */
top: 0 !important;
/* Center vertically */
left: 0 !important;
background-color: var(--margin-color) !important;
z-index: 100 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.video-player-wrapper iframe {
height: 100vh !important;
/* Full height of the viewport */
width: calc(100vh * 16 / 9) !important;
/* Width calculated to maintain 16:9 aspect ratio */
transform: scale(calc(var(--screenSize) / 100));
/* Scale down to 85% of its original size */
transform-origin: center;
/* Ensure the scaling is centered */
}
::-webkit-scrollbar {
width: 1px;
}
::-webkit-scrollbar-track {
background: black;
}
::-webkit-scrollbar-thumb {
border-radius: 0.5px;
background: #FFF5;
}
::-webkit-scrollbar-thumb:hover {
background: #FFF9;
}
/* Push down sections when player is expanded */
.content-wrapper--MF5LS {
margin-top: 47vh;
/* Adjusted to half the viewport height */
}
}