├── README.md ├── LICENSE ├── .csscomb.json └── reddit.css /README.md: -------------------------------------------------------------------------------- 1 | **Update:** With the new (as of mid-2018) Reddit redesign, I'm no longer maintaining this userstyle. 2 | 3 | ---- 4 | 5 | Super WIP for now. Lots of work to do to normalize subreddits with custom designs. 6 | 7 | Screenshot (to be updated): 8 | 9 | ![screen shot 2016-05-10 at 9 42 03 am](https://cloud.githubusercontent.com/assets/6104/15148540/a0edeec8-1693-11e6-834c-7346a91e702b.png) 10 | 11 | ## How to use 12 | 13 | #### With userstyle extension 14 | 15 | * Chrome: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en 16 | * Firefox: https://addons.mozilla.org/en-US/firefox/addon/stylish/ (be sure to place the CSS inside the `@-moz-document domain("reddit.com")` block) 17 | * Safari: http://code.grid.in.th/ 18 | 19 | Copy-pasta the styles from `reddit.css` into a new userstyle in your favorite browser. Be sure to specify that it apply to sites beginning with `https://reddit.com`. 20 | 21 | ## License 22 | 23 | Licensed under [MIT](LICENSE). 24 | 25 | ![screen shot 2016-05-03 at 10 20 46 am](https://cloud.githubusercontent.com/assets/6104/15148629/1fb960de-1694-11e6-909f-0cfb4fa0432c.png) 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Mark Otto 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "always-semicolon": true, 3 | "block-indent": 2, 4 | "color-case": "lower", 5 | "color-shorthand": true, 6 | "element-case": "lower", 7 | "leading-zero": true, 8 | "quotes": "double", 9 | "space-after-colon": " ", 10 | "space-after-combinator": 1, 11 | "space-after-opening-brace": "\n", 12 | "space-before-closing-brace": "\n", 13 | "space-before-colon": "", 14 | "space-before-combinator": 1, 15 | "space-before-selector-delimiter": "", 16 | "unitless-zero": true, 17 | "sort-order": [ 18 | "position", 19 | "top", 20 | "right", 21 | "bottom", 22 | "left", 23 | "z-index", 24 | "display", 25 | "float", 26 | "width", 27 | "min-width", 28 | "max-width", 29 | "height", 30 | "min-height", 31 | "max-height", 32 | "box-sizing", 33 | "padding", 34 | "padding-top", 35 | "padding-right", 36 | "padding-bottom", 37 | "padding-left", 38 | "margin", 39 | "margin-top", 40 | "margin-right", 41 | "margin-bottom", 42 | "margin-left", 43 | "overflow", 44 | "overflow-x", 45 | "overflow-y", 46 | "clip", 47 | "clear", 48 | "font", 49 | "font-family", 50 | "font-size", 51 | "font-style", 52 | "font-weight", 53 | "font-variant", 54 | "font-size-adjust", 55 | "font-stretch", 56 | "font-effect", 57 | "font-emphasize", 58 | "font-emphasize-position", 59 | "font-emphasize-style", 60 | "font-smooth", 61 | "hyphens", 62 | "line-height", 63 | "color", 64 | "text-align", 65 | "text-align-last", 66 | "text-emphasis", 67 | "text-emphasis-color", 68 | "text-emphasis-style", 69 | "text-emphasis-position", 70 | "text-decoration", 71 | "text-indent", 72 | "text-justify", 73 | "text-outline", 74 | "text-overflow", 75 | "text-overflow-ellipsis", 76 | "text-overflow-mode", 77 | "text-shadow", 78 | "text-transform", 79 | "text-wrap", 80 | "letter-spacing", 81 | "word-break", 82 | "word-spacing", 83 | "word-wrap", 84 | "tab-size", 85 | "white-space", 86 | "vertical-align", 87 | "list-style", 88 | "list-style-position", 89 | "list-style-type", 90 | "list-style-image", 91 | "pointer-events", 92 | "fill", 93 | "fill-opacity", 94 | "stroke", 95 | "stroke-opacity", 96 | "stroke-width", 97 | "shape-rendering", 98 | "cursor", 99 | "visibility", 100 | "zoom", 101 | "flex-direction", 102 | "flex-order", 103 | "flex-pack", 104 | "flex-align", 105 | "table-layout", 106 | "empty-cells", 107 | "caption-side", 108 | "border-spacing", 109 | "border-collapse", 110 | "content", 111 | "quotes", 112 | "counter-reset", 113 | "counter-increment", 114 | "resize", 115 | "user-select", 116 | "nav-index", 117 | "nav-up", 118 | "nav-right", 119 | "nav-down", 120 | "nav-left", 121 | "background", 122 | "background-color", 123 | "background-image", 124 | "filter", 125 | "background-repeat", 126 | "background-attachment", 127 | "background-position", 128 | "background-position-x", 129 | "background-position-y", 130 | "background-clip", 131 | "background-origin", 132 | "background-size", 133 | "border", 134 | "border-color", 135 | "border-style", 136 | "border-width", 137 | "border-top", 138 | "border-top-color", 139 | "border-top-style", 140 | "border-top-width", 141 | "border-right", 142 | "border-right-color", 143 | "border-right-style", 144 | "border-right-width", 145 | "border-bottom", 146 | "border-bottom-color", 147 | "border-bottom-style", 148 | "border-bottom-width", 149 | "border-left", 150 | "border-left-color", 151 | "border-left-style", 152 | "border-left-width", 153 | "border-radius", 154 | "border-top-left-radius", 155 | "border-top-right-radius", 156 | "border-bottom-right-radius", 157 | "border-bottom-left-radius", 158 | "border-image", 159 | "border-image-source", 160 | "border-image-slice", 161 | "border-image-width", 162 | "border-image-outset", 163 | "border-image-repeat", 164 | "outline", 165 | "outline-width", 166 | "outline-style", 167 | "outline-color", 168 | "outline-offset", 169 | "box-shadow", 170 | "opacity", 171 | "transition", 172 | "transition-delay", 173 | "transition-timing-function", 174 | "transition-duration", 175 | "transition-property", 176 | "transform", 177 | "transform-origin", 178 | "animation", 179 | "animation-name", 180 | "animation-duration", 181 | "animation-fill-mode", 182 | "animation-play-state", 183 | "animation-timing-function", 184 | "animation-delay", 185 | "animation-iteration-count", 186 | "animation-direction" 187 | ] 188 | } 189 | -------------------------------------------------------------------------------- /reddit.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Colors 4 | ------------------- 5 | link: #007bc7 6 | visited: #497c9c 7 | text: #444 8 | light text: #767676 9 | */ 10 | 11 | * { 12 | box-sizing: border-box; 13 | } 14 | 15 | /* Hide it */ 16 | .sr-list, 17 | #sr-more-link, 18 | .goldvertisement, 19 | .sidecontentbox, 20 | #ad_main, 21 | .listing-chooser, 22 | .trending-subreddits { 23 | display: none !important; 24 | } 25 | 26 | body { 27 | margin: 10px 5% !important; 28 | font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif !important; 29 | background-color: #fff !important; 30 | background-image: none !important; 31 | } 32 | 33 | body > .content { 34 | padding: 0 !important; 35 | margin: 0 !important; 36 | border: 0 !important; 37 | } 38 | 39 | body > .content:before { 40 | display: none !important; 41 | } 42 | 43 | textarea { 44 | background-color: #fcfcfc !important; 45 | border-color: #ccc !important; 46 | border-radius: 3px !important; 47 | } 48 | 49 | #sr-header-area { 50 | margin-bottom: 10px; 51 | text-transform: lowercase !important; 52 | background-color: #fff !important; 53 | border-bottom: 0 !important; 54 | height: 18px !important; 55 | } 56 | 57 | #sr-header-area .srdrop { 58 | font-size: 12px !important; 59 | border-color: #ccc !important; 60 | padding-left: 0 !important; 61 | } 62 | 63 | #sr-header-area .srdrop .selected { 64 | margin: 0 !important; 65 | padding: 0 20px 0 0 !important; 66 | } 67 | 68 | #sr-header-area .srdrop a { 69 | padding: 4px 10px !important; 70 | color: #007bc7 !important; 71 | } 72 | 73 | .srdrop .choice.bottom-option { 74 | border-top: solid 1px #ccc !important; 75 | } 76 | 77 | #sr-header-area .title { 78 | font-size: 14px !important; 79 | } 80 | 81 | #siteTable { 82 | margin-right: 0 !important; 83 | padding-top: 20px !important; 84 | } 85 | 86 | /* Site header */ 87 | #header { 88 | height: auto !important; 89 | margin: 0 0 12px 0 !important; 90 | background-color: transparent !important; 91 | background-image: none !important; 92 | border: 0 !important; 93 | box-shadow: none !important; 94 | line-height: normal !important; 95 | } 96 | 97 | /* Show default logo instead of custom one */ 98 | #header-img { 99 | position: relative !important; 100 | top: auto !important; 101 | display: inline-block !important; 102 | width: 120px !important; 103 | height: 40px !important; 104 | padding: 0 !important; 105 | margin: 0 0 3px 0 !important; 106 | margin-bottom: 3px !important; 107 | text-indent: -9999px !important; 108 | visibility: visible !important; 109 | content: url() !important; 110 | background-color: #fff !important; 111 | background-image: url(https://www.redditstatic.com/about/assets/reddit-logo.png) !important; 112 | background-repeat: no-repeat !important; 113 | background-position: 0 0 !important; 114 | background-size: 120px 40px !important; 115 | border: 0 !important; 116 | } 117 | 118 | #header-img-a { 119 | display: inline-block !important; 120 | vertical-align: bottom !important; 121 | } 122 | 123 | #header .tabmenu { 124 | display: none !important; 125 | } 126 | 127 | #header-bottom-left { 128 | position: relative !important; 129 | top: 0 !important; 130 | left: 0 !important; 131 | display: inline-block; 132 | height: 45px !important; 133 | padding: 0 !important; 134 | margin: 0 !important; 135 | font-size: 12px !important; 136 | line-height: normal !important; 137 | background-color: #fff !important; 138 | background-image: none !important; 139 | } 140 | 141 | #header-bottom-left .pagename { 142 | position: relative !important; 143 | top: 2px !important; 144 | left: 0 !important; 145 | height: 45px !important; 146 | margin: 0 !important; 147 | font-size: 22px !important; 148 | font-weight: normal !important; 149 | font-variant: normal !important; 150 | color: #999 !important; 151 | text-transform: lowercase !important; 152 | } 153 | 154 | #header-bottom-left .pagename a { 155 | position: relative !important; 156 | top: 0 !important; 157 | left: 0 !important; 158 | display: inline !important; 159 | margin: 0 !important; 160 | padding: 0 !important; 161 | font-family: inherit !important; 162 | font-size: 22px !important; 163 | font-weight: normal !important; 164 | text-shadow: none !important; 165 | vertical-align: baseline !important; 166 | background-color: #fff !important; 167 | transition: none !important; 168 | } 169 | 170 | #header-bottom-left .pagename a:before { 171 | display: none !important; 172 | } 173 | 174 | span[class="hover pagename redditname"] a { 175 | opacity: 1 !important; 176 | } 177 | 178 | #header-bottom-left .pagename a { 179 | margin-left: 0 !important; 180 | color: #999 !important; 181 | background-image: none !important; 182 | } 183 | 184 | #header-bottom-left .redditname a { 185 | float: none !important; 186 | text-indent: 0 !important; 187 | } 188 | 189 | #header-bottom-right { 190 | position: absolute !important; 191 | top: -1px !important; 192 | right: 0 !important; 193 | display: inline-block !important; 194 | font-size: 14px !important; 195 | line-height: 12px !important; 196 | text-align: right !important; 197 | background-color: transparent !important; 198 | border: 0 !important; 199 | max-width: none !important; 200 | height: 74px !important; 201 | } 202 | 203 | #header-bottom-right .user { 204 | position: relative !important; 205 | top: 0 !important; 206 | right: 0 !important; 207 | text-align: left !important; 208 | min-width: 0 !important; 209 | padding: 0 !important; 210 | line-height: inherit !important; 211 | color: #444 !important; 212 | } 213 | 214 | #header-bottom-right .user .userkarma { 215 | color: #6f7c82 !important; 216 | font-weight: normal !important; 217 | font-size: 14px !important; 218 | } 219 | 220 | #header-bottom-right a { 221 | color: #007bc7 !important; 222 | background-image: none !important; 223 | text-indent: 0 !important; 224 | top: 0 !important; 225 | transition: none !important; 226 | } 227 | 228 | .logout { 229 | margin-left: 12px !important; 230 | } 231 | 232 | #header-bottom-right .separator, 233 | #mail, 234 | .pref-lang { 235 | display: none !important; 236 | } 237 | 238 | 239 | /* Get search box out of sidebar */ 240 | .side { 241 | float: none !important; 242 | width: 100% !important; 243 | height: 0 !important; 244 | padding: 0 !important; 245 | margin: 0 !important; 246 | } 247 | 248 | .side > .spacer { 249 | display: none !important; 250 | margin: 0 !important; 251 | } 252 | 253 | .side > .spacer:first-child { 254 | display: block !important; 255 | height: 0 !important; 256 | padding: 0 !important; 257 | } 258 | 259 | .side:after { 260 | display: none !important; 261 | } 262 | 263 | #search { 264 | position: relative !important; 265 | top: 0 !important; 266 | z-index: 100 !important; 267 | float: right !important; 268 | width: 33% !important; 269 | padding: 0 !important; 270 | margin: -45px 0 0 0 !important; 271 | background-image: none !important; 272 | border: 0 !important; 273 | } 274 | 275 | #search input[type=text] { 276 | width: 100% !important; 277 | padding: 6px 25px 6px 6px !important; 278 | margin: 0 !important; 279 | font-size: 13px !important; 280 | color: #333 !important; 281 | background-color: #fcfcfc !important; 282 | background-image: none !important; 283 | border: solid 1px #ccc !important; 284 | border-radius: 3px !important; 285 | box-shadow: none !important; 286 | } 287 | 288 | #search #searchexpando { 289 | width: 100% !important; 290 | background-color: #f1f7fd !important; 291 | border-radius: 3px !important; 292 | } 293 | 294 | /* Advanced search box */ 295 | .infobar { 296 | background-color: #f1f7fd !important; 297 | border: solid 1px #cee3f8 !important; 298 | border-radius: 3px !important; 299 | } 300 | 301 | /* Listings */ 302 | .listing-page .link { 303 | padding: 0 !important; 304 | border-bottom: 0 !important; 305 | } 306 | 307 | .linkflair-amas { 308 | background-color: inherit !important; 309 | } 310 | 311 | .link.last-clicked { 312 | background-color: inherit !important; 313 | } 314 | 315 | .entry { 316 | margin-bottom: 15px !important; 317 | padding: 0 !important; 318 | line-height: 1.4 !important; 319 | border-bottom: 0 !important; 320 | } 321 | 322 | .thumbnail { 323 | float: right !important; 324 | } 325 | 326 | .title, 327 | .thing .title { 328 | font-size: 18px !important; 329 | line-height: inherit !important; 330 | font-family: inherit !important; 331 | color: #007bc7 !important; 332 | } 333 | 334 | .thing.stickied a.title { 335 | color: #007bc7 !important; 336 | } 337 | 338 | .thing.stickied .entry li .comments, 339 | .link .entry .buttons li a.comments { 340 | color: #888 !important; 341 | font-weight: normal !important; 342 | } 343 | 344 | .title:visited, 345 | .thing .title:visited { 346 | color: #577b8e !important; 347 | } 348 | 349 | .domain { 350 | display: none !important; 351 | } 352 | 353 | .tagline { 354 | margin-top: 0 !important; 355 | font-family: inherit !important; 356 | transition: none !important; 357 | font-size: 14px !important; 358 | color: #767676 !important; 359 | } 360 | 361 | .tagline a.author { 362 | margin-right: 0 !important; 363 | color: #767676 !important; 364 | } 365 | 366 | .tagline a.author:hover { 367 | color: #222 !important; 368 | } 369 | 370 | .flair-sc { 371 | margin-left: 3px !important; 372 | } 373 | 374 | .tagline a.subreddit { 375 | color: #007bc7 !important; 376 | } 377 | 378 | .flat-list { 379 | margin: 0 !important; 380 | padding: 0 !important; 381 | font-size: 12px !important; 382 | } 383 | 384 | .flat-list a.comments { 385 | font-weight: normal !important; 386 | color: #767676 !important; 387 | } 388 | 389 | .last-clicked { 390 | border: 0 !important; 391 | } 392 | 393 | .thumbnail, 394 | .expando-button, 395 | .rank, 396 | .linkflairlabel, 397 | .share, 398 | .link-save-button, 399 | .link-save-button + li, 400 | .report-button { 401 | display: none !important; 402 | } 403 | 404 | /* Voting controls */ 405 | .link .midcol { 406 | width: 50px !important; 407 | height: auto !important; 408 | margin: 4px 0 0 !important; 409 | } 410 | 411 | .link .score { 412 | margin-top: 2px !important; 413 | font-size: 14px !important; 414 | font-weight: normal !important; 415 | color: #6f7c82 !important; 416 | } 417 | 418 | .arrow { 419 | background-position: 0 0 !important; 420 | background-size: 14px 15px !important; 421 | width: 15px !important; 422 | height: 15px !important; 423 | margin: 0 auto !important; 424 | } 425 | 426 | .arrow.up, 427 | .arrow.up:hover { 428 | background-image: url(http://jasonlong.github.io/reddit-tighty-whities/images/vote-up.png) !important; 429 | transition: none !important; 430 | background-color: transparent !important; 431 | } 432 | 433 | .arrow.down, 434 | .arrow.down:hover { 435 | background-image: url(http://jasonlong.github.io/reddit-tighty-whities/images/vote-down.png) !important; 436 | transition: none !important; 437 | background-color: transparent !important; 438 | } 439 | 440 | .arrow.down:after { 441 | display: none !important; 442 | } 443 | 444 | .arrow.upmod { 445 | background-image: url(http://jasonlong.github.io/reddit-tighty-whities/images/vote-up-active.png) !important; 446 | transition: none !important; 447 | } 448 | 449 | .arrow.downmod { 450 | background-image: url(http://jasonlong.github.io/reddit-tighty-whities/images/vote-down-active.png) !important; 451 | transition: none !important; 452 | } 453 | /* Posts */ 454 | .usertext-body { 455 | font-size: 15px !important; 456 | } 457 | 458 | .usertext-body .md { 459 | padding: 0 !important; 460 | color: #444 !important; 461 | background-color: #fff !important; 462 | border: 0 !important; 463 | } 464 | 465 | div.thing.link { 466 | padding: 0 !important; 467 | border-bottom: 0 !important; 468 | } 469 | 470 | .panestack-title { 471 | padding-top: 12px !important; 472 | margin-right: 0 !important; 473 | border-top: solid 1px #ddd !important; 474 | border-bottom: 0 !important; 475 | } 476 | 477 | .panestack-title .title { 478 | font-size: 14px !important; 479 | } 480 | 481 | /* Comments */ 482 | .morecomments a { 483 | font-size: 12px !important; 484 | } 485 | 486 | /* New comments */ 487 | .comment-visits-box { 488 | padding: 0 !important; 489 | margin-bottom: 30px !important; 490 | margin-left: 10px !important; 491 | background-color: #fff !important; 492 | border: 0 !important; 493 | } 494 | 495 | .comment-visits-box .title { 496 | font-size: 14px !important; 497 | font-weight: normal !important; 498 | color: #ff4500 !important; 499 | } 500 | 501 | .new-comment .usertext-body { 502 | padding: 0 !important; 503 | border: 0 !important; 504 | } 505 | 506 | .new-comment .usertext-body .md { 507 | color: #ff4500 !important; 508 | } 509 | 510 | --------------------------------------------------------------------------------