MAL-Character Renders in the Side + Custom Scrollbar

Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList

Nainstalovat jako uživatelský styl?
Skript doporučený autorem

Mohlo by se vám také líbit MAL Public Score in MangaList.

Nainstalovat skript

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

/* ==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]]*/
}