Timeline coloring

[Mottie]

Continuing the discussion from the code

I tried this bit of css... the length may not work with percentages well. For example, this css (with an 85% stop) works great for this issue with 13 comments

.new-discussion-timeline .discussion-timeline:before {
  left: -79px !important; /* only added for testing so you can see where the line ends */
  background: -webkit-linear-gradient(top, 
    rgba(51,51,51,1) 0%,
    rgba(51,51,51,1) 85%,
    rgba(51,51,51,0) 85%,
    rgba(0,0,0,0) 100%
  ) !important;
  background: -moz-linear-gradient(top,
    rgba(51,51,51,1) 0%,
    rgba(51,51,51,1) 85%,
    rgba(51,51,51,0) 85%,
    rgba(0,0,0,0) 100%
  ) !important;
}

Issue 79 with 25 comments needs the stop set at around 90%, and issue 98 with one comment needs it set to about 50%.

[silverwind]

Here's a case where the line gets interrupted on the way: jquery/jquery#1496

[silverwind]

I think this should work pretty good, at least for the final line-break:

  .discussion-timeline:before {
    height: calc(100% - 322px) !important;
  }

[Mottie]

LOL I forgot about the calc property.. that's perfect!

Are you going to add this?... nevermind! LOL

[silverwind]

One issue thought, when the comment box expands higher, the line will be visible again :(

[Mottie]

I just closed and reopened this issue to show the reopen icon that I just added a style for... should that center dot be the same as the background or maybe a lighter green?

[ddavison]

maybe match the user's color?

[silverwind]

Either #eee or #222, but I'm leaning towards #eee.

[silverwind]

Dot color was fixed in 5d8619e