crunchyroll.com -- PIP (Picture-in-Picture) mode by osirisgothra

/* ==UserStyle==
@name         crunchyroll.com -- PIP (Picture-in-Picture) mode
@version      20211104.18.12
@namespace    userstyles.world/user/osirisgothra
@description  Shows Crunchyroll video playback page with video only allowing
you to use it as pip when in a single window, like an app view for
edge. Everything except the video, and player controls are hidden.


This style will work with any compliant browser but will usually require
a manager (like stylus or stylish) to be applied to the appropriate page

@author       osirisgothra
@license      GNU GPL
==/UserStyle== */

@-moz-document domain("beta.crunchyroll.com") {
/*

crunchyroll.com -- PIP mode

Shows Crunchyroll video playback page with video only allowing
you to use it as pip when in a single window, like an app view for
edge. Everything except the video, and player controls are hidden.


This style will work with any compliant browser but will usually require
a manager (like stylus or stylish) to be applied to the appropriate page

MANUAL SETUP

the url should be set for "beta.crunchyroll.com" when setting
as a page style by other means, or, you can use it embedded
in a local pages style tag, then place an iframe in the page with crunchyroll's url in it. Load it up in any browser and it should work.

EDGE USERS

go to crunchyroll page and then from right-hand menu in edge
go to [...]->Apps->Install as App, dont forget to pin to desktop or
start menu for easy finding! Read on for how to update...

WINDOWS EDGE, CHROME, CHROMIUM FOR LINUX, ANDROID USERS

use the stylus extension and install through the search for styles 
menu while at crunchyrolls website

FIREFOX AND MOZILLA BASED BROWSERS, SAFARI (MAC/iPhone iOS USERS)
use the stylus port or stylish and look for the style on
userstyles.org zzz
*/
#content > div > div.app-body-wrapper > div > div > div.video-player-wrapper,
#content > div > div.app-body-wrapper > div > div > div.video-player-wrapper *
{
	position: fixed !important;
	top: 0px !important;
	left: 0px !important;
	height: 100% !important;
	width: 100% !important;
	padding: 0px !important;
	margin: 0px !important;
	/* paste this line:
		
	filter: blur(0.633px);
	
	if you experience artifacts on lineart (cartoon usually)
	this will help eliminate any unsafe flicker 
	and frame noise. (warning: high power pc/video card suggested
	because it gets applied every frame (~25-30 a second))
	
    */
	z-index: 9999;
}

/* removes scrollbars */
*
{
	overflow: hidden;
}
}