MAL-Character Renders in the Side + Custom Scrollbar

Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList
目前為 2021-07-14 提交的版本，檢視最新版本。
Wrap lines
/* ==UserStyle==
@name           MAL-Character Renders in the Side + Custom Scrollbar
@version        3.0.0
@description    Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList
@namespace      jery_js
@author         Jery
@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%;     --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%;
		}`,

	"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);
	background-position-x: var(--x1), calc(100% + var(--x2));  
	background-position-y: var(--y1), var(--y2); 
	min-height: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: auto 105%;
}
/*[[switch-characters]]*/
	
/*	Border	 */
body.page-common #myanimelist {
	border: groove #2e51a2 3px;
	border-top-width: 0px;
	}


@-moz-document domain("myanimelist.net") {

/*   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;
	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);
}
body:not(.ownlist)::-webkit-scrollbar-track {
	width: 5px;
}

/*------------------------E-N-D-*/
/*[[scrollbar]]*/
}
}
欢迎访问Greasy Fork镜像
