4 ms·

It would also be handy to have some visual guides for the indentation levels of nested comments as on Reddit. I've hacked my own indentation marks using a CSS i

It would also be handy to have some visual guides for the indentation levels of nested comments as on Reddit. I've hacked my own indentation marks using a CSS injection for now, but this is clearly still not optimal: @-moz-document url-prefix(https://news.ycombinator.com/) { td { vertical-align: top } td > img { background: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 38px, rgba(0,0,0,0.3) 38px, rgba(0,0,0,0.3) 40px); margin-top: 4px; height: 12px!important; } div.votearrow { padding-bottom: 3px; background: url('http://localhost/uparrow.png') !important; background-size: 12px 20px !important; width: 12px!important;} } I've also increased the size of the voting arrow because it's just uncomfortably small. By Fitt's law [0], smaller buttons require more time and effort to click! [0] https://en.wikipedia.org/wiki/Fitts%27s_law https://en.wikipedia.org/wiki/Fitts%27s_law

arviewer 10y ago
Proper nesting layout will only work if they use proper nesting. Given the limitations - great job! I only use the first two lines as the png does not load.
- y4mi 10y ago
  of course it doesn't. the url leads you to localhost. you'd need a local webserver which serves your preferred upvote picture.
- hacker42 10y ago
  Try this: background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='20'><polygon points='0,20 12,20 6,0' style='fill:rgb(179,179,179);stroke:none;' /></svg>") !important;
basseq 10y 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; }
- deleted 10y ago
  [deleted]
- hacker42 10y 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 https://i.imgur.com/f2WfHyp.png Unfortunately it breaks on the 'threads' page.

arviewer 10y ago

Proper nesting layout will only work if they use proper nesting. Given the limitations - great job! I only use the first two lines as the png does not load.

y4mi 10y ago
of course it doesn't. the url leads you to localhost. you'd need a local webserver which serves your preferred upvote picture.
hacker42 10y ago
Try this: background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='20'><polygon points='0,20 12,20 6,0' style='fill:rgb(179,179,179);stroke:none;' /></svg>") !important;

basseq 10y 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; }

deleted 10y ago
[deleted]
hacker42 10y 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 https://i.imgur.com/f2WfHyp.png Unfortunately it breaks on the 'threads' page.