MAL-Character Renders in the Side + Custom Scrollbar

Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList

Als Benutzer-Style installieren?
Vom Ersteller vorgeschlagenes Skript

Ihnen könnte auch MAL Public Score in MangaList gefallen.

Skript installieren

Du musst eine Erweiterung wie Tampermonkey, Greasemonkey oder Violentmonkey installieren, um dieses Skript zu installieren.

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

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

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

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

Sie müssten eine Skript Manager Erweiterung installieren damit sie dieses Skript installieren können

(Ich habe schon ein Skript Manager, Lass mich es installieren!)

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.

(I already have a user style manager, let me install it!)

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