Reddit colored comments by vednoc

Reddit colored comments screenshot
Install Get Stylus Write a review

Details

Authorvednoc

LicenseMIT

Created atMay 17, 2022 16:53

Updated atMay 18, 2022 17:39

Applies toreddit

Statistics

Learn how we calculate statistics in the FAQ.

Total views117

Total installs438

Weekly installs103

Description

Customizable colored comments for the new Reddit design.

Notes

As per u/AA-Admiral’s request on Stylus’ Discord server.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==UserStyle==
@name         Reddit colored comments
@namespace    userstyles.world/user/vednoc
@description  Customizable colored comments for the new Reddit design.
@author       vednoc <vednoc@pm.me> (https://github.com/vednoc)
@version      1.1.0
@license      MIT
@preprocessor stylus

@var range    lineWidth 'Line width' [2, 1, 8, 1]
@var checkbox lineStyle 'Line color style: full or partial' 0
@var checkbox hideLines 'Hide previous lines' 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
==/UserStyle== */

@-moz-document domain('reddit.com') {
    t = transparent
    i = !important

    // Set line width.
    if lineWidth != 2 {
        div[id^='t'] .threadline {
            border-right-width: s('%spx', lineWidth) i
        }
    }

    // Set mode for line style.
    $mode = ()
    if lineStyle {
        $mode = '> div >'
    }

    for $i in 1..10 {
        div[id^='t'] > :first-child,
        div[id^='moreComments'] > :first-child {
            $nth = s('%s', $i)

            // Set line colors.
            > :nth-child({ $nth }) { $mode } .threadline {
                border-right-color: color + $i i
            }

            // Set previous lines.
            if hideLines {
                > :nth-child({ $nth }) > .threadline {
                    border-right-color: t i
                }
            }
        }
    }
}

Reviews

No reviews yet.