Customizable Colored Comments for Reddit. [Updated for RES Users 2025]
当前为
/* ==UserStyle==
@name Reddit Colored Comments [Updated for RES Users]
@namespace typpi.online
@description Customizable Colored Comments for Reddit. [Updated for RES Users 2025]
@author vednoc [Updated by Nick2bad4u]
@version 1.3.2
@license MIT
@preprocessor stylus
@var range lineWidth 'New Design - Line Width' [2, 1, 8, 1]
@var checkbox lineStyle 'New Design - Line Color Style: Full or Partial' 0
@var checkbox hideLines 'New Design - Hide previous lines' 0
@var range oldLineWidth 'Old Design - Line Width' [2, 1, 8, 1]
@var checkbox oldLineStyle 'Old Design - Line Style: Solid or Dotted' 0
@var color color1 'Level 1 color' #f07178
@var color color2 'Level 2 color' #f78c6c
@var color color3 'Level 3 color' #ffcb6b
@var color color4 'Level 4 color' #f3ff89
@var color color5 'Level 5 color' #c3e88d
@var color color6 'Level 6 color' #8de89e
@var color color7 'Level 7 color' #89ddff
@var color color8 'Level 8 color' #82aaff
@var color color9 'Level 9 color' #c792ea
@var color color10 'Level 10 color' #9a91ea
@var color color11 'Level 11 color' #ffb6c1
@var color color12 'Level 12 color' #ffcccb
@var color color13 'Level 13 color' #ffe4e1
@var color color14 'Level 14 color' #f0e68c
@var color color15 'Level 15 color' #e0ffff
@var color color16 'Level 16 color' #d8bfd8
@var color color17 'Level 17 color' #e6e6fa
@var color color18 'Level 18 color' #f5f5dc
@var color color19 'Level 19 color' #ffffe0
@var color color20 'Level 20 color' #f8f8ff
@var text originalstyle 'Original Style' "'https://userstyles.world/style/4734/reddit-colored-comments'"
==/UserStyle== */
@-moz-document domain('reddit.com')
{
// Define some convenient variables
t = transparent;
i = !important;
// Set line width for the new design
if lineWidth != 2
{
.threadline
{
border-right-width: s('%spx', lineWidth) i;
}
}
// Set mode for line style in the new design
$mode = '';
if lineStyle
{
$mode = '> div >';
}
// Apply colors and styles to each level up to 20
for $i in 1..20
{
div[id ^= 't'] > :first-child,
div[id ^= 'moreComments'] > :first-child,
div[id ^= 'continueThread'] > :first-child
{
$nth = s('%s', $i); // Create a string for the nth-child selector
> :nth-child({$nth})
{
$mode
}
.threadline
{
border-right-color: color + $i i;
}
// Hide previous lines if the option is checked
if hideLines
{
> :nth-child({$nth}) > .threadline
{
border-right-color: t i;
}
}
}
}
// Old design specific styles
.comment .child,
.comment .showreplies,
.res-commentBoxes.res-continuity .comment div.child
{
// Set line width for the old design
if oldLineWidth != 1
{
border-left-width: s('%spx', oldLineWidth) i;
}
// Set line style for the old design
if oldLineStyle == 0
{
border-left-style: solid i;
}
else
{
border-left-style: dotted i;
}
}
// Apply colors to nested child elements
$str = '.res-commentBoxes.res-continuity .comment div.child ';
for $i in 1..20
{
{ $str } {
border-left-color: color + $i i;
}
// Increase the nesting level for each iteration
$str += '> .sitetable > .comment > .child ';
}
// Apply hover effect to .expand elements within nested child elements
$str2 = '.res-commentBoxes.res-continuity .comment div.child ';
for $i in 1..20
{
{ $str2 } .expand:hover {
background-color: color + $i i;
}
// Increase the nesting level for each iteration
$str2 += '> .sitetable > .comment > .child ';
}
// Apply a background color to .expand elements in the tagline
.commentarea .entry > .tagline > .expand
{
background-color: #00000080;
}
}