MAL-Character Renders in the Side + Custom Scrollbar

Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList

Εγκατάσταση ως στυλ χρήστηΒοήθεια
Κώδικας προτεινόμενος από τον δημιιουργό

Μπορεί, επίσης, να σας αρέσει ο κώδικας MAL Public Score in MangaList.

Εγκατάσταση αυτού του κώδικα

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey, το Greasemonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Userscripts για να εγκαταστήσετε αυτόν τον κώδικα.

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

Θα χρειαστεί να εγκαταστήσετε μια επέκταση διαχείρισης κώδικα χρήστη για να εγκαταστήσετε αυτόν τον κώδικα.

(Έχω ήδη έναν διαχειριστή κώδικα χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

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.

(Έχω ήδη έναν διαχειριστή στυλ χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

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