View difference between Paste ID: HmHBWwjE and 6PF3dCXH
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