├── .gitignore ├── README.md ├── modern-hacker-news-dark.png ├── modern-hacker-news-dark.user.css ├── modern-hacker-news-light.png └── modern-hacker-news-light.user.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Modern Hacker News Userstyle 2 | 3 | This is based on a fork from https://github.com/Gigacore/hackernews-userstyles (the repo this was originally forked from seems to no longer exist) to fix some issues it had. 4 | 5 | ![](modern-hacker-news-light.png) 6 |   7 | ![](modern-hacker-news-dark.png) 8 | 9 | ## Installation 10 | 11 | 1. Install the [Stylus](https://add0n.com/stylus.html) extension for Chrome, Firefox or Opera. 12 | 2. Install the theme by clicking here for either the [light](https://raw.githubusercontent.com/losuler/hacker-news-userstyle/master/modern-hacker-news-light.user.css) or [dark](https://raw.githubusercontent.com/losuler/hacker-news-userstyle/master/modern-hacker-news-dark.user.css) theme (should open in Stylus). 13 | -------------------------------------------------------------------------------- /modern-hacker-news-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/losuler/hacker-news-userstyle/7c148ff8e481d91c52503dc7088140bbd1917d98/modern-hacker-news-dark.png -------------------------------------------------------------------------------- /modern-hacker-news-dark.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name Modern Hacker News Dark 3 | @namespace github.com/losuler/hacker-news-userstyle 4 | @homepageURL https://github.com/losuler/hacker-news-userstyle 5 | @description A modern dark Hacker News userstyle 6 | @updateURL https://github.com/losuler/hacker-news-userstyle/blob/master/modern-hacker-news-dark.user.css 7 | @version 1.1.0 8 | @preprocessor stylus 9 | ==/UserStyle== */ 10 | @-moz-document url-prefix("https://news.ycombinator.com") { 11 | /* reset */ 12 | body, 13 | td, 14 | table, 15 | input, 16 | textarea, 17 | .pagetop, 18 | * { 19 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 20 | font-weight: 400; 21 | -webkit-font-smoothing: antialiased; 22 | } 23 | 24 | body { 25 | background: #171717; 26 | margin: 0; 27 | } 28 | 29 | .pagetop, 30 | .pagetop a { 31 | color: rgb(255, 255, 255, .5); 32 | } 33 | 34 | .brandname { 35 | display: none; 36 | } 37 | 38 | table { 39 | font-size: 14px; 40 | } 41 | 42 | #hnmain { 43 | width: 800px; 44 | background: transparent; 45 | } 46 | 47 | #hnmain > tbody > tr:last-child img { 48 | display: none; 49 | } 50 | 51 | #hnmain > tbody > tr:last-child table td { 52 | background: transparent; 53 | } 54 | 55 | #hnmain > tbody > tr > td { 56 | background: transparent; 57 | } 58 | 59 | #hnmain > tbody > tr > td[bgcolor] > table { 60 | padding: 0 0 20px 0 !important; 61 | } 62 | 63 | #hnmain > tbody > tr > td[bgcolor] > table > tbody > tr > td { 64 | font-weight: 400; 65 | } 66 | 67 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a { 68 | background: #F06D3C; 69 | color: #fff; 70 | height: 50px; 71 | line-height: 50px; 72 | width: 50px; 73 | display: block; 74 | text-align: center; 75 | } 76 | 77 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a:after { 78 | content: "HN"; 79 | font-weight: 700; 80 | } 81 | 82 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a img { 83 | display: none; 84 | } 85 | 86 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td:nth-child(2) .pagetop { 87 | color: rgba(246, 0, 0, 0); 88 | padding-left: 10px; 89 | font-size: 14px; 90 | } 91 | 92 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td .pagetop { 93 | font-size: 14px; 94 | } 95 | 96 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td .pagetop a:hover { 97 | border-bottom: 1px solid rgba(255, 255, 255, .25); 98 | padding-bottom: 2px; 99 | } 100 | 101 | .spacer { 102 | display: none; 103 | } 104 | 105 | .title, 106 | .sitebit, 107 | .subtext { 108 | font-family: inherit; 109 | font-size: inherit; 110 | text-align: left; 111 | position: relative; 112 | color: #fff 113 | } 114 | 115 | .itemlist { 116 | width: 100%; 117 | } 118 | 119 | .votelinks a { 120 | display: block; 121 | position: relative; 122 | left: -12px; 123 | top: -2px; 124 | } 125 | 126 | .votearrow { 127 | background-image: none; 128 | margin: 0; 129 | width: 100%; 130 | } 131 | 132 | .votearrow:after { 133 | content: "▲"; 134 | display: block; 135 | background: #F06D3C; 136 | color: #fff; 137 | text-align: center; 138 | width: 14px; 139 | height: 14px; 140 | line-height: 13px; 141 | border-radius: 100%; 142 | font-size: 8px; 143 | -webkit-transition: all 0.15s; 144 | } 145 | 146 | .votearrow:hover:after { 147 | -webkit-transform: scale(1.3); 148 | } 149 | 150 | .athing + tr .subtext { 151 | position: relative; 152 | } 153 | 154 | .athing + tr .subtext { 155 | border-bottom: 1px solid rgba(255, 255, 255, .1); 156 | padding-bottom: 16px; 157 | } 158 | 159 | .athing td { 160 | padding: 16px 0 10px; 161 | } 162 | 163 | .athing .title:first-child { 164 | padding-left: 30px; 165 | } 166 | 167 | .athing .title a:link, 168 | .athing .title a:visited { 169 | color: rgb(255, 255, 255); 170 | font-size: 18px; 171 | } 172 | 173 | .athing .title .rank { 174 | text-align: center; 175 | width: 30px; 176 | height: 30px; 177 | line-height: 30px; 178 | border-radius: 100%; 179 | display: inline-block; 180 | background: #3b3b3b; 181 | border: 1px solid rgba(255, 255, 255, .1); 182 | font-weight: 700; 183 | font-size: 12px; 184 | color: #8b8b8b; 185 | position: absolute; 186 | left: 0; 187 | } 188 | 189 | .athing .title .comhead { 190 | display: none; 191 | } 192 | 193 | .subtext { 194 | color: rgba(255, 255, 255, .5); 195 | } 196 | 197 | .subtext a:link, 198 | .subtext a:visited { 199 | color: rgba(255, 255, 255, .5) !important; 200 | } 201 | 202 | .subtext a:hover { 203 | text-decoration: none; 204 | border-bottom: 1px solid rgba(255, 255, 255, .25); 205 | padding-bottom: 2px; 206 | } 207 | 208 | .comment-tree .default .comhead { 209 | font-size: 14px !important; 210 | color: #ddd; 211 | } 212 | 213 | .comment-tree .comment { 214 | font-size: 14px !important; 215 | color: #ddd; 216 | line-height: 1.42em; 217 | } 218 | 219 | #hnmain table { 220 | width: 100%; 221 | } 222 | 223 | #hnmain form textarea { 224 | display: block; 225 | width: 100%; 226 | box-sizing: border-box; 227 | background: #3b3b3b; 228 | border: 1px solid rgba(255, 255, 255, .1); 229 | font-weight: 400; 230 | font-size: 14px; 231 | padding: 10px; 232 | outline: none; 233 | } 234 | 235 | #hnmain form input[type=submit] { 236 | border: solid 1px #F06D3C; 237 | height: 32px; 238 | background: transparent; 239 | border-radius: 32px; 240 | padding: 0 12px; 241 | color: #F06D3C; 242 | cursor: pointer; 243 | } 244 | 245 | .itemlist tr:last-child .title { 246 | padding: 10px 0; 247 | } 248 | 249 | .itemlist tr:last-child .title a { 250 | border: solid 1px #F06D3C; 251 | height: 32px; 252 | line-height: 32px; 253 | background: rgba(0, 0, 0, 0); 254 | border-radius: 32px; 255 | padding: 0 12px; 256 | color: #F06D3C; 257 | display: inline-block; 258 | } 259 | 260 | td.ind { 261 | width: 0px; 262 | } 263 | 264 | td.votelinks { 265 | width: 0px; 266 | } 267 | 268 | .yclinks a:link, 269 | .yclinks a:visited { 270 | color: #8B8B8B; 271 | } 272 | 273 | .pagetop a:link, 274 | .pagetop a:visited { 275 | color: #8B8B8B; 276 | } 277 | 278 | a:visited { 279 | color: #515151; 280 | } 281 | 282 | a:link { 283 | color: #8B8B8B; 284 | } 285 | 286 | body > a, 287 | b, 288 | form > table > tbody > tr > td { 289 | color: rgb(255, 255, 255, 0.5); 290 | } 291 | 292 | .c00, 293 | .c00 a:link { 294 | color: #ddd; 295 | } 296 | .c5a, 297 | .c5a a:link, 298 | .c5a a:visited { 299 | color: #ccc; 300 | } 301 | .c73, 302 | .c73 a:link, 303 | .c73 a:visited { 304 | color: #bbb; 305 | } 306 | .c82, 307 | .c82 a:link, 308 | .c82 a:visited { 309 | color: #aaa; 310 | } 311 | .c88, 312 | .c88 a:link, 313 | .c88 a:visited { 314 | color: #999; 315 | } 316 | .c9c, 317 | .c9c a:link, 318 | .c9c a:visited { 319 | color: #888; 320 | } 321 | .cae, 322 | .cae a:link, 323 | .cae a:visited { 324 | color: #777; 325 | } 326 | .cbe, 327 | .cbe a:link, 328 | .cbe a:visited { 329 | color: #666; 330 | } 331 | .cce, 332 | .cce a:link, 333 | .cce a:visited { 334 | color: #555; 335 | } 336 | .cdd, 337 | .cdd a:link, 338 | .cdd a:visited { 339 | color: #444; 340 | } 341 | 342 | input, 343 | select, 344 | textarea { 345 | color: #ddd; 346 | box-sizing: border-box; 347 | background: #3b3b3b; 348 | border: 1px solid rgba(255, 255, 255, .1); 349 | font-weight: 400; 350 | font-size: 14px; 351 | padding: 5px; 352 | outline: none; 353 | } 354 | 355 | img[src="y18.svg"] { 356 | display: none !important; 357 | } 358 | } 359 | -------------------------------------------------------------------------------- /modern-hacker-news-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/losuler/hacker-news-userstyle/7c148ff8e481d91c52503dc7088140bbd1917d98/modern-hacker-news-light.png -------------------------------------------------------------------------------- /modern-hacker-news-light.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name Modern Hacker News Light 3 | @namespace github.com/losuler/hacker-news-userstyle 4 | @homepageURL https://github.com/losuler/hacker-news-userstyle 5 | @description A modern light Hacker News userstyle 6 | @updateURL https://github.com/losuler/hacker-news-userstyle/blob/master/modern-hacker-news-light.user.css 7 | @version 1.1.0 8 | @preprocessor stylus 9 | ==/UserStyle== */ 10 | @-moz-document url-prefix("https://news.ycombinator.com") { 11 | /* reset */ 12 | body, 13 | td, 14 | table, 15 | input, 16 | textarea, 17 | .pagetop, 18 | * { 19 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 20 | font-weight: 400; 21 | -webkit-font-smoothing: antialiased; 22 | } 23 | 24 | body { 25 | background: #fafafa; 26 | margin: 0; 27 | } 28 | 29 | .pagetop, 30 | .pagetop a { 31 | color: rgba(0, 0, 0, 0.5); 32 | } 33 | 34 | .brandname { 35 | display: none; 36 | } 37 | 38 | table { 39 | font-size: 14px; 40 | } 41 | 42 | #hnmain { 43 | width: 800px; 44 | background: transparent; 45 | } 46 | 47 | #hnmain > tbody > tr:last-child img { 48 | display: none; 49 | } 50 | 51 | #hnmain > tbody > tr:last-child table td { 52 | background: transparent; 53 | } 54 | 55 | #hnmain > tbody > tr > td { 56 | background: transparent; 57 | } 58 | 59 | #hnmain > tbody > tr > td[bgcolor] > table { 60 | padding: 0 0 20px 0 !important; 61 | } 62 | 63 | #hnmain > tbody > tr > td[bgcolor] > table > tbody > tr > td { 64 | font-weight: 400; 65 | } 66 | 67 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a { 68 | background: #F06D3C; 69 | color: #fff; 70 | height: 50px; 71 | line-height: 50px; 72 | width: 50px; 73 | display: block; 74 | text-align: center; 75 | } 76 | 77 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a:after { 78 | content: "HN"; 79 | font-weight: 700; 80 | } 81 | 82 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a img { 83 | display: none; 84 | } 85 | 86 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td:nth-child(2) .pagetop { 87 | color: #fafafa; 88 | padding-left: 10px; 89 | font-size: 14px; 90 | } 91 | 92 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td .pagetop { 93 | font-size: 14px; 94 | } 95 | 96 | #hnmain > tbody > tr > td[bgcolor] > table tbody tr td .pagetop a:hover { 97 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 98 | padding-bottom: 2px; 99 | } 100 | 101 | .spacer { 102 | display: none; 103 | } 104 | 105 | .title, 106 | .sitebit, 107 | .subtext { 108 | font-family: inherit; 109 | font-size: inherit; 110 | text-align: left; 111 | position: relative; 112 | } 113 | 114 | .itemlist { 115 | width: 100%; 116 | } 117 | 118 | .votelinks a { 119 | display: block; 120 | position: relative; 121 | left: -12px; 122 | top: -2px; 123 | } 124 | 125 | .votearrow { 126 | background-image: none; 127 | margin: 0; 128 | width: 100%; 129 | } 130 | 131 | .votearrow:after { 132 | content: "▲"; 133 | display: block; 134 | background: #F06D3C; 135 | color: #fff; 136 | text-align: center; 137 | width: 14px; 138 | height: 14px; 139 | line-height: 13px; 140 | border-radius: 100%; 141 | font-size: 8px; 142 | -webkit-transition: all 0.15s; 143 | } 144 | 145 | .votearrow:hover:after { 146 | -webkit-transform: scale(1.3); 147 | } 148 | 149 | .athing + tr .subtext { 150 | position: relative; 151 | } 152 | 153 | .athing + tr .subtext { 154 | border-bottom: 1px solid rgba(0, 0, 0, 0.05); 155 | padding-bottom: 16px; 156 | } 157 | 158 | .athing td { 159 | padding: 16px 0 10px; 160 | } 161 | 162 | .athing .title:first-child { 163 | padding-left: 30px; 164 | } 165 | 166 | .athing .title a:link, 167 | .athing .title a:visited { 168 | color: rgba(0, 0, 0, 0.9); 169 | font-size: 18px; 170 | } 171 | 172 | .athing .title .rank { 173 | text-align: center; 174 | width: 30px; 175 | height: 30px; 176 | line-height: 30px; 177 | border-radius: 100%; 178 | display: inline-block; 179 | background: #fff; 180 | border: 1px solid rgba(0, 0, 0, 0.05); 181 | font-weight: 700; 182 | font-size: 12px; 183 | color: #555; 184 | position: absolute; 185 | left: 0; 186 | } 187 | 188 | .athing .title .comhead { 189 | display: none; 190 | } 191 | 192 | .subtext { 193 | color: rgba(0, 0, 0, 0.5); 194 | } 195 | 196 | .subtext a:link, 197 | .subtext a:visited { 198 | color: rgba(0, 0, 0, 0.5) !important; 199 | } 200 | 201 | .subtext a:hover { 202 | text-decoration: none; 203 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 204 | padding-bottom: 2px; 205 | } 206 | 207 | .comment-tree .default .comhead { 208 | font-size: 14px !important; 209 | color: rgba(0, 0, 0, 0.5); 210 | } 211 | 212 | .comment-tree .comment { 213 | font-size: 14px !important; 214 | color: rgba(0, 0, 0, 0.5); 215 | line-height: 1.42em; 216 | } 217 | 218 | #hnmain table { 219 | width: 100%; 220 | } 221 | 222 | #hnmain form textarea { 223 | display: block; 224 | width: 100%; 225 | box-sizing: border-box; 226 | background: #fff; 227 | border: 1px solid rgba(0, 0, 0, 0.05); 228 | font-weight: 400; 229 | font-size: 14px; 230 | padding: 10px; 231 | outline: none; 232 | } 233 | 234 | #hnmain form input[type=submit] { 235 | border: solid 1px #F06D3C; 236 | height: 32px; 237 | background: transparent; 238 | border-radius: 32px; 239 | padding: 0 12px; 240 | color: #F06D3C; 241 | cursor: pointer; 242 | } 243 | 244 | .itemlist tr:last-child .title { 245 | padding: 10px 0; 246 | } 247 | 248 | .itemlist tr:last-child .title a { 249 | border: solid 1px #F06D3C; 250 | height: 32px; 251 | line-height: 32px; 252 | background: transparent; 253 | border-radius: 32px; 254 | padding: 0 12px; 255 | color: #F06D3C; 256 | display: inline-block; 257 | } 258 | 259 | td.ind { 260 | width: 0px; 261 | } 262 | 263 | td.votelinks { 264 | width: 0px; 265 | } 266 | 267 | input, 268 | select, 269 | textarea { 270 | background: #fff; 271 | border: 1px solid rgba(0, 0, 0, .05); 272 | font-weight: 400; 273 | font-size: 14px; 274 | padding: 5px; 275 | outline: none; 276 | } 277 | 278 | img[src="y18.svg"] { 279 | display: none !important; 280 | } 281 | } 282 | --------------------------------------------------------------------------------