Dred's HN CSS Madhackery: Dark

/* Dredmorbius's HN CSS Madhackery: Dark Mode 2023-1-8
 *
 * Based on: <https://pastebin.com/gLXiqKyd>
 *
 * Note that this is a manual hack and is based of a set of nonstandard HN stylings, so this
 * is NOT simply "HN Dark", though you could strip out my other changes (mostly font size/spec)
 * to get closer to that.
 *
 * NOT exhaustively tested, there may be some quirks on seldom-visited pages.
 */


/* Overall Page Colours */

body {
    background-color: #f6f6ef;
    background-color: #36363f
}

#hnmain {
    background-color: white !important;
    background-color: black !important;
    color: white;
}

#hnmain tbody tr td[bgcolor] {
    _outline: solid 4px red;
    background-color: #ffbbaa !important;
    background-color: #886600 !important;
    color: #fff;
}

/* Fonts */

/* ... change this to define *overall* font size */

body {
    font-size: medium;
}

/* ... derived values */

td { font-size: 1em; }

.default { font-size: 1em; }
.admin {font-size: 0.85em; }
.title { font-size: 1.1em; }
.subtext { font-size: 0.8em; }
.yclinks { font-size: 0.8em; }
.pagetop { font-size: 1em; }
.comhead { font-size: 0.9em; }
.comment { font-size: 1em; }
.morelink { font-size: 0.8em; }

input, textarea {
    font-size: 1em;
    font-family: courier, monospace;
}


/* 'Graphs */

.default p {
    line-height: 1.4;
    margin: 0.75rem 0 0 0;
}

/* Elements */

.pagetop,
.pagetop a,
.pagetop a:visited {
    color: #e8e8e8;
}

.votelinks { padding-right: 0.5em;}
.votearrow {
    background-size: 0.8rem;
    height: 0.8rem;
    width: 0.8rem;
}

.title, .titleline, .title a {
    color: #000 !important;
    color: #fff !important;
}

.comhead, .comhead a {
    color: #999;
    color: #fff;
    _background: red;
}

.comhead a:link {
    color: #000;
    color: #888;
    color: #fff;
}

.toptext {
    color: #000;
    color: #fff;
    margin-top: 2em;
}

/* Story metadata / subtext */

.subtext,
.subtext a,
.subtext a:visited {
    color: #888;
    color: #ccc;
}

.comhead,
.comhead a,
.comhead a:link,
.subtext a:visited {
    color: #666;
    color: #999;
}

.comment {
    padding-top: 0.75em;
}

.subtext .hnuser,
.subtext a.hnuser,
.comhead .hnuser,
.comhead a:link.hnuser {
    color: #666;
    color: #bbb;
    font-weight: bold;
    padding-right: 0.75em;
}

.yclinks,
.yclinks a,
.yclinks a:link,
.yclinks a:visited {
    color: #666;
    color: #ccc;
}

.yclinks a:hover {
    color: #000;
    color: #fff;
    text-decoration: underline;
}

.subtext a:hover,
.comhead a:hover {
    color: #000;
    color: #fff;
}

[id^="unv_"] {
    font-style: italic;
}

.navs a[href^="flag?"] {
    font-weight: bold;
}

textarea {
    background-color: #333;
    color: #fff;
}

input {
    background-color: #333;
    border: solid 1px #888;
    color: #ccc;
    border-radius: 2px;
}

/* User page profile description */
[op="user"] td {
    color: #000;
    color: #fff;
}

/* Comments */

.c00, .c00 a:link {
    color: #fff;
}


/* The one place that hasn’t been corrupted by capitalism:   Space!!! */

#pagespace {height: 3em !important; }
.spacer { height: 0.75em !important; }
.subtext { padding-top: 0.3em; }


/* Comment spacing */

.athing .default {
    padding-bottom: 1.25em;
    padding-top: 0.25em;
    margin-top: 0.25em;
    border-top: solid 1px #ddd;
    border-top: solid 1px #888;
}


/* Highlight current page selection in pagetop */
[op="newest"] .pagetop [href="newest"],
[op="threads"] .pagetop [href^="threads"],
[op="front"] .pagetop [href="front"],
[op="newcomments"] .pagetop [href="newcomments"],
[op="ask"] .pagetop [href="ask"],
[op="show"] .pagetop [href="show"],
[op="jobs"] .pagetop [href="jobs"],
[op="submit"] .pagetop [href="submit"],
[op="user"] .pagetop [href^="user"] {
    font-weight: bold;
    color: #fff;
    color: #000;
}


/* More link / button ... */
.morespace + tr .title {
    margin: 0.6em;
    padding: 0.6em;
}

.morelink {
    font-size: 0.85em;
    border: solid 2px #ffbbaa;
    border-radius: 0.25em;
    padding: 0.2em;
    margin: 0.3em;
    background: #f0f0f0;
    background: #404040;
}

/* Profile page ... increase spacing between elements / links to avoid misfires */

.profileform td {
    padding-bottom: 1em;
}