Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList
Per
/* ==UserStyle==
@name MAL-Character Renders in the Side + Custom Scrollbar
@version 1.4.0
@description Easily Customizable Character 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-clr: white; /* Background color behind the character renders */
--char1: url(https://i.imgur.com/3CKtjS4.png); /* Rem */
--char2: url(https://i.imgur.com/gs8GGr3.png); /* 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-clr);
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;
border-radius: 6px; /* Set the value to 0 if u dont want ur scroll thumb's corners to be rounded */
}
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: 1px;
}
/*------------------------E-N-D-*/
}