Reddit Colored Comments [Updated for RES Users]

Customizable Colored Comments for Reddit. [Updated for RES Users 2025]
目前为 2025-01-20 提交的版本。查看最新版本。
Wrap lines
/* ==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;
    }
}
欢迎访问Greasy Fork镜像
