├── post.gif ├── front.gif ├── README.md └── reddit-no-frills-dark.css /post.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicnic-cc/reddit-no-frills-dark/HEAD/post.gif -------------------------------------------------------------------------------- /front.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nicnic-cc/reddit-no-frills-dark/HEAD/front.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Reddit No Frills Dark+ 2 | 3 | Simple, clean dark reddit theme. 4 | 5 | Completely revamped version of [itsamoreh/reddit-no-frills](https://github.com/itsamoreh/reddit-no-frills), it has a styled sidebar and multireddit chooser. 6 | Sidebar shows up on hover (icon in the top right. 7 | 8 | ## Usage 9 | Add code to your browser's user theme manually or [install with stylish here](https://userstyles.org/styles/133277/reddit-no-frills-dark). 10 | 11 | Make sure to turn off subreddit styles in reddit settings: 12 | ~~~ 13 | Settings / Display / Allow subreddits to show me custom themes 14 | ~~~~ 15 | 16 | Let me know if anything needs fixing. 17 | 18 | Tested on Chrome, Vivaldi, Safari and Firefox. 19 | 20 | ## Changelog 21 | ### 06/10/2017 Update 22 | * Reddit logo is back 23 | 24 | ### 03/07/2017 Update 25 | * Adjusted colors for links and visited links 26 | 27 | ### 16/05/2017 Update 28 | * Fixed 'continue this thread' links being cut off 29 | * Small changes for flair & nsfw stamps styling 30 | 31 | ### 25/04/2017 Update 32 | * Main content takes up 90% of the viewport when you browse Reddit on vertical screens 33 | * Fixed ["Load more comments"](https://forum.userstyles.org/discussion/55265/) being cut off 34 | 35 | ### 17/02/2017 Update 36 | * Image thumbnails are now displayed correctly covering the whole square without being squished 37 | * [flair] and [spoiler] stamp styling 38 | * Fixed box-shadow color in forms 39 | 40 | ### 09/02/2017 Update 41 | * Reddit logo in .SVG 42 | * Adjusted margin under paragraphs - posts and comments should be easier to read. 43 | 44 | ### 12/01/2017 Update 45 | * RES compatibility thanks to [Andy Cormack](https://forum.userstyles.org/discussion/53287/) 46 | * Message icons styling 47 | 48 | ### 14/12/2016 Update 49 | * Changed icon color to red for nsfw posts 50 | * [spoiler] tags blur text, unblurs on mouse hover 51 | * Replaced px with % for body, looks better on hi-res screens 52 | * Replaced reddit logo 53 | * Added some on hover effects 54 | * General fixes 55 | 56 | # Screenshots 57 | 58 | ![frontpage](front.gif) 59 | 60 | 61 | ![post+comment page](post.gif) 62 | -------------------------------------------------------------------------------- /reddit-no-frills-dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | BY: @melangue 3 | BASED ON WORK BY: Amor Kumar - https://userstyles.org/styles/126393/reddit-no-frills 4 | WITH PIECES FROM: https://userstyles.org/styles/88599/reddit-stilig-mod 5 | 6 | */ 7 | 8 | 9 | body { 10 | background-color: #1a1a1a !important; 11 | color: #d2d2d2 !important; 12 | font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 13 | } 14 | ::-webkit-scrollbar { 15 | max-width: 10px !important; 16 | max-height: 10px !important; 17 | background: #1d1d1d !important; 18 | } 19 | ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { 20 | background: #1d1d1d !important; 21 | } 22 | ::-webkit-scrollbar-thumb:hover { 23 | background: rgba(249,150,84, .8) !important; 24 | } 25 | ::-webkit-scrollbar-thumb { 26 | background: rgba(175, 175, 175, .5) !important; 27 | } 28 | ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { 29 | background: #1d1d1d !important; 30 | } 31 | ::selection { 32 | background-color: #F99654 !important; 33 | color: #fff !important; 34 | } 35 | 36 | 37 | /* 38 | // CONTENT 39 | //------------------------------- 40 | */ 41 | 42 | 43 | .content { 44 | max-width: 60% !important; 45 | margin: 10px auto !important; 46 | padding: 5px 20px; 47 | } 48 | @media (max-width: 60rem) { 49 | .content { 50 | max-width: 90%!important; 51 | } 52 | } 53 | 54 | /* 55 | // HEADER 56 | //------------------------------- 57 | */ 58 | .pagename { 59 | font-family: monospace; 60 | font-size: 20px !important; 61 | text-transform: lowercase; 62 | font-variant: normal; 63 | color: #999; 64 | padding-right: 20px; 65 | } 66 | .pagename a { 67 | color: #999; 68 | } 69 | .pagename a:hover { 70 | color: #ccc; 71 | text-decoration: none; 72 | } 73 | #header .pagename a:before { 74 | content: "/r/"; 75 | letter-spacing: 1px; 76 | text-transform: lowercase; 77 | } 78 | #header { 79 | background-color: #1a1a1a; 80 | max-width: 60% !important; 81 | margin: 0 auto; 82 | border-bottom: 4px solid #2b2b2b; 83 | } 84 | #header-img.default-header, 85 | #header-img { 86 | width: 0; 87 | padding-left: 40px; 88 | margin-left: 10px; 89 | height: 40px; 90 | background-image: url(http://redditblog.com/wp-content/themes/vip/reddit-blog/assets/css/../../images/sprite.svg); 91 | background-position: -480px -56px; 92 | filter: grayscale(100%); 93 | -webkit-filter: grayscale(100%); 94 | transition: 0.5s filter; 95 | } 96 | #header-img.default-header { 97 | margin-top: 20px; 98 | margin-bottom: 2px; 99 | margin-right: 10px; 100 | } 101 | #header-img.default-header:hover, 102 | #header-img:hover { 103 | filter: grayscale(35%); 104 | -webkit-filter: grayscale(35%); 105 | } 106 | #sr-header-area { 107 | background-color: #1a1a1a; 108 | border-bottom: none; 109 | margin-bottom: 25px; 110 | } 111 | #sr-header-area a { 112 | color: #999999; 113 | } 114 | #sr-header-area a:hover { 115 | color: #ccc; 116 | } 117 | #sr-header-area .selected a { 118 | color: #d2d2d2; 119 | } 120 | .flat-list li a.gold { 121 | color: #F7D56F; 122 | } 123 | .flat-list li.selected a { 124 | color: #d2d2d2; 125 | } 126 | .tabmenu li a { 127 | background-color: #1a1a1a; 128 | } 129 | .tabmenu li a:hover { 130 | color: #ccc; 131 | } 132 | .tabmenu li.selected a { 133 | color: #d2d2d2; 134 | background-color: #1a1a1a; 135 | border: 0px; 136 | border-bottom: 4px solid #999; 137 | } 138 | #header-bottom-right { 139 | background-color: transparent; 140 | } 141 | #header-bottom-right a { 142 | color: #999; 143 | } 144 | #header-bottom-right a:hover { 145 | color: #ccc; 146 | text-decoration: none; 147 | } 148 | .user .userkarma { 149 | color: #F99654; 150 | } 151 | #mail.nohavemail { 152 | filter: invert(100%) brightness(150%); 153 | -webkit-filter: invert(95%) brightness(130%); 154 | } 155 | #mail.havemail { 156 | filter: invert(90%) brightness(100%) hue-rotate(190deg); 157 | -webkit-filter: invert(90%) brightness(100%) hue-rotate(190deg); 158 | } 159 | .message-count { 160 | background-color: transparent; 161 | } 162 | a.message-count:before { 163 | content: "("; 164 | color: gray!important; 165 | } 166 | a.message-count { 167 | font-size: 10px; 168 | color: #F99654!important; 169 | } 170 | a.message-count:after { 171 | content: ")"; 172 | color: gray!important; 173 | } 174 | #modmail.nohavemail { 175 | filter: grayscale(100%) invert(90%) brightness(110%); 176 | -webkit-filter: grayscale(100%) invert(90%) brightness(110%); 177 | } 178 | #modmail.havemail { 179 | filter: invert(90%) brightness(110%) hue-rotate(190deg); 180 | -webkit-filter: invert(90%) brightness(110%) hue-rotate(190deg); 181 | } 182 | #new_modmail.nohavemail { 183 | -webkit-filter: brightness(50%); 184 | filter: brightness(50%); 185 | } 186 | #new_modmail.havemail { 187 | -webkit-filter: brightness(70%) hue-rotate(255deg); 188 | filter: brightness(70%) hue-rotate(255deg); 189 | } 190 | /* fix for multireddit chooser margin-bug */ 191 | body.with-listing-chooser #header .tabmenu { 192 | margin-left: 0px; 193 | } 194 | 195 | 196 | /* 197 | // TEXT AREAS 198 | //------------------------------- 199 | */ 200 | input { 201 | background-color: #1a1a1a!important; 202 | color: #d2d2d2!important; 203 | border: 1px solid #2b2b2b!important; 204 | border-radius: 0px!important; 205 | padding: 6px 6px!important; 206 | outline: none!important; 207 | } 208 | .rounded { 209 | font-size: smaller; 210 | border-radius: 0px; 211 | } 212 | .white-field, .delete-field { 213 | background-color: #202020; 214 | } 215 | 216 | 217 | /* 218 | // TOP INFO BOXES 219 | //------------------------------- 220 | */ 221 | /* LIVE THREAD BOX */ 222 | .happening-now-wrap .rank-spacer, 223 | .happening-now-wrap .midcol-spacer { 224 | display: none; 225 | } 226 | .happening-now-wrap .midcol-spacer { 227 | display: none; 228 | } 229 | .happening-now-logo { 230 | display: none; 231 | } 232 | .happening-now { 233 | background-color: #1a1a1a; 234 | border: 1px solid #84CC8F; 235 | color: #999999; 236 | } 237 | .happening-now .state::before { 238 | background: #ED6A5A; 239 | } 240 | 241 | /* INFOBAR */ 242 | .reddit-infobar { 243 | background-color: #1a1a1a; 244 | border: 0px; 245 | } 246 | .reddit-infobar.with-icon { 247 | background-color: transparent; 248 | border: 0px; 249 | } 250 | .archived-infobar.with-icon::before { 251 | display: none; 252 | } 253 | .reddit-infobar.with-icon { 254 | padding: 5px; 255 | min-height: 5px !important; 256 | } 257 | .reddit-infobar .md { 258 | text-align: center; 259 | max-width: 100%; 260 | margin: 0 auto; 261 | } 262 | .reddit-infobar .md p { 263 | margin: 0; 264 | color: #ED6A5A; 265 | } 266 | .gold-accent { 267 | background-color: #1a1a1a; 268 | border: 1px solid #F7D56F; 269 | border-radius: 0px; 270 | color: #222222 !important; 271 | } 272 | .gold-accent h1, 273 | .gold-accent th { 274 | color: #222222 !important; 275 | font-family: normal x-small verdana, arial, helvetica, sans-serif; 276 | } 277 | .gold-accent .pretty-form input#name[type="text"] { 278 | border-radius: 0px; 279 | } 280 | .gold-accent .pretty-form button { 281 | background-color: #1a1a1a; 282 | border: 1px solid #222; 283 | border-radius: 0px; 284 | color: #222; 285 | } 286 | 287 | /* 288 | // MAIN PAGE LOOKS 289 | //------------------------------- 290 | */ 291 | 292 | .midcol { 293 | margin-left: 0px; 294 | } 295 | .link .rank { 296 | display: none; 297 | } 298 | .nsfw-stamp, 299 | .nsfw-stamp, .spoiler-stamp { 300 | color: #963c3c; 301 | font-weight: bold; 302 | border: 1px solid #963c3c; 303 | border-radius: 0; 304 | } 305 | .flair, .linkflairlabel { 306 | margin: 0 .5em; 307 | padding: 1px 5px; 308 | border: 1px solid #555; 309 | background: transparent; 310 | color: #888; 311 | font-weight: bold; 312 | border-radius: 0; 313 | vertical-align: middle; 314 | } 315 | .md code, 316 | .md pre { 317 | background-color: #292929!important; 318 | border: 1px solid #F0F0F0; 319 | } 320 | .thing.stickied.link a.title { 321 | color: #7ABC84; 322 | } 323 | .usertext.grayed .usertext-body { 324 | background-color: #212121; 325 | } 326 | .link .entry { 327 | padding: 14px 32px 14px 0; 328 | margin-left: 0; 329 | } 330 | .link .title { 331 | margin: -2px 0 0; 332 | line-height: 1.33; 333 | } 334 | .tagline { 335 | padding-top: 3px; 336 | margin-bottom: 10px; 337 | font-size: 12px; 338 | } 339 | .usertext-body.may-blank-within.md-container { 340 | margin-top: -5px; 341 | } 342 | .link .midcol { 343 | margin: 15px 14px 0 5px; 344 | overflow: visible; 345 | height: 60px; 346 | } 347 | .link .score { 348 | text-align: center; 349 | color: #666; 350 | padding: 5px 0 3px 0; 351 | } 352 | .thumbnail { 353 | width: 64px; 354 | height: 64px; 355 | margin: 16px 16px 0 0; 356 | position: relative; 357 | } 358 | a.thumbnail img { 359 | position: absolute; 360 | width: 100%; 361 | height: 100%; 362 | object-fit: cover; 363 | } 364 | .thumbnail.self, 365 | .thumbnail.default, 366 | .thumbnail.spoiler, 367 | .interstitial-image { 368 | -webkit-filter: invert(90%) brightness(130%); 369 | filter: invert(90%) brightness(130%); 370 | } 371 | .thumbnail.nsfw { 372 | -webkit-filter: sepia(50%) hue-rotate(130deg) invert(100%) brightness(160%); 373 | filter: sepia(50%) hue-rotate(130deg) invert(100%) brightness(160%); 374 | } 375 | /* .over18 { 376 | background-color: #632222; 377 | } */ 378 | .arrow { 379 | margin: 2px 0px 0px 0px; 380 | height: 14px; 381 | display: block; 382 | cursor: pointer; 383 | background-position: center center; 384 | background-repeat: no-repeat; 385 | width: 15px; 386 | margin-left: auto; 387 | margin-right: auto; 388 | outline: none; 389 | filter: brightness(50%); 390 | transition: 0.5s all; 391 | } 392 | .arrow.up:hover { 393 | background-position: -105px -1618px; 394 | filter: brightness(80%); 395 | } 396 | .arrow.down:hover { 397 | background-position: -63px -1618px; 398 | filter: brightness(80%); 399 | } 400 | .link.last-clicked { 401 | border: 0px; 402 | } 403 | .trending-subreddits strong { 404 | color: #7ABC84!important; 405 | } 406 | .nextprev a, .next-suggestions a { 407 | color: #9b9b9b; 408 | background: #2b2b2b; 409 | padding: 5px 20px; 410 | line-height: 20px; 411 | border: none; 412 | border-radius: 0; 413 | font-size: 13px; 414 | } 415 | .nextprev a:hover, .next-suggestions a:hover { 416 | color: #ccc; 417 | border: none; 418 | background: #2b2b2b; 419 | } 420 | .nav-buttons { 421 | margin-top: 30px; 422 | } 423 | 424 | /* 425 | // DROPDOWN - SUBREDDIT & BY DATE 426 | //------------------------------- 427 | */ 428 | .drop-choices { 429 | text-transform: uppercase; 430 | } 431 | .drop-choices a.choice:hover { 432 | background-color: #2b2b2b !important; 433 | } 434 | #sr-header-area .drop-choices.srdrop, 435 | .dropdown.srdrop .selected.title { 436 | color: #999; 437 | font-size: 10px; 438 | } 439 | #sr-header-area .drop-choices.srdrop, .dropdown.srdrop .selected.title:hover { 440 | color: #ccc; 441 | } 442 | .drop-choices { 443 | background-color: #1a1a1a; 444 | border: none; 445 | } 446 | .srdrop .choice.bottom-option { 447 | border-top: 1px solid #333; 448 | } 449 | .drop-choices a.choice { 450 | cursor: pointer; 451 | padding: 8px; 452 | display: block; 453 | font-size: 10px; 454 | } 455 | 456 | /* 457 | // LINKS 458 | //------------------------------- 459 | */ 460 | 461 | a { 462 | color: #f1f1f1; 463 | } 464 | a:hover { 465 | color: #ccc; 466 | } 467 | [class*="md"] a:visited { 468 | color:#555 !important; 469 | border-bottom: 1px dotted #666; 470 | } 471 | 472 | /* sidebar & post comments LINK color */ 473 | .md a { 474 | color: #f1f1f1; 475 | border-bottom: 1px dotted #ddd; 476 | } 477 | .md a:hover { 478 | color: #ccc; 479 | text-decoration: none; 480 | } 481 | 482 | /* frontpage LINK color */ 483 | .thing .title { 484 | color: #ccc; 485 | font-weight: 600; 486 | } 487 | .thing .title:hover { 488 | color: #eee; 489 | } 490 | .thing .title:visited { 491 | color: #666; 492 | } 493 | 494 | .link:hover { 495 | background-color: #151515; 496 | } 497 | /* title domain link */ 498 | .domain a:hover { 499 | text-decoration: none; 500 | } 501 | /* comment share save hide report */ 502 | .entry .buttons a:hover { 503 | color: #ccc; 504 | text-decoration: none; 505 | } 506 | .link .entry .buttons a.comments { 507 | color: #999999; 508 | font-weight: 600; 509 | } 510 | .link .entry .buttons a.comments:hover { 511 | color: #ccc; 512 | } 513 | .entry .buttons li a { 514 | color: #666666; 515 | font-weight: 400; 516 | } 517 | .expando-button { 518 | display: none; 519 | } 520 | 521 | 522 | /* USERNAME COLOR ON LINKS AND COMMENTS 523 | */ 524 | .tagline .submitter, 525 | .search-result-meta .submitter { 526 | color: #69C3EA; 527 | font-weight: 400; 528 | } 529 | .tagline a, 530 | .search-result-meta a { 531 | color: #F99654; 532 | } 533 | /* OP USERNAME COLOR */ 534 | .author a, 535 | .moderator a { 536 | color: #e5e5e5 !important; 537 | background-color: transparent !important; 538 | } 539 | /* ADMIN USERNAME */ 540 | 541 | .tagline .admin, 542 | .search-result-meta .admin { 543 | color: #e5e5e5; 544 | font-weight: 800; 545 | } 546 | /* MOD USERNAME */ 547 | 548 | .thing .tagline .author.moderator { 549 | background-color: #1a1a1a !important; 550 | color: #e5e5e5 !important; 551 | } 552 | .tagline .moderator, 553 | .green, 554 | .search-result-meta .moderator { 555 | color: #e5e5e5 !important; 556 | } 557 | 558 | /* 559 | // POST PAGE 560 | //------------------------------- 561 | */ 562 | 563 | .md p { 564 | margin-bottom: 15px; 565 | } 566 | .md textarea, .md .-text, .md p, .md pre>code, .md th, .md td, .md li { 567 | line-height: 1.5; 568 | } 569 | 570 | /* permalink embed save give gold list */ 571 | ul.flat-list.buttons { 572 | margin-top: -7px; 573 | } 574 | 575 | 576 | button, html input[type="button"], input[type="reset"], input[type="submit"] { 577 | color: #9b9b9b; 578 | background: #2b2b2b; 579 | padding: 5px 20px; 580 | line-height: 20px; 581 | border: none; 582 | font-size: 13px; 583 | } 584 | button, html input[type="button"], input[type="reset"], input[type="submit"]:hover { 585 | color: #ccc;} 586 | 587 | .comment .usertext .md { 588 | color: #cccccc; 589 | } 590 | .entry { 591 | padding-left: 5px; 592 | } 593 | .link .usertext-body .md { 594 | background: #202020; 595 | color: #d2d2d2; 596 | border-radius: 0px; 597 | border: none; 598 | } 599 | .new-comment .md :not(pre)>code, .link .md :not(pre)>code, .usertext.border .md :not(pre)>code, .new-comment .md pre, .link .md pre, .usertext.border .md pre .md code{ 600 | background: #202020; 601 | border: 0px; 602 | } 603 | a[href$="/spoiler"] { 604 | color: rgba(255,255,255,0)!important; 605 | text-shadow: 1px 0 12px #ccc,-1px 0 12px #ccc; 606 | transition: 0.5s all; 607 | } 608 | a[href$="/spoiler"]:hover { 609 | color: rgba(255,255,255,1)!important; 610 | text-shadow: none; 611 | } 612 | /* code background */ 613 | .md pre { 614 | background-color: #1a1a1a; 615 | border: 1px solid #2b2b2b; 616 | } 617 | .comment .expand { 618 | color: #222222; 619 | background: #202020; 620 | } 621 | .morecomments { 622 | display: inline-block; 623 | height: 20px; 624 | } 625 | .deepthread { 626 | display: inline-block; 627 | height: 20px; 628 | } 629 | .tagline .stickied-tagline, 630 | .search-result-meta .stickied-tagline { 631 | color: #7ABC84; 632 | } 633 | .panestack-title { 634 | border-bottom: none; 635 | } 636 | .panestack-title .title { 637 | color: #666666; 638 | font-size: 12px; 639 | } 640 | textarea { 641 | font-size: small!important; 642 | background-color: #1a1a1a; 643 | color: #d2d2d2; 644 | border: 1px solid #2b2b2b!important; 645 | outline: none; 646 | padding: 6px; 647 | } 648 | .comment .child { 649 | margin-top: 10px; 650 | margin-left: 15px; 651 | border-left: 1px solid #333; 652 | } 653 | .morecomments a { 654 | color: #d2d2d2; 655 | } 656 | .morecomments a:hover { 657 | color: #ccc; 658 | text-decoration: none; 659 | } 660 | .deepthread a { 661 | color: #9b9b9b; 662 | } 663 | .deepthread a:hover { 664 | color: #ccc; 665 | text-decoration: none; 666 | } 667 | .deepthread:after { 668 | display: none; 669 | } 670 | .panestack-title a.title-button.gold { 671 | border: 1px solid #F7D56F; 672 | border-radius: 0px; 673 | background-color: #1a1a1a; 674 | } 675 | .commentarea .menuarea { 676 | color: #666666!important; 677 | font-size: 12px; 678 | } 679 | .comment .expand { 680 | color: #666666; 681 | } 682 | .md td, .md th { 683 | border-color: #666666; 684 | } 685 | /* quote */ 686 | .md blockquote { 687 | padding: 0 8px; 688 | margin-left: 5px; 689 | border-left: 2px solid #666666; 690 | background: #292929; 691 | } 692 | .md blockquote, .md del { 693 | color: #999; 694 | } 695 | 696 | .usertext.border .usertext-body { 697 | background-color: #333; 698 | } 699 | /* comment background color */ 700 | .commentarea .sitetable .comment { 701 | background-color: #202020; 702 | margin-bottom: 15px; 703 | } 704 | .commentarea .child .thing { 705 | margin: 10px 15px 0px; 706 | } 707 | 708 | /* 709 | // MESSAGES 710 | //------------------------------- 711 | */ 712 | 713 | .menuarea { 714 | color: #666666; 715 | border: none; 716 | } 717 | .message { 718 | background: #202020; 719 | } 720 | .message .tagline, 721 | .message .search-result-meta { 722 | color: #999999; 723 | } 724 | .message.message-reply:not(.threaded) .entry, .message.message-parent:not(.threaded) .entry { 725 | border-left: 1px solid #333; 726 | } 727 | .message.message-parent>.entry .md, .message.message-reply>.entry .md, .message.message-parent>.entry blockquote, .message.message-reply>.entry blockquote, .message.message-parent>.entry del, .message.message-reply>.entry del { 728 | color: #ccc; 729 | } 730 | .message.message-reply.recipient>.entry .head, .message.message-parent.recipient>.entry .head { 731 | color: #888; 732 | } 733 | .message .subject .correspondent { 734 | color: #9b9b9b; 735 | background: #2b2b2b; 736 | padding: 5px 20px; 737 | line-height: 20px; 738 | border: none; 739 | font-size: 13px; 740 | } 741 | .roundfield { 742 | background-color: #1a1a1a; 743 | } 744 | .md { 745 | color: #d2d2d2; 746 | background-color: inherit; 747 | border: 0px!important; 748 | border-radius: 0px!important; 749 | } 750 | .h2 a { 751 | color: #ccc; 752 | font-weight: 600; 753 | } 754 | .h2 a:hover { 755 | color: #eee; 756 | } 757 | .h2 a:visited { 758 | color: #666; 759 | } 760 | .message.new>.entry { 761 | background-color: #222; 762 | border: 0px; 763 | } 764 | 765 | /* EDIT SUBREDDITS PAGE */ 766 | .sr-interest-bar { 767 | background: #202020 url(https://www.redditstatic.com/snoo-upside-down.png) 15px top no-repeat; 768 | border: none; 769 | } 770 | .sr-interest-bar .bubble { 771 | background: #202020; 772 | } 773 | .sr-interest-bar .bubble:after { 774 | display: none; 775 | } 776 | .sr-interest-bar .query-box { 777 | border: 0px; 778 | } 779 | .bubble::after { 780 | display: none; 781 | } 782 | .searchpane { 783 | background-color: #1a1a1a!important; 784 | border: 0px!important; 785 | } 786 | 787 | /* OTHER 788 | */ 789 | 790 | .error { 791 | color: #ED6A5A; 792 | } 793 | .searchpane { 794 | margin: 5px auto; 795 | padding: 20px; 796 | background: #F9F9F9; 797 | background-image: none; 798 | border: 1px solid #5F99CF; 799 | } 800 | .raisedbox h4 { 801 | text-align: center; 802 | } 803 | 804 | .infobar { 805 | background-color: #1a1a1a; 806 | border: 0px solid; 807 | margin: 0 auto; 808 | margin-bottom: 22px; 809 | } 810 | 811 | .subreddit .usertext .md { 812 | background-color: #202020; 813 | } 814 | 815 | .sr-interest-bar .subscribe { 816 | background-image: none; 817 | border: 0px; 818 | padding: 0px; 819 | } 820 | 821 | .subscription-box .title { 822 | font-size: small; 823 | color: #cccccc; 824 | } 825 | 826 | .c-btn { 827 | font-weight: normal; 828 | } 829 | .c-btn-primary { 830 | color: #9b9b9b; 831 | background-color: #2b2b2b; 832 | border-radius: 0px; 833 | border: none; 834 | padding: 5px 20px; 835 | } 836 | 837 | .c-btn-primary:hover { 838 | color: #ccc; 839 | background-color: #2b2b2b; 840 | } 841 | 842 | .modal-body { 843 | background-color: #1a1a1a; 844 | } 845 | .modal-title { 846 | color: #cccccc; 847 | } 848 | .split-panel-section.split-panel-divider { 849 | border-right: 0px!important; 850 | } 851 | .rc-anchor-light { 852 | background: #202020; 853 | border: 0px; 854 | border-radius: 0px; 855 | color: #cccccc; 856 | } 857 | a.author { 858 | color: #F99654!important; 859 | } 860 | 861 | a.search-subreddit-link.may-blank { 862 | color: #F99654!important; 863 | } 864 | 865 | .search-result-group-header { 866 | border-bottom: 2px solid #2b2b2b; 867 | } 868 | 869 | .combined-search-page .search-subscribe-button .add { 870 | background-color: #202020; 871 | border: 0px; 872 | } 873 | 874 | .search-result :link, .search-result :link>mark { 875 | color: #cccccc; 876 | } 877 | 878 | .search-result :visited, .search-result :visited>mark { 879 | color: #666666; 880 | } 881 | 882 | /* SIMPLIFY TOP BAR */ 883 | .sr-list > span:nth-child(2), 884 | ul.sr-bar:nth-child(3), 885 | #sr-more-link { 886 | display: none; 887 | } 888 | /* TOP AD */ 889 | .organic-listing { 890 | display: none; 891 | } 892 | /* FOOTER */ 893 | .footer-parent, 894 | .debuginfo { 895 | display: none; 896 | } 897 | 898 | 899 | 900 | /* 901 | // SIDEBAR 902 | // visibility on hover 903 | //------------------------------- 904 | */ 905 | 906 | .side { 907 | background: #1a1a1a !important; 908 | color: #d2d2d2; 909 | position: fixed !important; 910 | padding: 10px 20px 10px 10px !important; 911 | float: right !important; 912 | width: 300px !important; 913 | right: -400px !important; 914 | z-index: 1000 !important; 915 | transition-duration: 0.4s !important; 916 | top: 55px !important; 917 | overflow-y: auto !important; 918 | height: 100% !important; 919 | border: none; 920 | } 921 | .side::before { 922 | content: "◨"; 923 | color: #aaa; 924 | text-align: center !important; 925 | background: transparent!important; 926 | height: 100% !important; 927 | max-width: 30px !important; 928 | min-width: 30px !important; 929 | position: fixed !important; 930 | top: -3px !important; 931 | right: 0% !important; 932 | padding-top: 15px !important; 933 | padding-left: 8px !important; 934 | padding-right: 8px !important; 935 | margin-right: 0px !important; 936 | z-index: 5; 937 | transition: 0.5s color ease; 938 | font-size: 14px !important 939 | } 940 | .side:hover::before { 941 | color: #111; 942 | /*background: #2b2b2b !important;*/ 943 | transition: 0.5s color ease; 944 | } 945 | .side:hover { 946 | position: fixed !important; 947 | right: -20px !important; 948 | } 949 | .sidebox .spacer { 950 | display: none; 951 | } 952 | .side .md { 953 | background: #1a1a1a; 954 | color: #d2d2d2; 955 | padding-top: 30px; 956 | } 957 | .md hr { 958 | background: #2b2b2b; 959 | } 960 | .subscribers { 961 | text-align: right; 962 | display: block 963 | } 964 | .linkinfo { 965 | padding: 10px; 966 | border: 0px; 967 | border-radius: 0px; 968 | background-color: #202020; 969 | } 970 | .users-online:before { 971 | display: none; 972 | } 973 | .users-online { 974 | text-align: right; 975 | display: block 976 | } 977 | 978 | .titlebox h1:before { 979 | content: "/r/"; 980 | letter-spacing: 1px; 981 | text-transform: lowercase; 982 | } 983 | 984 | .titlebox h1 a { 985 | color: #d2d2d2; 986 | } 987 | .titlebox h1 redditname { 988 | padding-top:30px; 989 | } 990 | .titlebox form.toggle { 991 | display: none; 992 | } 993 | .titlebox .tagline { 994 | display: none; 995 | } 996 | .titlebox .bottom { 997 | border-top: 1px solid #2b2b2b; 998 | padding-bottom: 50px; 999 | } 1000 | .sidecontentbox .title h1 { 1001 | color: #666666; 1002 | } 1003 | .sidecontentbox .content { 1004 | border: none; 1005 | } 1006 | .sidecontentbox { 1007 | margin-top: 30px; 1008 | } 1009 | ul.content { 1010 | max-width: 100% !important; 1011 | margin: 0; 1012 | } 1013 | 1014 | /* MULTIREDDIT HOVER BUBBLE */ 1015 | .hover-bubble-multi-selector label { 1016 | background: #202020; 1017 | } 1018 | .hover-bubble.multi-selector strong { 1019 | color: #999; 1020 | } 1021 | .titlebox .fancy-toggle-button { 1022 | display: block; 1023 | } 1024 | .fancy-toggle-button .active { 1025 | border: none; 1026 | border-radius: 0px; 1027 | padding: 5px 20px; 1028 | color: #9b9b9b; 1029 | background: #2b2b2b; 1030 | float: left; 1031 | } 1032 | .fancy-toggle-button .active:hover { 1033 | color: #ccc; 1034 | } 1035 | .hover-bubble.multi-selector { 1036 | color: #d2d2d2; 1037 | background: #1a1a1a; 1038 | border: none; 1039 | box-shadow: none; 1040 | margin-right: -6px; 1041 | } 1042 | .hover-bubble.multi-selector label:hover { 1043 | background: #202020; 1044 | } 1045 | .hover-bubble.multi-selector label a { 1046 | background-color: inherit; 1047 | border: 0px; 1048 | border-radius: 0px; 1049 | line-height: 11px; 1050 | } 1051 | .hover-bubble.anchor-right:before, .hover-bubble.anchor-left:before, .hover-bubble.anchor-right:after, .hover-bubble.anchor-left:after { 1052 | display:none; 1053 | } 1054 | /* add subreddits to multireddit textarea */ 1055 | .side .recommend-box .rec-item { 1056 | background-color: #202020; 1057 | border: 0px; 1058 | font-size: 1.0em; 1059 | margin: 2px; 1060 | padding: 6px; 1061 | } 1062 | .side .recommend-box .rec-item button.add { 1063 | background-color: #2d2d2d; 1064 | } 1065 | .side .recommend-box .endoflist { 1066 | background-color: #202020; 1067 | } 1068 | 1069 | /* submit post buttons */ 1070 | .nub { 1071 | display: none; 1072 | } 1073 | .morelink { 1074 | font-weight: normal; 1075 | background-color: #2b2b2b!important; 1076 | background-image: none; 1077 | border: none; 1078 | padding: 5px 12px; 1079 | } 1080 | .morelink:hover { 1081 | background-color: #2b2b2b!important; 1082 | background-image: none; 1083 | } 1084 | .morelink a { 1085 | letter-spacing: 0.5px; 1086 | font-size: smaller; 1087 | text-transform: lowercase; 1088 | color: #9b9b9b; 1089 | } 1090 | .morelink a:hover { 1091 | color: #ccc; 1092 | } 1093 | .sidebox.submit.submit-text { 1094 | display: block; 1095 | width: 48%; 1096 | padding-right: 10px; 1097 | } 1098 | .sidebox.submit.submit-link { 1099 | display: block; 1100 | width: 48%; 1101 | float: right; 1102 | } 1103 | 1104 | /* reddit gold hide */ 1105 | .goldvertisement { 1106 | display: none; 1107 | } 1108 | 1109 | /* searchexpando */ 1110 | #searchexpando, #moresearchinfo { 1111 | background: #202020; 1112 | border: 0px; 1113 | border-radius: 0px; 1114 | } 1115 | .search-expando-button { 1116 | color: #666666; 1117 | } 1118 | .search-expando.collapsed:before { 1119 | background: none; 1120 | } 1121 | 1122 | #search input[type=submit] { 1123 | border: 0px!important; 1124 | } 1125 | 1126 | .combined-search-page #search input[type=text] { 1127 | border-radius: 0px; 1128 | } 1129 | 1130 | #search input[type="text"] { 1131 | width: 100%; 1132 | border: 1px solid #5F99CF; 1133 | } 1134 | 1135 | 1136 | /* 1137 | // MULTIREDDIT PICKER (LEFT) 1138 | //------------------------------- 1139 | */ 1140 | 1141 | body.with-listing-chooser .listing-chooser { 1142 | top: 55px; 1143 | width: 130px; 1144 | padding-right: 10px; 1145 | } 1146 | body.with-listing-chooser .listing-chooser.initialized .contents { 1147 | position: fixed 1148 | } 1149 | body.with-listing-chooser.listing-chooser-collapsed .contents { 1150 | display: none 1151 | } 1152 | body.with-listing-chooser .listing-chooser .grippy { 1153 | background: transparent; 1154 | opacity: 1; 1155 | } 1156 | .grippy:hover { 1157 | background: #1a1a1a; 1158 | } 1159 | body.with-listing-chooser.listing-chooser-collapsed .listing-chooser .grippy:after { 1160 | border: none; 1161 | } 1162 | body.with-listing-chooser .listing-chooser .grippy { 1163 | border: none; 1164 | box-shadow: none; 1165 | } 1166 | /* bacgkround change on hover collapse/expand area*/ 1167 | body.with-listing-chooser .listing-chooser .grippy:before { 1168 | opacity: 0.8; 1169 | -webkit-filter: grayscale(100%); 1170 | filter: grayscale(100%); 1171 | } 1172 | body.with-listing-chooser .listing-chooser .grippy:hover:before { 1173 | opacity: 1; 1174 | -webkit-filter: hue-rotate(170deg) brightness(200%); 1175 | filter: invert(170deg) brightness(200%); 1176 | } 1177 | body.with-listing-chooser .listing-chooser .grippy:hover { 1178 | background: transparent; 1179 | } 1180 | body.with-listing-chooser .listing-chooser .grippy:hover:after { 1181 | background: transparent; 1182 | } 1183 | body.with-listing-chooser .listing-chooser .grippy:after { 1184 | border-right: none; 1185 | background-position: 131px center; 1186 | } 1187 | body.with-listing-chooser .listing-chooser { 1188 | background: transparent; 1189 | } 1190 | 1191 | /* get rid of the padding transition */ 1192 | .listing-chooser ul.multis li a { 1193 | margin-left: 0px; 1194 | } 1195 | .listing-chooser ul.multis li a:hover { 1196 | margin-left: 0px; 1197 | } 1198 | .listing-chooser ul.multis li:hover { 1199 | margin-left: 12px; 1200 | } 1201 | 1202 | .listing-chooser .intro { 1203 | background: #1a1a1a; 1204 | color: #939393; 1205 | border-color: #1b1b1b; 1206 | } 1207 | .listing-chooser li { 1208 | background: #1a1a1a; 1209 | border: none; 1210 | border-radius: 0px; 1211 | } 1212 | .listing-chooser li:hover { 1213 | background: #2b2b2b; 1214 | border-radius: 0px; 1215 | } 1216 | .listing-chooser li.selected { 1217 | background: #202020; 1218 | box-shadow: none; 1219 | } 1220 | .listing-chooser li.selected a span { 1221 | color: #939393; 1222 | } 1223 | 1224 | 1225 | /* fix 'create' button in multireddit chooser*/ 1226 | .listing-chooser .create button { 1227 | color: #9b9b9b; 1228 | background: #2b2b2b; 1229 | padding: 5px 20px; 1230 | line-height: 20px; 1231 | border: 0px; 1232 | font-size: 12px; 1233 | border-radius:0px; 1234 | outline: none; 1235 | opacity: 1; 1236 | } 1237 | .listing-chooser .create button:hover { 1238 | color: #ccc; 1239 | opacity: 1; 1240 | } 1241 | .listing-chooser .create.expanded button { 1242 | background: #2b2b2b; 1243 | padding: 5px 20px; 1244 | border: none; 1245 | font-size: 12px; 1246 | border-radius: 0px; 1247 | box-shadow: none; 1248 | opacity: 1; 1249 | } 1250 | .listing-chooser .create input[type="text"] { 1251 | background-color: #1a1a1a; 1252 | color: #d2d2d2; 1253 | border: 1px solid #2b2b2b; 1254 | padding: 6px 6px; 1255 | outline: none; 1256 | } 1257 | li.create:hover { 1258 | background: #1a1a1a; 1259 | } 1260 | 1261 | /* get rid of multireddit animation */ 1262 | body.with-listing-chooser .listing-chooser.initialized { 1263 | -webkit-transition: none; 1264 | -moz-transition: none; 1265 | -o-transition: none; 1266 | -ms-transition: none; 1267 | transition: none; 1268 | transition-duration: 0s !important; 1269 | } 1270 | 1271 | /* > subscribed block*/ 1272 | .listing-chooser li.selected:before { 1273 | display: none; 1274 | } 1275 | .listing-chooser li.selected a:hover { 1276 | color: #bcbcbc; 1277 | } 1278 | 1279 | .listing-chooser h3 { 1280 | color: #666666; 1281 | text-align: left; 1282 | text-transform: uppercase; 1283 | padding-left: 15px; 1284 | } 1285 | 1286 | /* 1287 | // SUBMIT PAGE 1288 | //------------------------------- 1289 | */ 1290 | /* highlight */ 1291 | .formtabs-content { 1292 | width: 520px; 1293 | border-top: 2px solid #2b2b2b!important; 1294 | padding-top: 10px; 1295 | } 1296 | /* fix font size */ 1297 | .tabmenu.formtab .selected a { 1298 | font-size: 100%; 1299 | } 1300 | /* fix links */ 1301 | .tabmenu.formtab a { 1302 | border: 0px; 1303 | } 1304 | 1305 | .tabmenu.formtab .selected a { 1306 | border-bottom: 2px solid #ccc; 1307 | } 1308 | .tabmenu.formtab .selected a:hover { 1309 | border-bottom: 2px solid #ccc; 1310 | } 1311 | #newlink-with-image-upload .image-upload-drop-target { 1312 | border: 1px solid #2b2b2b; 1313 | background-color: transparent; 1314 | } 1315 | .tabmenu.formtab a:hover { 1316 | border: 0px; 1317 | } 1318 | .tabmenu.formtab .selected a { 1319 | background-color: #1a1a1a !important; 1320 | } 1321 | .content.submit .info-notice { 1322 | background-color: transparent!important; 1323 | border: 0px!important; 1324 | } 1325 | #newlink.submit.content { 1326 | width: 500px; 1327 | margin: 0 auto; 1328 | } 1329 | span.error.RATELIMIT.field-ratelimit { 1330 | padding-left: 10px; 1331 | } 1332 | 1333 | 1334 | /* 1335 | // LOGIN PAGE 1336 | //------------------------------- 1337 | */ 1338 | .login-page #login { 1339 | margin-right: auto; 1340 | margin-left: auto; 1341 | width: 650px; 1342 | } 1343 | .pretty-form input[type=text], .pretty-form textarea, .pretty-form input[type=password], .pretty-form input[type=number] { 1344 | -webkit-box-shadow: none; 1345 | -moz-box-shadow: none; 1346 | box-shadow: none; 1347 | } 1348 | .c-form-control:focus { 1349 | border-color: #444!important; 1350 | box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 4px #444; 1351 | } 1352 | 1353 | /* NOT LOGGED IN 1354 | */ 1355 | 1356 | .login-form-side { 1357 | border: none 1358 | } 1359 | .infobar.newsletterbar { 1360 | background: transparent 1361 | } 1362 | #eu-cookie-policy { 1363 | display: none; 1364 | } 1365 | 1366 | /* 1367 | // RES FIXES 1368 | //------------------------------- 1369 | */ 1370 | .RES-keyNav-activeElement, 1371 | .RES-keyNav-activeElement .md-container { 1372 | background-color: transparent !important; 1373 | } 1374 | 1375 | .res-commentBoxes .comment { 1376 | border-color: transparent !important; 1377 | } 1378 | 1379 | #srList { 1380 | background-color: #222; 1381 | } 1382 | 1383 | /* These RES classes though..... */ 1384 | .res-commentBoxes .comment .comment, 1385 | .res-commentBoxes .comment .comment .comment, 1386 | .res-commentBoxes .comment .comment .comment .comment, 1387 | .res-commentBoxes .comment .comment .comment .comment .comment, 1388 | .res-commentBoxes .comment .comment .comment .comment .comment .comment, 1389 | .res-commentBoxes .comment .comment .comment .comment .comment .comment .comment, 1390 | .res-commentBoxes .comment .comment .comment .comment .comment .comment .comment .comment, 1391 | .res-commentBoxes .comment .comment .comment .comment .comment .comment .comment .comment .comment, 1392 | .res-commentBoxes .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { 1393 | background-color: transparent !important; 1394 | } 1395 | 1396 | .NERPageMarker { 1397 | background-color: #222; 1398 | border: none; 1399 | } 1400 | --------------------------------------------------------------------------------