SHOW:
|
|
- or go back to the newest paste.
| 1 | /* Dredmorbius's HN CSS Madhackery: Dark Mode 2023-1-8 | |
| 2 | * | |
| 3 | * Based on: <https://pastebin.com/gLXiqKyd> | |
| 4 | * | |
| 5 | * Note that this is a manual hack and is based of a set of nonstandard HN stylings, so this | |
| 6 | * is NOT simply "HN Dark", though you could strip out my other changes (mostly font size/spec) | |
| 7 | * to get closer to that. | |
| 8 | * | |
| 9 | * NOT exhaustively tested, there may be some quirks on seldom-visited pages. | |
| 10 | */ | |
| 11 | ||
| 12 | ||
| 13 | /* Overall Page Colours */ | |
| 14 | ||
| 15 | body {
| |
| 16 | background-color: #f6f6ef; | |
| 17 | background-color: #36363f | |
| 18 | } | |
| 19 | ||
| 20 | #hnmain {
| |
| 21 | background-color: white !important; | |
| 22 | background-color: black !important; | |
| 23 | color: white; | |
| 24 | } | |
| 25 | ||
| 26 | #hnmain tbody tr td[bgcolor] {
| |
| 27 | _outline: solid 4px red; | |
| 28 | background-color: #ffbbaa !important; | |
| 29 | background-color: #886600 !important; | |
| 30 | color: #fff; | |
| 31 | } | |
| 32 | ||
| 33 | /* Fonts */ | |
| 34 | ||
| 35 | /* ... change this to define *overall* font size */ | |
| 36 | ||
| 37 | body {
| |
| 38 | font-size: medium; | |
| 39 | } | |
| 40 | ||
| 41 | /* ... derived values */ | |
| 42 | ||
| 43 | td { font-size: 1em; }
| |
| 44 | ||
| 45 | .default { font-size: 1em; }
| |
| 46 | .admin {font-size: 0.85em; }
| |
| 47 | .title { font-size: 1.1em; }
| |
| 48 | .subtext { font-size: 0.8em; }
| |
| 49 | .yclinks { font-size: 0.8em; }
| |
| 50 | .pagetop { font-size: 1em; }
| |
| 51 | .comhead { font-size: 0.9em; }
| |
| 52 | .comment { font-size: 1em; }
| |
| 53 | .morelink { font-size: 0.8em; }
| |
| 54 | ||
| 55 | input, textarea {
| |
| 56 | font-size: 1em; | |
| 57 | font-family: courier, monospace; | |
| 58 | } | |
| 59 | ||
| 60 | ||
| 61 | /* 'Graphs */ | |
| 62 | ||
| 63 | .default p {
| |
| 64 | line-height: 1.4; | |
| 65 | margin: 0.75rem 0 0 0; | |
| 66 | } | |
| 67 | ||
| 68 | /* Elements */ | |
| 69 | ||
| 70 | .pagetop, | |
| 71 | .pagetop a, | |
| 72 | .pagetop a:visited {
| |
| 73 | color: #e8e8e8; | |
| 74 | } | |
| 75 | ||
| 76 | .votelinks { padding-right: 0.5em;}
| |
| 77 | .votearrow {
| |
| 78 | background-size: 0.8rem; | |
| 79 | height: 0.8rem; | |
| 80 | width: 0.8rem; | |
| 81 | } | |
| 82 | ||
| 83 | .title, .titleline, .title a {
| |
| 84 | color: #000 !important; | |
| 85 | color: #fff !important; | |
| 86 | } | |
| 87 | ||
| 88 | .comhead, .comhead a {
| |
| 89 | color: #999; | |
| 90 | color: #fff; | |
| 91 | _background: red; | |
| 92 | } | |
| 93 | ||
| 94 | .comhead a:link {
| |
| 95 | color: #000; | |
| 96 | color: #888; | |
| 97 | color: #fff; | |
| 98 | } | |
| 99 | ||
| 100 | .toptext {
| |
| 101 | color: #000; | |
| 102 | color: #fff; | |
| 103 | margin-top: 2em; | |
| 104 | } | |
| 105 | ||
| 106 | /* Story metadata / subtext */ | |
| 107 | ||
| 108 | .subtext, | |
| 109 | .subtext a, | |
| 110 | .subtext a:visited {
| |
| 111 | color: #888; | |
| 112 | color: #ccc; | |
| 113 | } | |
| 114 | ||
| 115 | .comhead, | |
| 116 | .comhead a, | |
| 117 | .comhead a:link, | |
| 118 | .subtext a:visited {
| |
| 119 | color: #666; | |
| 120 | color: #999; | |
| 121 | } | |
| 122 | ||
| 123 | .comment {
| |
| 124 | padding-top: 0.75em; | |
| 125 | } | |
| 126 | ||
| 127 | .subtext .hnuser, | |
| 128 | .subtext a.hnuser, | |
| 129 | .comhead .hnuser, | |
| 130 | .comhead a:link.hnuser {
| |
| 131 | color: #666; | |
| 132 | color: #bbb; | |
| 133 | font-weight: bold; | |
| 134 | padding-right: 0.75em; | |
| 135 | } | |
| 136 | ||
| 137 | .yclinks, | |
| 138 | .yclinks a, | |
| 139 | .yclinks a:link, | |
| 140 | .yclinks a:visited {
| |
| 141 | color: #666; | |
| 142 | color: #ccc; | |
| 143 | } | |
| 144 | ||
| 145 | .yclinks a:hover {
| |
| 146 | color: #000; | |
| 147 | color: #fff; | |
| 148 | text-decoration: underline; | |
| 149 | } | |
| 150 | ||
| 151 | .subtext a:hover, | |
| 152 | .comhead a:hover {
| |
| 153 | color: #000; | |
| 154 | color: #fff; | |
| 155 | } | |
| 156 | ||
| 157 | [id^="unv_"] {
| |
| 158 | font-style: italic; | |
| 159 | } | |
| 160 | ||
| 161 | .navs a[href^="flag?"] {
| |
| 162 | font-weight: bold; | |
| 163 | } | |
| 164 | ||
| 165 | textarea {
| |
| 166 | background-color: #333; | |
| 167 | color: #fff; | |
| 168 | } | |
| 169 | ||
| 170 | input {
| |
| 171 | background-color: #333; | |
| 172 | border: solid 1px #888; | |
| 173 | color: #ccc; | |
| 174 | border-radius: 2px; | |
| 175 | } | |
| 176 | ||
| 177 | /* User page profile description */ | |
| 178 | [op="user"] td {
| |
| 179 | color: #000; | |
| 180 | color: #fff; | |
| 181 | } | |
| 182 | ||
| 183 | /* Comments */ | |
| 184 | ||
| 185 | .c00, .c00 a:link {
| |
| 186 | color: #fff; | |
| 187 | } | |
| 188 | ||
| 189 | ||
| 190 | /* The one place that hasn’t been corrupted by capitalism: Space!!! */ | |
| 191 | ||
| 192 | #pagespace {height: 3em !important; }
| |
| 193 | .spacer { height: 0.75em !important; }
| |
| 194 | .subtext { padding-top: 0.3em; }
| |
| 195 | ||
| 196 | ||
| 197 | /* Comment spacing */ | |
| 198 | ||
| 199 | .athing .default {
| |
| 200 | padding-bottom: 1.25em; | |
| 201 | padding-top: 0.25em; | |
| 202 | margin-top: 0.25em; | |
| 203 | border-top: solid 1px #ddd; | |
| 204 | border-top: solid 1px #888; | |
| 205 | } | |
| 206 | ||
| 207 | ||
| 208 | /* Highlight current page selection in pagetop */ | |
| 209 | [op="newest"] .pagetop [href="newest"], | |
| 210 | [op="threads"] .pagetop [href^="threads"], | |
| 211 | [op="front"] .pagetop [href="front"], | |
| 212 | [op="newcomments"] .pagetop [href="newcomments"], | |
| 213 | [op="ask"] .pagetop [href="ask"], | |
| 214 | [op="show"] .pagetop [href="show"], | |
| 215 | [op="jobs"] .pagetop [href="jobs"], | |
| 216 | [op="submit"] .pagetop [href="submit"], | |
| 217 | [op="user"] .pagetop [href^="user"] {
| |
| 218 | font-weight: bold; | |
| 219 | color: #fff; | |
| 220 | color: #000; | |
| 221 | } | |
| 222 | ||
| 223 | ||
| 224 | /* More link / button ... */ | |
| 225 | .morespace + tr .title {
| |
| 226 | margin: 0.6em; | |
| 227 | padding: 0.6em; | |
| 228 | } | |
| 229 | ||
| 230 | .morelink {
| |
| 231 | font-size: 0.85em; | |
| 232 | border: solid 2px #ffbbaa; | |
| 233 | border-radius: 0.25em; | |
| 234 | padding: 0.2em; | |
| 235 | margin: 0.3em; | |
| 236 | background: #f0f0f0; | |
| 237 | background: #404040; | |
| 238 | } | |
| 239 | ||
| 240 | /* Profile page ... increase spacing between elements / links to avoid misfires */ | |
| 241 | ||
| 242 | .profileform td {
| |
| 243 | padding-bottom: 1em; | |
| 244 | } | |
| 245 |