MAL-Character Renders in the Side + Custom Scrollbar

Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList

当前为 2021-07-13 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name MAL-Character Renders in the Side + Custom Scrollbar
  3. @version 2.0.0
  4. @description Easily Customizable Character Renders and Custom Scrollbar for MyAnimeList
  5. @namespace jery_js
  6. @author Jery
  7. @preprocessor uso
  8.  
  9. // This CSS script is meant to be used using "stylus" extension. Other extensions haven't been tested yet.
  10. // My MAL Profile - https://myanimelist.net/profile/jery_js
  11.  
  12. @var select switch-characters "Switch Characters."{
  13. "Rem & Ram": `
  14. :root {
  15. --char1: url(https://i.imgur.com/3CKtjS4.png);
  16. --char2: url(https://i.imgur.com/gs8GGr3.png);
  17. --x1: -180px; --y1: -1px;
  18. --x2: 1045px; --y2: -15px;
  19. }`,
  20.  
  21. "Naruto & Sasuke": `
  22. :root {
  23. --char1: url(https://i.imgur.com/BpWggaF.jpg);
  24. --char2: url(https://i.imgur.com/BpWggaF.jpg);
  25. --x1: -50px; --y1: -15px;
  26. --x2: 970px; --y2: -15px;
  27. }`,
  28.  
  29. "Custom Character": `
  30. :root {
  31. --char1: var(--cstm-1);
  32. --char2: var(--cstm-1);
  33. --x1: -50px; --y1: -15px;
  34. --x2: 970px; --y2: -15px;
  35. }`
  36. }
  37.  
  38. @var select scrollbar "Custom Scrollbar."{
  39. "on":`
  40. :root {
  41. --clr1: #004dff;
  42. --clr1-dim: #004dff9e;
  43. --clr2: #444;
  44. --rad: 6px;
  45. --bwv: 0px 2px;
  46. --bwh: 2px 0px;
  47. }`,
  48.  
  49. "off":`
  50. :root {
  51. --clr1: #cecece;
  52. --clr1-dim: #a7a7a7;
  53. --clr2: #f0f0f0;
  54. --rad: 0px;
  55. --bwv: 0px 0px;
  56. --bwh: 0px 0px;
  57. }`
  58. }
  59.  
  60. ==/UserStyle== */
  61.  
  62. @-moz-document domain("myanimelist.net") {
  63.  
  64. /* CUSTOM CHARACTERS - add your own characters (Optional) */
  65. :root{
  66. --cstm-1: url(); /* paste the link to ur 1st character inside the brackets after "url" */
  67. --cstm-2: url(); /* paste the link to ur 2nd character inside the brackets after "url" */
  68. /* Supported formats - (.png/.jpg/.webp/.gif) */
  69. }
  70. /* Side Renders */
  71. body:not(.ownlist):not(.ownlist_style_theme) {
  72. background-color: white;
  73. background-image: var(--char1), var(--char2);
  74. background-position-x: var(--x1), var(--x2);
  75. background-position-y: var(--y1), var(--y2);
  76. min-height: 100%;
  77. background-repeat: no-repeat;
  78. background-attachment: fixed;
  79. background-size: auto 105%;
  80. }
  81. /*[[switch-characters]]*/
  82. /* Border */
  83. body.page-common #myanimelist {
  84. border: groove #2e51a2 3px;
  85. border-top-width: 0px;
  86. }
  87. }
  88.  
  89. @-moz-document domain("myanimelist.net") {
  90. /* CUSTOM SCROLLBAR */
  91. /* Firefox */
  92. * {
  93. scrollbar-color: var(--clr1) var(--clr2);
  94. }
  95.  
  96. /* Chrome */
  97. body:not(.ownlist)::-webkit-scrollbar {
  98. background: var(--clr2);
  99. }
  100.  
  101. body:not(.ownlist)::-webkit-scrollbar-button:vertical {
  102. background: transparent center / 10px auto no-repeat;
  103. }
  104. body:not(.ownlist)::-webkit-scrollbar-button:vertical:start {
  105. background-image: url(https://i.imgur.com/Cu2u9Hu.png);
  106. }
  107. body:not(.ownlist)::-webkit-scrollbar-button:vertical:end {
  108. background-image: url(https://i.imgur.com/0YI7VxA.png);
  109. }
  110. body:not(.ownlist)::-webkit-scrollbar-button:horizontal {
  111. background: transparent center / auto 10px no-repeat;
  112. }
  113. body:not(.ownlist)::-webkit-scrollbar-button:horizontal:start {
  114. background-image: url(https://i.imgur.com/BArw1oI.png);
  115. }
  116. body:not(.ownlist)::-webkit-scrollbar-button:horizontal:end {
  117. background-image: url(https://i.imgur.com/vqOtoms.png);
  118. }
  119. body:not(.ownlist)::-webkit-scrollbar-corner {
  120. background: var(--clr2);
  121. }
  122.  
  123. body:not(.ownlist)::-webkit-scrollbar-thumb {
  124. background: var(--clr1) content-box;
  125. border: 0 solid transparent;
  126. border-radius: var(--rad);
  127. }
  128. body:not(.ownlist)::-webkit-scrollbar-thumb:vertical {
  129. border-width: var(--bwv);
  130. }
  131. body:not(.ownlist)::-webkit-scrollbar-thumb:horizontal {
  132. border-width: var(--bwh);
  133. }
  134. body:not(.ownlist)::-webkit-scrollbar-thumb:hover {
  135. background-color: var(--clr1-dim);
  136. }
  137. body:not(.ownlist)::-webkit-scrollbar-track {
  138. width: 5px;
  139. }
  140.  
  141. /*------------------------E-N-D-*/
  142. /*[[scrollbar]]*/
  143. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址