4 ms·
Here is what I've been using through the excellent Stylus browser addon. It's derived from some of the Stylus themes for HN. (comment box text is black but not
by 0-_-0 6y ago
Here is what I've been using through the excellent Stylus browser addon. It's derived from some of the Stylus themes for HN. (comment box text is black but not being a web guy I didn't fix it):
Screenshots: https://imgur.com/a/RhesGUo https://imgur.com/a/RhesGUo
/*Base*/
::selection{background: #111; color: #F60;}
body{background-color: #222; color: #CCC;}
a:link{color: #8AD !important;}
a:visited{color: #666 !important;}
a.storylink{color: #dfdfdf !important;}
/*Font*/
:root{font-size: 16px; text-rendering: optimizeLegibility;}
body, td, .admin, td, .subtext, td, input[type="submit"], .default, .admin, .title, .subtext, .yclinks, .pagetop, .comhead, .comment{font-family: sans-serif;}
body,td,input,textarea,.default,.title,.pagetop{font-size: 1rem;}
.comment{font-size: 0.9167rem;}
.admin, .admin td{font-size: 0.875rem;}
.yclinks, .comhead{font-size: 0.8333rem;}
.subtext,.subtext td, .rank, font[size="1"]{font-size: 0.75rem;}
.rank{font-weight: bold;}
/*Input*/
input, textarea{background-color: #333; border: 0.0625rem solid #555; padding: 0.1875rem;}
input[type="submit"]{background-color: #444; padding: 0.5rem 1.5rem;}
/*Vote Arrows*/
.votearrow{display: none;}
a[id^="up"]:before{content: "▲"; color: #666; font-weight: bold; padding: 0.1875rem;}
a[id^="up"].nosee:before{visibility: visible; color: #F60;}
a[id^="down"]:before{content: "▼"; color: #666; font-weight: bold; padding: 0.1875rem;}
a[id^="down"].nosee:before{visibility: visible; color: #369;}
/*Spacers*/
tr.spacer{height: 0.1875rem !important;}
#pagespace{display: none;}
/*Backing*/
#hnmain{background-color: #111;}
.itemlist{background-color: #111; width: 100%; padding: 0.1875rem;}
/*Header Bar*/
#hnmain > tbody > tr > td[bgcolor="#ff6600"]{position: relative; background-color: #333; border: 0.1875rem solid #111; border-bottom: none; padding: 0.1875rem;}
#hnmain > tbody > tr > td[bgcolor="#ff6600"] a{color: #F60 !important;}
.pagetop{color: #888;}
#hnmain > tbody > tr > td[bgcolor="#ff6600"] td:nth-child(2){position: absolute; top: 0.375rem; width: 100%; height: 0 !important; text-align: center; margin-left: -30px; padding-left: 30px;}
.hnname{position: absolute; left: 30; top: 0.1875rem;}
/*Syncopation*/
.itemlist .athing:nth-child(odd), .itemlist .athing:nth-child(odd)+tr, .athing.comtr:nth-child(odd){background-color: #1E1E1E;}
.itemlist .athing:nth-child(even), .itemlist .athing:nth-child(even)+tr, .athing.comtr:nth-child(even){background-color: #242424;}
/*Item*/
.itemlist .athing td{padding-top: 0.5rem;}
.itemlist .athing+tr td{padding-bottom: 0.5rem;}
.itemlist .athing .title:first-child{background-color: #111; border-bottom-right-radius: 0.375rem !important; text-align: center; padding-top: 0.375rem;}
/*Fat Item*/
.fatitem{padding-top: 0.625rem;}
.fatitem form{margin: 0;}
.fatitem .votelinks{padding: 0 0.375rem;}
/*Coments*/
.comment-tree{width: 100%;}
.ind{background-image: repeating-linear-gradient(to right, #111, #111 39px, #222 40px);}
.athing.comtr td{padding: 0;}
.athing.comtr table{border-collapse: collapse;}
.athing.comtr .default{padding: 0.625rem 2.5rem 0.625rem 0;}
.athing.comtr .votelinks{padding: 0.625rem;}
.athing.comtr .comment a{color: #369 !important;}
.athing.comtr .comment .reply a{color: #8AD !important;}
.comment{max-width: none;}
.comment pre{max-width: 70vw;}
.comment pre *{font-family: monospace;}
/*Custom*/
.subtext .hnuser:link,
.comhead a:link,
.subtext a:visited {
color: #c678ddcc !important;
}
.age a:link,
.age a:visited {
color: #98be65cc !important;
}
/*Comment Colors*/
.c00{color: #dddddd;}
.c5a{color: #cecece;}
.c73{color: #bebebe;}
.c82{color: #aeaeae;}
.c88{color: #9c9c9c;}
.c9c{color: #888888;}
.cae{color: #828282;}
.cbe{color: #737373;}
.cce{color: #5a5a5a;}
.cdd{color: #000000;}
/*New Comments Page*/
.athing > .default{padding: 0.625rem 2.5rem 0.625rem 0 !important;}
.athing > .ind+.votelinks{padding: 0.625rem;}
/*Hover*/
.itemlist .athing:hover, .itemlist .athing:hover td, .itemlist .athing:hover+tr td{background-color: #333;}
.itemlist .athing:hover .rank{color: #369;}
.athing.comtr:hover{background-color: #333;}
body > center > table {
width: 80% !important;
}