Well “a coder” covers a wide range of stuff, including walloping things until they behave the way you want them to. I can do some PHP and JS and a fair amount of CSS, just from trying things over the years to make various things suit my preferences better, but I wouldn’t call myself “a developer” or anything like that.
It may be possible to get the thumbs working with the shortcuts. I haven’t looked into that. It will depend what the shortcuts target. And faded avs by class is an old trick but a goody. I’ve often faded things a bit with opacity on dark themes anyway to, as you say, “reduce the puke” for items you don’t control the colour of.
I was also thinking about the orange on black (actually on #181818 in my CSS), and the combination of those with the blue links. I suspect this may be a Dutch thang, but it’s not really to my taste either. If we’re all going to be running our own CSS anyway I might get inspired to go to town on things for myself. Could be fun.
Edit: Aha. This shouldn’t be hard to do. Turns out that going up and down the topics listing with J and K appends a .selected class to the .topic-list-item table row. So all that’s required to get the thumbs bouncing up and down would be to add a declaration that calls the appended class.
Haven’t tested it yet, but something close to this should work:
/* @WIP - Expand topic thumbnails on hover. */
.topic-thumbnail {
position: absolute;
left: 6px;
width: 58px;
height: 58px;
margin: -2px 0 0 0;
padding: 0 !important;
box-sizing: border-box;
background-color: #121212;
border: 2px solid #000;
border-right: 2px solid #272727;
border-bottom: 2px solid #2f2f2f;
border-radius: 2%;
}
.desktop-view.touch .topic-thumbnail::after {
position: absolute;
top: -2px;
left: -2px;
width: 58px;
height: 58px;
margin: 0;
position: absolute;
display: block;
content: "";
z-index: 99;
}
.topic-thumbnail>a {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 2%;
z-index: 39;
}
.desktop-view.no-touch .topic-thumbnail>a {
transition: margin-top .2s, margin-left .2s, box-shadow .2s;
}
.desktop-view.no-touch .topic-thumbnail>a::before {
position: absolute;
display: block;
top: 0;
left: 0;
width: 58px;
height: 58px;
transition: top .2s, left .2s;
border-radius: 2%;
content: "";
}
.topic-list-item.selected .topic-thumbnail>a::before,
.desktop-view.no-touch .topic-thumbnail:hover>a::before {
top: -26px;
left: -66px;
width: 66px;
transition: top .2s .1s, left .2s .1s;
}
.topic-list-item.selected .topic-thumbnail>a,
.topic-thumbnail:hover>a {
margin-top: 26px;
margin-left: 66px;
box-shadow: 2px 3px 4px #000;
}
.topic-list-item.selected .topic-thumbnail>a,
.desktop-view.no-touch .topic-thumbnail:hover>a {
transition: margin-top .2s .1s, margin-left .2s .1s, box-shadow .2s .1s;
}
.topic-thumbnail>a>.thumbnail {
display: block;
margin: 0;
padding: 0;
width: 58px !important;
height: 58px !important;
object-fit: cover;
border-radius: 2%;
}
.desktop-view.no-touch .topic-thumbnail>a>.thumbnail {
transition: height .2s, width .2s;
}
.topic-list-item.selected .topic-thumbnail>a>.thumbnail,
.topic-thumbnail:hover>a>.thumbnail {
width: 200px !important;
height: 200px !important;
}
.topic-list-item.selected .topic-thumbnail>a>.thumbnail,
.desktop-view.no-touch .topic-thumbnail:hover>a>.thumbnail {
transition: height .2s .1s, width .2s .1s;
}
/* ---------------------------------------- */
This is just off the top of my head. I may have missed something here so it will need testing and maybe tweaking. Anyway the gist of it is that your selected table rows get bunged in as an additional selector for the wodges of code that do the up-popping, and of course the hover pseudo class gets removed on those lines. 
Edit the Second: Corrected CSS after a spot of testing. All good now. 
