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 |