MAL-Character Renders in the Side + Custom Scrollbar

Easily Customizable Charcter Renders and Custom Scrollbar for MyAnimelist
目前為 2021-07-01 提交的版本，檢視最新版本。
Wrap lines
/* ==UserStyle==
@name         MAL-Character Renders in the Side + Custom Scrollbar
@version      1.3.2
@description  Easily Customizable Charcter Renders and Custom Scrollbar for MyAnimelist
@namespace    jery_js
@author       Jery

// 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  

==/UserStyle== */

@-moz-document domain("myanimelist.net") {
      /*To Change the Colors for the scrollbar, or the characters, just change the variable's values below.*/
      
:root {
	--clr1: #004dff;	/* Scrollbar thumb */
	--clr1-dim: #004dff9e;	/* Thumb color on hover */
	--clr2: #444;		/* Scrollbar background */
	
	--bg: white;    /* Background color behind the character renders */
	--char1: url(https://i.ibb.co/Yf43vM3/Rem.webp);	/* Rem */
	--char2: url(https://i.ibb.co/12ZCzrr/Ram.webp);	/* Ram */
	/* To change the characters, just replace the urls with the urls for the characters u want (recommended-1400x2200 px) */
}


/*	Side Renders	*/
body:not(.ownlist):not(.ownlist_style_theme) {
	background-color: var(--bg);
	background-image: var(--char1), var(--char2);
	background-position-x: -190px, 1045px;  /* Adjust horizontal position of (char1), (char2). 
	                                         * Lower values move the render left, and higher values move it right. */
	                                         
	background-position-y: -1px, -15px;     /* Adjust vertical position of (char1), (char2). 
	                                         * Lower values move the render up, and higher values move it down. */
	min-height: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: auto 105%;
}

/*	Border	 */
body.page-common #myanimelist {
	border: groove #2e51a2 3px;
	border-top-width: 0px;
}

	
/*	 If you Do not want the Custom Scrollbar, then just Remove the codes below (CUSTOM SCROLLBAR)	*/

/*-------------------------------*\
|        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;
}
body:not(.ownlist)::-webkit-scrollbar-thumb:vertical {
	border-width: 0px 2px;
}
body:not(.ownlist)::-webkit-scrollbar-thumb:horizontal {
	border-width: 2px 0;
}
body:not(.ownlist)::-webkit-scrollbar-thumb:hover {
	background-color: var(--clr1-dim);
}
body:not(.ownlist)::-webkit-scrollbar-track {
	width: 5px;
}

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