MAL-Character Renders in the Side + Custom Scrollbar

Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList

当前为 2021-12-01 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name MAL-Character Renders in the Side + Custom Scrollbar
  3. @version 3.0.3
  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. /* CUSTOM CHARACTERS - add your own characters (Optional) */
  101. :root{
  102. --cstm-1: url(); /* paste the link to ur 1st character inside the brackets after "url" */
  103. --cstm-2: url(); /* paste the link to ur 2nd character inside the brackets after "url" */
  104. /* Supported formats - (.png/.jpg/.webp/.gif) */
  105. }
  106. /* Side Renders */
  107. body:not(.ownlist):not(.ownlist_style_theme) {
  108. background-color: white;
  109. background-image: var(--char1), var(--char2) !important;
  110. background-position-x: var(--x1), calc(100% + var(--x2)) !important;
  111. background-position-y: var(--y1), var(--y2) !important;
  112. min-height: 100% !important;
  113. background-repeat: no-repeat !important;
  114. background-attachment: fixed !important;
  115. background-size: auto 105% !important;
  116. }
  117. /*[[switch-characters]]*/
  118. /* Border */
  119. body.page-common #contentWrapper {
  120. border: groove #2e51a2 3px !important;
  121. border-top-width: 0px !important;
  122. border-bottom-width: 0px !important;
  123. }
  124.  
  125. /*CUSTOM SCROLLBAR*/
  126. /* Firefox */
  127. * {
  128. scrollbar-color: var(--clr1) var(--clr2);
  129. }
  130.  
  131. /* Chrome */
  132. body:not(.ownlist)::-webkit-scrollbar {
  133. background: var(--clr2);
  134. }
  135.  
  136. body:not(.ownlist)::-webkit-scrollbar-button:vertical {
  137. background: transparent center / 10px auto no-repeat;
  138. }
  139. body:not(.ownlist)::-webkit-scrollbar-button:vertical:start {
  140. background-image: url(https://i.imgur.com/Cu2u9Hu.png);
  141. }
  142. body:not(.ownlist)::-webkit-scrollbar-button:vertical:end {
  143. background-image: url(https://i.imgur.com/0YI7VxA.png);
  144. }
  145. body:not(.ownlist)::-webkit-scrollbar-button:horizontal {
  146. background: transparent center / auto 10px no-repeat;
  147. }
  148. body:not(.ownlist)::-webkit-scrollbar-button:horizontal:start {
  149. background-image: url(https://i.imgur.com/BArw1oI.png);
  150. }
  151. body:not(.ownlist)::-webkit-scrollbar-button:horizontal:end {
  152. background-image: url(https://i.imgur.com/vqOtoms.png);
  153. }
  154. body:not(.ownlist)::-webkit-scrollbar-corner {
  155. background: var(--clr2);
  156. }
  157.  
  158. body:not(.ownlist)::-webkit-scrollbar-thumb {
  159. background: var(--clr1) content-box !important;
  160. border: 0 solid transparent;
  161. border-radius: var(--rad);
  162. }
  163. body:not(.ownlist)::-webkit-scrollbar-thumb:vertical {
  164. border-width: var(--bwv);
  165. }
  166. body:not(.ownlist)::-webkit-scrollbar-thumb:horizontal {
  167. border-width: var(--bwh);
  168. }
  169. body:not(.ownlist)::-webkit-scrollbar-thumb:hover {
  170. background-color: var(--clr1-dim) !important;
  171. }
  172. body:not(.ownlist)::-webkit-scrollbar-track {
  173. width: 5px;
  174. }
  175. /*[[scrollbar]]*/
  176. }
  177.