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.

  • RunAwayFrogOP
    link
    fedilink
    arrow-up
    1
    ·
    1 year ago

    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;
    }
    
    • RunAwayFrogOP
      link
      fedilink
      arrow-up
      1
      ·
      1 year ago

      And finally, quotes need a different background too:

      blockquote {
          background: #DDDDDD60;
      }
      
      • RunAwayFrogOP
        link
        fedilink
        arrow-up
        1
        ·
        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;
        }