☰

Greasy Fork is available in English.

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