← Back to context

Comment by basseq

9 years ago

Riffing off your code, this extends the bars all the way up/down.

  td.ind > img {
      background: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 38px, rgba(0,0,0,0.1) 38px, rgba(0,0,0,0.1) 40px);
      margin-top: 0px;
      height: 100%;
  }
  
  table.comment-tree td,
  table.comment-tree tr,
  table.comment-tree th,
  table.comment-tree,
  table.comment-tree tbody,
  table.comment-tree table {
      margin: 0;
      padding: 0;
      border-spacing: 0;
  }
  
  table.comment-tree td.default {
      padding: 0.5em 0.5em 1em 0.5em;
  }
  
  table.comment-tree td.ind {
      padding: 0 0.5em;
  }

2 comments

basseq

Reply
hacker42  9 years ago

Slight addition using wider, shadowy gradients to conceal some aliasing issues:

    td.ind > img { opacity: 0 }
    td.ind {
        background: 
            linear-gradient(to left, rgba(246,246,240,1) 0px, rgba(246,246,240,1) 14px, rgba(246,246,240,0) 14px),
            repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0.03) 39px, rgba(0,0,0,0) 40px);
     }

Screenshot: https://i.imgur.com/f2WfHyp.png

Unfortunately it breaks on the 'threads' page.