MAL-Character Renders in the Side + Custom Scrollbar

Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList

Instalar como estilo de usuario¿?
Script recomendado por el autor

Puede que también te guste MAL Public Score in MangaList.

Instalar este script

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

/* ==UserStyle==
@name           MAL-Character Renders in the Side + Custom Scrollbar
@version        3.0.4
@description    Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList
@namespace      jery_js
@author         Jery
@license        MIT
@preprocessor   uso

// This CSS script is meant to be used using "stylus" extension. Other extensions haven't been tested yet.
// My MAL Profile - https://myanimelist.net/profile/jery_js  

@var select switch-characters "Switch Characters"{
	"Rem & Ram": `
	:root {
		--char1: url(https://i.imgur.com/3CKtjS4.png);	
		--char2: url(https://i.imgur.com/gs8GGr3.png);	
		--x1: -20.2%;     --x2: 18%;
		--y1: 01%;      --y2: 35%;
		}`,

	"Naruto & Sasuke": `
	:root {
		--char1: url(https://i.imgur.com/BpWggaF.jpg); 
		--char2: url(https://i.imgur.com/BpWggaF.jpg);
		--x1: -05%;    	--x2: 3.3%;
		--y1: 15%;      --y2: 15%;
		}`,

	"Naruto & Sasuke V2": `
	:root {
		--char1: url(https://i.ibb.co/sVBBgQp/image.png); 
		--char2: url(https://i.ibb.co/sVBBgQp/image.png);
		--x1: -07%;    	--x2: 07%;
		--y1: 15%;      --y2: 15%;
		}`,

	"Kaneki (Ghoul & Human)": `
	:root {
		--char1: url(https://i.imgur.com/HKDvkC3.jpg);
		--char2: url(https://i.imgur.com/HKDvkC3.jpg);
		--x1: -20%;     --x2: 20%;
		--y1: 15%;      --y2: 15%;
		}`,

	"Hatsune Miku": `
	:root {
		--char1: url(https://i.imgur.com/Yas2UBd.jpg); 
		--char2: url(https://i.imgur.com/TNMnfLJ.jpg);
		--x1: -15%;    	--x2: 15%;
		--y1: 15%;      --y2: 15%;
		}`,

	"Ace & Luffy (change the '--x1' value to Switch Ace with Sabo)": `
	:root {
		--char1: url(https://mocah.org/uploads/posts/208549-sabo-one-piece-4552x3108.jpg);
		--char2: url(https://mocah.org/uploads/posts/208549-sabo-one-piece-4552x3108.jpg);
		--x1: -34%; 	--x2: 153%;
		--y1:  15%;		--y2: 15%;
		}`,

	"Loop ALl (5 secs each character)": `
	:root {
		--char1: url(https://imgur.com/YPN8qvO.gif);
		--char2: url(https://imgur.com/ES2V37D.gif);
		--x1: -7.5%; 	--x2: 3.5%;
		--y1:  5%;		--y2: 15%;
    }
		}`,

	"Custom Character": `
	:root {
		--char1: var(--cstm-1);
		--char2: var(--cstm-1);
		--x1: -10%; 	--x2: 10%;
		--y1:  15%;		--y2: 15%;
		}`
}

@var select scrollbar "Custom Scrollbar"{
	"on":`
	:root {
		--clr1: #004dff;	--clr1-dim: #004dff9e;		--clr2: #444;		
		--rad: 6px;		--bwv: 0px 2px;		--bwh: 2px 0px;
		}`,

	"off":`
	:root {
		--clr1: #cecece;	--clr1-dim: #a7a7a7; 	--clr2: #f0f0f0;
		--rad: 0px;		--bwv: 0px 0px;		--bwh: 0px 0px;
		}`

}


==/UserStyle== */
@-moz-document domain("myanimelist.net") {
	
	/* README : IN CASE U DIDN'T NOTICE, THERE SHOULD BE A SETTINGS ICON NEXT TO THIS SCRIPT ON UR "STYLLUS" POPUP. TRY CLICKING IT TO SEE SMTH INTERESTING. */
    
	/* CUSTOM CHARACTERS - add your own characters (Optional) */	
		:root{
			--cstm-1: url(); /*	paste the link to ur 1st character inside the brackets after "url"  */
			--cstm-2: url(); /*	paste the link to ur 2nd character inside the brackets after "url"  */
							 /*	Supported formats - (.png/.jpg/.webp/.gif)	*/
		}

	/*	Side Renders	*/ 
	body:not(.ownlist):not(.ownlist_style_theme) {
		background-color: white;
		background-image: var(--char1), var(--char2) !important;
		background-position-x: var(--x1), calc(100% + var(--x2)) !important;  
		background-position-y: var(--y1), var(--y2) !important; 
		min-height: 100% !important;
		background-repeat: no-repeat !important;
		background-attachment: fixed !important;
		background-size: auto 105% !important;
	}

	/*	Border	 */
	body.page-common #contentWrapper {
		border: groove #2e51a2 3px !important;
		border-top-width: 0px !important;
		border-bottom-width: 0px !important;
		}


	/*CUSTOM SCROLLBAR*/
	/* Firefox */
	* {
		scrollbar-color: var(--clr1) var(--clr2);
	}

	/* Chrome */
	body:not(.ownlist)::-webkit-scrollbar  {
		background: var(--clr2);
	}

	body:not(.ownlist)::-webkit-scrollbar-button:vertical {
		background: transparent center / 10px auto no-repeat;
	}
	body:not(.ownlist)::-webkit-scrollbar-button:vertical:start {
		background-image: url(https://i.imgur.com/Cu2u9Hu.png);
	}
	body:not(.ownlist)::-webkit-scrollbar-button:vertical:end {
		background-image: url(https://i.imgur.com/0YI7VxA.png);
	}
	body:not(.ownlist)::-webkit-scrollbar-button:horizontal {
		background: transparent center / auto 10px no-repeat;
	}
	body:not(.ownlist)::-webkit-scrollbar-button:horizontal:start {
		background-image: url(https://i.imgur.com/BArw1oI.png);
	}
	body:not(.ownlist)::-webkit-scrollbar-button:horizontal:end {
		background-image: url(https://i.imgur.com/vqOtoms.png);
	}
	body:not(.ownlist)::-webkit-scrollbar-corner {
		background: var(--clr2);
	}

	body:not(.ownlist)::-webkit-scrollbar-thumb {
		background: var(--clr1) content-box !important;
		border: 0 solid transparent;
		border-radius: var(--rad);  
	}
	body:not(.ownlist)::-webkit-scrollbar-thumb:vertical {
		border-width: var(--bwv);
	}
	body:not(.ownlist)::-webkit-scrollbar-thumb:horizontal {
		border-width: var(--bwh);
	}
	body:not(.ownlist)::-webkit-scrollbar-thumb:hover {
		background-color: var(--clr1-dim) !important;
	}
	body:not(.ownlist)::-webkit-scrollbar-track {
		width: 5px;
	}
	
	/*[[switch-characters]]*/
	/*[[scrollbar]]*/
}