Lemmy Plugins and Userscripts

2145 readers

1 users here now

A general repository for user scripts and plugins used to enhance the Lemmy browsing experience.

Post (or cross-post) your favorite Lemmy enhancements here!

General posting suggestions:

Preface the submission with the type of enhancement - ex: [UserScript].
Include a screenshot of the enhancement in use (where possible)
Indicate the requirements for use (eg, greasemonkey, stylus, etc.)

Thanks!

founded 1 year ago

MODERATORS

[email protected]

Not a CSS expert, but this makes Lemmy UI comments look better for me (on Desktop) (sh.itjust.works)

submitted 1 year ago by [email protected] to c/[email protected]

5 comments fedilink hide all child comments

Using this with Stylus:

li .comment-node {
    padding: 0.5ex;
    border: 0.1ex solid #80808060 !important;
    border-radius: 1ex;
}

li li .comment-node {
    border-left: none !important;
    border-top: none !important;
    border-radius: 1ex 1ex 1ex 0 !important;
}

Or for a more lightweight change:

.comment-node {
    border-bottom: 0.1ex solid #80808060 !important;

It's the lack of clearly visible separation between comments that just doesn't look right to me.

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 1 points 1 year ago* (last edited 1 year ago) (1 children)

And <pre> with a <code> inside it needs a class so we can easily set a different background for it! (edit: or maybe just set a different background for <pre> regardless of content).

[–] [email protected] 1 points 1 year ago (1 children)

Alright, for code blocks, this looks good enough for me:

pre {
    padding: 1ex;
    margin: 1ex;
    border: 0.1ex solid #80808060 !important;
    border-radius: 1ex;
    background: #aaaaaa60;
}

[–] [email protected] 1 points 1 year ago (1 children)

And finally, quotes need a different background too:

blockquote {
    background: #DDDDDD60;
}

[–] [email protected] 1 points 1 year ago

And finally

Okay, finally finally this time. Full CSS with <code> alone also given a background, without breaking code inside <pre>:

li .comment-node {
    padding: 0.5ex;
    border: 0.1ex solid #80808060 !important;
    border-radius: 1ex;
}

li li .comment-node {
    border-left: none !important;
    border-top: none !important;
    border-radius: 1ex 1ex 1ex 0 !important;
}

pre, code {
    background: #EEEEEE;
}

pre {
    padding: 1ex;
    margin: 1ex;
    border: 0.1ex solid #80808060 !important;
    border-radius: 1ex; 
}

blockquote {
    background: #DDDDDD60;
}