☰

MAL-Character Renders in the Side + Custom Scrollbar

Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList

  1. /* ==UserStyle==
  2. @name           MAL-Character Renders in the Side + Custom Scrollbar
  3. @version        3.0.4
  4. @description    Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList
  5. @namespace      jery_js
  6. @author         Jery
  7. @license        MIT
  8. @preprocessor   uso
  9.  
  10. // This CSS script is meant to be used using "stylus" extension. Other extensions haven't been tested yet.
  11. // My MAL Profile - https://myanimelist.net/profile/jery_js  
  12.  
  13. @var select switch-characters "Switch Characters"{
  14. 	"Rem & Ram": `
  15. 	:root {
  16. 		--char1: url(https://i.imgur.com/3CKtjS4.png);	
  17. 		--char2: url(https://i.imgur.com/gs8GGr3.png);	
  18. 		--x1: -20.2%;     --x2: 18%;
  19. 		--y1: 01%;      --y2: 35%;
  20. 		}`,
  21.  
  22. 	"Naruto & Sasuke": `
  23. 	:root {
  24. 		--char1: url(https://i.imgur.com/BpWggaF.jpg); 
  25. 		--char2: url(https://i.imgur.com/BpWggaF.jpg);
  26. 		--x1: -05%;    	--x2: 3.3%;
  27. 		--y1: 15%;      --y2: 15%;
  28. 		}`,
  29.  
  30. 	"Naruto & Sasuke V2": `
  31. 	:root {
  32. 		--char1: url(https://i.ibb.co/sVBBgQp/image.png); 
  33. 		--char2: url(https://i.ibb.co/sVBBgQp/image.png);
  34. 		--x1: -07%;    	--x2: 07%;
  35. 		--y1: 15%;      --y2: 15%;
  36. 		}`,
  37.  
  38. 	"Kaneki (Ghoul & Human)": `
  39. 	:root {
  40. 		--char1: url(https://i.imgur.com/HKDvkC3.jpg);
  41. 		--char2: url(https://i.imgur.com/HKDvkC3.jpg);
  42. 		--x1: -20%;     --x2: 20%;
  43. 		--y1: 15%;      --y2: 15%;
  44. 		}`,
  45.  
  46. 	"Hatsune Miku": `
  47. 	:root {
  48. 		--char1: url(https://i.imgur.com/Yas2UBd.jpg); 
  49. 		--char2: url(https://i.imgur.com/TNMnfLJ.jpg);
  50. 		--x1: -15%;    	--x2: 15%;
  51. 		--y1: 15%;      --y2: 15%;
  52. 		}`,
  53.  
  54. 	"Ace & Luffy (change the '--x1' value to Switch Ace with Sabo)": `
  55. 	:root {
  56. 		--char1: url(https://mocah.org/uploads/posts/208549-sabo-one-piece-4552x3108.jpg);
  57. 		--char2: url(https://mocah.org/uploads/posts/208549-sabo-one-piece-4552x3108.jpg);
  58. 		--x1: -34%; 	--x2: 153%;
  59. 		--y1:  15%;		--y2: 15%;
  60. 		}`,
  61.  
  62. 	"Loop ALl (5 secs each character)": `
  63. 	:root {
  64. 		--char1: url(https://imgur.com/YPN8qvO.gif);
  65. 		--char2: url(https://imgur.com/ES2V37D.gif);
  66. 		--x1: -7.5%; 	--x2: 3.5%;
  67. 		--y1:  5%;		--y2: 15%;
  68.     }
  69. 		}`,
  70.  
  71. 	"Custom Character": `
  72. 	:root {
  73. 		--char1: var(--cstm-1);
  74. 		--char2: var(--cstm-1);
  75. 		--x1: -10%; 	--x2: 10%;
  76. 		--y1:  15%;		--y2: 15%;
  77. 		}`
  78. }
  79.  
  80. @var select scrollbar "Custom Scrollbar"{
  81. 	"on":`
  82. 	:root {
  83. 		--clr1: #004dff;	--clr1-dim: #004dff9e;		--clr2: #444;		
  84. 		--rad: 6px;		--bwv: 0px 2px;		--bwh: 2px 0px;
  85. 		}`,
  86.  
  87. 	"off":`
  88. 	:root {
  89. 		--clr1: #cecece;	--clr1-dim: #a7a7a7; 	--clr2: #f0f0f0;
  90. 		--rad: 0px;		--bwv: 0px 0px;		--bwh: 0px 0px;
  91. 		}`
  92.  
  93. }
  94.  
  95.  
  96. ==/UserStyle== */
  97. @-moz-document domain("myanimelist.net") {
  98. 	
  99. 	/* 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. */
  100.     
  101. 	/* CUSTOM CHARACTERS - add your own characters (Optional) */	
  102. 		:root{
  103. 			--cstm-1: url(); /*	paste the link to ur 1st character inside the brackets after "url"  */
  104. 			--cstm-2: url(); /*	paste the link to ur 2nd character inside the brackets after "url"  */
  105. 							 /*	Supported formats - (.png/.jpg/.webp/.gif)	*/
  106. 		}
  107.  
  108. 	/*	Side Renders	*/ 
  109. 	body:not(.ownlist):not(.ownlist_style_theme) {
  110. 		background-color: white;
  111. 		background-image: var(--char1), var(--char2) !important;
  112. 		background-position-x: var(--x1), calc(100% + var(--x2)) !important;  
  113. 		background-position-y: var(--y1), var(--y2) !important; 
  114. 		min-height: 100% !important;
  115. 		background-repeat: no-repeat !important;
  116. 		background-attachment: fixed !important;
  117. 		background-size: auto 105% !important;
  118. 	}
  119.  
  120. 	/*	Border	 */
  121. 	body.page-common #contentWrapper {
  122. 		border: groove #2e51a2 3px !important;
  123. 		border-top-width: 0px !important;
  124. 		border-bottom-width: 0px !important;
  125. 		}
  126.  
  127.  
  128. 	/*CUSTOM SCROLLBAR*/
  129. 	/* Firefox */
  130. 	* {
  131. 		scrollbar-color: var(--clr1) var(--clr2);
  132. 	}
  133.  
  134. 	/* Chrome */
  135. 	body:not(.ownlist)::-webkit-scrollbar  {
  136. 		background: var(--clr2);
  137. 	}
  138.  
  139. 	body:not(.ownlist)::-webkit-scrollbar-button:vertical {
  140. 		background: transparent center / 10px auto no-repeat;
  141. 	}
  142. 	body:not(.ownlist)::-webkit-scrollbar-button:vertical:start {
  143. 		background-image: url(https://i.imgur.com/Cu2u9Hu.png);
  144. 	}
  145. 	body:not(.ownlist)::-webkit-scrollbar-button:vertical:end {
  146. 		background-image: url(https://i.imgur.com/0YI7VxA.png);
  147. 	}
  148. 	body:not(.ownlist)::-webkit-scrollbar-button:horizontal {
  149. 		background: transparent center / auto 10px no-repeat;
  150. 	}
  151. 	body:not(.ownlist)::-webkit-scrollbar-button:horizontal:start {
  152. 		background-image: url(https://i.imgur.com/BArw1oI.png);
  153. 	}
  154. 	body:not(.ownlist)::-webkit-scrollbar-button:horizontal:end {
  155. 		background-image: url(https://i.imgur.com/vqOtoms.png);
  156. 	}
  157. 	body:not(.ownlist)::-webkit-scrollbar-corner {
  158. 		background: var(--clr2);
  159. 	}
  160.  
  161. 	body:not(.ownlist)::-webkit-scrollbar-thumb {
  162. 		background: var(--clr1) content-box !important;
  163. 		border: 0 solid transparent;
  164. 		border-radius: var(--rad);  
  165. 	}
  166. 	body:not(.ownlist)::-webkit-scrollbar-thumb:vertical {
  167. 		border-width: var(--bwv);
  168. 	}
  169. 	body:not(.ownlist)::-webkit-scrollbar-thumb:horizontal {
  170. 		border-width: var(--bwh);
  171. 	}
  172. 	body:not(.ownlist)::-webkit-scrollbar-thumb:hover {
  173. 		background-color: var(--clr1-dim) !important;
  174. 	}
  175. 	body:not(.ownlist)::-webkit-scrollbar-track {
  176. 		width: 5px;
  177. 	}
  178. 	
  179. 	/*[[switch-characters]]*/
  180. 	/*[[scrollbar]]*/
  181. }