Reddit Colored Comments [Updated for RES Users]

Customizable Colored Comments for Reddit. [Updated for RES Users 2025]

当前为 2025-01-21 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name Reddit Colored Comments [Updated for RES Users]
  3. @namespace typpi.online
  4. @description Customizable Colored Comments for Reddit. [Updated for RES Users 2025]
  5. @author vednoc [Updated by Nick2bad4u]
  6. @version 1.5.9
  7. @license MIT
  8. @homepageURL https://github.com/Nick2bad4u/UserStyles
  9. @supportURL https://github.com/Nick2bad4u/UserStyles/issues
  10. @supportURL https://github.com/Nick2bad4u/UserStyles/issues
  11. @preprocessor stylus
  12.  
  13. ------------------------------------------------
  14. New Reddit Options
  15. ------------------------------------------------
  16. @var range lineWidth '● New Design - Line Width' [4, 1, 8, 1]
  17. @var checkbox lineStyle '⠀⠀⚬ Line Color Style: Full or Partial' 0
  18. @var checkbox hideLines '⠀⠀⚬ Hide previous lines' 0
  19.  
  20. ------------------------------------------------
  21. Old Reddit Options
  22. ------------------------------------------------
  23. @var range oldLineWidth '● Old Design - Line Width' [4, 1, 8, 1]
  24. @var checkbox oldLineStyle '⠀⠀Line Style: Solid or Dotted' 0
  25.  
  26. ------------------------------------------------
  27. Old Reddit - Minimize Button Area
  28. ------------------------------------------------
  29. @var checkbox oldMinimizeArea '● Old Design - Color the Minimize Button Area' 0
  30. @var color oldMinimizeColor '⠀⠀⚬ Color of the Minimize Button Area' #00000080
  31. @var checkbox oldMinimizeRainbow '⠀⠀⚬ Rainbow Color the Minimize Button Area' 0
  32.  
  33. ------------------------------------------------
  34. Old Reddit - Minimize Button Area Hover
  35. ------------------------------------------------
  36. @var checkbox oldHoverArea '● Old Design - Color the Minimize Button Area Hover' 0
  37. @var color oldHoverColor '⠀⠀⚬ Color of the Minimize Button Area Hover' #00000080
  38. @var checkbox oldHoverRainbow '⠀⠀⚬ Rainbow Color the Minimize Button Area Hover' 0
  39.  
  40. ------------------------------------------------
  41. New Reddit and Old Reddit - Comment Depth Colors
  42. ------------------------------------------------
  43. @var color color1 '>>> Old + New - Comment Depth 1 - Color' #f07178
  44. @var color color2 '>>> Old + New - Comment Depth 2 - Color' #f78c6c
  45. @var color color3 '>>> Old + New - Comment Depth 3 - Color' #ffcb6b
  46. @var color color4 '>>> Old + New - Comment Depth 4 - Color' #f3ff89
  47. @var color color5 '>>> Old + New - Comment Depth 5 - Color' #c3e88d
  48. @var color color6 '>>> Old + New - Comment Depth 6 - Color' #8de89e
  49. @var color color7 '>>> Old + New - Comment Depth 7 - Color' #89ddff
  50. @var color color8 '>>> Old + New - Comment Depth 8 - Color' #82aaff
  51. @var color color9 '>>> Old + New - Comment Depth 9 - Color' #c792ea
  52. @var color color10 '>>> Old + New - Comment Depth 10 - Color' #9a91ea
  53. @var color color11 '>>> Old + New - Comment Depth 11 - Color' #f8b0b7
  54. @var color color12 '>>> Old + New - Comment Depth 12 - Color' #fbc7c3
  55. @var color color13 '>>> Old + New - Comment Depth 13 - Color' #ffd6a9
  56. @var color color14 '>>> Old + New - Comment Depth 14 - Color' #fdf8b2
  57. @var color color15 '>>> Old + New - Comment Depth 15 - Color' #d8f1b9
  58. @var color color16 '>>> Old + New - Comment Depth 16 - Color' #aeecc3
  59. @var color color17 '>>> Old + New - Comment Depth 17 - Color' #a5e2f9
  60. @var color color18 '>>> Old + New - Comment Depth 18 - Color' #a2bff8
  61. @var color color19 '>>> Old + New - Comment Depth 19 - Color' #ddbaf5
  62. @var color color20 '>>> Old + New - Comment Depth 20 - Color' #c4bcf5
  63.  
  64. ------------------------------------------------
  65. Original Style made by Vendoc
  66. ------------------------------------------------
  67. @var text originalstyle '● Original Style made by Vendoc' "'https://userstyles.world/style/4734/reddit-colored-comments'"
  68.  
  69. ==/UserStyle== */
  70. @-moz-document domain('reddit.com') {
  71.  
  72. // Set line width for the new design
  73. if ( lineWidth != 2 ) {
  74. .threadline {
  75. border-right-width: s( '%spx', lineWidth ) !important;
  76. }
  77. }
  78.  
  79. // Set mode for line style in the new design
  80. $mode = '';
  81.  
  82. if ( lineStyle ) {
  83. $mode = '> div >';
  84. }
  85.  
  86. // Apply colors and styles to each level up to 20
  87. for $i in 1 .. 20 {
  88. div[id ^= 't'] > :first-child,
  89. div[id ^= 'moreComments'] > :first-child,
  90. div[id ^= 'continueThread'] > :first-child {
  91. // Create a string for the nth-child selector
  92. $nth = s( '%s', $i );
  93.  
  94. > :nth-child({$nth}) {
  95. $mode;
  96. }
  97.  
  98. .threadline {
  99. border-right-color: color + $i !important;
  100. }
  101.  
  102. // Hide previous lines if the option is checked
  103. if ( hideLines ) {
  104. > :nth-child({$nth}) > .threadline {
  105. border-right-color: #0000 !important;
  106. }
  107. }
  108. }
  109. }
  110.  
  111. // Old design specific styles
  112. .comment .child,
  113. .comment .showreplies,
  114. .res-commentBoxes.res-continuity .comment div.child {
  115. // Set line width for the old design
  116. if ( oldLineWidth != 1 ) {
  117. border-left-width: s( '%spx', oldLineWidth ) !important;
  118. }
  119.  
  120. // Set line style for the old design
  121. if ( oldLineStyle == 0 ) {
  122. border-left-style: solid !important;
  123. }
  124. else {
  125. border-left-style: dotted !important;
  126. }
  127. }
  128.  
  129. // Apply colors to nested child elements
  130. $str = '.res-commentBoxes.res-continuity .comment div.child ';
  131.  
  132. for $i in 1 .. 20 {
  133. {$str} {
  134. border-left-color: color + $i !important;
  135. }
  136.  
  137. // Increase the nesting level for each iteration
  138. $str += '> .sitetable > .comment > .child ';
  139. }
  140.  
  141. //Switch to toggle coloring of the area needs to be on first
  142. if ( oldMinimizeArea == 1 ) {
  143. if ( oldMinimizeRainbow == 1 ) {
  144. // Apply color to .expand elements within nested child elements
  145. $str2 = '.res-commentBoxes.res-continuity .comment div.child ';
  146.  
  147. for $i in 1 .. 20 {
  148. {$str2} .expand {
  149. background-color: color + $i !important;
  150. }
  151.  
  152. // Increase the nesting level for each iteration
  153. $str2 += '> .sitetable > .comment > .child ';
  154. }
  155. }
  156. }
  157.  
  158. //Switch to toggle coloring of the hover needs to be on first
  159. if ( oldHoverArea == 1 ) {
  160. if ( oldHoverRainbow == 1 ) {
  161. // Apply hover effect to .expand elements within nested child elements
  162. $str4 = '.res-commentBoxes.res-continuity .comment div.child ';
  163.  
  164. for $i in 1 .. 20 {
  165. {$str4} .expand:hover {
  166. background-color: color + $i !important;
  167. }
  168.  
  169. // Increase the nesting level for each iteration
  170. $str4 += '> .sitetable > .comment > .child ';
  171. }
  172. }
  173. }
  174.  
  175. if ( oldMinimizeArea == 1 ) {
  176. // Apply a background color to .expand elements in the tagline
  177. .commentarea .entry > .tagline > .expand {
  178. background-color: oldMinimizeColor !important;
  179. }
  180. }
  181.  
  182. if ( oldHoverArea == 1 ) {
  183. // Apply a background color to .expand elements in the tagline
  184. .commentarea .entry > .tagline > .expand:hover {
  185. background-color: oldHoverColor !important;
  186. }
  187. }
  188.  
  189. }

QingJ © 2025

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