Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList
/* ==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]]*/
}