☰

Reddit Colored Comments [Updated for RES Users]

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

当前为 2025-01-20 提交的版本，查看 最新版本。

  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.3.2
  7. @license      MIT
  8. @preprocessor stylus
  9.  
  10. @var range    lineWidth 'New Design - Line Width' [2, 1, 8, 1]
  11. @var checkbox lineStyle 'New Design - Line Color Style: Full or Partial' 0
  12. @var checkbox hideLines 'New Design - Hide previous lines' 0
  13.  
  14. @var range    oldLineWidth 'Old Design - Line Width' [2, 1, 8, 1]
  15. @var checkbox oldLineStyle 'Old Design - Line Style: Solid or Dotted' 0
  16.  
  17. @var color color1  'Level  1 color' #f07178
  18. @var color color2  'Level  2 color' #f78c6c
  19. @var color color3  'Level  3 color' #ffcb6b
  20. @var color color4  'Level  4 color' #f3ff89
  21. @var color color5  'Level  5 color' #c3e88d
  22. @var color color6  'Level  6 color' #8de89e
  23. @var color color7  'Level  7 color' #89ddff
  24. @var color color8  'Level  8 color' #82aaff
  25. @var color color9  'Level  9 color' #c792ea
  26. @var color color10 'Level 10 color' #9a91ea
  27. @var color color11 'Level 11 color' #ffb6c1
  28. @var color color12 'Level 12 color' #ffcccb
  29. @var color color13 'Level 13 color' #ffe4e1
  30. @var color color14 'Level 14 color' #f0e68c
  31. @var color color15 'Level 15 color' #e0ffff
  32. @var color color16 'Level 16 color' #d8bfd8
  33. @var color color17 'Level 17 color' #e6e6fa
  34. @var color color18 'Level 18 color' #f5f5dc
  35. @var color color19 'Level 19 color' #ffffe0
  36. @var color color20 'Level 20 color' #f8f8ff
  37.  
  38. @var text originalstyle 'Original Style' "'https://userstyles.world/style/4734/reddit-colored-comments'"
  39. ==/UserStyle== */
  40. @-moz-document domain('reddit.com')
  41. {
  42.     // Define some convenient variables
  43.     t = transparent;
  44.     i = !important;
  45.  
  46.     // Set line width for the new design
  47.     if lineWidth != 2
  48.     {
  49.         .threadline
  50.         {
  51.             border-right-width: s('%spx', lineWidth) i;
  52.         }
  53.     }
  54.  
  55.     // Set mode for line style in the new design
  56.     $mode = '';
  57.     if lineStyle
  58.     {
  59.         $mode = '> div >';
  60.     }
  61.  
  62.     // Apply colors and styles to each level up to 20
  63.     for $i in 1..20
  64.     {
  65.         div[id ^= 't'] > :first-child,
  66.         div[id ^= 'moreComments'] > :first-child,
  67.         div[id ^= 'continueThread'] > :first-child
  68.         {
  69.             $nth = s('%s', $i); // Create a string for the nth-child selector
  70.             > :nth-child({$nth})
  71.             {
  72.                 $mode
  73.             }
  74.  
  75.             .threadline
  76.             {
  77.                 border-right-color: color + $i i;
  78.             }
  79.  
  80.             // Hide previous lines if the option is checked
  81.             if hideLines
  82.             {
  83.                 > :nth-child({$nth}) > .threadline
  84.                 {
  85.                     border-right-color: t i;
  86.                 }
  87.             }
  88.         }
  89.     }
  90.  
  91.     // Old design specific styles
  92.     .comment .child,
  93.     .comment .showreplies,
  94.     .res-commentBoxes.res-continuity .comment div.child
  95.     {
  96.         // Set line width for the old design
  97.         if oldLineWidth != 1
  98.         {
  99.             border-left-width: s('%spx', oldLineWidth) i;
  100.         }
  101.  
  102.         // Set line style for the old design
  103.         if oldLineStyle == 0
  104.         {
  105.             border-left-style: solid i;
  106.         }
  107.         else
  108.         {
  109.             border-left-style: dotted i;
  110.         }
  111.     }
  112.  
  113.     // Apply colors to nested child elements
  114.     $str = '.res-commentBoxes.res-continuity .comment div.child ';
  115.     for $i in 1..20
  116.     {
  117.         { $str } {
  118.             border-left-color: color + $i i;
  119.         }
  120.  
  121.         // Increase the nesting level for each iteration
  122.         $str += '> .sitetable > .comment > .child ';
  123.     }
  124.  
  125.     // Apply hover effect to .expand elements within nested child elements
  126.     $str2 = '.res-commentBoxes.res-continuity .comment div.child ';
  127.     for $i in 1..20
  128.     {
  129.         { $str2 } .expand:hover {
  130.             background-color: color + $i i;
  131.         }
  132.  
  133.         // Increase the nesting level for each iteration
  134.         $str2 += '> .sitetable > .comment > .child ';
  135.     }
  136.  
  137.     // Apply a background color to .expand elements in the tagline
  138.     .commentarea .entry > .tagline > .expand
  139.     {
  140.         background-color: #00000080;
  141.     }
  142. }