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

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!

Edit: Been making periodic updates throughout the day, and it's sooo much better now, make sure to use the update code below!

/* ==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;
}

you are viewing a single comment's thread
view the rest of the comments
[-] Xuerian@beehaw.org 1 points 1 year ago

You might want to consider putting this into a gist so it has a static link and is easily installable/can see changes

Or just public to userstyles.world through stylus.

Either way, thanks for sharing.

this post was submitted on 13 Jun 2023
121 points (100.0% liked)

Technology

37574 readers
759 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