this post was submitted on 13 Jun 2023

119 points (100.0% liked)

Technology

37716 readers

324 users here now

A nice place to discuss rumors, happenings, innovations, and challenges in the technology sphere. We also welcome discussions on the intersections of technology and society. If it’s technological news or discussion of technology, it probably belongs here.

Remember the overriding ethos on Beehaw: Be(e) Nice. Each user you encounter here is a person, and should be treated with kindness (even if they’re wrong, or use a Linux distro you don’t like). Personal attacks will not be tolerated.

Subcommunities on Beehaw:

This community's icon was made by Aaron Schneider, under the CC-BY-NC-SA 4.0 license.

founded 2 years ago

MODERATORS

alyaza@beehaw.org

TheRtRevKaiser@beehaw.org

gyrfalcon@beehaw.org

rs5th@beehaw.org

coldredlight@beehaw.org

Los@beehaw.org

SemioticStandard@beehaw.org

TheRtRevKaiser@kbin.social

remington@beehaw.org

119

Made Lemmy waaaay more tolerable to read with Stylebot and some custom CSS! (lemmy.world)

submitted 1 year ago* (last edited 1 year ago) by webbedgiant@lemmy.world to c/technology@beehaw.org

26 comments fedilink hide all child comments

For anyone that would love to get a little more separation/readability out of comments, download Stylebot for chrome or a custom CSS extension for your browser, then use the CSS I wrote out below to get it to look like my screenshot!

/* ==UserStyle==
@name           LES
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A style based on the visuals of RES
@author         Sascha Englert
==/UserStyle== */

@-moz-document domain("feddit.de") {
    div.comment {
        border: 1px solid #ced4da !important;
        
        border-radius: .5rem;
        margin: 10px 0;

    }

    div.comment-node {
        border: none !important;
    }
    
    div.details {
        padding: 0 !important;
    }
    
    div.d-flex {
        justify-content: unset !important; 
    }
    
    button.btn {
        padding: 0 10px;
    }
    
    div.mb-3 {
        margin: 10px 0;
    }
    
    svg.icon.mini-overlay {
        color: #f2f2f2;
        background: #ced4da;
    }
}

div.details.comment-node.py-2.border-top.border-light {
  border-style: solid;
  border-color: #ffffff;
  padding:  10px;
  margin-bottom: 2px;
  background-color: #fafafa;
}

div.d-flex.flex-wrap.align-items-center.text-muted.small {
  border-color: #fafafa;
  background-color: #eeeeee;
  border-style: solid;
  padding:  3px;
  border-radius: .9rem;
}

div.d-none.d-md-block.col-md-4 {
  border-style: solid;
  border-color: #eeeeee;
  background-color: #f5f5f5;
   padding:  9px;
   border-radius: .9rem;
}

div.d-flex.justify-content-between.justify-content-lg-start.flex-wrap.text-muted.font-weight-bold {
  background-color: #fafafa;
  border-color: #fff;
  border-style: solid;
  border-radius: .9rem;
}

div.d-flex.justify-content-start.flex-wrap.text-muted.font-weight-bold.mb-1 {
  border-style: solid;
  border-color: #f5f5f5;
     padding:  2px;
   border-radius: .9rem;
}

nav.navbar.navbar-expand-md.navbar-light.shadow-sm.p-0.px-3 {
  background-color: #eeeeee;
  border-color: #fafafa;
  border-style: none;
}

div.md-div {
   padding:  4px;
}

div div p {
  font-size: 14px; 
}

div.comments {
  padding-left: 20px;
  padding-bottom:  5px;
}

top 25 comments

sorted by: hot top controversial new old

[–] G0ldenSp00n@lemmy.jacaranda.club 17 points 1 year ago* (last edited 1 year ago) (1 children)

Maybe worth looking at making some of these changes on the github project for lemmy, since it is open source. Idk how open they are to styling changes at the moment, but seems to me it would be worth while for some like community style picker to be build out, and people can just select the theme they like the most.

Actually looking at it more it looks like they already have CSS themes in a folder there.

[–] Kaizar@tezzo.f0rk.pl 6 points 1 year ago

Doesn't seem to work reliably, any custom themes linked to limmy-ui just fallback to the default litely theme, i had to dive into the guts and directly edit the core themes to get my instance styling started, but i don't like overriding core styles so hopefully it'll get fixed.

[–] racle@lemmy.world 13 points 1 year ago (1 children)

"my eyes" https://media.giphy.com/media/yhLV2DGTLDRCw/giphy.gif

[–] BeardedSingleMalt@beehaw.org 1 points 1 year ago (1 children)

I always find it strange because dark modes and light text on black backgrounds bugs the hell out of my eyes.

[–] hemko@lemmy.world 2 points 1 year ago

Scrolling with dark mode and suddenly 1000 suns on the screen feels terrible

[–] GadgeteerZA@beehaw.org 8 points 1 year ago (1 children)

Side-by-Side screenshot comparison for those who wonder what it looks like...

[–] SmugBedBug@lemmy.iswhereits.at 1 points 1 year ago (1 children)

Can you share the code for the darkly theme?

[–] GadgeteerZA@beehaw.org 2 points 1 year ago

I'm just using the Dark Reader browser extension

[–] BobQuasit@beehaw.org 7 points 1 year ago (1 children)

Let it all burn down. Leave nothing for the IPO.

[–] AdminWorker@lemmy.ca 14 points 1 year ago (2 children)

This comment may have been posted on the wrong post. I think it is a known issue that they are working on.

[–] BobQuasit@beehaw.org 5 points 1 year ago (1 children)

Yes, Lemmy was flaking out when I posted this. My comment was directed toward what should happen to Reddit on a different thread.

[–] kacoleman@toast.ooo 5 points 1 year ago

Clearly 😂

[–] ngwoo@beehaw.org 2 points 1 year ago

Oh that's what's been happening.

[–] curiouscanoe@beehaw.org 6 points 1 year ago* (last edited 1 year ago)

Just to tag onto this. I found it really frustrating that the navigation header for the site isn't stickied to the top of the page. I added this to my styles to accomplish that:

nav.navbar.navbar-expand-md.navbar-light.shadow-sm.p-0.px-3 {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

Note that if you're using a theme that doesn't have a white background (#fff) you'll want to adjust that value to whatever your background is.

[–] GadgeteerZA@beehaw.org 5 points 1 year ago

Working great for me on both Lemmy.ml and Beehaw.org. I’m using Dark Reader extension, so it is showing fine too in dark mode for me.

[–] communist@beehaw.org 5 points 1 year ago

https://github.com/HrBingR/Lemmy_CSS may also want to get it merged here!

[–] wildeaboutoskar@beehaw.org 5 points 1 year ago

Looks great! Any plans for 'dark mode'? I would probably use that if so

[–] scrubbles@poptalk.scrubbles.tech 4 points 1 year ago

heads up you can use the code block to make this more readable. In markdown it's a block like started ended with the triple "```"

[–] 0485919158191@lemmy.world 2 points 1 year ago

This is great. Thanks!

[–] milkytoast@beehaw.org 1 points 1 year ago (3 children)

does stylebot work on Firefox and mobile?

[–] iorale@lemmy.fmhy.ml 3 points 1 year ago

I'm using Stylus for Firefox and it works so far

[–] Yabai@beehaw.org 3 points 1 year ago

Use stylus

[–] SmugBedBug@lemmy.iswhereits.at 1 points 1 year ago* (last edited 1 year ago)

I'm using CSS Override. Works perfectly. Haven't tried it on mobile.

load more comments