Refined-github: Distinct referenced commits style

[sompylasar]

Before

Before (with explanation of the problem)

Confusing, looks like the pull request commits and the commit that references this pull request are in the same branch.

After

Style

.discussion-item-header[id^=ref-] .discussion-item-icon {
  background-color: #6db2ff;
  color: #ffffff;
}

.discussion-item-header[id^=ref-]::before {
  content: '';
  position: absolute;
  display: block;
  z-index: -1;
  left: -25px;
  top: -40px;
  width: 2px;
  height: 140px;
  background-color: #ffffff;
}

.discussion-item-header[id^=ref-commit-] + .discussion-item-body .timeline-commits .commit .commit-icon {
  color: #6db2ff;
}

.discussion-item-header {
  position: relative;
}

.discussion-item-header[id^=ref-commit-]::after {
  content: '';
  position: absolute;
  display: block;
  z-index: 0;
  left: -25px;
  top: 30px;
  bottom: -20px;
  width: 2px;
  background-color: #6db2ff;
}

.discussion-item-header[id^=ref-commit-] + .discussion-item-body .timeline-commits {
  position: relative;
}

https://gist.github.com/sompylasar/99b5d307da3168b833c1119fb95caf11

[sindresorhus]

Yeah, this is a good improvement. PR welcome :)

Please also suggest the improvement to GitHub: github.com/contact

[busches]

@sindresorhus do we want to add this CSS straight in or hide it behind a RGH class so it can be toggled off?

@sompylasar do you want to open a PR?

[sindresorhus]

@busches I would say just plain CSS. The change is uncontroversial and I don't see why anyone would genuinely need to disable it.

[sompylasar]

@busches Thanks for asking! I currently don't have enough time to do a proper PR and test it, please feel free to copy and adapt the code I shared. I think this feature should be disableable as any other refined github feature because it has its quirks due to how GitHub markup is currently structured.

[dakshshah96]

@busches Can I take this one? This would be my first issue here 😅

[busches]

@dakshshah96 have at it.

[fregante]

Let's only drop the commit icon and possibly drop the bigger "bookmark" icon to deemphasize it even more.

@jerone said:
I see the vertical line as a timeline, this can contain commits, but also comments and also references. The reference contains a description and the commit where reference happened. My suggestion would be to combine them by removing the commit icon. Now it's just one reference.

First one has the commit icon removed:

The same is already done when referencing PR:

CSS:

.discussion-item-header[id^='ref-commit-'] + .discussion-item-body .timeline-commits .commit .commit-icon {
  visibility: hidden;
}

@jerone would you like to submit a PR with your own suggestion and a screenshot in the readme?

[fregante]

This is really annoying. I sent another request at https://github.com/contact

Commit references in PR are very confusing

Open this: https://github.com/sindresorhus/refined-github/pull/2167#ref-commit-7d6e4d1

Can you tell which commits are part of the current PR and which aren't?

Answer: only the merge commit is, but there's no way to tell.

Please display commits with PR references differently in PRs.

More context: https://github.com/sindresorhus/refined-github/issues/1579