· 8 years ago · Feb 01, 2018, 03:38 PM
1/*------------------------------------------------------------------
2
3-- "Carbon" Stylesheet
4
5Version: 1.1
6Created by: /u/ggitaliano
7Last change: 03/09/15
8GitHub: https://github.com/ggitaliano/carbon
9
10v3: added saturation to color scheme
11
12Info:
13 Carbon is a custom, free-to-use "dark" theme for reddit.com
14 You can see a live preview of the theme at /r/Carbon
15 Feel free to message me with any questions or feedback
16
17-------------------------------------------------------------------*/
18
19
20/*------------------------------------------------------------------
21
22-- Table of Contents
23
241. Global styles
25
262. Header / #header
27 2.1 Subreddit List / #sr-header-area
28 2.2 Sub Header / #header-bottom-left
29 2.2.1 Snoo / #header-img
30 2.2.2 Title / .pagename
31 2.2.3 Navigation / .tabmenu
32 2.3 User Menu / #header-bottom-right
33 2.3.1 Beta / .beta-link
34
353. Sidebar / .side, .spacer
36 3.1 Search / #search, #searchexpando
37 3.2 Submit / .submit
38 3.3 Titlebox / .titlebox
39 3.3.1 Title / h1
40 3.3.2 Subscribe / .subscribe-button, .subscribers, .users-online
41 3.3.3 Toggle / .leavemoderator, . , .sr_style_toggle
42 3.3.4 Flair / .flairtoggle, .tagline
43 3.3.5 Markdown / .md
44 3.3.6 Meta / .bottom
45 3.3.7 Gold / .gold-expiration-info, .server-seconds, .gift-gold, .gold-link
46 3.4 Tools / .sidecontentbox, .account-activity-box
47 3.4.1 Trophies / .trophy-area
48 3.4.2 Gold / .goldvertisement
49 3.5 Link Meta / .linkinfo
50 3.6 Login Form / .login-form-side
51
524. Content / .content
53 4.1 Navigation / .menuarea, .nextprev
54 4.2 Sitetable / .sitetable
55 4.3 Links / .link
56 4.3.1 Voting / .rank, .midcol
57 4.3.2 Thumbnails / .thumbnail
58 4.3.3 Title / .title, .domain
59 4.3.4 Tagline / .tagline
60 4.3.4.1 User / .userattrs
61 4.4.4 Options / .buttons
62 4.4.4.1 Share / .post-sharing
63 4.4.4.2 Mod / .big-mod-buttons
64 4.4.5 Expando / .expando-button
65 4.4.6 Markdown / .md
66 4.4 Comments / .commentarea, .comment
67 4.5 Trending / .trending-subreddits
68 4.6 Advertising / .organic-listing, .promoted
69
705. Footer / .footer
71
726. Submit Page / .submit-page
73
747. Search Page / .search-page
75
768. Wiki Page / .wiki-page
77
789. Related Page / .related-page, .other-discussions-page
79
8010. Messages Page / .messages-page
81
8211. Profile Page / .profile-page
83
8412. Multi Page / .multi-page
85
8613. Explore Page / .explore-page
87
8814. Subreddits Page / .subreddits-page
89
9015. Miscellaneous
91
9215. Multi Toolbar / .listing-chooser
93
9416. RES / .res
95
9617. RES Nightmode / .res-nightmode
97
9818. Reddit Toolbox / .toolbox
99
100-------------------------------------------------------------------*/
101
102/*------------------------------------------------------------------
103
104-- Color Codes
105
106Background: #ffffff (white)
107Content: #1e1e1e (light black)
108Header h1: #9caa3b (green)
109Header h2: #ee4117 (red)
110Footer: #b5cede (dark black)
111
112a (standard): #0040b6 (dark blue)
113a (visited): #5999de (light blue)
114a (active): #cc0000 (pink)
115
116#BB9A41
117
118-------------------------------------------------------------------*/
119
120
121/*------------------------------------------------------------------
122-- 1. GLOBAL STYLES
123-------------------------------------------------------------------*/
124#RESShortcutsSort, #RESShortcutsRight, #RESShortcutsLeft, #RESShortcutsAdd {
125 background: #1a1a1b !important;
126 color: #c7eedd !important;
127}
128
129#header-img.default-header {
130 background-image: url(https://a.thumbs.redditmedia.com/BZYB7y_rOxL5d1eLJujF48-5jL-V5cmXPgNWkFZ4HT0.png);
131 background-position: 0px 0px;
132}
133
134.thing.stickied.link a.title {
135 font-weight: bold;
136 color: #BB9A41;
137}
138
139a.voteWeight {
140 text-decoration: none;
141 color: #0081ff;
142 margin-left: 3px;
143 background-color: #222226 !important;
144}
145
146#RESShortcutsEditContainer {
147 background-color: #1a1a1b !important;
148}
149
150.entry.res-selected, .entry.res-selected .md-container {
151 background-color: #222226 !important;
152}
153
154.spoiler-stamp {
155 color: #cc2121;
156}
157
158.titlebox form.toggle, .leavemoderator {
159 margin: 0;
160 padding: 5px 0px;
161 font-size: smaller;
162 color: gray;
163 background: #1a1a1b none no-repeat scroll center left;
164 padding-left: 10px;
165}
166
167.filtered-details form.add-sr {
168 margin: -1px 0 0;
169 padding: 15px 15px 10px !important;
170 background: #1a1a1b !important;
171}
172
173/* Body */
174body {
175 background:#1a1a1b;
176 color:#dddde1;
177}
178
179.RES-keyNav-activeElement, .RES-keyNav-activeElement .md-container {
180 background-color: #222226 !important;
181}
182
183/* Links */
184/* need to override links in markdown, visited link color in markdown, add transition ease in effect for hover color */
185a,
186.md a,
187.res.res-nightmode .tagline a,
188.comment .usertext .md p > a:visited,
189h2 a:visited,
190.shortlink input,
191button {
192 color:#3498db;
193 -webkit-transition:color 0.15s ease-in-out;
194 -moz-transition:color 0.15s ease-in-out;
195 -o-transition:color 0.15s ease-in-out;
196 transition:color 0.15s ease-in-out;
197}
198/* Stop links underlining on hover */
199a:hover {
200 text-decoration:none!important;
201}
202
203 /* MARKDOWN ------ */
204 /* Have to override the default markdown color */
205 .md {
206 color:#dddee1;
207 }
208
209
210 /* Quotes */
211 /* Set base style for quote boxes and text in markdown and set up alternating background for sub quotes */
212 .md blockquote,
213 .md blockquote blockquote blockquote {
214 padding:5px;
215 margin-left:0;
216 background:#28282d;
217 border:1px solid #3a3a3e;
218 border-left-width:3px;
219 /*font-style:italic;*/
220 color:#bbbbbe;
221 }
222 /* Alternate quote background for sub quote */
223 .md blockquote blockquote {
224 background:#26262b;
225 }
226 /* Set top/bottom margin for quote in sidebar */
227 .titlebox .md > blockquote {
228 margin:1em 0;
229 }
230 /* Style quotes at bottom of gold message */
231 .message.gold-auto blockquote {
232 margin-bottom:2px;
233 background:#2b2b2b;
234 border:1px solid #333;
235 color:#bbb;
236 }
237
238
239 /* Code */
240 /* Style markdown `code` and pre(formatted) text */
241 .md code,
242 .md pre {
243 background:#2b2b30;
244 border-color:#3c3c42;
245 border-radius:0;
246 color:#ccccd1;
247 }
248 /* Override background color in post body and permalink comments */
249 .link .usertext .md pre,
250 .link .usertext .md * > code,
251 .usertext.border div.md pre,
252 .usertext.border div.md * > code {
253 background:#2b2b30;
254 }
255 /* Override background color in new comments */
256 .new-comment div.md pre,
257 .new-comment div.md * > code {
258 background:#28282d;
259 }
260
261 /* [Deleted] message body */
262 .usertext.grayed .usertext-body {
263 padding:0;
264 background:transparent;
265 }
266 /* [Deleted] message text */
267 .usertext.grayed .usertext-body .md,
268 .md del {
269 color:#888891;
270 }
271
272 /* Tables */
273 /* Set margin and smaller font size in markdown */
274 .md table {
275 margin:1em 0;
276 font-size:12px;
277 }
278 /* In sidebar set smaller table font size and set width to take up 100% */
279 .titlebox .md table {
280 font-size:11px;
281 width:100%;
282 }
283 /* Header/body cell padding and border */
284 .md table th,
285 .md table td {
286 padding:5px 8px;
287 border:1px solid #2d2d33;
288 border:1px solid #303036;
289 }
290 /* Header cell background color */
291 .md table th {
292 background:#29292e;
293 }
294 /* Set alternating row color in table body */
295 .md table tbody tr:nth-of-type(odd) {
296 background:#25252a;
297 }
298 .md table tbody tr:nth-of-type(even) {
299 background:#29292e;
300 }
301
302 /* Reduce border height and set new background */
303 .md hr {
304 height:1px;
305 background:#2d2d30;
306 border-bottom:1px solid #1d1d20;
307 }
308 .titlebox .md hr {
309 border-bottom-color:#161618;
310 }
311
312 /* Forms/input */
313 /* Set background and border color, remove box-shadow, set font and color */
314 textarea,
315 .pretty-form textarea,
316 input[type="text"],
317 input[type="url"],
318 input[type="password"],
319 input[type="number"],
320 .pretty-form input[type="text"],
321 .roundfield textarea,
322 .roundfield input[type="text"],
323 .roundfield input[type="url"],
324 .roundfield input[type="password"],
325 .roundfield input[type="number"],
326 .linefield textarea,
327 .linefield input[type="text"] {
328 background:#27272b;
329 border:1px solid #323238;
330 box-shadow:none;
331 font-family:sans-serif;
332 color:#eeeef1;
333 }
334 /* Set padding of edit post textarea */
335 .link .usertext-edit textarea {
336 padding:5px 7px;
337 }
338 /* Set padding of comment textarea (new, edit, reply) */
339 .comment .usertext-edit textarea {
340 padding:3px 5px;
341 }
342 /* Reset font on stylesheet textarea to default */
343 .stylesheet-customize-container textarea {
344 font-family:"Bitstream Vera Sans Mono",Consolas,monospace;
345 }
346 /* Removed browser default outline on active/focus so added a lighter border color */
347 textarea:hover,
348 textarea:active,
349 textarea:focus,
350 .pretty-form textarea:hover,
351 .pretty-form textarea:active,
352 .pretty-form textarea:focus,
353 input[type="text"]:hover,
354 input[type="text"]:active,
355 input[type="text"]:focus,
356 input[type="url"]:hover,
357 input[type="url"]:active,
358 input[type="url"]:focus,
359 .linefield input[type="text"]:hover {
360 border-color:#46464a;
361 outline:none;
362 }
363
364
365
366/* Remove browser outline on focus */
367/* XXX debatable whether outline has UX use */
368a:active,
369a:focus,
370input:active,
371input:focus
372textarea:active,
373textarea:focus
374.option:active,
375.option:focus {
376 outline:none;
377}
378
379
380/*------------------------------------------------------------------
381-- 2. HEADER
382-------------------------------------------------------------------*/
383
384/* Header container height and background (includes height of subreddit bar) */
385/* Set a background as the #header-bottom-left area doesn't completely cover header */
386/* Added dark border on body */
387#header {
388 height:90px;
389 background:#202023;
390 border-bottom:1px solid #101014;
391}
392
393/* Set light border below SR list */
394/* As #header-bottom-left doesn't reach #sr-header-area need to add a pseudo "light" border for the header */
395#header:before {
396 content:"";
397 height:1px;
398 position:absolute;
399 top:21px;
400 left:0;
401 right:0;
402 background:#28282d;
403}
404/* PS LIGHT BORDER */
405
406
407/*------------------------------------------------------------------
408-- 2. HEADER
409---- 2.1 SUBREDDIT LIST
410-------------------------------------------------------------------*/
411
412/* Set height of subreddit list and edit link */
413/* Set background to body background and add dark border */
414#sr-header-area,
415#sr-header-area #sr-more-link {
416 height:20px;
417 background:#1a1a1b;
418 border-bottom:1px solid #101014;
419 font-family:sans-serif;
420 line-height:22px;
421}
422
423/* Hide all separators (-,|) between subreddit names */
424#sr-header-area .separator {
425 visibility:hidden;
426}
427
428/* Style link color and remove "My subreddits" background image (arrow), set longer color transition */
429#sr-header-area a,
430#sr-header-area .selected,
431#sr-header-area .selected a {
432 background:none;
433 color:#44444a; /* TO DO: may need to increase this as low contrast */
434 -webkit-transition:color 0.3s;
435 -moz-transition:color 0.3s;
436 -o-transition:color 0.3s;
437 transition:color 0.3s;
438}
439
440/* Lighter color when hovering over the list area */
441/* Set color of links in "My subreddits" dropdown list */
442#sr-header-area:hover a,
443#sr-header-area:hover .selected,
444#sr-header-area:hover .selected a,
445#sr-header-area .drop-choices.srdrop.inuse a {
446 color:#77777f;
447}
448
449/* Lighter color when hovering over individual links */
450#sr-header-area a:hover,
451#sr-header-area .selected:hover,
452#sr-header-area .selected a:hover,
453#sr-header-area .drop-choices.srdrop.inuse a:hover {
454 color:#fff;
455}
456
457/* As removed background image (arrow) from "My Subreddits" dropdown link can remove padding */
458#sr-header-area .selected {
459 padding-right:0;
460}
461
462
463/*------------------------------------------------------------------
464-- 2. HEADER
465---- 2.1 SUBREDDIT LIST
466------ 2.1.1 DROPDOWN LIST
467-------------------------------------------------------------------*/
468
469/* Style container */
470/* Instead of adding pseudo border can give background color to container (#2c2c2c) and set 1px padding */
471#sr-header-area .drop-choices.srdrop.inuse {
472 padding:1px;
473 margin:-1px 0 0;
474 background:#2a2a2f;
475 border:1px solid #101014;
476 border-top:0;
477 border-left:0;
478 box-shadow:0 0 1px rgba(16,16,20,0.5); /* TO DO: compare this to box-shadow on help bubbles etc. */
479}
480
481/* Set background of links */
482#sr-header-area .drop-choices.srdrop.inuse a {
483 background:#222225;
484}
485
486/* Darker background color for links on hover */
487#sr-header-area .drop-choices.srdrop.inuse a:hover {
488 background:#2a2a2f;
489}
490
491/* Style "Edit subscriptions" link at bottom of list */
492#sr-header-area .drop-choices.srdrop.inuse .choice.bottom-option {
493 border-color:#363638;
494 color:#66666d;
495}
496
497
498/*------------------------------------------------------------------
499-- 2. HEADER
500---- 2.2 SUB HEADER
501-------------------------------------------------------------------*/
502
503/* Same background as header, add bottom border */
504#header-bottom-left {
505 position:absolute;
506 bottom:0;
507 left:0;
508 right:0;
509 background:#202023;
510 border-bottom:1px solid #28282d;
511}
512
513
514/*------------------------------------------------------------------
515-- 2. HEADER
516---- 2.2 SUB HEADER
517------ 2.2.1 SNOO
518-------------------------------------------------------------------*/
519
520/* Setting dimensions and removing margin on snoo image (custom) */
521#header-img-a #header-img {
522 width:118px;
523 height:30px;
524 margin:0;
525}
526
527/* Giving inline-block so it responds to smaller resolutions */
528/* Aligned with tabmenu and set right margin to pagename */
529#header-img-a,
530#header-img.default-header {
531 width:118px;
532 height:30px;
533 display:inline-block;
534 margin:0 30px 0 0;
535 position:relative;
536 bottom:15px;
537 left:15px;
538 vertical-align:bottom;
539}
540
541
542/*------------------------------------------------------------------
543-- 2. HEADER
544---- 2.2 SUB HEADER
545------ 2.2.2 TITLE
546-------------------------------------------------------------------*/
547
548/* Giving inline-block so it responds to smaller resolutions */
549.pagename {
550 margin:0 15px 0 0;
551 display:inline-block;
552 font-family:lato,verdana,sans-serif;
553 font-size:12px;
554 font-variant:normal;
555 font-weight:normal;
556 letter-spacing:1px;
557 line-height:46px; /* line height to match tabmenu */
558 text-transform:uppercase;
559 color:#fb8500; /* sets color on submit, search, etc. pages where there is no child link */
560}
561
562/* Set color on messages/profile page (no child link) */
563.messages-page .pagename,
564.profile-page .pagename {
565 color:#eeeef1;
566}
567
568/* Reset left margin on pages with listing chooser */
569body.with-listing-chooser #header .pagename {
570 margin-left:0!important;
571 position:static;
572}
573
574/* Set color of child link */
575.pagename a {
576 display:inline-block;
577 color:#eeeef1;
578}
579
580/* Link hover color */
581.pagename a:hover {
582 color:#fff;
583}
584
585/* Add /R/ before subreddit name */
586.pagename a:before {
587 content:"/R/";
588 color:#bbbbc1;
589}
590
591/* If page is multireddit repace with /M/ */
592.multi-page .pagename a:before {
593 content:"/M/";
594}
595
596/* Remove /R/ from /r/mod as pagename reads "subreddits you moderate" instead of just "mod" */
597.multi-page .pagename a[href$="/r/mod"]:before {
598 content:none;
599}
600
601
602
603/*------------------------------------------------------------------
604-- 2. HEADER
605---- 2.2 SUB HEADER
606------ 2.2.3 NAVIGATION
607-------------------------------------------------------------------*/
608
609/* Remove margin and set line height */
610#header .tabmenu {
611 margin:0;
612 line-height:46px;
613 text-align:center; /* TO DO: check if needed */
614}
615
616/* Reset left margin on pages with listing chooser */
617body.with-listing-chooser #header .tabmenu,
618body.with-listing-chooser #header .tabmenu li:first-child.selected {
619 margin-left:0;
620}
621
622/* Content menu list items and child links */
623/* Remove padding and margin and remove background */
624#header .tabmenu li,
625#header .tabmenu li a {
626 padding:0;
627 margin:0;
628 display:inline-block;
629 background:transparent;
630}
631
632/* Style content menu links, set longer color transition and add transition for bg image */
633#header .tabmenu li a {
634 margin:0 10px;
635 font-family:lato,verdana,sans-serif;
636 font-size:12px;
637 font-weight:400;
638 letter-spacing:1px;
639 text-transform:uppercase;
640 color:#bbbbc1;
641 -webkit-transition:0.3s color, 0.2s background-position;
642 -moz-transition:0.3s color, 0.2s background-position;
643 -o-transition:0.3s color, 0.2s background-position;
644 transition:0.3s color, 0.2s background-position;
645 position:relative;
646}
647
648/* color of content menu link on hover */
649#header .tabmenu li a:hover {
650 color:#eeeef1;
651}
652
653/* Active link */
654/* Style the active content menu link */
655/* Remove default border */
656#header .tabmenu li.selected a {
657 position:relative;
658 border:0;
659 color:#fb8500;
660}
661
662/* Keep the same color on hover */
663#header .tabmenu li.selected a:hover {
664 color:#fb8500;
665}
666
667/* Bottom arrow */
668/* Background image on content menu links on hover and when active (pseudo) */
669#header .tabmenu li a:after,
670#header .tabmenu li.selected a:after {
671 content:"";
672 width:16px;
673 height:10px;
674 margin:0 auto;
675 position:absolute;
676 right:0;
677 bottom:-2px;
678 left:0;
679 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -9999px -9999px;
680}
681
682/* Set initial position (vertical 10px and hidden) and transition for hover */
683#header .tabmenu li a:after {
684 background-position:center 10px;
685 -webkit-transition:0.2s background-position ease-in-out;
686 -moz-transition:0.2s background-position ease-in-out;
687 -o-transition:0.2s background-position ease-in-out;
688 transition:0.2s background-position ease-in-out;
689}
690
691/* Set background-position on hover (vertical 0px and visible) */
692#header .tabmenu li a:hover:after,
693#header .tabmenu li.selected a:after {
694 background-position:center 0;
695}
696
697/* Manual adjustment on "promoted" link background position */
698#header .tabmenu li a[href$="/ads/"]:after {
699 right:4px;
700}
701
702
703
704/*------------------------------------------------------------------
705-- 2. HEADER
706---- 2.3 USER MENU
707-------------------------------------------------------------------*/
708
709/* Set border at top and bottom, bottom border color is darker than header-bottom-left bottom border */
710#header-bottom-right {
711 height:40px; /* TO DO: could align with tabmenu */
712 padding:0 15px 0 8px;
713 bottom:0;
714 background:#1d1d1f;
715 border-top:1px solid #28282d;
716 border-bottom:1px solid #222226;
717 border-radius:0;
718 font-family:lato,verdana,sans-serif;
719 font-size:11px;
720 font-weight:400;
721 letter-spacing:1px;
722 line-height:40px;
723 text-transform:uppercase;
724}
725
726/* Override gold sub usermenu background */
727.gold-only #header #header-bottom-right {
728 background:#1d1d1f;
729}
730
731/* Add triangle border image to right */
732/* Matching bottom border */
733#header-bottom-right:before {
734 content:"";
735 width:21px;
736 height:40px;
737 display:block;
738 position:absolute;
739 left:-21px;
740 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat 0 -367px;
741 border-bottom:1px solid #222226;
742}
743
744/* Add psuedo darker top border */
745/* XXX can remove display:block as inherited from div */
746#header-bottom-right:after {
747 content:"";
748 height:1px;
749 display:block;
750 position:absolute;
751 top:0;
752 left:0;
753 right:0;
754 background:#161618;
755}
756
757/* Usermenu link and .user color - setting .user color here so text when logged out is visible */
758#header-bottom-right a,
759.gold-only #header #header-bottom-right a,
760#header-bottom-right .user {
761 color:#bbbbc1;
762}
763
764/* Set lighter color on hover */
765#header-bottom-right a:hover,
766.gold-only #header #header-bottom-right a:hover {
767 color:#eee;
768}
769
770/* Set font weight of preferences link to normal */
771#header-bottom-right .pref-lang {
772 font-weight:400;
773}
774
775/* color and margin of login link */
776#header-bottom-right .user a.login-required {
777 margin-left:5px;
778 color:#fb8500;
779}
780
781/* User karma */
782/* Set color of .user to match background so parentheses around karma are hidden */
783.loggedin #header-bottom-right .user {
784 color:#1d1d1f;
785}
786
787/* Lighter color for karma count next to username */
788#header-bottom-right .user .userkarma {
789 border:0;
790 color:#dddde1;
791}
792
793/* Hide separators */
794#header-bottom-right .separator {
795 visibility:hidden;
796}
797
798
799/*------------------------------------------------------------------
800-- 2. HEADER
801---- 2.3 USER MENU
802------ 2.3.1 MAIL
803-------------------------------------------------------------------*/
804
805/* Custom mail icons */
806/* Have to override havemail icons on gold only subs */
807#header-bottom-right #mail,
808#header-bottom-right #modmail,
809.gold-only #header #header-bottom-right #mail.havemail,
810.gold-only #header #header-bottom-right #modmail.havemail {
811 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -9999px -9999px;
812}
813#header-bottom-right #mail.nohavemail {
814 background-position:0 -50px;
815}
816#header-bottom-right #mail.havemail {
817 background-position:-16px -50px;
818}
819.gold-only #header #header-bottom-right #mail.havemail {
820 background-position:-32px -50px;
821}
822#header-bottom-right #modmail.nohavemail {
823 background-position:0 -30px;
824}
825#header-bottom-right #modmail.havemail {
826 background-position:-16px -30px;
827}
828.gold-only #header #header-bottom-right #modmail.havemail {
829 background-position:-32px -30px;
830}
831
832/* Fix icon positoning */
833#header-bottom-right #modmail {
834 top:-3px;
835}
836#header-bottom-right #mail {
837 top:1px;
838}
839
840/* Mail count */
841/* Remove default background, match color to icon */
842#header-bottom-right a.message-count {
843 background:transparent;
844 color:#fb8500;
845}
846/* Override message count styling on gold only subs */
847.gold-only #header #header-bottom-right .message-count,
848.gold-only #header #header-bottom-right .message-count:hover {
849 background:transparent;
850 color:#cd9930;
851}
852
853
854/*------------------------------------------------------------------
855-- 2. HEADER
856---- 2.3 USER MENU
857------ 2.3.2 BETA
858-------------------------------------------------------------------*/
859
860/* Custom beta icon */
861/* Remove default lab beaker background */
862#header-bottom-right .beta-link {
863 width:40px;
864 height:41px;
865 margin-left:-40px;
866 background:none;
867 overflow:visible;
868 text-indent:-9999px;
869}
870
871/* Add psuedo beta text with matching #header-bottom-right background */
872#header-bottom-right .beta-link:after {
873 content:"β";
874 width:40px;
875 height:41px;
876 display:block;
877 position:absolute;
878 top:-1px;
879 font-size:12px;
880 line-height:41px;
881 text-transform:none;
882 color:#2ecc71;
883 background:url(%%usermenu-bg-beta%%) no-repeat; /* this will cover up the original background as can't add space manually */
884 text-indent:26px;
885 border-bottom:1px solid #222226;
886}
887
888/* Fix opacity */
889#header-bottom-right .beta-hint {
890 opacity:1;
891}
892
893
894/*------------------------------------------------------------------
895-- 3. SIDEBAR
896-------------------------------------------------------------------*/
897
898/* Set margin and remove background */
899.side {
900 margin:24px 8px 80px 0; /* set bottom margin to add space between footer */
901 position:relative;
902 background-color:transparent;
903}
904
905/* Set .spacer margin (default is 7px 0 12px 0) */
906.side .spacer {
907 margin:0 0 7px 0;
908}
909
910
911/*------------------------------------------------------------------
912-- 3. SIDEBAR
913---- 3.1 SEARCH
914-------------------------------------------------------------------*/
915
916/* Set external border for search form */
917.side #search {
918 border:1px solid #101014;
919}
920
921/* Style search input area */
922/* //Note: increased padding-right so text doesn't fall behind search icon */
923#search input[type="text"] {
924 width:298px;
925 padding:7px 35px 7px 15px;
926 background:#202023;
927 border:1px solid #28282d;
928 font-size:12px;
929 color:#eeeef1;
930}
931
932/* Remove default browser outline on active/focus, set lighter background instead + on hover */
933#search input[type="text"]:hover,
934#search input[type="text"]:active,
935#search input[type="text"]:focus {
936 background-color:#222226;
937 outline:none;
938}
939
940/* Fix positioning of search/submit icon */
941.side #search input[type="submit"] {
942 margin-left:-28px;
943}
944
945/* Expando */
946/* Background needs to be darker than #202020 */
947#searchexpando {
948 padding:10px 15px 0;
949 margin:0;
950 background:#1f1f22;
951 border:1px solid #27272b;
952 border-top:1px solid #161618;
953 border-radius:0;
954 font-family:sans-serif;
955 font-size:11px;
956 color:#dddde1;
957}
958
959/* Add bottom padding on expando search text */
960.side #moresearchinfo {
961 padding-bottom:5px;
962 border-color:#2f2f33;
963}
964
965
966/*------------------------------------------------------------------
967-- 3. SIDEBAR
968---- 3.2 SUBMIT
969-------------------------------------------------------------------*/
970
971/* Set external border and slight radius */
972/* .submit is the "submit a new link/text post" buttons */
973/* .create is the "create your own subreddit" button */
974.sidebox.submit,
975.sidebox.create {
976 border:1px solid #101014;
977 border-radius:1px;
978}
979
980/* Submit/create buttons */
981.morelink {
982 height:31px;
983 background:#39393f;
984 border:1px solid #49494f;
985 border-radius:1px;
986 line-height:31px;
987}
988
989/* Submit buttons on hover */
990/* //Note: if moderator and either links/text not allowed then mod shield icon will show up on morelink */
991/* //Note: ...default style sets to opacity:0.5 on hover, looks odd but won't bother changing */
992.morelink:hover {
993 background:#424249;
994 border-color:#53535a;
995}
996
997/* Submit button link text */
998.morelink a {
999 font-family:lato,verdana,sans-serif;
1000 font-size:12px;
1001 font-weight:400;
1002 letter-spacing:1px;
1003 text-transform:uppercase;
1004 color:#eeeef1;
1005}
1006
1007/* Submit button link text on hover */
1008.morelink:hover a {
1009 color:#fff;
1010}
1011
1012/* "submissions restricted" button */
1013.disabled .morelink,
1014.disabled .morelink:hover {
1015 background:#29292d;
1016 border-color:#343438;
1017}
1018
1019/* Lower contrast of disabled submit button link text */
1020.disabled .morelink a {
1021 color:#808085;
1022}
1023
1024/* Remove nub (blue arrow on right on submit buttons) and create/disabled spacer */
1025.nub,
1026.morelink + .spacer {
1027 display:none;
1028}
1029
1030
1031/* Background and border animations on hover */
1032/* Used for searchbar, submit buttons, snoovatar button .. */
1033/* XXX MOVE MOVE MOVE */
1034/* XXX see whatelse needs to go here (links styled as buttons etc.) */
1035#search input[type="text"],
1036.morelink,
1037.gold-accent.snoovatar-link,
1038.gold-accent.snoovatar-link a,
1039.sidecontentbox .more a,
1040.sidecontentbox .expand-summary,
1041button {
1042 -webkit-transition:background 0.15s ease-in-out,border 0.15s ease-in-out;
1043 -moz-transition:background 0.15s ease-in-out,border 0.15s ease-in-out;
1044 -o-transition:background 0.15s ease-in-out,border 0.15s ease-in-out;
1045 transition:background 0.15s ease-in-out,border 0.15s ease-in-out;
1046}
1047
1048
1049/*------------------------------------------------------------------
1050-- 3. SIDEBAR
1051---- 3.3 TITLEBOX
1052-------------------------------------------------------------------*/
1053
1054/* Main sidebar container for content after submit buttons */
1055/* Set <300px width to account for borders */
1056/* Position 1px from left due to pseudo border */
1057.titlebox {
1058 width:296px;
1059 position:relative;
1060 left:1px;
1061 background:#202023;
1062 border:1px solid #28282d;
1063 font-family:sans-serif;
1064 color:#dddde1;
1065}
1066
1067/* Remove border radius on rounded titlebox */
1068.rounded {
1069 border-radius:0;
1070}
1071
1072/* Remove titlebox padding on filtered multi */
1073.titlebox.gold-accent,
1074.titlebox.filtered-details {
1075 padding:0;
1076}
1077
1078
1079
1080/*------------------------------------------------------------------
1081/* ***** 2/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1082/*------------------------------------------------------------------
1083-- 3. SIDEBAR
1084---- 3.3 TITLEBOX
1085------ 3.3.1 TITLE
1086-------------------------------------------------------------------*/
1087
1088/* Main sub/profile title in sidebar */
1089/* Set color here too incase not link (like profile page) */
1090/* Using > as can have h1 within .titlebox .md */
1091/* font-variant is for me/f/all h1 which has small-caps applied */
1092.titlebox > h1 {
1093 padding:10px 15px;
1094 margin:0;
1095 position:relative;
1096 background:#212125;
1097 border-bottom:1px solid #28282d;
1098 font-family:sans-serif;
1099 font-size:18px;
1100 font-variant:normal;
1101 color:#eeeef1; /* ZZZ */
1102}
1103
1104/* Add pseudo dark border for contrast */
1105/* Only need this on own profile page as no "+Friends" element, can't specify though */
1106/* //Note: Changed ".titlebox > h1" to ".titlebox h1" as shouldn't be any other h1 headers */
1107.profile-page .titlebox h1:before {
1108 content:"";
1109 height:1px;
1110 position:absolute;
1111 bottom:-2px;
1112 left:0;
1113 right:0;
1114 background:#161618;
1115}
1116
1117/* Sub/profile title link color */
1118.titlebox > h1 a {
1119 color:#eeeef1;
1120}
1121
1122/* Make brackets in user distinction hidden by matching background color */
1123/* Distinction currently for Admins [A] */
1124/* //Note: Searched repository and only found one use for selector */
1125.user-distinction {
1126 color:#212125;
1127}
1128
1129/* Style admin distinction next to username on profile page */
1130.user-distinction .admin {
1131 width:14px;
1132 display:inline-block;
1133 background:#e04232;
1134 border-radius:1px;
1135 font-size:13px;
1136 text-align:center;
1137 vertical-align:text-bottom;
1138 color:#202023;
1139}
1140
1141
1142/*------------------------------------------------------------------
1143/* ***** 4/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1144/*------------------------------------------------------------------
1145/*------------------------------------------------------------------
1146-- 3. SIDEBAR
1147---- 3.3 TITLEBOX
1148------ 3.3.2 SUBSCRIBE
1149-------------------------------------------------------------------*/
1150
1151/* Sidebar subscribe button container */
1152/* Other fancy-toggle-buttons show up outside of titlebox so specifying here */
1153.titlebox .fancy-toggle-button {
1154 width:296px;
1155 height:30px;
1156 display:block;
1157 margin:0;
1158 background:#1f1f22;
1159 border:1px solid #161618;
1160 border-left:0;
1161 border-right:0;
1162 line-height:30px;
1163}
1164
1165/* Override "inline" display on links */
1166.titlebox .fancy-toggle-button .option.active {
1167 display:inline-block;
1168}
1169
1170/* Style subscribe/unsubscribe links */
1171.titlebox .fancy-toggle-button .option.add,
1172.titlebox .fancy-toggle-button .option.remove {
1173 height:30px;
1174 padding:0 15px;
1175 position:relative;
1176 top:-1px;
1177 background:#1f1f22;
1178 border:0;
1179 border-radius:0;
1180 font-size:11px;
1181 font-weight:400;
1182 line-height:30px;
1183 text-transform:capitalize;
1184 color:#9999a0;
1185}
1186
1187/* Make "Subscribe" link bold and green */
1188.titlebox .fancy-toggle-button .option.add {
1189 font-weight:700;
1190 color:#27ae60;
1191}
1192
1193/* Add bottom border to +Friends container (profile pages) */
1194/* XXX REVISIT SELECTOR LENGTH */
1195.profile-page .titlebox h1 + div {
1196 border-bottom:1px solid #28282d;
1197}
1198
1199
1200/*------------------------------------------------------------------
1201/* ***** 4/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1202/*------------------------------------------------------------------
1203/*------------------------------------------------------------------
1204-- 3. SIDEBAR
1205---- 3.3 TITLEBOX
1206------ 3.3.3 SUBSCRIBERS
1207-------------------------------------------------------------------*/
1208
1209/* Number of subscribers and users online */
1210/* Position .users-online inline/above subscribe button */
1211.subscribers,
1212.users-online {
1213 height:30px;
1214 padding:0 15px;
1215 margin-top:-31px;
1216 position:absolute;
1217 right:0;
1218 background:#1f1f22;
1219 font-size:11px;
1220 line-height:30px;
1221 color:#9999a0;
1222}
1223
1224/* Hide number of users online count */
1225/* Also removing default green circle (:before) */
1226.users-online,
1227.users-online:before {
1228 display:none;
1229 content:none;
1230}
1231
1232/* Have users online count appear on hover over subscriber count text */
1233.subscribers:hover + .users-online,
1234.users-online:hover {
1235 display:block;
1236}
1237
1238/* New green circle before users online */
1239/* //Note: originally had icon animate (glow) but removed to save space */
1240.users-online:after {
1241 content:"";
1242 width:7px;
1243 height:7px;
1244 display:block;
1245 position:absolute;
1246 top:11px;
1247 left:3px;
1248 background:#4bda4b;
1249 border-radius:50%;
1250}
1251
1252
1253/*------------------------------------------------------------------
1254/* ***** 4/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1255/*------------------------------------------------------------------
1256/*------------------------------------------------------------------
1257-- 3. SIDEBAR
1258---- 3.3 TITLEBOX
1259------ 3.3.4 TOGGLE
1260-------------------------------------------------------------------*/
1261
1262/* Style moderator status, contributor status, and use subreddit theme toggle */
1263/* XXX changed .toggle to form to save characters */
1264/* XXX minimum specificity checked */
1265.titlebox .leavemoderator,
1266.titlebox form.leavecontributor-button,
1267.titlebox form.sr_style_toggle {
1268 padding:8px 15px;
1269 background:#202023;
1270 border-top:1px solid #28282d;
1271 border-bottom:1px solid #161618;
1272 color:#777781;
1273}
1274
1275/* Adjust bottom-padding and font-size on sub theme toggle */
1276.titlebox form.sr_style_toggle {
1277 padding-bottom:10px;
1278 font-size:11px;
1279}
1280
1281/* Adjust left margin on sub theme toggle and user flair toggle text (labels) */
1282/* XXX moved flairtoggle out of block to save space */
1283.sr_style_toggle label,
1284.flairtoggle label {
1285 margin-left:2px;
1286}
1287
1288/* Replace default moderator/contributor text */
1289/* Set existing text to 0 font-size */
1290.titlebox .leavemoderator,
1291.titlebox form.leavecontributor-button {
1292 font-size:0; /* XXX check this works in IE */
1293}
1294
1295/* Set styling for replacement pseudo text for moderator/contributor status */
1296.titlebox .leavemoderator:before,
1297.titlebox form.leavecontributor-button:before {
1298 width:auto;
1299 height:15px;
1300 display:inline-block;
1301 margin-right:6px;
1302 float:none;
1303 position:relative;
1304 top:-1px;
1305 vertical-align:middle;
1306 font-size:11px;
1307 line-height:17px;
1308 text-indent:20px;
1309 color:#777781; /* ZZZ */
1310}
1311
1312/* Replacement text and new icons for moderator/contributor status */
1313.titlebox .leavemoderator:before {
1314 content:"Moderator";
1315 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat 0 -127px;
1316}
1317.titlebox form.leavecontributor-button:before {
1318 content:"Approved submitter";
1319 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat 0 -147px;
1320}
1321
1322/* moderator/contributor "change" and "leave" links */
1323/* Set size of all links */
1324.titlebox .leavemoderator a,
1325.titlebox form.leavecontributor-button a {
1326 font-size:11px;
1327}
1328
1329/* Positioning of top level links (change/leave) */
1330.titlebox .leavemoderator > a,
1331.titlebox form.leavecontributor-button > a,
1332.titlebox .leavecontributor-button .togglebutton {
1333 display:inline-block;
1334 margin-left:5px;
1335}
1336
1337/* Adjust leave contributor confirmation text and links */
1338/* XXX originally had vertical-align:text-bottom for yes/no links but no apparent effect */
1339.leavecontributor-button .option.active.error {
1340 display:block;
1341 margin:3px 0 0 20px;
1342 font-size:11px;
1343}
1344
1345
1346/*------------------------------------------------------------------
1347/* ***** 5/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1348/*------------------------------------------------------------------
1349/*------------------------------------------------------------------
1350-- 3. SIDEBAR
1351---- 3.3 TITLEBOX
1352------ 3.3.4 USER FLAIR
1353-------------------------------------------------------------------*/
1354
1355/* User flair toggle area (checkbox and label) */
1356/* XXX changed .toggle to form to save characters */
1357/* XXX can't really combine with any other selectors/style sets */
1358/* XXX default top border color when not gold user (so no theme toggle) and not mod/cont... */
1359/* XXX ...in this case flairtoggle is directly after subscribe button and want light top border */
1360.titlebox form.flairtoggle {
1361 padding:8px 15px;
1362 margin:0;
1363 position:relative;
1364 background:#1f1f22;
1365 border-top:1px solid #27272b;
1366 font-size:11px;
1367 color:#9999a0;
1368}
1369
1370/* If the flairtoggle form follows moderator, contributor, or theme toggle then set light border at top */
1371/* Border is for the previous div/form and replaces (overlays with margin-top:-1px) the default dark bottom border */
1372.titlebox .leavemoderator ~ form.flairtoggle,
1373.titlebox .leavecontributor-button ~ form.flairtoggle,
1374.titlebox .sr_style_toggle ~ form.flairtoggle {
1375 margin-top:-1px;
1376 border-top-color:#28282d;
1377}
1378
1379/* If the flairtoggle form follows moderator, contributor, or theme toggle then set pseudo dark border at top */
1380/* This is to make it look "inset" */
1381/* This block and previous block act to swap around the border colors */
1382.titlebox .leavemoderator ~ form.flairtoggle:before,
1383.titlebox .leavecontributor-button ~ form.flairtoggle:before,
1384.titlebox .sr_style_toggle ~ form.flairtoggle:before {
1385 content:"";
1386 height:1px;
1387 display:block;
1388 position:absolute;
1389 top:0;
1390 left:0;
1391 right:0;
1392 background:#161618;
1393}
1394
1395/* User flair preview container */
1396/* Set color same as background to hide parentheses */
1397.titlebox .tagline {
1398 padding:4px 15px 10px;
1399 margin:0;
1400 position:relative;
1401 background:#1f1f22;
1402 border-bottom:1px solid #161618;
1403 font-size:11px;
1404 color:#1f1f22;
1405}
1406
1407/* User flair preview links */
1408/* //Note: this also applies to links in the option pane */
1409.titlebox .tagline a {
1410 font-size:11px;
1411 color:#3498db;
1412}
1413
1414/* User flair preview flair text size */
1415.titlebox .tagline > .flair {
1416 font-size:10px;
1417}
1418
1419
1420/*------------------------------------------------------------------
1421/* ***** 5/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1422/*------------------------------------------------------------------
1423/*------------------------------------------------------------------
1424-- 3. SIDEBAR
1425---- 3.3 TITLEBOX
1426------ 3.3.5 MARKDOWN
1427-------------------------------------------------------------------*/
1428
1429/* Style markdown container */
1430/* div.usertext .md is for the me/f/all page */
1431/* specifying div tag as .usertext also applied to parent form element */
1432.titlebox .usertext-body .md,
1433.titlebox div.usertext .md {
1434 padding:5px 15px;
1435 position:relative;
1436 background:#202023;
1437 border-top:1px solid #28282d;
1438 border-bottom:1px solid #161618;
1439 font-size:12px;
1440 color:#dddde3; /* ZZZ */
1441}
1442
1443/* Set a light inset pseudo bottom-border to .md */
1444.titlebox .usertext-body .md:after {
1445 content:"";
1446 height:1px;
1447 display:block;
1448 position:absolute;
1449 bottom:0;
1450 left:0;
1451 right:0;
1452 background:#28282d;
1453}
1454
1455/* Set negative bottom margin to cover .bottom light top-border */
1456/* This is to stop a light-dark-light border when there is an .md in titlebox */
1457.titlebox .usertext-body .md {
1458 margin-bottom:-1px;
1459}
1460
1461/* Set dark top-border and remove bottom-border on /r/all titlebox .md as no subscribe/toggle areas */
1462.titlebox > h1 + .usertext > .md {
1463 border-top:1px solid #161618;
1464 border-bottom:0;
1465}
1466
1467/* Set padding and dark top-border on /r/mod (.titlebox doesn't have .md just p) */
1468.titlebox > h1 + .usertext > p {
1469 padding:10px 15px;
1470 border-top:1px solid #161618;
1471}
1472
1473/* Titlebox markdown */
1474/* Set custom margins and font-sizes for headers */
1475/* Set custom margins for paragraphs and lists */
1476/* This doesn't affect markdown in posts */
1477.titlebox .md h1,
1478.titlebox .md h2,
1479.titlebox .md h3,
1480.titlebox .md h4,
1481.titlebox .md h5,
1482.titlebox .md h6 {
1483 margin:0.5em 0;
1484 font-weight:bold;
1485 color:#eeeef1; /* ZZZ */
1486}
1487.titlebox .md h1 {
1488 font-size:18px;
1489}
1490.titlebox .md h1 a {
1491 color:#3498db;
1492}
1493.titlebox .md h2 {
1494 font-size:17px;
1495}
1496.titlebox .md h3 {
1497 font-size:16px;
1498}
1499.titlebox .md h4 {
1500 font-size:15px;
1501}
1502.titlebox .md h5 {
1503 font-size:14px;
1504}
1505.titlebox .md h6 {
1506 font-size:14px;
1507 font-weight:normal;
1508}
1509.titlebox .md > p {
1510 margin:1em 0;
1511}
1512.titlebox .md ul,
1513.titlebox .md ol {
1514 padding-left:20px;
1515 margin:0.5em 0;
1516}
1517
1518
1519
1520/*------------------------------------------------------------------
1521/* ***** 5/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1522/*------------------------------------------------------------------
1523/*------------------------------------------------------------------
1524-- 3. SIDEBAR
1525---- 3.3 TITLEBOX
1526------ 3.3.6 PROFILE
1527-------- 3.3.6.1 KARMA
1528-------------------------------------------------------------------*/
1529
1530/* Link/comment karma */
1531/* //Note: using > .karma as class also applied to gold time remaining text */
1532.titlebox > .karma {
1533 margin:8px 1px 0 15px;
1534 display:inline-block;
1535 color:#eeeef1; /* ZZZ */
1536}
1537
1538/* Adjust margin on comment karma text */
1539.titlebox > .comment-karma {
1540 margin-top:5px;
1541}
1542
1543/* Set margin on karma breakdown by sub table link */
1544.karma-breakdown {
1545 margin:10px 15px;
1546}
1547
1548/* Set width and margin of karma breakdown table */
1549#per-sr-karma {
1550 width:264px;
1551 margin:10px 0 10px 16px;
1552}
1553
1554/* Override default karma breakdown table cell color (subreddit name is th) */
1555#per-sr-karma tr td {
1556 color:#aaaab1; /* ZZZ */
1557}
1558
1559
1560/*------------------------------------------------------------------
1561/* ***** 5/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1562/*------------------------------------------------------------------
1563/*------------------------------------------------------------------
1564-- 3. SIDEBAR
1565---- 3.3 TITLEBOX
1566------ 3.3.6 PROFILE
1567-------- 3.3.6.2 SNOOVATAR
1568-------------------------------------------------------------------*/
1569
1570/* Style snoovatar button (same as morelink) */
1571/* !important fixes for RES */
1572.gold-accent.snoovatar-link {
1573 margin:10px 15px;
1574 border-radius:1px;
1575 background:#39393f!important;
1576 border:1px solid #161618!important;
1577 line-height:31px;
1578}
1579
1580/* Set lighter background on hover */
1581/* !important to overwrite default above */
1582.gold-accent.snoovatar-link:hover {
1583 background:#424249!important;
1584}
1585
1586/* Remove default icon (old style reddit snoo face) */
1587.gold-accent.snoovatar-link:before {
1588 content:none;
1589}
1590
1591/* Style snoovatar link within button */
1592/* Same border-color as morelink */
1593.snoovatar-link a {
1594 display:block;
1595 border:1px solid #49494f;
1596 border-radius:1px;
1597 color:#eeeef1!important;
1598}
1599
1600/* Set lighter border on hover */
1601.snoovatar-link a:hover {
1602 border-color:#53535a;
1603}
1604
1605/* Add custom snoo icon to link/button */
1606.snoovatar-link a:before {
1607 content:"";
1608 width:20px;
1609 height:20px;
1610 display:inline-block;
1611 margin-right:8px;
1612 position:relative;
1613 top:5px;
1614 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat 0 -103px;
1615}
1616
1617
1618/*------------------------------------------------------------------
1619/* ***** 5/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1620/*------------------------------------------------------------------
1621/*------------------------------------------------------------------
1622-- 3. SIDEBAR
1623---- 3.3 TITLEBOX
1624------ 3.3.7 META
1625-------------------------------------------------------------------*/
1626
1627/* Style sidebar meta info (creator/age) */
1628.titlebox .bottom {
1629 min-height:11px;
1630 padding:8px 15px;
1631 background:#1f1f22;
1632 border-top:1px solid #27272b; /* ZZZ make sure this border color is used on all #1f1f22 bgs, should it be #28282d as applies to .md??? */
1633 font-size:11px;
1634 color:#9999a1; /* ZZZ */
1635}
1636
1637/* Adjust margin on profile page, add relative for pseudo border */
1638/* //Note: used > .bottom as class also applied to server-seconds block */
1639.profile-page .titlebox > .bottom {
1640 margin-top:15px;
1641 position:relative;
1642}
1643
1644/* Remove top margin if gold expiration box (which has no bottom margin) */
1645/* //Note: need .titlebox in selector for specificity */
1646.titlebox .gold-expiration-info + .bottom {
1647 margin-top:0;
1648}
1649
1650/* Add darker pseudo border on profile pages */
1651/* .md is always present on other pages so can add dark pseudo border to that usually */
1652/* //Note: also applied to server-seconds .bottom */
1653.profile-page .titlebox .bottom:before {
1654 content:"";
1655 height:1px;
1656 display:block;
1657 position:absolute;
1658 top:0;
1659 left:0;
1660 right:0;
1661 background:#161618; /* XXX is this duplicated? */
1662}
1663
1664/* Remove user flair */
1665.bottom .flair {
1666 display:none;
1667 font-size:10px;
1668}
1669
1670/* Remove default text from subreddit age */
1671/* XXX reduced selector shouldn't be any other .age elements */
1672.age {
1673 font-size:0; /* XXX check this works in IE */
1674}
1675
1676/* Add custom icon next to subreddit age */
1677/* XXX reduced selector shouldn't be any other .age elements */
1678.age time {
1679 height:11px;
1680 padding-left:14px;
1681 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat 0 -166px;
1682 font-size:11px;
1683}
1684
1685/* Remove default mail image from "send a private message" link (on other users page) */
1686/* XXX reduced selector shouldn't be any other img in .bottom divs */
1687.bottom img {
1688 display:none;
1689}
1690
1691/* Make space for icon by adding padding "send a private message" link text */
1692/* XXX reduced selector as no links in .server-seconds .bottom */
1693.profile-page .bottom a {
1694 padding-left:19px;
1695 position:relative;
1696}
1697
1698/* Add #mail icon to "send a private message" link */
1699/* XXX reduced selector as no links in .server-seconds .bottom */
1700.profile-page .bottom a:before {
1701 content:"";
1702 width:15px;
1703 height:10px;
1704 display:block;
1705 position:absolute;
1706 top:2px;
1707 left:0;
1708 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) 0 -50px no-repeat;
1709}
1710
1711
1712/*------------------------------------------------------------------
1713/* ***** 6/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1714/*------------------------------------------------------------------
1715/*------------------------------------------------------------------
1716-- 3. SIDEBAR
1717---- 3.3 TITLEBOX
1718------ 3.3.8 GOLD
1719-------------------------------------------------------------------*/
1720
1721/* User gold info (expiration, creddits etc.) container */
1722/* //Note: no bottom border as provided by .bottom */
1723.gold-expiration-info {
1724 padding:0;
1725 margin:15px 0 0;
1726 background:#212125;
1727 border:0;
1728 border-top:1px solid #161618;
1729 border-radius:0;
1730}
1731
1732/* Gold remaining (time) container */
1733/* //Note: color applies to "of reddit gold remaining" text */
1734.gold-remaining {
1735 padding:10px 15px 12px;
1736 margin-bottom:1px;
1737 border-top:1px solid #28282d;
1738 color:#cd9930;
1739}
1740
1741/* Adjust margin and color of gold remaining (time) */
1742/* Is span so had to give inline-block to add margin */
1743.gold-remaining .karma {
1744 display:inline-block;
1745 margin-bottom:3px;
1746 color:#f4b639;
1747}
1748
1749/* Add margin to "view gold features/benefits" link */
1750.gold-remaining a {
1751 display:inline-block;
1752 margin-top:8px;
1753}
1754
1755/* Set top margin for "x gold creddits to give" link and "x gildings given out" (no creddit link) */
1756/* //Note: creddits info should only appear on own user page */
1757.gold-creddits-remaining,
1758.gold-remaining + .num-gildings {
1759 margin-top:-5px;
1760}
1761
1762/* Lower default top margin (from 5px) and set color for "x gildings given out" */
1763.num-gildings {
1764 margin-top:3px;
1765 color:#cd9930;
1766}
1767
1768/* Set the padding on the last div as fallback */
1769/* //Note: this covers the creddits/num-gildings divs */
1770.gold-expiration-info > div:last-of-type {
1771 padding-bottom:12px;
1772}
1773
1774/* "Gifts on behalf of..." and "/u/... has helped pay for..." container */
1775.server-seconds {
1776 padding:0;
1777 background:#212125;
1778 border:0;
1779 border-radius:0;
1780}
1781
1782/* Set padding of text and (if own profile) the visibility settings */
1783.server-seconds > p,
1784.server-seconds-public.bottom {
1785 padding:13px 15px;
1786}
1787
1788/* Remove margin on visibility settings and prep for pseudo border from standard .bottom */
1789.server-seconds-public.bottom {
1790 margin-top:0;
1791 position:relative;
1792}
1793
1794/* If user has been gilded and given gold then it will show both paid for/on behalf of time */
1795/* Set border of second paragraph "Gifts on behalf of..." */
1796.server-seconds > p + p {
1797 margin-top:1px;
1798 position:relative;
1799 border-top:1px solid #161618;
1800}
1801
1802/* Add lighter pesudo border to second paragraph (below dark border) */
1803/* XXX can remove display:block as inherited */
1804.server-seconds > p + p:before {
1805 content:"";
1806 height:1px;
1807 display:block;
1808 position:absolute;
1809 top:0;
1810 left:0;
1811 right:0;
1812 background:#28282d; /* XXX duplicates??? line 1575 */
1813}
1814
1815/* Color of server time (bold text) */
1816.server-seconds em {
1817 color:#eeeef1;
1818}
1819
1820/* "give reddit gold to /u/..." link container on profile pages */
1821/* //Note: using .profile-page to distinguish from giftgold in /r/all sidebar */
1822.profile-page .giftgold {
1823 padding:0 15px;
1824 margin:15px 0;
1825}
1826
1827/* If .giftgold follows gold expiration box adjust padding/margin, set top border, and prep for pseudo border */
1828/* //Note: the top border is for the gold expiration container which doesn't have a bottom border */
1829.gold-expiration-info + .giftgold {
1830 padding-top:15px;
1831 margin-top:0;
1832 position:relative;
1833 border-top:1px solid #28282d;
1834}
1835
1836/* Set darker sub border if follows gold expiration as background is darker than gold expiration */
1837.gold-expiration-info + .giftgold:before {
1838 content:"";
1839 height:1px;
1840 position:absolute;
1841 top:0;
1842 left:0;
1843 right:0;
1844 background:#161618; /* XXX duplicated??? */
1845}
1846
1847/* Set color of give gold link (also applies to /r/all links) */
1848.giftgold a {
1849 color:#cd9930;
1850}
1851
1852/* Gold options (on /r/all) containers */
1853/* //Note: using .allminus-link and not .giftgold as also appears on profile page */
1854.allminus-link,
1855.gilded-link {
1856 margin:0;
1857 background:#1f1f22;
1858 border:1px solid #101014;
1859 border-top:0;
1860 border-bottom:0;
1861 font-family:sans-serif;
1862}
1863
1864/* Add bottom border (dark outer) to last option container "see gilded comments and submissions" */
1865.gilded-link {
1866 border-bottom:1px solid #101014;
1867}
1868
1869/* Style gold option links */
1870/* //Note: color already set for .allminus-link a (from profile .giftgold), need for .gilded-link */
1871.allminus-link a,
1872.gilded-link a {
1873 display:block;
1874 padding:6px 15px;
1875 border:1px solid #27272b;
1876 border-top:0;
1877 border-bottom:0;
1878 color:#cd9930;
1879}
1880
1881/* Set dark top border and padding to first gold option link ("exclude your subscribed...") (the 2nd div under the parent div.spacer) */
1882.allminus-link:nth-of-type(2) a {
1883 padding-top:10px;
1884 border-top:1px solid #161618;
1885}
1886
1887/* Set bottom border and padding of last option link "see gilded comments and submissions" */
1888.gilded-link a {
1889 padding-bottom:10px;
1890 border-bottom:1px solid #27272b;
1891}
1892
1893
1894/*------------------------------------------------------------------
1895/* ***** 6/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1896/*------------------------------------------------------------------
1897/*------------------------------------------------------------------
1898-- 3. SIDEBAR
1899---- 3.4 TOOLS
1900-------------------------------------------------------------------*/
1901
1902/* Content box border and font */
1903.sidecontentbox {
1904 border:1px solid #101014;
1905 font-family:sans-serif;
1906}
1907
1908/* Content box header containers */
1909.sidecontentbox > .title {
1910 padding:10px 15px;
1911 background:#212125;
1912 border:1px solid #28282d;
1913}
1914
1915/* Content box headers */
1916/* //Note: original text-transform is uppercase */
1917.sidecontentbox > .title h1 {
1918 font-size:12px;
1919 font-weight:bold;
1920 text-transform:lowercase;
1921 color:#eeeef1; /* ZZZ */
1922}
1923
1924/* Collapse -/+ button on moderation tools box */
1925/* XXX this matches default specificity */
1926.sidecontentbox .collapse-button {
1927 position:relative;
1928 top:-1px;
1929 background:#3c3c40;
1930 border:0;
1931 border-radius:1px;
1932 line-height:8px;
1933 color:#bbbbc1;
1934}
1935
1936/* Style container content area */
1937.sidecontentbox .content {
1938 background:#202023;
1939 border:1px solid #28282d;
1940 border-top:1px solid #161618;
1941 padding:10px 15px;
1942}
1943
1944/* Remove background and resize links */
1945/* //Note: font-size applies to recently viewed link titles (default 13px) */
1946.sidecontentbox .content a {
1947 background-color:transparent;
1948 font-size:12px;
1949}
1950
1951
1952/*------------------------------------------------------------------
1953/* ***** 6/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
1954/*------------------------------------------------------------------
1955/*------------------------------------------------------------------
1956-- 3. SIDEBAR
1957---- 3.4 TOOLS
1958------ 3.4.1 MODERATOR
1959-------------------------------------------------------------------*/
1960
1961/* Position of "message the moderators" link */
1962.sidecontentbox a.helplink {
1963 margin:12px 15px 0 0;
1964}
1965
1966/* Style "about moderation team" and "...and x more" button li containers */
1967.sidecontentbox .more {
1968 margin:15px 0 0;
1969 display:inline-block;
1970 border:1px solid #161618;
1971 border-radius:1px;
1972 text-align:left;
1973}
1974
1975/* Style "about moderation team" and "...and x more" buttons/link */
1976/* //Note: the "...and x more" button is an actual button on profile pages and has .expand-summary class */
1977/* //Note: #side-multi-list is for "public multireddits" list which needs matching specificity */
1978/* //Note: added in trophy table "... more" link */
1979/* //Note: added in copy/rename multi form buttons */
1980/* XXX better to make this a global style */
1981.sidecontentbox .more a,
1982.sidecontentbox .expand-summary,
1983#side-multi-list + .expand-summary,
1984.sidecontentbox .trophy-table + p a,
1985.multi-details form.copy-multi button,
1986.multi-details form.rename-multi button,
1987.usertext button {
1988 padding:3px 6px 4px;
1989 display:inline-block;
1990 background:#39393f;
1991 border:1px solid #49494f;
1992 border-radius:1px;
1993 font-size:11px;
1994 color:#eeeef1;
1995}
1996
1997/* Set specific height on sub "moderators" box "about moderation team" and "...and x more" buttons */
1998/* //Note: doing this to match height of buttons on profile page */
1999/* //Note: assume the arrows on the profile page buttons push the line height up */
2000.sidecontentbox .more a {
2001 height:17px;
2002 line-height:17px;
2003}
2004
2005/* Set lighter background/border on hover */
2006.sidecontentbox .more a:hover,
2007.sidecontentbox .expand-summary:hover,
2008#side-multi-list + .expand-summary:hover,
2009.trophy-table + p a:hover,
2010.multi-details form.copy-multi button:hover,
2011.multi-details form.rename-multi button:hover,
2012.usertext button:hover {
2013 background:#424249;
2014 border-color:#53535a;
2015}
2016
2017/* Set top margin on profile page "...and x more" button */
2018.sidecontentbox .expand-summary,
2019#side-multi-list + .expand-summary {
2020 margin-top:8px;
2021}
2022
2023/* Set max width of usernames in sub moderator list to stop flairs overflowing */
2024/* //Note: setting margin as mod flairs don't have gap due to border, .more is a li though so using :not() to preserve its margin */
2025.sidecontentbox a.helplink ~ ul.content > li:not(.more) {
2026 max-width:266px;
2027 margin:0 0 2px;
2028 overflow:hidden;
2029 white-space:nowrap;
2030}
2031
2032/* Resize user flair in mod list */
2033.sidecontentbox .flair {
2034 font-size:10px;
2035}
2036
2037/* Reduce new line-height on "moderator of" sub list */
2038/* XXX github change comments on new interst. imgs but can't see any examples */
2039#side-mod-list {
2040 line-height:1.4;
2041}
2042
2043
2044/*------------------------------------------------------------------
2045/* ***** 6/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
2046/*------------------------------------------------------------------
2047/*------------------------------------------------------------------
2048-- 3. SIDEBAR
2049---- 3.4 TOOLS
2050------ 3.4.2 ACTIVITY
2051-------------------------------------------------------------------*/
2052
2053/* Resize and adjust margin on recently viewed link arrows */
2054.gadget .midcol {
2055 width:25px;
2056 margin:2px 4px 0 -3px;
2057}
2058
2059/* Set font-size of recently viewed comment links and "clear" link */
2060.gadget a.reddit-comment-link,
2061.gadget .right a {
2062 font-size:11px;
2063}
2064
2065/* Remove 0.5em left margin applied to recent link score */
2066.gadget .score {
2067 margin-left:0;
2068}
2069
2070/* Outer border for account activity link container */
2071.account-activity-box {
2072 border:1px solid #101014;
2073}
2074
2075/* Style activity link */
2076.account-activity-box a {
2077 padding:8px 10px;
2078 display:block;
2079 background:#212125;
2080 border:1px solid #28282d;
2081 font-family:sans-serif;
2082 font-size:11px;
2083 color:#dddde1; /* ZZZ */
2084}
2085
2086
2087/*------------------------------------------------------------------
2088/* ***** 6/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
2089/* XXX need to style trophies faq page */
2090/*------------------------------------------------------------------
2091/*------------------------------------------------------------------
2092-- 3. SIDEBAR
2093---- 3.4 TOOLS
2094------ 3.4.3 TROPHIES
2095-------------------------------------------------------------------*/
2096
2097/* Trophy name color */
2098/* //Note: default uses !important */
2099.trophy-name {
2100 color:#eeeef1!important;
2101}
2102
2103/* Trophy desc color */
2104.trophy-description {
2105 color:#bbbbc1; /* ZZZ */
2106}
2107
2108/* Hide parentheses around ".. more" link by matching background color */
2109/* //Note: link styling has been combined with other buttons under 3.4.1 XXX */
2110.trophy-table + p {
2111 color:#202023;
2112}
2113
2114
2115/*------------------------------------------------------------------
2116/* ***** 6/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
2117/*------------------------------------------------------------------
2118/*------------------------------------------------------------------
2119-- 3. SIDEBAR
2120---- 3.5 LINK META
2121-------------------------------------------------------------------*/
2122
2123/* Link meta info container (time posted, score, shortlink) */
2124/* //Note: margin and relative for outer pseudo border */
2125/* XXX inconsistency between borders/pseudo and normal */
2126.linkinfo {
2127 padding:0;
2128 margin:0 1px;
2129 position:relative;
2130 background:#212125;
2131 border:1px solid #28282d;
2132 border-radius:0;
2133 font-family:sans-serif;
2134}
2135
2136/* "this link was posted on..." container */
2137/* XXX font-size:12px and replaced text-indent with LR padding */
2138/* XXX removed font-weight will set to time */
2139.linkinfo .date {
2140 padding:15px 15px 0;
2141 margin:0;
2142 color:#eeeef1;
2143}
2144
2145/* "this link was posted on..." time font-weight */
2146.linkinfo time {
2147 font-weight:700;
2148}
2149
2150/* Post score container, set color of % upvoted text */
2151/* XXX replaced left margin with padding */
2152.linkinfo .score {
2153 padding:10px 15px 5px;
2154 font-size:11px;
2155 color:#9999a1; /* ZZZ */
2156}
2157
2158/* Style the score number */
2159.linkinfo .score .number {
2160 margin-right:3px;
2161 vertical-align:-2px;
2162 font-size:18px;
2163 font-weight:400;
2164 color:#eeeef1; /* ZZZ */
2165}
2166
2167/* Remove "points" text after score */
2168.linkinfo .score .word {
2169 display:none;
2170}
2171
2172/* Shortlink container */
2173/* //Note: removed "shortlink:" text with font-size, check IE XXX */
2174/* //Note: top border is outer border of container */
2175.linkinfo .shortlink {
2176 margin-top:10px;
2177 font-size:0;
2178 border-top:1px solid #28282d;
2179}
2180
2181/* Style shortlink input (the link itself) */
2182/* XXX check if line-height changes anything in other browsers */
2183.linkinfo .shortlink input {
2184 width:266px;
2185 height:32px;
2186 padding:0 15px;
2187 margin:0;
2188 background:#202023;
2189 border:0;
2190 border-top:1px solid #161618;
2191 font-size:11px;
2192 line-height:31px;
2193 color:#9999a1; /* ZZZ */
2194}
2195
2196/* Set lighter color on hover */
2197.linkinfo .shortlink input:hover {
2198 color:#eeeef1; /* ZZZ */
2199}
2200
2201
2202/*------------------------------------------------------------------
2203/* ***** 6/9/15 ***** COMPLETE COMPLETE COMPLETE COMPLETE COMPLETE
2204/*------------------------------------------------------------------
2205/*------------------------------------------------------------------
2206-- 3. SIDEBAR
2207---- 3.6 LOGIN FORM
2208-------------------------------------------------------------------*/
2209
2210/* Login form container */
2211/* //Note: margin and relative for pseudo outer border */
2212/* XXX removed z-index:1 as psuedo border is against body so not needed */
2213.login-form-side {
2214 padding-top:15px;
2215 margin:0 1px;
2216 background:#202023;
2217 border:1px solid #28282d;
2218 position:relative;
2219}
2220
2221/* Style username and password input forms */
2222/* //Note: background set in global input styles at start of stylesheet */
2223/* //Note: need to set border to override default for login forms */
2224/* XXX removed padding:5px so will take on padding:6px from global styles */
2225.login-form-side input[type="text"],
2226.login-form-side input[type="password"] {
2227 width:267px;
2228 margin:0 0 10px 15px;
2229 border:1px solid #323238;
2230}
2231
2232/* Set lighter background and border for username/password forms on hover/active */
2233.login-form-side input[type="text"]:hover,
2234.login-form-side input[type="text"]:active,
2235.login-form-side input[type="text"]:focus,
2236.login-form-side input[type="password"]:hover,
2237.login-form-side input[type="password"]:active,
2238.login-form-side input[type="password"]:focus {
2239 background:#29292e;
2240 border-color:#3c3c42;
2241 outline:none;
2242}
2243
2244/* Positioning and color of "remember me" option */
2245.login-form-side #remember-me {
2246 margin:0 15px 10px;
2247 color:#eeeef1; /* ZZZ */
2248}
2249
2250/* Style "recover password" link */
2251.login-form-side .recover-password.attention {
2252 padding:0;
2253 border:0;
2254 border-bottom:1px solid #2c6a95;
2255 border-radius:0;
2256 font-weight:400;
2257}
2258
2259/* Add "?" to end of "recover password" link */
2260.recover-password.attention:after {
2261 content:"?";
2262}
2263
2264/* Position login button container */
2265.login-form-side .submit {
2266 margin:4px 15px 0 0;
2267}
2268
2269/* Style login button */
2270.login-form-side button.btn {
2271 margin:0;
2272 background:#39393f;
2273 border:1px solid #49494f;
2274 border-radius:2px;
2275 color:#eeeef1;
2276}
2277
2278/* Set lighter background/border for login button on hover */
2279.login-form-side button.btn:hover {
2280 background:#424249;
2281 border-color:#53535a;
2282}
2283
2284/* Style "wrong password" error message */
2285/* XXX had color set but inherits from .error */
2286.login-form-side .error {
2287 margin:0 15px;
2288 font-family:sans-serif;
2289 font-size:11px;
2290}
2291
2292
2293
2294
2295
2296
2297
2298
2299/*------------------------------------------------------------------
2300-- 4. CONTENT
2301-------------------------------------------------------------------*/
2302
2303
2304 /* CONTENT CONTAINER ------ */
2305
2306 body > .content {
2307 margin:24px 315px 80px 8px;
2308 }
2309 body.with-listing-chooser > .content {
2310 margin-left:152px;
2311 transition:margin-left 0.25s ease-in-out;
2312 }
2313 body.with-listing-chooser.listing-chooser-collapsed > .content {
2314 margin-left:23px;
2315 }
2316
2317
2318
2319
2320/*------------------------------------------------------------------
2321-- 4. CONTENT
2322---- 4.1 NAVIGATION
2323-------------------------------------------------------------------*/
2324
2325/* Sub menu (links from..., search page, comments page etc.) container */
2326.menuarea {
2327 padding:10px 15px;
2328 margin:0 1px;
2329 background:#212125;
2330 border:1px solid #28282d;
2331 font-family:sans-serif;
2332 font-size:11px;
2333 text-transform:uppercase;
2334 color:#9999a1;
2335 position:relative;
2336 overflow:visible;
2337}
2338
2339/* Style dropdown list link and add custom icon */
2340.dropdown.lightdrop .selected {
2341 padding-left:21px;
2342 padding-right:0;
2343 background:url(https://a.thumbs.redditmedia.com/UKO5Yt3_710n8nhGIrFV1vaGEp8JAq6NiAfv68qhyk0.png) center left no-repeat;
2344 text-decoration:none;
2345 color:#eeeef1;
2346}
2347
2348/* Set pointer cursor when hovering over dropdown list link */
2349.dropdown.lightdrop .selected:hover {
2350 cursor:pointer;
2351}
2352
2353 /* Style dropdown list */
2354 /* TO DO: MAKE THIS STYLE CONSISTENT WITH OTHER DROPDOWNS (SRDROP ETC) */
2355 .drop-choices.lightdrop {
2356 min-width:80px;
2357 padding:0;
2358 margin:8px 0 0 -1px;
2359 background:#242429;
2360 border:1px solid #2c2c32;
2361 box-shadow:0 0 3px rgba(16,16,18,.5);
2362 }
2363 .drop-choices.lightdrop:after {
2364 content:"";
2365 width:12px;
2366 height:8px;
2367 display:block;
2368 position:absolute;
2369 top:-8px;
2370 left:5px;
2371 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat 0 -413px;
2372 }
2373 .drop-choices.lightdrop a {
2374 padding:3px 6px;
2375 font-weight:bold;
2376 color:#dddde1;
2377 transition:all 0.1s ease-in-out;
2378 }
2379 .drop-choices.lightdrop a:hover {
2380 background:#2d2d35;
2381 color:#eeeef1;
2382 }
2383
2384/* Sub menu without dropdown choices (e.g. on messages page) */
2385/* Hide "|" separator */
2386.menuarea .separator {
2387 visibility:hidden;
2388}
2389
2390/* Set color of links and set font-weight of selected link */
2391.menuarea .flat-list a {
2392 font-weight:400;
2393 color:#bbbbc1;
2394}
2395
2396/* Set hover color for links */
2397.menuarea .flat-list a:hover {
2398 color:#eeeef1;
2399}
2400
2401/* Set color for selected link */
2402.menuarea .flat-list li.selected a,
2403.menuarea .flat-list li.selected a:hover {
2404 color:#fb8500;
2405}
2406
2407
2408/*------------------------------------------------------------------
2409-- 4. CONTENT
2410---- 4.2 SITETABLE
2411-------------------------------------------------------------------*/
2412
2413 .content .sitetable.linklisting, /* normal link/message listings area */
2414 .content > .sitetable.listing, /* message/message page (messages and children) */
2415 .organic-listing { /* promoted link listing */
2416 border:1px solid #101014;
2417 }
2418 .menuarea ~ .sitetable.linklisting,
2419 .infobar ~ .sitetable.linklisting,
2420 .content > .sitetable.listing /* message page will follow menuarea */ {
2421 border-top:0;
2422 }
2423 .commentarea .sitetable.linklisting { /* link listing on related page */
2424 border:0;
2425 }
2426 .menuarea + .spacer .organic-listing { /* promoted link on top page */
2427 border-top-color:#161618;
2428 }
2429
2430
2431
2432 /* INFOBAR ------ */
2433
2434 .infobar:not(.reddit-infobar) {
2435 padding:0;
2436 margin:0;
2437 display:block;
2438 background:#28282d;
2439 border:1px solid #101014;
2440 border-bottom:0;
2441 border-radius:0;
2442 font-family:sans-serif;
2443 }
2444 .infobar .md {
2445 max-width:none;
2446 padding:8px 15px;
2447 border:1px solid #2b2b2b;
2448 font-size:13px;
2449 }
2450
2451 /* Gilded page */
2452 .infobar.gold-accent .md {
2453 color:#cd9930;
2454 }
2455
2456
2457
2458
2459/*------------------------------------------------------------------
2460-- 4. CONTENT
2461---- 4.3 LINKS
2462-------------------------------------------------------------------*/
2463
2464/* Style link containers (normal, promoted/ad) */
2465.link,
2466.organic-listing .link,
2467.organic-listing .link.promotedlink,
2468.link.promotedlink.promoted {
2469 padding:9px 10px;
2470 margin:0;
2471 background:#202023;
2472 border:1px solid #28282d;
2473 border-bottom:1px solid #161618;
2474}
2475
2476/* Need lighter bottom border on promoted/ad links */
2477.organic-listing .link,
2478.organic-listing .link.promotedlink {
2479 border-bottom-color:#28282d;
2480}
2481
2482/* Add padding to stop long link titles on promoted links covering navigation */
2483.organic-listing .link {
2484 padding-right:60px!important;
2485}
2486
2487/* Increase main link bottom padding on comments/related pages */
2488.single-page .link {
2489 padding-bottom:15px;
2490}
2491
2492/* Style last clicked link */
2493.link.last-clicked {
2494 padding-top:10px;
2495 margin-top:-1px;
2496 position:relative;
2497 background:#1f1f22;
2498 border:1px solid #27272b;
2499 border-bottom:1px solid #161618;
2500 overflow:visible;
2501}
2502
2503/* Add darker psuedo top border to last clicked link */
2504.link.last-clicked:before {
2505 content:"";
2506 height:1px;
2507 display:block;
2508 position:absolute;
2509 top:0;
2510 left:0;
2511 right:0;
2512 background:#161618;
2513}
2514
2515/* If last-clicked link is first in sitetable so reset padding and remove margin */
2516#siteTable .last-clicked:first-of-type {
2517 padding-top:9px;
2518 margin-top:0;
2519}
2520
2521/* If last-clicked link is first in sitetable remove pseudo border */
2522#siteTable .last-clicked:first-of-type:before {
2523 content:none;
2524}
2525
2526/* Remove bottom margin from compressed links */
2527.link.compressed {
2528 margin-bottom:0;
2529}
2530
2531/* Add padding to .entry in compressed links as midcol margin is reduced */
2532.link.compressed .entry {
2533 padding-left:10px;
2534}
2535
2536
2537 /* Borders */
2538
2539 #siteTable > .thing:nth-last-of-type(2) {
2540 border-bottom:1px solid #28282d;
2541 }
2542 .comments-page .content > #siteTable .link {
2543 border-bottom:1px solid #161618;
2544 }
2545 .menuarea ~ #siteTable > .thing:first-of-type,
2546 .infobar ~ #siteTable > .thing:first-of-type,
2547 .commentarea #siteTable > .link:first-of-type {
2548 border-top:1px solid #161618;
2549 }
2550 .menuarea + .spacer .organic-listing .link {
2551 border-top:0;
2552 }
2553 .commentarea #siteTable > .link:nth-last-of-type(2) {
2554 border-bottom:0;
2555 }
2556
2557
2558/*------------------------------------------------------------------
2559-- 4. CONTENT
2560---- 4.3 LINKS
2561------ 4.3.1 VOTING
2562-------------------------------------------------------------------*/
2563
2564/* Style link rank */
2565.link .rank {
2566 padding:3px;
2567 margin-top:10px;
2568 margin-right:3px;
2569 background:#1d1d1f;
2570 border:1px solid #1a1a1b;
2571 border-radius:1px;
2572 font-size:11px;
2573 font-family:sans-serif;
2574 text-align:center;
2575 color:#666671;
2576}
2577
2578/* Style last clicked link rank */
2579.link.last-clicked .rank {
2580 background:#222226;
2581 border-color:#28282d;
2582}
2583
2584/* Adjust rank margin if compressed display */
2585.link.compressed .rank {
2586 margin-top:3px;
2587 margin-right:5px;
2588}
2589
2590
2591 .organic-listing .link .rank {
2592 visibility:hidden;
2593 }
2594 .link.promoted .rank {
2595 min-width:2.2ex;
2596 visibility:visible;
2597 }
2598 .link.stickied .rank,
2599 .link.promoted .rank {
2600 position:relative;
2601 }
2602
2603 .link.promoted .rank:after {
2604 content:"AD";
2605 margin-left:-1px;
2606 color:#2b678f;
2607 }
2608 .link.stickied .rank:after {
2609 content:"S";
2610 margin-left:-1px;
2611 color:#19927b;
2612 }
2613
2614 .infobar ~ .sitetable .link.promoted .rank {
2615 color: #2b678f;
2616 }
2617 .menuarea ~ .sitetable .link.stickied .rank:after,
2618 .infobar ~ .sitetable .link.promoted .rank:after {
2619 content:none;
2620 }
2621
2622
2623
2624 /* VOTING ------ */
2625
2626 .link .midcol {
2627 margin:0 15px 0 5px;
2628 }
2629
2630 /* Score */
2631 .link .score {
2632 font-family:sans-serif;
2633 font-size:13px;
2634 color:#88888e;
2635 }
2636 .link.compressed .score {
2637 margin-right:5px;
2638 font-family:verdana,arial,helvetica,sans-serif;
2639 font-size:10px;
2640 color:#637481;
2641 }
2642 .link .score.likes {
2643 color:#fb8500;
2644 }
2645 .link .score.dislikes {
2646 color:#7178e1;
2647 }
2648
2649 /* Arrows */
2650 .arrow.up,
2651 .arrow.down,
2652 .arrow.upmod,
2653 .arrow.downmod {
2654 margin:0 auto;
2655 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat;
2656 }
2657 .arrow.down {
2658 background-position:0 -15px;
2659 }
2660 .arrow.downmod {
2661 background-position:-15px -15px;
2662 }
2663 .arrow.up {
2664 background-position:-30px -15px;
2665 }
2666 .arrow.upmod {
2667 background-position:-45px -15px;
2668 }
2669 .arrow.up,
2670 .arrow.upmod {
2671 margin-bottom:-2px
2672 }
2673 .arrow.down,
2674 .arrow.downmod {
2675 margin-top:2px;
2676 }
2677 .link.compressed .arrow.down,
2678 .link.compressed .arrow.downmod {
2679 margin-top:1px;
2680 }
2681
2682 /* Post too old to vote message */
2683 .unvotable-message {
2684 padding-left:0;
2685 border:0;
2686 font-style:italic;
2687 color:#637481;
2688 }
2689
2690
2691
2692/* XXX NEED TO ADD THUMBS TO SPRITESHEET */
2693/* XXX updated on 6/9/2015 */
2694/*------------------------------------------------------------------
2695-- 4. CONTENT
2696---- 4.3 LINKS
2697------ 4.3.2 THUMBNAILS
2698-------------------------------------------------------------------*/
2699
2700 .thumbnail {
2701 margin-bottom:0;
2702 margin-right:9px;
2703 position:relative;
2704 }
2705 /*.self .thumbnail,
2706 .thumbnail.self,
2707 .thumbnail.default,
2708 .thumbnail.nsfw {
2709 background-image:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png)!important;
2710 }*/
2711
2712 .self .thumbnail,
2713 .thumbnail.self {
2714 background-position:center -438px !important;
2715 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat center 0;
2716 }
2717 .self.stickied .thumbnail {
2718 background-position:center -535px !important;
2719 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat center 0;
2720 }
2721 .thumbnail.default {
2722 background-position:center -488px !important;
2723 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat center 0;
2724 }
2725 .thumbnail.nsfw {
2726 max-height:50px;
2727 background-position:center -538px!important;
2728 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat center 0;
2729 }
2730 .thumbnail:before {
2731 content:"";
2732 display:block;
2733 position:absolute;
2734 top:0;
2735 bottom:0;
2736 left:0;
2737 right:0;
2738 background:rgba(30,30,35,0.2);
2739 }
2740 .self .thumbnail:before,
2741 .thumbnail.self:before,
2742 .thumbnail.default:before,
2743 .thumbnail.nsfw:before {
2744 content:none;
2745 }
2746
2747
2748
2749/*------------------------------------------------------------------
2750-- 4. CONTENT
2751---- 4.3 LINKS
2752------ 4.3.3 TITLE
2753-------------------------------------------------------------------*/
2754
2755 .link .title,
2756 .search-title {
2757 margin-bottom:2px;
2758 font-family:sans-serif;
2759 }
2760 .link.compressed .title {
2761 margin:0 5px 0 0;
2762 }
2763 .single-page .link.compressed .title {
2764 margin-bottom:2px;
2765 }
2766 .link a.title,
2767 .single-page .link a.title:visited,
2768 .single-page .link.visited a.title,
2769 .gadget .reddit-link-title {
2770 color:#b5c4cd;
2771 }
2772 .link a.title:hover,
2773 .single-page .link a.title:visited:hover,
2774 .single-page .link.visited a.title:hover,
2775 .gadget .reddit-link-title:hover {
2776 color:#ccd8de;
2777 }
2778 .link a.title:visited,
2779 .link.visited a.title {
2780 color:#808c94;
2781 }
2782 .link a.title:visited:hover,
2783 .link.visited a.title:hover {
2784 color:#97a3aa;
2785 }
2786 .link.stickied a.title,
2787 .link.stickied a.title:visited,
2788 .link.stickied.visited a.title {
2789 color:#18af92;
2790 }
2791 .link.stickied a.title:hover,
2792 .single-page .link.stickied a.title:hover {
2793 color:#33c2a6;
2794 }
2795
2796
2797
2798 /* POST DOMAIN ------ */
2799
2800 .domain,
2801 .spam .domain {
2802 margin-left:-5px;
2803 color:#202023;
2804 }
2805 .last-clicked .domain {
2806 color:#1f1f22;
2807 }
2808 .domain a,
2809 .spam .domain a {
2810 vertical-align:text-bottom;
2811 color:#445059;
2812 }
2813 .domain a:hover,
2814 .title:hover ~ .domain a {
2815 color:#879bb1;
2816 }
2817
2818
2819
2820/*------------------------------------------------------------------
2821-- 4. CONTENT
2822---- 4.3 LINKS
2823------ 4.3.4 TAGLINE
2824-------------------------------------------------------------------*/
2825
2826 .tagline,
2827 .sponsored-tagline,
2828 .gadget small {
2829 color:#637481;
2830 }
2831 .link.compressed .tagline {
2832 margin-right:6px;
2833 }
2834 .link.compressed .subreddit,
2835 .sponsored-tagline {
2836 font-weight:normal;
2837 }
2838
2839 /* Author/subreddit */
2840 .tagline a {
2841 color:#3498db;
2842 }
2843
2844 /* Friend */
2845 a.friend,
2846 .tagline a.friend {
2847 color:#e78c5d;
2848 }
2849
2850 /* Submitter */
2851 a.submitter,
2852 .tagline a.submitter,
2853 .comment.collapsed .tagline > a.submitter,
2854 .comment.collapsed .tagline > a.submitter:hover {
2855 color:#3498db;
2856 }
2857
2858 /* Moderator */
2859 a.moderator,
2860 .tagline a.moderator,
2861 .comment.collapsed .tagline > a.moderator,
2862 .comment.collapsed .tagline > a.moderator:hover,
2863 .tagline .stickied-tagline,
2864 .message.collapsed.threaded .tagline a.moderator {
2865 color:#18af92;
2866 }
2867
2868 /* Admin */
2869 a.admin,
2870 .tagline a.admin,
2871 .comment.collapsed .tagline > a.admin,
2872 .comment.collapsed .tagline > a.admin:hover,
2873 .message.collapsed.threaded .tagline a.admin {
2874 color:#e04232;
2875 }
2876
2877 /* Alumni */
2878 a.alum,
2879 .tagline a.alum,
2880 .comment.collapsed .tagline > a.alum,
2881 .comment.collapsed .tagline > a.alum:hover {
2882 color:#d32a4d;
2883 }
2884
2885 /* Font weight for admin and alumni */
2886 .link .tagline a.admin,
2887 .link .tagline a.alum {
2888 font-weight:normal;
2889 }
2890 .single-page .link .tagline a.admin,
2891 .single-page .link .userattrs a.admin,
2892 .single-page .link .tagline a.alum,
2893 .single-page .link .userattrs .alum {
2894 font-weight:bold;
2895 }
2896
2897
2898
2899/*------------------------------------------------------------------
2900-- 4. CONTENT
2901---- 4.3 LINKS
2902------ 4.3.4 TAGLINE
2903-------- 4.3.4.1 USER
2904-------------------------------------------------------------------*/
2905
2906 /* Hide square brackets */
2907 .tagline .userattrs {
2908 color:#202023;
2909 }
2910 .link.last-clicked .tagline .userattrs {
2911 color:#1f1f22;
2912 }
2913 .comment .tagline .userattrs {
2914 color:#212125;
2915 }
2916
2917 /* User type letter/icon */
2918 .tagline .userattrs a,
2919 .tagline .userattrs .alum,
2920 .message.collapsed.threaded .tagline .userattrs a {
2921 width:12px;
2922 padding:0;
2923 display:inline-block;
2924 border:0;
2925 border-radius:1px;
2926 font-weight:bold;
2927 text-align:center;
2928 color:#101014;
2929 }
2930 .link .userattrs a,
2931 .link .userattrs .alum {
2932 font-weight:normal;
2933 }
2934 .comment.collapsed .tagline .userattrs a,
2935 .comment.collapsed .tagline .userattrs .alum {
2936 width:auto;
2937 background:transparent;
2938 }
2939 .tagline .userattrs > a:first-of-type,
2940 .tagline .userattrs > .alum:first-of-type {
2941 margin-left:-5px;
2942 }
2943
2944 /* Friend */
2945 .tagline .userattrs a.friend {
2946 background:#e78c5d;
2947 }
2948 .comment.collapsed .tagline .userattrs a.friend,
2949 .comment.collapsed .tagline .userattrs a.friend:hover {
2950 color:#e78c5d;
2951 }
2952
2953 /* Submitter */
2954 .tagline .userattrs a.submitter {
2955 background:#3498db;
2956 }
2957 .comment.collapsed .tagline .userattrs a.submitter,
2958 .comment.collapsed .tagline .userattrs a.submitter:hover {
2959 color:#3498db;
2960 }
2961
2962 /* Moderator */
2963 .tagline .userattrs a.moderator {
2964 background:#18af92;
2965 }
2966 .comment.collapsed .tagline .userattrs a.moderator,
2967 .comment.collapsed .tagline .userattrs a.moderator:hover {
2968 color:#18af92;
2969 }
2970
2971 /* Admin */
2972 .tagline .userattrs a.admin {
2973 background:#e04232;
2974 }
2975 .comment.collapsed .tagline .userattrs a.admin,
2976 .comment.collapsed .tagline .userattrs a.admin:hover {
2977 color:#e04232;
2978 }
2979
2980 /* Alumni */
2981 .tagline .userattrs .alum {
2982 background:#d32a4d;
2983 }
2984 .comment.collapsed .tagline .userattrs .alum {
2985 color:#d32a4d;
2986 }
2987
2988 /* Cakeday icon */
2989 .tagline .userattrs .cakeday {
2990 width:11px;
2991 height:8px;
2992 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -39px -95px;
2993 }
2994
2995
2996
2997
2998
2999/*------------------------------------------------------------------
3000-- 4. CONTENT
3001---- 4.3 LINKS
3002------ 4.3.4 OPTIONS
3003-------------------------------------------------------------------*/
3004
3005 /* POST OPTIONS ------ */
3006
3007 .link .entry .flat-list {
3008 padding:0;
3009 }
3010 .single-page .link .flat-list.buttons {
3011 padding-left:1px;
3012 }
3013
3014 /* Links */
3015 .entry .buttons li a {
3016 font-weight:normal;
3017 color:#637481;
3018 }
3019 .link .entry .buttons li.first a {
3020 font-weight:bold;
3021 color:#3498db;
3022 }
3023 .entry .buttons li a:hover,
3024 .link .entry .buttons li.first a:hover {
3025 color:#9ab2ca;
3026 }
3027 .link .entry .buttons li .option.error > a {
3028 color:#e74c3c;
3029 }
3030 .link.stickied .entry .buttons li.first a {
3031 color:#18af92;
3032 }
3033 .link.stickied .entry .buttons li a:hover {
3034 color:#a8cac3;
3035 }
3036 .link .entry .buttons li a:active,
3037 .link .entry .buttons li a:focus {
3038 outline:none;
3039 }
3040
3041
3042
3043 /* NSFW AND PRIVATE TAGS ------ */
3044
3045 .nsfw-stamp,
3046 .private-stamp {
3047 padding:0;
3048 margin-right:2px;
3049 border:0;
3050 }
3051 .nsfw-stamp acronym {
3052 font-weight:600;
3053 color:#e74c3c;
3054 color:#f3524c;
3055 }
3056 .private-stamp {
3057 font-weight:bold;
3058 text-transform:uppercase;
3059 color:#f27935;
3060 color:#5bbaf9;
3061 }
3062
3063
3064
3065/*------------------------------------------------------------------
3066-- 4. CONTENT
3067---- 4.3 LINKS
3068------ 4.3.4 OPTIONS
3069-------- 4.3.4.1 ACTION
3070-------------------------------------------------------------------*/
3071
3072 .action-form {
3073 padding:8px;
3074 background:#252529;
3075 border:1px solid #303036;
3076 border-radius:0;
3077 font-family:sans-serif;
3078 }
3079 .pretty-form.sharelink {
3080 padding-top:10px;
3081 margin-top:10px;
3082 font-family:sans-serif;
3083 }
3084 .action-form input[type="text"],
3085 .pretty-form.sharelink input[type="text"] {
3086 background:#292929;
3087 border:1px solid #393939;
3088 box-shadow:none;
3089 color:#eeeef1;
3090 }
3091 .action-form input[type="text"] {
3092 padding:2px;
3093 background:#303036;
3094 border-color:#404047;
3095 }
3096 .pretty-form.sharelink .little.gray {
3097 font-size:11px;
3098 font-weight:normal;
3099 color:#99999f;
3100 }
3101 .sharetable.preftable button {
3102 margin-top:5px;
3103 background:#39393f;
3104 border:1px solid #49494f;
3105 border-radius:1px;
3106 color:#eeeef1;
3107 }
3108
3109
3110/*------------------------------------------------------------------
3111-- 4. CONTENT
3112---- 4.3 LINKS
3113------ 4.3.4 OPTIONS
3114-------- 4.3.4.2 MOD
3115-------------------------------------------------------------------*/
3116
3117 .flat-list.buttons li.reported-stamp,
3118 .flat-list.buttons .pretty-button.neutral,
3119 .flat-list.buttons .pretty-button.negative,
3120 .flat-list.buttons .pretty-button.positive {
3121 padding:1px 4px;
3122 background:#353535;
3123 border:0!important;
3124 border-radius:3px;
3125 line-height:normal;
3126 }
3127 .flat-list.buttons li.reported-stamp {
3128 margin-left:5px;
3129 color:#f6e69f;
3130 }
3131 .flat-list.buttons .pretty-button.neutral {
3132 color:#bbb;
3133 }
3134 .flat-list.buttons .pretty-button.negative {
3135 color:#fa6157;
3136 }
3137 .flat-list.buttons .pretty-button.positive {
3138 color:#27ae60;
3139 }
3140
3141 /* Pressed */
3142 .flat-list.buttons .pretty-button.neutral.pressed {
3143 background:#999;
3144 }
3145 .flat-list.buttons .pretty-button.negative.pressed {
3146 background:#fa6157;
3147 }
3148 .flat-list.buttons .pretty-button.positive.pressed {
3149 background:#27ae60;
3150 }
3151 .flat-list.buttons .pretty-button.pressed {
3152 color:#101010;
3153 }
3154
3155 /* Status message */
3156 .flat-list.buttons .big-mod-buttons .status-msg {
3157 color:#637481;
3158 }
3159 .flat-list.buttons > li > b {
3160 font-weight:normal;
3161 color:#637481;
3162 }
3163
3164 /* Report reasons */
3165 ul.report-reasons {
3166 margin-top:3px;
3167 background:#252525;
3168 border:1px solid #2d2d2d;
3169 border-radius:0;
3170 }
3171
3172
3173
3174
3175
3176/*------------------------------------------------------------------
3177-- 4. CONTENT
3178---- 4.3 LINKS
3179------ 4.3.5 EXPANDO
3180-------------------------------------------------------------------*/
3181
3182 .link .entry .expando-button {
3183 width:20px;
3184 height:20px;
3185 margin:4px 8px 0 0;
3186 border:1px solid #151519;
3187 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -9999px -9999px #252529!important;
3188 transition:background-color 0.15s ease-in-out,background-position 0.15s ease-in-out;
3189 }
3190 .link .expando-button:hover {
3191 cursor:pointer;
3192 }
3193
3194 /* Self */
3195 .link .entry .expando-button.selftext.collapsed {
3196 background-position:0 -302px!important;
3197 }
3198 .link .entry .expando-button.selftext.expanded {
3199 background-position:0 -282px!important;
3200 }
3201
3202 /* Video/GIF */
3203 .link .entry .expando-button.video.collapsed,
3204 .link .entry .expando-button.video-muted.collapsed {
3205 background-position:0 -342px!important;
3206 }
3207 .link .entry .expando-button.video.expanded,
3208 .link .entry .expando-button.video-muted.expanded {
3209 background-position:0 -322px!important;
3210 }
3211
3212 /* Image (RES) */
3213 .link .entry .expando-button.image.collapsed,
3214 .link .entry .expando-button.image.expanded {
3215 background-position:-30px -282px!important;
3216 }
3217 .link .entry .expando .error {
3218 font-family:sans-serif;
3219 font-size:12px;
3220 }
3221
3222
3223
3224/*------------------------------------------------------------------
3225-- 4. CONTENT
3226---- 4.3 LINKS
3227------ 4.3.6 MARKDOWN
3228-------------------------------------------------------------------*/
3229
3230 .link .usertext .md {
3231 padding:0;
3232 margin:10px 1px 5px;
3233 }
3234 .link .usertext-body .md {
3235 padding:5px 8px;
3236 position:relative;
3237 background:#252529;
3238 border:1px solid #101014;
3239 border-radius:0;
3240 font-family:sans-serif;
3241 color:#dddde1;
3242 z-index:1;
3243 }
3244 .link .md h1,
3245 .link .md h2,
3246 .link .md h3,
3247 .link .md h4,
3248 .link .md h5 {
3249 font-weight:bold;
3250 }
3251
3252
3253
3254
3255/*------------------------------------------------------------------
3256-- 4. CONTENT
3257---- 4.4 COMMENTS
3258-------------------------------------------------------------------*/
3259
3260 .commentarea {
3261 padding:5px 5px 10px;
3262 background:#212124;
3263 border:1px solid #28282d;
3264 position:relative;
3265 margin:-1px 1px 0;
3266 }
3267 .commentarea .sitetable.nestedlisting {
3268 margin:0 10px;
3269 }
3270
3271 /* Title */
3272 .commentarea .panestack-title {
3273 padding:10px;
3274 margin:0;
3275 border:0;
3276 font-family:sans-serif;
3277 }
3278 .commentarea .panestack-title .title {
3279 font-size:14px;
3280 font-weight:bold;
3281 text-transform:capitalize;
3282 color:#eee;
3283 }
3284 .panestack-title a.title-button.gold {
3285 padding:0;
3286 background:transparent;
3287 border:0;
3288 color:#cd9930;
3289 }
3290
3291 /* Menu */
3292 .commentarea .menuarea {
3293 margin:10px;
3294 color:#888891;
3295 }
3296 .commentarea .panestack-title + .menuarea {
3297 margin-top:0;
3298 }
3299 .commentarea .menuarea .error,
3300 .commentarea .menuarea .error > a {
3301 color:#e74c3c;
3302 }
3303
3304 /* Contest mode */
3305 .contest-mode.infobar {
3306 margin:10px 0 -10px;
3307 background:transparent;
3308 border:0;
3309 font-size:11px;
3310 text-transform:none;
3311 }
3312 .contest-mode.infobar strong {
3313 font-style:italic;
3314 text-transform:uppercase;
3315 color:#bbb;
3316 }
3317
3318 /* Sticky button */
3319 .commentarea .menuarea .toggle.set_subreddit_sticky-button .option,
3320 .commentarea .menuarea .toggle.set_subreddit_sticky-button .option.active a {
3321 color:#18af92;
3322 }
3323
3324 /* COMMENTS ------ */
3325
3326 /* Entry field container */
3327 .comment .usertext-edit {
3328 margin-bottom:10px;
3329 }
3330
3331 /* Body */
3332 .commentarea .comment {
3333 padding-top:1px;
3334 padding-left:0;
3335 margin-left:0;
3336 }
3337 .comment.collapsed {
3338 padding-top:0;
3339 padding-bottom:0;
3340 margin-bottom:10px;
3341 }
3342 .comment .child,
3343 .comment .showreplies {
3344 padding-left:10px;
3345 margin-left:20px;
3346 margin-bottom:10px;
3347 border-color:#333;
3348 }
3349
3350 /* Top level comments */
3351 .commentarea .sitetable.nestedlisting > .comment {
3352 padding-top:10px;
3353 margin-top:1px;
3354 position:relative;
3355 border-top:1px solid #2a2a2f;
3356 }
3357 .commentarea .sitetable.nestedlisting > .comment:before {
3358 position:absolute;
3359 content:"";
3360 display:block;
3361 height:1px;
3362 background:#1a1a1b;
3363 top:-2px;
3364 left:0;
3365 right:0;
3366 }
3367 .commentarea .sitetable.nestedlisting > .comment.collapsed {
3368 padding-top:9px;
3369 margin-bottom:11px;
3370 }
3371 .commentarea .sitetable.nestedlisting > .comment:nth-last-of-type(2) {
3372 border-bottom:0;
3373 }
3374
3375
3376
3377 /* COMMENT TAGLINE ------ */
3378
3379 .comment.collapsed .tagline,
3380 .comment.collapsed .tagline a {
3381 color:#637381;
3382 }
3383 .comment.collapsed .tagline a:hover {
3384 color:#9ab2ca
3385 }
3386
3387 /* Expand button */
3388 .comment a.expand,
3389 .comment.collapsed a.expand,
3390 .message .entry .tagline a.expand,
3391 .message.collapsed.threaded .tagline a.expand {
3392 padding:0;
3393 margin-right:4px;
3394 color:#637481;
3395 transition:color 0.15s ease-in-out;
3396 }
3397 .comment a.expand:hover,
3398 .comment.collapsed a.expand:hover,
3399 .message .entry .tagline a.expand:hover,
3400 .message.collapsed.threaded .tagline a.expand:hover {
3401 color:#9ab2ca;
3402 }
3403
3404
3405
3406 /* COMMENT MARKDOWN ------ */
3407
3408 .comment .md {
3409 background:transparent;
3410 border:1px solid #292929;
3411 border:0;
3412 font-family:sans-serif;
3413 color:#ddd;
3414 }
3415
3416
3417
3418 /* COMMENT OPTIONS ------ */
3419
3420 .comment .flat-list.buttons {
3421 margin-left:-1px;
3422 }
3423 .deepthread:after {
3424 content:none;
3425 }
3426 .morecomments a,
3427 .deepthread a {
3428 padding:0 2px 1px 4px;
3429 /*background:#2d2d2d;
3430 border-radius:2px;*/
3431 font-size:10px;
3432 font-weight:bold;
3433 color:#9ab2ca;
3434 }
3435 .morecomments a .gray {
3436 color:#637481;
3437 }
3438 .morecomments a:hover,
3439 .deepthread a:hover {
3440 background:#303030;
3441 color:#b6c9dc;
3442 }
3443 .deepthread a:after {
3444 content:"";
3445 width:24px;
3446 height:7px;
3447 padding-right:2px;
3448 margin-left:5px;
3449 display:inline-block;
3450 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -34px -85px;
3451 }
3452
3453
3454
3455 /* PERMALINK ------ */
3456
3457 .commentarea > .infobar {
3458 padding:8px 10px;
3459 margin:10px;
3460 border:1px solid #161618;
3461 position:relative;
3462 z-index:1;
3463 }
3464
3465 .comment .usertext.border .usertext-body {
3466 padding:0 7px;
3467 margin:5px 0 0;
3468 background:#252529;
3469 border:1px solid #303036;
3470 }
3471
3472 /* GOLD HIGHLIGHTING */
3473 .gold-accent.comment-visits-box {
3474 padding:0;
3475 margin-left:10px;
3476 background:transparent;
3477 border-radius:0;
3478 border:0;
3479 font-family:sans-serif;
3480 color:#cd9930;
3481 }
3482 .new-comment .usertext-body {
3483 margin:5px 10px 0 0;
3484 padding-left:5px;
3485 background:#29292f;
3486 border:1px solid #333339;
3487 }
3488 .new-comment .usertext-body .md {
3489 margin:5px 0;
3490 padding:0;
3491 }
3492
3493 /* COMMENT LISTING */
3494 .sitetable.linklisting .comment {
3495 padding:10px 15px;
3496 margin:0;
3497 background:#202023;
3498 border:1px solid #28282d;
3499 border-bottom-color:#161618;
3500 }
3501 .menuarea ~ .sitetable.linklisting > .comment:first-of-type {
3502 border-top-color:#161618;
3503 }
3504 .sitetable.linklisting .comment.collapsed {
3505 padding-top:9px;
3506 }
3507 .sitetable.linklisting .comment .parent {
3508 margin:0 0 6px 22px;
3509 color:#637481;
3510 }
3511 .sitetable.linklisting .comment .parent a {
3512 font-weight:normal;
3513 }
3514 .sitetable.linklisting .comment .parent a.title {
3515 font-size:10px;
3516 color:#aebec8;
3517 color:#b5c4cd;
3518 }
3519 .sitetable.linklisting .comment .midcol,
3520 .sitetable.linklisting .message .midcol {
3521 margin-top:2px;
3522 }
3523 .sitetable.linklisting.comment.collapsed .tagline {
3524 margin-top:-2px;
3525 }
3526 .sitetable.linklisting .comment > .child {
3527 margin:0;
3528 }
3529
3530
3531
3532/*------------------------------------------------------------------
3533-- 4. CONTENT
3534---- 4.5 TRENDING
3535-------------------------------------------------------------------*/
3536
3537/* Trending subreddits container (front page) */
3538.trending-subreddits {
3539 padding:8px 10px;
3540 margin:8px 1px -6px;
3541 position:relative;
3542 background:#1e1e20;
3543 border:1px solid #27272b;
3544 border-bottom:1px solid #161618;
3545}
3546
3547/* Adjust container margin with compressed links on */
3548body.compressed-display .trending-subreddits {
3549 margin-left:1px;
3550}
3551
3552/* Rank and midcol elements don't appear but have width so remove */
3553.trending-subreddits .rank-spacer,
3554.trending-subreddits .midcol-spacer {
3555 display:none;
3556}
3557
3558/* Set "trending subreddits" text color to green */
3559.trending-subreddits strong {
3560 color:#27ae60;
3561}
3562
3563/* Replace trending icon with custom one */
3564.trending-subreddits strong:before {
3565 width:15px;
3566 height:11px;
3567 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -38px -65px;
3568}
3569
3570/* Style "x comments" link at end */
3571.trending-subreddits .comments {
3572 font-weight:normal;
3573 color:#637481;
3574}
3575
3576/* Set hover color of "x comments" link */
3577.trending-subreddits .comments:hover {
3578 color:#9ab2ca;
3579}
3580
3581
3582
3583
3584 /* SPAM/REPORTED */
3585 .thing.reported {
3586 border-left:3px solid #e3d493!important;
3587 }
3588 .thing.spam {
3589 border-left:3px solid #fa6157!important;
3590 }
3591 .sitetable.linklisting .link.spam {
3592 background:#202020;
3593 }
3594 .sitetable.linklisting .comment.spam,
3595 .sitetable.linklisting .comment.reported
3596 /*.sitetable > .message.spam*/ {
3597 padding-left:13px;
3598 }
3599 .sitetable.linklisting .link.spam,
3600 .sitetable.linklisting .link.reported {
3601 padding-left:8px;
3602 }
3603 .commentarea .comment.reported,
3604 .commentarea .comment.spam {
3605 padding-left:10px;
3606 margin-left:-13px;
3607 background:transparent;
3608 }
3609 .thing.spam.banned-user {
3610 opacity:0.5;
3611 }
3612 .thing.spam.banned-user:hover {
3613 opacity:1;
3614 }
3615 .comment.spam > .child {
3616 padding-left:10px;
3617 margin-left:20px;
3618 background:transparent;
3619 }
3620 .message.spam > .child {
3621 background:transparent;
3622 }
3623
3624 /* MESSAGES */
3625 .sitetable > .message {
3626 background:#202023;
3627 }
3628 .content > .sitetable > .message {
3629 padding:10px 15px;
3630 margin:0;
3631 background:#202023;
3632 border:1px solid #28282d;
3633 border-bottom:1px solid #161618;
3634 -webkit-transition:all 0.1s ease-in-out;
3635 }
3636 .menuarea ~ .sitetable > .message:nth-of-type(1) {
3637 border-top:1px solid #161618;
3638 }
3639 .message .subject,
3640 .message.message-parent .subject {
3641 margin-bottom:5px;
3642 font-family:sans-serif;
3643 }
3644 .message.was-comment .subject {
3645 margin-bottom:7px;
3646 }
3647 .message .subject .subject-text {
3648 color:#eeeef1;
3649 }
3650 .message .subject a.title {
3651 color:#aebec8;
3652 color:#b5c4cd;
3653 }
3654 .message .subject .correspondent {
3655 padding:0;
3656 background:#39393f;
3657 border:1px solid #161618;
3658 border-radius:1px;
3659 }
3660 .message .subject .correspondent a {
3661 padding:2px 5px;
3662 display:block;
3663 border:1px solid #45454b;
3664 border-radius:1px;
3665 color:#eeeef1;
3666 }
3667 .message .subject .correspondent a.author {
3668 margin-right:0;
3669 }
3670 .message .subject .expand-btn {
3671 margin:8px 10px 5px 0;
3672 font-family:verdana,sans-serif;
3673 }
3674
3675 .message .subject .reddit .marker-dot {
3676 width:9px;
3677 height:9px;
3678 }
3679 .message.color-bar {
3680 border-top-color:#28282d!important;
3681 border-right-color:#28282d!important;
3682 border-bottom-color:#161618!important;
3683 border-left-width:2px!important;
3684}
3685.menuarea~.sitetable>.color-bar.message:nth-of-type(1) {
3686 border-top-color:#161618!important;
3687}
3688
3689 .message.message-reply .entry,
3690 .message.message-reply:not(.threaded) .entry,
3691 .message.message-parent .entry,
3692 .message.message-parent:not(.threaded) .entry {
3693 padding-bottom:0;
3694 margin-left:1px;
3695 margin-bottom:10px;
3696 border-left:1px dashed #494950;
3697 }
3698
3699 .message.threaded .child {
3700 margin-left:20px;
3701 border-left:1px dashed #494950;
3702 }
3703.message-parent.threaded > .child {
3704 margin-left:22px;
3705}
3706.message-parent.threaded > .child > .sitetable {
3707 position:relative;
3708}
3709.message-parent.threaded > .child > .sitetable:before {
3710 content:"";
3711 border-left:1px dashed #494950;
3712 position:absolute;
3713 left:-22px;
3714 bottom:0;
3715 width:1px;
3716 top:-6px;
3717}
3718.message-reply.threaded .entry {
3719 margin-left:0;
3720 border-left:0;
3721}
3722
3723
3724 .message.new > .entry {
3725 padding:5px 10px;
3726 background:#232327;
3727 border-color:#2d2d33;
3728 margin-left:0;
3729 border-left:3px solid #fb8500;
3730 }
3731 .message.spam > .entry {
3732 border-left:0;
3733 }
3734 .message .entry a.parent-link {
3735 padding:0;
3736 margin:5px 0 0;
3737 display:inline-block;
3738 }
3739 .message .tagline {
3740 color:#637481;
3741 }
3742 .message.message-parent .tagline,
3743 .message.message-reply .tagline {
3744 margin-bottom:5px;
3745 color:#637481;
3746 }
3747 .message.message-reply.recipient > .entry .head,
3748 .message.message-parent.recipient > .entry .head {
3749 font-weight:normal;
3750 color:#637481;
3751 }
3752 .message .collapsed .head {
3753 font-style:normal;
3754 color:#637481;
3755 }
3756 .message.new > .entry .head {
3757 font-weight:normal;
3758 color:#e74c3c;
3759 }
3760 .message.collapsed > .entry .head > a[id^="more"] {
3761 font-size:10px!important;
3762 font-weight:normal!important;
3763 }
3764 .message.collapsed.threaded .tagline a {
3765 color:#3498db;
3766 }
3767 .message.collapsed.threaded .head {
3768 color:#637481;
3769 }
3770 /*.message.collapsed .tagline .head a {
3771 color:#637481;
3772 }*/
3773 .message.collapsed.threaded .tagline :not(.expand),
3774 .message.collapsed.threaded .tagline a :not(.expand) {
3775 font-style:normal;
3776 }
3777 .message .entry .md {
3778 padding:5px 8px;
3779 margin:5px 1px;
3780 position:relative;
3781 background:#252529;
3782 border:1px solid #303036;
3783 font-family:sans-serif;
3784 color:#dddde1;
3785 z-index:1;
3786 }
3787 .message.message-parent .entry .md,
3788 .message.message-reply .entry .md {
3789 color:#6ebf83;
3790 color:#6ebf88;
3791 }
3792 .message.message-parent.recipient > .entry .md,
3793 .message.recipient > .entry .md {
3794 color:#dddde1;
3795 }
3796 .message .usertext-edit .md {
3797 margin:5px 0;
3798 }
3799 .message .entry .flat-list.buttons {
3800 margin-left:0;
3801 }
3802 .message.gold {
3803 max-width:none;
3804 border-radius:0;
3805 }
3806 .message.gold .subject {
3807 max-width:36em;
3808 text-shadow:none;
3809 }
3810 .message.gold .entry .md {
3811 max-width:50em;
3812 text-shadow:none;
3813 }
3814
3815 /* ??? .messages-page .message .entry .parent {
3816 max-width:none;
3817 margin:5px 0;
3818 border:0;
3819 }
3820 .messages-page .message .entry .parent .md {
3821 border-color:#292929;
3822 }*/
3823
3824
3825
3826 /* COMPOSE MESSAGE */
3827 .compose-page .content > h1 {
3828 width:500px;
3829 padding:10px 15px;
3830 margin:0;
3831 position:relative;
3832 background:#212125;
3833 border:1px solid #28282d;
3834 font-family:sans-serif;
3835 font-size:15px;
3836 font-weight:bold;
3837 text-transform:capitalize;
3838 color:#eeeef1;
3839 }
3840 .compose-page .content > form > .spacer {
3841 margin:0;
3842 }
3843 .compose-page .content > form .roundfield {
3844 padding:10px 15px;
3845 margin:0;
3846 position:relative;
3847 background:#202023;
3848 border:1px solid #28282d;
3849 border-top:0;
3850 border-bottom:0;
3851 border-radius:0;
3852 font-family:sans-serif;
3853 }
3854 .compose-page .content > form > .spacer:first-of-type .roundfield {
3855 border-top:1px solid #161618;
3856 }
3857 .compose-page .content > form > .spacer:nth-last-of-type(2) .roundfield {
3858 border-bottom:1px solid #28282d;
3859 }
3860 .compose-page .content > form > .spacer:nth-last-of-type(2) .roundfield:before {
3861 border-bottom:1px solid #101014;
3862 bottom:-2px;
3863 }
3864 .compose-page .content > form .roundfield .title {
3865 font-size:16px;
3866 font-weight:bold;
3867 text-transform:capitalize;
3868 color:#eeeef1;
3869 }
3870 .compose-page .content > form .roundfield .gray {
3871 font-size:12px;
3872 color:#bbbbc1;
3873 }
3874 .compose-page #compose-message .status {
3875 font-size:11px;
3876 }
3877
3878 /* NO RESULTS */
3879 .sitetable #noresults {
3880 padding:10px 15px;
3881 margin:0;
3882 border:1px solid #28282d;
3883 background:#202023;
3884 font-family:sans-serif;
3885 color:#9999a1;
3886 }
3887 .single-page .sitetable #noresults {
3888 padding:10px 0 0;
3889 background:transparent;
3890 border:0;
3891 border-top:1px solid #28282d;
3892 /*now need dark border commentarea*/
3893 }
3894 .commentarea #noresults {
3895 padding:0 10px 5px;
3896 background:transparent;
3897 }
3898 .menuarea ~ .sitetable > #noresults,
3899 .infobar ~ .sitetable > #noresults {
3900 border-top:1px solid #161618;
3901 }
3902
3903 /* PAGINATION */
3904 .nextprev {
3905 height:30px;
3906 padding:0 15px;
3907 margin:0;
3908 display:block;
3909 background:#212125;
3910 border:1px solid #28282d;
3911 font-family:sans-serif;
3912 font-size:11px;
3913 line-height:31px;
3914 text-transform:uppercase;
3915 color:#9999a1;
3916 }
3917 .nextprev a {
3918 padding:1px 0;
3919 background:transparent;
3920 border:0;
3921 border-radius:0;
3922 font-weight:bold;
3923 color:#eeeef1;
3924 }
3925 .nextprev > a:first-of-type {
3926 margin-left:2px;
3927 }
3928 .explore-page .nextprev > a:first-of-type {
3929 margin-left:0;
3930 }
3931 .nextprev a:hover {
3932 background:transparent;
3933 border:0;
3934 }
3935 .nextprev .separator {
3936 margin:0;
3937 visibility:hidden;
3938 }
3939 .nav-buttons .next-suggestions {
3940 padding:8px 15px;
3941 margin:0;
3942 display:block;
3943 background:#202020;
3944 border:1px solid #272727;
3945 border-top:1px solid #181818;
3946 text-transform:uppercase;
3947 font-size:11px;
3948 font-family:sans-serif;
3949 color:#999;
3950 }
3951 .nav-buttons .next-suggestions a {
3952 padding:0;
3953 background:transparent;
3954 border:0;
3955 font-weight:bold;
3956 }
3957
3958 /* PROMOTED LINKS NAV */
3959 .organic-listing .nextprev {
3960 height:auto;
3961 padding:0;
3962 margin:0;
3963 background:#1d1d1d;
3964 border-top:1px solid #222;
3965 border-right:1px solid #222;
3966 border-bottom:1px solid #272727;
3967 border-left:1px solid #272727;
3968 line-height:normal;
3969 }
3970 .organic-listing .nextprev:before {
3971 content:"";
3972 width:14px;
3973 height:27px;
3974 display:block;
3975 position:absolute;
3976 top:-1px;
3977 left:-14px;
3978 background:url(https://b.thumbs.redditmedia.com/4EG2wyTGyNV_jNUH4qQWRgDNnAKrnFEvdkF3u2en71c.png) no-repeat 0 0;
3979 }
3980 .organic-listing .nextprev .arrow.prev,
3981 .organic-listing .nextprev .arrow.next {
3982 width:25px;
3983 height:25px;
3984 padding:0;
3985 margin:0;
3986 position:relative;
3987 background:url(https://b.thumbs.redditmedia.com/L1i1riU-rO4PHFrd94uh4n6_mlRZHcyrtAisO82lPMg.png) no-repeat -9999px -9999px transparent;
3988 border:0;
3989 }
3990 .organic-listing .nextprev .arrow.prev:active,
3991 .organic-listing .nextprev .arrow.next:active {
3992 top:0;
3993 bottom:0;
3994 }
3995 .organic-listing .nextprev .arrow.prev:active {
3996 background-position:2px 4px;
3997 }
3998 .organic-listing .nextprev .arrow.next:active {
3999 background-position:-17px 4px;
4000 }
4001 .organic-listing .nextprev .arrow.prev {
4002 background-position:2px 3px;
4003 }
4004 .organic-listing .nextprev .arrow.next {
4005 background-position:-17px 3px;
4006 }
4007
4008 /* FOOTER */
4009 .footer-parent {
4010 padding:40px 0;
4011 transition:margin-left 0.25s ease-in-out;
4012 }
4013 .footer {
4014 border:0;
4015 }
4016 .footer .col {
4017 border:0;
4018 }
4019 .footer .flat-vert.title {
4020 font-family:sans-serif;
4021 font-size:14px;
4022 text-transform:capitalize;
4023 color:#66666d;
4024 }
4025 .footer .flat-vert li a {
4026 font-family:sans-serif;
4027 color:#aaaaae;
4028 }
4029 .footer .flat-vert li a:hover {
4030 color:#eeeef1;
4031 }
4032 .footer .flat-vert li a.buygold,
4033 .footer .flat-vert li a.buygold:hover {
4034 font-weight:normal;
4035 color:#cd9930;
4036 }
4037 .footer-parent p.bottommenu {
4038 font-family:sans-serif;
4039 font-size:11px;
4040 color:#808087;
4041 }
4042 .footer-parent p.bottommenu a {
4043 text-decoration:none;
4044 color:#3498DB;
4045 }
4046
4047 /* DEBUGINFO */
4048 body > .debuginfo {
4049 background:#1e1e20;
4050 border-top:1px solid #25252a;
4051 position:relative;
4052 }
4053 body.with-listing-chooser > .debuginfo {
4054 margin-left:153px;
4055 border-left:1px solid #25252a;
4056 transition:margin-left 0.25s ease-in-out;
4057 }
4058 body.with-listing-chooser.listing-chooser-collapsed > .debuginfo {
4059 margin-left:23px;
4060 }
4061 body > .debuginfo:after {
4062 content:"Carbon by /u/ggitaliano";
4063 padding:3px 0 0 5px;
4064 float:left;
4065 font-family:sans-serif;
4066 color:#66666d;
4067 }
4068
4069 /* SUBMIT PAGE */
4070 .submit-page .content > .submit.content {
4071 width:520px;
4072 padding:0px;
4073 margin:0;
4074 background:transparent;
4075 border:0;
4076 }
4077 .submit-page .content > h1 {
4078 display:none;
4079 }
4080 .submit-page > .content ul.tabmenu.formtab {
4081 width:520px;
4082 padding:0;
4083 margin:0;
4084 border:1px solid #101014;
4085 border-bottom:0;
4086 }
4087 .submit-page > .content ul.tabmenu.formtab li a {
4088 width:238px;
4089 height:35px;
4090 padding:0 10px;
4091 display:inline-block;
4092 background:#202023;
4093 border:1px solid #28282d;
4094 font-family:lato,sans-serif;
4095 font-size:12px;
4096 font-weight:400;
4097 letter-spacing:1px;
4098 line-height:35px;
4099 text-align:center;
4100 text-transform:uppercase;
4101 color:#888;
4102 -webkit-transition:background 0.15s ease-in-out,color 0.15s ease-in-out;
4103 -moz-transition:background 0.15s ease-in-out,color 0.15s ease-in-out;
4104 -o-transition:background 0.15s ease-in-out,color 0.15s ease-in-out;
4105 transition:background 0.15s ease-in-out,color 0.15s ease-in-out;
4106 }
4107 .submit-page > .content ul.tabmenu.formtab li.selected a {
4108 background:#282828;
4109 border:1px solid #303030!important;
4110 color:#fb8500;
4111 }
4112 .submit-page > .content ul.tabmenu.formtab li a:hover {
4113 color:#eee;
4114 }
4115 .submit-page > .content ul.tabmenu.formtab li.selected a:hover {
4116 color:#fb8500;
4117 }
4118 .submit-page > .content ul.tabmenu.formtab li.selected + li a {
4119 border-left-color:#202020;
4120 }
4121 .submit-page > .content ul.tabmenu.formtab > li:first-of-type a {
4122 border-right-color:#202020;
4123 }
4124 .submit-page > .content .formtabs-content {
4125 width:520px;
4126 padding-top:0px;
4127 margin-top:0;
4128 border-top:1px solid #161618;
4129 border-bottom:1px solid #161618;
4130 border-left:1px solid #101014;
4131 border-right:1px solid #101014;
4132 }
4133 .submit-page .formtabs-content .spacer {
4134 margin:0;
4135 }
4136 .submit-page .formtabs-content .infobar {
4137 padding:10px;
4138 border:1px solid #2d2d2d;
4139 font-size:11px;
4140 color:#ddd;
4141 }
4142 .submit-page .tabmenu.formtab + .formtabs-content .infobar {
4143 border-top:0;
4144 }
4145 .submit-page .formtabs-content .roundfield {
4146 background:#202023;
4147 border:1px solid #28282d;
4148 border-top:0;
4149 border-bottom:0;
4150 border-radius:0;
4151 width:498px;
4152 padding:10px;
4153 }
4154 .submit-page #sr-autocomplete-area {
4155 z-index:9;
4156 }
4157 .submit-page .formtabs-content .roundfield#title-field {
4158 padding-top:10px;
4159 border-top:1px solid #161618;
4160 }
4161 .submit-page .formtabs-content .roundfield .title {
4162 font-family:sans-serif;
4163 font-size:16px;
4164 font-weight:bold;
4165 text-transform:capitalize;
4166 color:#eeeef1;
4167 }
4168 .submit-page .formtabs-content .roundfield .gray {
4169 font-family:sans-serif;
4170 font-size:12px;
4171 color:#bbbbbe;
4172 }
4173 .submit-page .formtabs-content .roundfield#text-field,
4174 .submit-page .formtabs-content .roundfield#url-field {
4175 margin-bottom:-10px;
4176 }
4177 .submit-page .roundfield #suggest-title button {
4178 padding:0;
4179 margin-top:0;
4180 background:transparent;
4181 border:0;
4182 font-family:sans-serif;
4183 color:#3498db;
4184 }
4185 .submit-page .roundfield .roundfield-content .error {
4186 float:left;
4187 font-family:sans-serif;
4188 font-size:11px;
4189 color:#e74c3c;
4190 }
4191 .submit-page .roundfield#url-field .roundfield-content .error {
4192 margin-top:4px;
4193 }
4194 .submit-page .formtabs-content .roundfield#reddit-field {
4195 padding-bottom:20px;
4196 }
4197 .submit-page .formtabs-content .roundfield#reddit-field #suggested-reddits {
4198 display:none;
4199 }
4200
4201 .submit-page .formtabs-content .roundfield.submit_text.enabled {
4202 color:#ddd;
4203 background:#222;
4204 border-top:1px solid #272727;
4205 border-bottom:1px solid #272727;
4206 font-family:sans-serif;
4207 position:relative;
4208 z-index:1;
4209 /*overflow:visible;*/
4210 }
4211 .submit-page .formtabs-content .roundfield.submit_text.enabled:before {
4212 content:"";
4213 z-index:-1;
4214 background:#181818;
4215 position:absolute;
4216 top:-2px;
4217 height:1px;
4218 left:0;
4219 right:0;
4220 }
4221 .submit-page .formtabs-content .roundfield.submit_text.enabled:after {
4222 content:"";
4223 z-index:-1;
4224 background:#181818;
4225 position:absolute;
4226 height:1px;
4227 bottom:-2px;
4228 left:0;
4229 right:0;
4230 }
4231
4232 .submit-page .formtabs-content .roundfield.submit_text.enabled > h1 {
4233 margin-top:0;
4234 color:#eee;
4235 }
4236 .submit-page .formtabs-content .roundfield.submit_text.enabled .md {
4237 color:#ddd;
4238 }
4239 .submit-page .formtabs-content > .spacer:last-of-type > .roundfield {
4240 padding:10px 10px 15px;
4241 }
4242 .submit-page .roundfield-content > label {
4243 font-family:sans-serif;
4244 font-size:12px;
4245 color:#ddd;
4246 }
4247 .submit-page .content.submit .info-notice {
4248 width:499px;
4249 padding-left:10px;
4250 margin:0px 0 15px 1px;
4251 position:relative;
4252 background:#212125;
4253 border:1px solid #28282d;
4254 border-radius:0;
4255 font-family:sans-serif;
4256 font-size:11px;
4257 color:#dddde1;
4258 z-index:1;
4259 }
4260 .submit-page .content.submit .info-notice:before {
4261 content:none;
4262 }
4263 .submit-page .content.submit .info-notice a {
4264 font-weight:normal;
4265 text-decoration:none;
4266 }
4267
4268 /* BUTTONS */
4269 .submit-page .content.submit .btn[name="submit"],
4270 .compose-page .content > form > button#send,
4271 .wiki-page .wiki-page-content #editform input#wiki_save_button {
4272 display:inline-block;
4273 padding:0;
4274 border-radius:1px;
4275 background:#39393f;
4276 border:1px solid #49494f;
4277 color:#eeeef1;
4278 font-weight:400;
4279 position:relative;
4280 }
4281 .submit-page .content.submit .btn[name="submit"],
4282 .compose-page .content > form > button#send {
4283 letter-spacing:1px;
4284 text-transform:uppercase;
4285 font-family:lato, sans-serif;
4286 }
4287 .wiki-page .wiki-page-content #editform input#wiki_save_button {
4288 padding:4px 6px;
4289 }
4290 .submit-page .content.submit .btn[name="submit"] {
4291 margin:0;
4292 height:35px;
4293 width:100%;
4294 font-size:13px;
4295 }
4296 .compose-page .content > form > button#send {
4297 height:28px;
4298 padding:0 15px;
4299 margin-top:10px;
4300 margin-left:0;
4301 font-size:11px;
4302 text-shadow:0 2px 4px #212125;
4303 }
4304
4305
4306
4307
4308/*------------------------------------------------------------------
4309-- 7. Search Page
4310---- 7.1 Legacy
4311-------------------------------------------------------------------*/
4312
4313
4314 /* SEARCH PAGE */
4315 .search-page .side > .spacer:first-of-type {
4316 margin-bottom:0;
4317 }
4318
4319 /* Main search area */
4320 .searchpane.raisedbox {
4321 padding:15px 15px 15px 15px;
4322 margin:0 1px;
4323 position:relative;
4324 background:#212125;
4325 border:1px solid #28282d;
4326 }
4327 .searchpane.raisedbox > h4 {
4328 margin-bottom:5px;
4329 font-family:sans-serif;
4330 font-size:12px;
4331 text-transform:capitalize;
4332 color:#eeeef1!important;
4333 }
4334
4335
4336 .searchpane.raisedbox #search input[type="text"] {
4337 padding:6px 7px;
4338 background:#27272d;
4339 border:1px solid #32323a;
4340 font-size:12px;
4341 color:#eeeef1!important;
4342 }
4343 .searchpane.raisedbox #search input[type="text"]:hover,
4344 .searchpane.raisedbox #search input[type="text"]:active,
4345 .searchpane.raisedbox #search input[type="text"]:focus {
4346 border-color:#46464a;
4347 }
4348 .search-page .searchpane.raisedbox #search label,
4349 .search-page .searchpane.raisedbox #moresearchinfo dl {
4350 color:#ddd;
4351 }
4352 .search-page .searchpane.raisedbox #previoussearch #moresearchinfo {
4353 margin:10px 0;
4354 border-color:#333339;
4355 }
4356 .search-page .searchpane.raisedbox #moresearchinfo > p {
4357 margin:0 0 10px;
4358 color:#dddde1;
4359 }
4360 .search-page .searchpane.raisedbox + .menuarea {
4361 margin-top:9px;
4362 }
4363 .search-page .searchpane.raisedbox + .menuarea:after {
4364 content:"";
4365 height:1px;
4366 display:block;
4367 position:absolute;
4368 top:-2px;
4369 left:-2px;
4370 right:-2px;
4371 background:#101014;
4372 z-index:-1;
4373 }
4374
4375 /* Narrow down by subreddit container */
4376 .search-page .searchfacets {
4377 padding:10px 10px 25px;
4378 margin:0 0 8px;
4379 position:relative;
4380 background:#202023;
4381 border:1px solid #101014;
4382 border-top:0;
4383 box-shadow:none;
4384 z-index:1;
4385 }
4386 .search-page .searchfacets:before {
4387 content:"";
4388 display:block;
4389 position:absolute;
4390 top:0;
4391 bottom:0px;
4392 left:0px;
4393 right:0px;
4394 border:1px solid #28282d;
4395 border-top:1px solid #161618;
4396 z-index:-1;
4397 }
4398 .search-page .searchfacets .list {
4399 margin:0;
4400 }
4401 .search-page .searchfacets h4.title {
4402 font-family:sans-serif;
4403 font-size:12px;
4404 color:#eeeef1;
4405 }
4406 .search-page .searchfacets .list li {
4407 margin-right:20px;
4408 margin-bottom:1px;
4409 font-family:sans-serif;
4410 font-size:12px;
4411 }
4412 .search-page .searchfacets .list li .facet.count {
4413 font-size:11px;
4414 font-weight:normal;
4415 color:#637481;
4416 }
4417 .search-page .searchfacets .list li .facet.count:hover {
4418 text-decoration:none;
4419 }
4420 .search-page > .content > .sitetable.searchlisting {
4421 border:1px solid #101014;
4422 border-top:0;
4423 }
4424
4425 /* Subreddits search results */
4426.combined-search-page .searchpane.raisedbox > h4 {
4427 text-transform:uppercase;
4428 font-size:11px;
4429}
4430.combined-search-page #search label,
4431.combined-search-page #moresearchinfo,
4432.combined-search-page #previoussearch p {
4433 font-size:10px;
4434}
4435.combined-search-page .search-submit-button {
4436 padding:4px 8px;
4437 margin-top:0;
4438 background:#39393f;
4439 border:1px solid #49494f;
4440 border-radius:2px;
4441}
4442.combined-search-page .search-icon {
4443 width:17px;
4444 height:17px;
4445 background-size: 17px 17px;
4446}
4447.combined-search-page .search-result-listing {
4448 margin-top:7px;
4449}
4450.combined-search-page .search-result-group {
4451 max-width:none;
4452 min-width:none;
4453 padding:0;
4454 border:1px solid #101014;
4455}
4456.combined-search-page .search-result-group .search-result-group-header {
4457 padding:10px 15px;
4458 margin:0;
4459 background:#212125;
4460 border:1px solid #28282d;
4461 font-family:sans-serif;
4462 font-size:11px;
4463 text-transform:uppercase;
4464 position:relative;
4465 overflow:visible;
4466 color:#9999a1;
4467}
4468.combined-search-page .search-result-group .search-header-label {
4469 font-size:11px;
4470 line-height:normal;
4471 color:#eeeef1;
4472}
4473.combined-search-page .search-result {
4474 padding:9px 15px;
4475 margin:0;
4476 background:#202023;
4477 border:1px solid #28282d;
4478 border-bottom:1px solid #161618;
4479}
4480.combined-search-page .search-result:first-of-type {
4481 border-top:1px solid #161618;
4482}
4483.combined-search-page .search-result-group footer .nav-buttons {
4484 margin:0;
4485 font-size:11px;
4486}
4487.combined-search-page .search-result-group .search-header-menus {
4488 display:inline-block;
4489 float:none;
4490}
4491.combined-search-page .search-result-group .search-menu {
4492 line-height:normal;
4493}
4494.combined-search-page .searchfacets {
4495 max-width:none;
4496 min-width:none;
4497 margin-top:7px;
4498 border-top:1px solid #101014;
4499}
4500.combined-search-page .searchfacets:before {
4501 border-top:1px solid #28282d;
4502}
4503.combined-search-page .search-result .search-result-meta,
4504.combined-search-page .search-result .search-comments {
4505 color:#637481;
4506}
4507.combined-search-page .search-result .search-result-meta {
4508 margin:4px 0;
4509 line-height:normal;
4510}
4511.combined-search-page .search-result .search-score {
4512 margin-right:0;
4513 font-size:11px;
4514}
4515.combined-search-page .search-result .search-score:after {
4516 content:' -';
4517}
4518.combined-search-page .search-result-icon-score,
4519.combined-search-page .search-result-icon-external {
4520 display:none;
4521}
4522.combined-search-page .search-result .search-result-footer .search-link {
4523 margin-left:0;
4524}
4525.combined-search-page .search-result a,
4526.combined-search-page .search-result a.search-subreddit-link > mark,
4527.combined-search-page .search-result a:visited,
4528.combined-search-page .search-result a:visited > mark {
4529 color:#3498db;
4530}
4531.combined-search-page .search-result a.search-title > mark {
4532 color:#d0dce1;
4533}
4534.combined-search-page .search-result.visited a.search-title > mark,
4535.combined-search-page .search-result a.search-title:visited > mark {
4536 color:#9eaab1;
4537}
4538.combined-search-page .search-result-meta mark {
4539 font-weight:normal;
4540}
4541.combined-search-page .search-result .search-expando {
4542 max-width:60em;
4543}
4544.combined-search-page .search-result .search-expando.collapsed:before {
4545 content:"...";
4546 width:auto;
4547 padding-bottom:5px;
4548 right:0;
4549 background:#252529;
4550 border:1px solid #101014;
4551 border-top:0;
4552 text-indent:8px;
4553}
4554.combined-search-page .search-result .search-expando.collapsed:after {
4555 content:"";
4556 height:20px;
4557 position:absolute;
4558 left:1px;
4559 right:1px;
4560 bottom:1px;
4561 border:1px solid #303036;
4562 border-top:0;
4563}
4564
4565 .combined-search-page .search-result.search-result-subreddit .search-result-body {
4566 padding:5px 8px;
4567 display:inline-block;
4568 position:relative;
4569 background:#252529;
4570 border:1px solid #101014;
4571 font-family:sans-serif;
4572 font-size:13px;
4573 color:#ccccd1;
4574 z-index:1;
4575 }
4576 .combined-search-page .search-result-subreddit .search-result-body:before {
4577 content:"";
4578 position:absolute;
4579 top:0;
4580 left:0;
4581 right:0;
4582 bottom:0;
4583 border:1px solid #303036;
4584 z-index:-1;
4585 }
4586
4587
4588
4589.combined-search-page .search-result .search-result-body {
4590 padding:0;
4591 border:1px solid #101014;
4592 color:#4f4f4f;
4593}
4594.combined-search-page .search-result .search-result-body .md {
4595 padding:5px 8px;
4596 background:#252529;
4597 border:1px solid #303036;
4598 font-family:sans-serif;
4599}
4600.combined-search-page .search-result .search-expando-button {
4601 padding:5px 2px 0;
4602 color:#3498db;
4603}
4604.combined-search-page .search-result .search-expando-button:hover {
4605 text-decoration:none;
4606}
4607.combined-search-page .search-result .search-expando-button:before {
4608 content:"read ";
4609}
4610.combined-search-page .flair {
4611 margin-left:0.5em;
4612}
4613.combined-search-page .search-result .author + .flair {
4614 display:none;
4615}
4616 .combined-search-page .search-result a.search-title {
4617 color:#b5c4cd;
4618 }
4619 .combined-search-page .search-result a.search-title:hover {
4620 color:#ccd8de;
4621 }
4622 .combined-search-page .search-result.visited a.search-title,
4623 .combined-search-page .search-result a.search-title:visited {
4624 color:#808c94;
4625 }
4626 .combined-search-page .search-result.visited a.search-title:hover,
4627 .combined-search-page .search-result a.search-title:visited:hover {
4628 color:#97a3aa;
4629 }
4630
4631
4632
4633 /* RELATED/OTHER PAGE */
4634 .related-page .commentarea,
4635 .other-discussions-page .commentarea {
4636 padding:0;
4637 margin-top:8px;
4638 }
4639 .related-page .commentarea .panestack-title,
4640 .other-discussions-page .commentarea .panestack-title {
4641 height:33px;
4642 padding:0 15px;
4643 border-bottom:1px solid #272727;
4644 line-height:34px;
4645 }
4646 .related-page .commentarea .panestack-title .title ,
4647 .other-discussions-page .commentarea .panestack-title .title {
4648 color:#eee;
4649 }
4650 .related-page .commentarea .link,
4651 .other-discussions-page .commentarea .link {
4652 padding-bottom:10px;
4653 border-left:0;
4654 border-right:0;
4655 margin-bottom:0;
4656 }
4657 .related-page .commentarea .nextprev,
4658 .other-discussions-page .commentarea .nextprev {
4659 border:0;
4660 border-top:1px solid #272727;
4661 }
4662
4663
4664 /* WIKI PAGE */
4665 .wiki-page > .content {
4666 background:#202023;
4667 border:1px solid #101014;
4668 }
4669 .wiki-page > .content > .infobar {
4670 border:0;
4671 }
4672 .wiki-page > .content > .infobar .md {
4673 color:#bbbbbe;
4674 }
4675 .wiki-page > .content > span:first-of-type {
4676 padding:10px 5px;
4677 display:block;
4678 background:#212125;
4679 border:1px solid #28282d;
4680 }
4681 .wiki-page > .content > .infobar + span:first-of-type {
4682 border-top:1px solid #161618;
4683 }
4684 .wiki-page .wikititle {
4685 margin:0 0 0 10px;
4686 display:inline-block;
4687 font-family:sans-serif;
4688 font-size:15px;
4689 vertical-align:bottom;
4690 color:#eeeef1;
4691 }
4692 .wiki-page .pageactions {
4693 border:0;
4694 margin-left:15px;
4695 }
4696 .wiki-page .pageactions a.wikiaction {
4697 padding:0 6px;
4698 margin:0;
4699 font-family:sans-serif;
4700 font-size:11px;
4701 text-transform:uppercase;
4702 color:#bbbbbe;
4703 }
4704 .wiki-page .pageactions a.wikiaction:hover {
4705 background:transparent;
4706 color:#eeeef1;
4707 }
4708 .wiki-page .pageactions a.wikiaction.wikiaction-current {
4709 background:transparent;
4710 color:#fb8500;
4711 }
4712 .wiki-page .wiki-page-content {
4713 margin:0;
4714 background:#202023;
4715 border:1px solid #28282d;
4716 border-top: 1px solid #161618;
4717 font-family:sans-serif;
4718 }
4719 .wiki-page-content .md.wiki {
4720 padding:15px 300px 15px 15px;
4721 border-bottom:1px solid #28282d;
4722 }
4723 .wiki-page-content .md.wiki > .toc > ul {
4724 position:relative;
4725 background:#212125;
4726 border:1px solid #28282d;
4727 z-index:1;
4728 }
4729 .wiki-page .wiki-page-content .wiki>.toc>ul ul {
4730 border-left:1px dotted #39393f;
4731 }
4732 .wiki-page-content .md.wiki > .toc + * {
4733 margin-top:0;
4734 }
4735 .wiki-page-content .md h1,
4736 .wiki-page-content .md h2,
4737 .wiki-page-content .md h6 {
4738 color:#ccccd1;
4739 }
4740 .wiki-page-content > hr {
4741 display:none;
4742 }
4743 .wiki-page-content > em {
4744 padding:9px 15px;
4745 display:block;
4746 background:#1e1e20;
4747 border-top:1px solid #161618;
4748 font-family:sans-serif;
4749 color:#bbbbbe;
4750 min-height:15px;
4751 }
4752 .wiki-page-content > em .flair {
4753 font-size:11px;
4754 }
4755 .wiki-page-content > textarea.source {
4756 max-width:95%;
4757 margin:15px;
4758 }
4759 .wiki-page-content #editform {
4760 padding:15px;
4761 }
4762 .wiki-page-content #editform textarea#wiki_page_content {
4763 max-width:95%;
4764 }
4765 .wiki-page-content #editform > .help-toggle {
4766 margin-top:5px;
4767 margin-bottom:-10px;
4768 display:block;
4769 font-size:12px;
4770 }
4771 .wiki-page-content #editform .markhelp {
4772 padding:10px 0 0;
4773 margin:10px 0 0;
4774 }
4775 .wiki-page-content #editform input#wiki_revision_reason {
4776 max-width:95%;
4777 margin-top:6px;
4778 background:#292929;
4779 border:1px solid #393939;
4780 box-shadow:none;
4781 font-family:sans-serif;
4782 font-size:12px;
4783 color:#eeeef1;
4784 }
4785 .wiki-page .sitetable.wikirevisionlisting {
4786 padding:15px;
4787 border-bottom:1px solid #161618;
4788 }
4789 .wiki-page-content .wikirevisionlisting .generic-table {
4790 margin-left:0;
4791 color:#dddde1;
4792 }
4793 .wiki-page-content .wikirevisionlisting .generic-table .flair {
4794 font-size:11px;
4795 text-indent:0;
4796 }
4797 .wiki-page-content .wikirevisionlisting .generic-table td {
4798 padding:3px 0;
4799 border:1px solid #2d2d2d;
4800 text-indent:5px;
4801 }
4802 .wiki-page-content .wikirevisionlisting .generic-table tr:nth-of-type(odd) td {
4803 background:#292929;
4804 }
4805 .wiki-page-content .wikirevisionlisting .generic-table tr:nth-of-type(even) td {
4806 background:#252525;
4807 }
4808 .wiki-page .sitetable.wikirevisionlisting ~ button {
4809 margin:10px 15px;
4810 }
4811 table.diff {
4812 margin:15px;
4813 }
4814 table.diff .diff_next {
4815 background-color:#333;
4816 border-bottom:1px solid #333;
4817 border-left:1px solid #333;
4818 }
4819 table.diff .diff_header {
4820 background-color:#333;
4821 border-right:1px solid #333;
4822 border-bottom:1px solid #333;
4823 border-left:1px solid #333;
4824 color:#bbb;
4825 }
4826 table.diff .diff_chg,
4827 table.diff .diff_sub,
4828 table.diff .diff_add {
4829 color:#111;
4830 }
4831 .wiki-page .wiki-page-content > .description {
4832 padding:0;
4833 }
4834 .wiki-page .wiki-page-content .description h2 {
4835 padding:10px 15px;
4836 border-bottom:1px solid #181818;
4837 font-size:12px;
4838 font-weight:normal;
4839 color:#ddd;
4840 }
4841 .wiki-page .wiki-page-content > .sitetable.linklisting {
4842 border:0;
4843 }
4844 .wiki-page .wiki-page-content > .sitetable.linklisting .link {
4845 border-left:0;
4846 border-right:0;
4847 }
4848 .wiki-page .wiki-page-content > .sitetable.linklisting > .link:nth-last-of-type(2) {
4849 border-bottom:1px solid #272727;
4850 }
4851 .wiki-page .wiki-page-content .discussionlink {
4852 padding:10px 15px;
4853 margin:0;
4854 display:block;
4855 background:#1e1e1e;
4856 border:0;
4857 border-top:1px solid #181818;
4858 }
4859 .wiki-page .wiki-page-content .discussionlink a {
4860 width:130px;
4861 height:25px;
4862 padding:0;
4863 display:block;
4864 position:relative;
4865 background:#393939;
4866 border:1px solid #494949;
4867 border-radius:1px;
4868 font-size:12px;
4869 font-weight:400;
4870 letter-spacing:0;
4871 line-height:25px;
4872 color:#eee;
4873 }
4874 .wiki-page .wiki-page-content .discussionlink .nub {
4875 display:none;
4876 }
4877
4878
4879 /* CREATE/SETTINGS/FLAIR PAGES */
4880 .fancy-settings .linefield {
4881 padding:7px 5px;
4882 margin-bottom:0;
4883 position:relative;
4884 background-color:#202023;
4885 border:1px solid #28282d;
4886 border-top:0;
4887 border-bottom:0;
4888 font-family:sans-serif;
4889 }
4890 .fancy-settings .pretty-form > .linefield:nth-of-type(1) {
4891 border-top:1px solid #28282d;
4892 }
4893 .flair-settings.fancy-settings .pretty-form .linefield:nth-of-type(1) {
4894 border-top:1px solid #161618;
4895 }
4896 .fancy-settings .pretty-form > .linefield:nth-of-type(1):before {
4897 top:-2px;
4898 }
4899 .fancy-settings .pretty-form .linefield:nth-last-of-type(2) {
4900 border-bottom:1px solid #28282d;
4901 }
4902 .fancy-settings .pretty-form .linefield:nth-last-of-type(2):before {
4903 bottom:-2px;
4904 }
4905 .fancy-settings .linefield-content {
4906 padding:2px 7px 5px;
4907 }
4908 .fancy-settings .linefield .title {
4909 padding:1px 7px;
4910 font-family:sans-serif;
4911 font-weight:bold;
4912 text-transform:capitalize;
4913 color:#eeeef1;
4914 }
4915 .fancy-settings .pretty-form > .linefield:first-of-type > .title {
4916 margin-bottom:3px;
4917 display:inline-block;
4918 }
4919 .linefield-content label + input[type="text"] {
4920 margin-top:6px;
4921 }
4922 .linefield .small-field,
4923 .linefield .delete-field {
4924 padding-bottom:3px;
4925 }
4926 .linefield .delete-field > p.little.gray {
4927 margin:3px 0 6px;
4928 color:#888;
4929 }
4930 .linefield .delete-field > p.little.gray + table {
4931 font-size:13px;
4932 }
4933 .linefield .delete-field > p.little.gray + table tr > td:nth-of-type(1) {
4934 padding-right:5px;
4935 padding-bottom:1px;
4936 }
4937 .linefield .delete-field > p.little.gray + table tr td label {
4938 font-size:13px;
4939 }
4940 .linefield .gray {
4941 color:#888;
4942 }
4943 .linefield form#image-upload > label {
4944 font-family:sans-serif;
4945 }
4946 .linefield form#image-upload > label:first-of-type {
4947 margin:5px 0 8px;
4948 display:inline-block;
4949 font-weight:bold;
4950 }
4951 .linefield form#image-upload > label:nth-of-type(2) {
4952 text-transform:lowercase;
4953 }
4954 .linefield form#image-upload > input#file {
4955 margin-top:10px;
4956 }
4957 .linefield #img-preview-container {
4958 margin:10px 0 0;
4959 background:#1e1e20;
4960 border:1px solid #161618;
4961 border-radius:1px;
4962 }
4963 .pretty-form .save-button {
4964 padding:10px 0;
4965 }
4966 .pretty-form .save-button > button {
4967 margin:0;
4968 }
4969 .pretty-form .error {
4970 font-size:11px;
4971 }
4972 .flair-settings.fancy-settings > h1 {
4973 width:500px;
4974 padding:8px 12px;
4975 margin:0;
4976 display:inline-block;
4977 position:relative;
4978 background:#212125;
4979 border:1px solid #28282d;
4980 font-family:sans-serif;
4981 font-size:15px;
4982 font-weight:bold;
4983 text-transform:capitalize;
4984 color:#999;
4985 }
4986 .flair-settings.fancy-settings > h1 strong {
4987 text-transform:none;
4988 color:#999;
4989 }
4990 .flair-settings ~ .tabmenu {
4991 margin:0 0 -1px;
4992 }
4993 .flair-settings ~ .tabmenu li {
4994 margin:0;
4995 display:inline-block;
4996 }
4997 .flair-settings ~ .tabmenu li a {
4998 padding:8px 10px;
4999 display:block;
5000 background:#202023;
5001 border:1px solid #28282d;
5002 font-family:sans-serif;
5003 font-size:11px;
5004 font-weight:normal;
5005 text-transform:uppercase;
5006 color:#bbbbbe;
5007 }
5008 .flair-settings ~ .tabmenu li.selected a {
5009 background:#212125;
5010 border:1px solid #28282d;
5011 border-bottom-color:#212125;
5012 color:#fb8500;
5013 }
5014 .flair-settings ~ .tabmenu > li:nth-of-type(2) a,
5015 .flair-settings ~ .tabmenu > li:nth-of-type(3) a {
5016 border-left:0;
5017 }
5018 .flair-settings ~ .tabpane-content {
5019 padding:0;
5020 background:#212125;
5021 border:1px solid #28282d;
5022 }
5023 .flair-settings ~ .tabpane-content .linefield {
5024 padding:10px 0;
5025 background:#212125;
5026 }
5027 .flair-settings ~ .tabpane-content .linefield .title {
5028 font-family:sans-serif;
5029 font-size:15px;
5030 font-weight:bold;
5031 color:#eeeef1;
5032 }
5033 .flair-settings ~ .tabpane-content .linefield .linefield-content {
5034 padding:6px 9px;
5035 }
5036 .flair-settings ~ .tabpane-content .flairlist {
5037 padding:10px 0 5px;
5038 }
5039 .flair-settings ~ .tabpane-content .flairlist .clearflairtemplates-button {
5040 background:#292929;
5041 border-color:#303030;
5042 }
5043
5044 /* STYLESHEET PAGE */
5045 .stylesheet-customize-container {
5046 border:1px solid #101014;
5047 }
5048 .stylesheet-customize-container form#subreddit_stylesheet,
5049 .stylesheet-customize-container #preview-table {
5050 padding:10px;
5051 background:#202023;
5052 border:1px solid #28282d;
5053 border-bottom:1px solid #161618;
5054 }
5055 .stylesheet-customize-container #images {
5056 padding:10px 10px 0;
5057 background:#212125;
5058 border:1px solid #28282d;
5059 }
5060 .stylesheet-customize-container h2 {
5061 margin-top:0;
5062 font-family:sans-serif;
5063 text-transform:capitalize;
5064 }
5065 .stylesheet-customize-container h2,
5066 .stylesheet-customize-container h2 a {
5067 color:#eeeef1;
5068 }
5069 .stylesheet-customize-container .sheets .col > div,
5070 .stylesheet-customize-container .sheets .buttons {
5071 margin-left:0;
5072 }
5073 .stylesheet-customize-container #preview-table > table {
5074 margin:5px 0;
5075 background:#1a1a1a;
5076 border:1px solid #101014;
5077 }
5078 .stylesheet-customize-container #image-preview-list {
5079 position:relative;
5080 top:50px;
5081 }
5082
5083 /* EXPLORE PAGE */
5084 .explore-page .sitetable.exploreitemlisting {
5085 border:1px solid #101014;
5086 }
5087 .explore-page .explore-header {
5088 padding:8px 10px;
5089 margin:0;
5090 background:#212125;
5091 border:1px solid #28282d;
5092 color:#dddde1;
5093 }
5094 .explore-page .explore-header .explore-title {
5095 padding:0 5px;
5096 font-family:sans-serif;
5097 }
5098 .explore-header .explore-discuss-link {
5099 margin:3px 5px;
5100 }
5101 .explore-header .explore-discuss-link a {
5102 font-weight:normal;
5103 }
5104 .explore-header #explore-settings {
5105 font-family:sans-serif;
5106 font-size:12px;
5107 color:#bbb;
5108 }
5109 .explore-page .explore-item {
5110 margin:0;
5111 background:#202023;
5112 border:1px solid #28282d;
5113 border-bottom:1px solid #161618;
5114 }
5115 .explore-page .explore-header + .explore-item {
5116 border-top:1px solid #161618;
5117 }
5118 .explore-page .explore-item .explore-sr {
5119 padding:0;
5120 margin:10px 15px;
5121 }
5122 .explore-item.explore-discovery .explore-label,
5123 .explore-item.explore-rising .explore-label {
5124 padding:0;
5125 background:transparent;
5126 border:0;
5127 border-radius:0;
5128 font-family:sans-serif;
5129 font-size:12px;
5130 color:#eeeef1;
5131 }
5132 .explore-item .explore-label .explore-label-type {
5133 padding-left:0;
5134 }
5135 .explore-item.explore-rising .explore-label .explore-label-type {
5136 color:#27ae60;
5137 }
5138 .explore-item .explore-label .explore-label-link {
5139 padding-right:0;
5140 color:#eeeef1;
5141 }
5142 .explore-item .explore-sr-details {
5143 color:#637481;
5144 }
5145 .explore-page .explore-item .link {
5146 padding:9px 15px;
5147 border:0;
5148 }
5149 .explore-item .explore-feedback-dismiss {
5150 background:url(https://b.thumbs.redditmedia.com/_bd9DUGPUyXfM7BO4LzJgD8wMV6sH6jqbCEibNL5Ook.png) no-repeat 0 0;
5151 opacity:1;
5152 }
5153
5154 /* SUBREDDITS PAGE */
5155 .subreddits-page .side > .spacer:first-of-type {
5156 margin-bottom:0;
5157 }
5158 .subreddits-page .sr-interest-bar {
5159 margin:0 1px 10px;
5160 position:relative;
5161 overflow:visible;
5162 }
5163 .subreddits-page > .content > .menuarea {
5164 border-bottom:1px solid #161618;
5165 }
5166 .subreddits-page > .content > .infobar {
5167 margin:0 0 -1px;
5168 border-top:0;
5169 }
5170 .subreddits-page > .content > .infobar .md {
5171 font-size:13px;
5172 line-height:16px;
5173 }
5174 .subreddits-page > .content > .infobar > .md > p > code {
5175 height:12px;
5176 padding:1px 6px;
5177 display:inline-block;
5178 border:0;
5179 border-radius:2px;
5180 font-family:verdana,sans-serif;
5181 font-size:10px;
5182 font-weight:bold;
5183 line-height:normal;
5184 line-height:12px;
5185 color:#181818;
5186 }
5187 .subreddits-page > .content > .infobar > .md > p > code:nth-of-type(1) {
5188 background:#27ae60;
5189 }
5190 .subreddits-page > .content > .infobar > .md > p > code:nth-of-type(2) {
5191 background:#e74d4d;
5192 }
5193 .subreddits-page .searchpane.raisedbox {
5194 padding:15px;
5195 margin:0 1px;
5196 position:relative;
5197 background:#222;
5198 border:1px solid #272727;
5199 border-bottom:1px solid #181818;
5200 }
5201 .sitetable.linklisting .thing.subreddit {
5202 padding:9px 10px 9px 0;
5203 margin:0;
5204 background:#202020;
5205 border:1px solid #272727;
5206 border-bottom:1px solid #181818;
5207 }
5208 .sitetable.linklisting > .thing.subreddit:first-of-type {
5209 border-top-color:#181818;
5210 }
5211 .sitetable.linklisting > .thing.subreddit:nth-last-of-type(2) {
5212 border-bottom:1px solid #272727;
5213 }
5214 .thing.subreddit .midcol {
5215 width:80px!important;
5216 margin:0 10px 5px 13px;
5217 text-align:center;
5218 }
5219 .thing.subreddit .midcol .fancy-toggle-button .add,
5220 .thing.subreddit .midcol .fancy-toggle-button .remove {
5221 border:0;
5222 color:#181818;
5223 }
5224 .sitetable.linklisting .thing.subreddit .entry {
5225 padding-top:1px;
5226 }
5227 .sitetable.linklisting .thing.subreddit .titlerow {
5228 font-family:sans-serif;
5229 }
5230 .sitetable.linklisting .thing.subreddit .titlerow a.title {
5231 color:#3498db;
5232 }
5233 .sitetable.linklisting .thing.subreddit .usertext .md {
5234 padding:0;
5235 margin-left:1px;
5236 position:relative;
5237 background:#202020;
5238 border:0;
5239 border-radius:0;
5240 font-family:sans-serif;
5241 color:#ddd;
5242 z-index:1;
5243 }
5244 .sitetable.linklisting .thing.subreddit .tagline {
5245 margin-right:8px;
5246 display:inline-block;
5247 }
5248 .sitetable.linklisting .thing.subreddit .report-button a {
5249 color:#637481;
5250 }
5251
5252 .sidecontentbox .subscription-box .fancy-toggle-button .add,
5253 .sidecontentbox .subscription-box .fancy-toggle-button .remove {
5254 font-size:10px;
5255 font-family:verdana,arial,sans-erif;
5256 }
5257 .sidecontentbox .subscription-box .box-top {
5258 height:auto;
5259 }
5260 .sidecontentbox .subscription-box .column {
5261 text-align:left;
5262 float:none;
5263 width:auto;
5264 display:block;
5265 padding:2px 0 5px;
5266 }
5267 .sidecontentbox .subscription-box .column.giftgold a {
5268 color:#cd9930;
5269 }
5270 .sidecontentbox .subscription-box .column.giftgold a:before {
5271 margin-right:2px;
5272 top:0;
5273 }
5274 .sidecontentbox .subscription-box .box-separator {
5275 margin:8px 0;
5276 border-color:#333;
5277 }
5278 .sidecontentbox .subscription-box ul > a.title {
5279 font-weight:bold;
5280 }
5281 .sidecontentbox .subscription-box li {
5282 margin-bottom:5px;
5283 }
5284 .sidecontentbox .subscription-box li .fancy-toggle-button {
5285 float:none;
5286 display:inline-block;
5287 margin-bottom:0;
5288 }
5289 .sidecontentbox .subscription-box a.title {
5290 color:#3498db;
5291 }
5292
5293 /* SUBREDDIT SUGGESTION */
5294 .sr-interest-bar,
5295 .organic-listing .sr-interest-bar {
5296 background:#202023;
5297 border:1px solid #28282d;
5298 }
5299 .sr-interest-bar .bubble {
5300 margin-left:0;
5301 background:#202023;
5302 border:0;
5303 border-radius:1px;
5304 font-family:sans-serif;
5305 color:#dddde1;
5306 }
5307 .sr-interest-bar .bubble:after {
5308 content:none;
5309 }
5310 .sr-interest-bar .caption .subscribe {
5311 padding:0;
5312 background:transparent;
5313 border:0;
5314 border-radius:0;
5315 color:#27ae60;
5316 }
5317 .sr-interest-bar .query-box {
5318 padding:0;
5319 border:1px solid #161618;
5320 border-radius:1px;
5321 }
5322 .sr-interest-bar .query-box input.query {
5323 padding:3px 0;
5324 background:#27272b;
5325 border:1px solid #323236;
5326 border-radius:1px;
5327 font-size:14px;
5328 text-indent:5px;
5329 color:#eeeef1;
5330 }
5331 .sr-interest-bar ul.results {
5332 padding:5px 0px 0px;
5333 margin:8px 1px 0px;
5334 border:0;
5335 }
5336 .sr-interest-bar ul.results li {
5337 margin:3px 6px 3px 0;
5338 }
5339 .sr-interest-bar ul.results > li:first-of-type {
5340 padding-bottom:3px;
5341 margin-left:1px;
5342 display:block;
5343 font-family:sans-serif;
5344 font-size:12px;
5345 font-weight:bold;
5346 text-transform:capitalize;
5347 color:#dddde1;
5348 }
5349 .sr-interest-bar ul.results li a.random {
5350 font-weight:normal;
5351 color:#637481;
5352 }
5353
5354 /* SUBSCRIBE BUTTONS */
5355 .fancy-toggle-button .add,
5356 .fancy-toggle-button .remove,
5357 .explore-item .explore-feedback .fancy-toggle-button .add:hover,
5358 .explore-item .explore-feedback .fancy-toggle-button .add,
5359 .explore-item .explore-feedback .fancy-toggle-button .add:hover,
5360 .explore-item .explore-feedback .fancy-toggle-button .remove,
5361 .explore-item .explore-feedback .fancy-toggle-button .remove:hover,
5362 .combined-search-page .search-result-subreddit .search-subscribe-button .add,
5363 .combined-search-page .search-result-subreddit .search-subscribe-button .remove {
5364 padding:1px 4px;
5365 border:0;
5366 color:#101014;
5367 }
5368 .fancy-toggle-button .add,
5369 .subreddit .midcol .fancy-toggle-button .add,
5370 .sidecontentbox .subscription-box .fancy-toggle-button .add,
5371 .explore-item .explore-feedback .fancy-toggle-button .add,
5372 .explore-item .explore-feedback .fancy-toggle-button .add:hover,
5373 .combined-search-page .search-result-subreddit .search-subscribe-button .add,
5374 .combined-search-page .search-result-subreddit .search-subscribe-button .add:active {
5375 background:#27ae60;
5376 }
5377 .fancy-toggle-button .remove,
5378 .subreddit .midcol .fancy-toggle-button .remove,
5379 .explore-item .explore-feedback .fancy-toggle-button .remove,
5380 .sidecontentbox .subscription-box .fancy-toggle-button .remove,
5381 .explore-item .explore-feedback .fancy-toggle-button .remove:hover,
5382 .combined-search-page .search-result-subreddit .search-subscribe-button .remove,
5383 .combined-search-page .search-result-subreddit .search-subscribe-button .remove:active {
5384 background:#e74d4d;
5385 }
5386 .combined-search-page .search-result-subreddit .search-subscribe-button {
5387 margin-right:8px;
5388 }
5389 .combined-search-page .search-result-subreddit .search-subscribe-button .add,
5390 .combined-search-page .search-result-subreddit .search-subscribe-button .remove {
5391 width:80px;
5392 line-height:normal;
5393 }
5394 .combined-search-page .search-result-subreddit .search-subscribe-button .add:focus,
5395 .combined-search-page .search-result-subreddit .search-subscribe-button .remove:focus {
5396 box-shadow:none;
5397 }
5398
5399
5400
5401
5402/*------------------------------------------------------------------
5403-- 15. MISCELLANEOUS
5404-------------------------------------------------------------------*/
5405
5406 /* Gold icon on posts/comments (not on profile page give gold link or on /r/all links, they are different backgrounds) */
5407 /* Set margin and color of count (e.g. x2) */
5408 .gilded-icon {
5409 margin-left:5px;
5410 color:#cd9930;
5411 }
5412
5413 /* Set gold/gilded icon */
5414 .gilded-icon:before {
5415 margin-right:3px;
5416 background:url(https://b.thumbs.redditmedia.com/lzn89TlvPmvL4dnSxuDV1TbkogNcj3D_5kZXnB-JJrI.png) no-repeat 0 0;
5417 }
5418
5419
5420
5421
5422
5423 /* NEWSLETTER */
5424 .infobar.newsletterbar {
5425 margin:0 1px 8px;
5426 position:relative;
5427 border:1px solid #2b2b2b;
5428 overflow:visible;
5429 padding:10px 15px;
5430 z-index:1;
5431 }
5432
5433 .infobar.newsletterbar input.c-form-control {
5434 background:#333;
5435 border:1px solid #444;
5436 border-radius:1px;
5437 color:#eee;
5438 }
5439
5440 /* FLAIR */
5441 .flair,
5442 .linkflairlabel {
5443 display:inline-block;
5444 padding:0 3px;
5445 background:#38383f;
5446 border:1px solid #38383f;
5447 border-radius:1px;
5448 font-family:verdana,arial,helvetica,sans-serif;
5449 text-shadow:0 0 2px #202023;
5450 color:#ccccd2;
5451 margin-left: 5px;
5452 }
5453
5454 .linkflairlabel {
5455 position:relative;
5456 top:1px;
5457 vertical-align:text-top;
5458 }
5459
5460 /* FLAIR TOGGLE */
5461 .titlebox .tagline .flairselector.drop-choices {
5462 width:330px!important;
5463 padding:10px!important;
5464 top:0!important;
5465 right:300px;
5466 left:auto!important;
5467 background:#2D2D2D;
5468 border:0;
5469 box-shadow:none;
5470 }
5471 .titlebox .tagline .flairselector.drop-choices h2 {
5472 display:none;
5473 }
5474 .titlebox .tagline .flairselector.drop-choices .flairoptionpane {
5475 margin-bottom:10px;
5476 }
5477 .titlebox .tagline .flairselector ul {
5478 width:93px!important;
5479 margin-right:10px;
5480 }
5481 .titlebox .tagline .flairselector ul li {
5482 width:93px!important;
5483 padding-left:0;
5484 margin-bottom:5px;
5485 border:0;
5486 }
5487 .titlebox .tagline .flairselector li:hover,.titlebox .tagline .flairselector li.selected {
5488 background:#2D2D2D;
5489 }
5490 .titlebox .tagline .flairselector ul li > .flair,.titlebox .tagline .flairselector form .flairselection .flair {
5491 background-color:#444;
5492 border:1px solid #444;
5493 color:#eee;
5494 }
5495 .titlebox .tagline .flairselector ul li:hover > .flair,.titlebox .tagline .flairselector li.selected .flair {
5496 background-color:#4C4C4C;
5497 border-color:#777;
5498 }
5499 .titlebox .tagline .flairselector form {
5500 padding-top:10px;
5501 border-color:#444;
5502 text-align:left;
5503 }
5504 .titlebox .tagline .flairselector form .flairremove {
5505 color:#2D2D2D;
5506 }
5507 .titlebox .tagline .flairselector form .flairremove a {
5508 color:#eee;
5509 }
5510 .titlebox .tagline .flairselector form .flairremove a:hover {
5511 color:#F7C83F}
5512 .titlebox .tagline .flairselector form .customizer {
5513 margin-top:10px;
5514 }
5515 .titlebox .tagline .flairselector form .customizer input[type="text"]{
5516 padding:3px;
5517 margin-right:5px;
5518 border:0;
5519 }
5520 .titlebox .tagline .flairselector form button {
5521 margin-left:0;
5522 }
5523 .titlebox .tagline .flairselector form > .status {
5524 font-family:sans-serif;
5525 font-size:11px;
5526 color:#888;
5527 }
5528
5529 /* LINKFLAIR TOGGLE */
5530 .link .flairselector.drop-choices {
5531 padding:0!important;
5532 margin-top:15px;
5533 background:#252525;
5534 border:1px solid #2d2d2d;
5535 box-shadow:none;
5536 }
5537 .link .flairselector.drop-choices h2 {
5538 padding:5px 0;
5539 margin-bottom:0;
5540 background:#333;
5541 font-family:sans-serif;
5542 font-size:11px;
5543 text-transform:uppercase;
5544 color:#ddd;
5545 }
5546 .link .flairselector.drop-choices .flairoptionpane {
5547 padding:10px 0;
5548 margin-bottom:0;
5549 }
5550 .link .flairselector.drop-choices .flairoptionpane > ul {
5551 margin:0 auto!important;
5552 }
5553 .link .flairselector.drop-choices ul li.flairsample-left {
5554 height:18px;
5555 padding:0;
5556 margin-bottom:4px;
5557 border:0;
5558 }
5559 .link .flairselector.drop-choices ul li a.title,.link .flairselector.drop-choices form a.title {
5560 display:none;
5561 }
5562 .link .flairselector.drop-choices ul li .linkflair {
5563 text-align:center;
5564 }
5565 .link .flairselector.drop-choices .linkflairlabel {
5566 margin:0;
5567 line-height:18px;
5568 }
5569 .link .flairselector li:hover {
5570 background:transparent;
5571 }
5572 .link .flairselector li.selected .linkflairlabel {
5573 background:#eee;
5574 font-weight:bold;
5575 color:#333;
5576 }
5577 .link .flairselector form {
5578 padding-top:10px;
5579 background:#252525;
5580 border-color:#333;
5581 }
5582 .link .flairselector form .flairselection {
5583 margin:0;
5584 }
5585 .link .flairselector form .flairremove {
5586 margin-bottom:10px;
5587 color:#ddd;
5588 }
5589 .link .flairselector form .flairremove a {
5590 }
5591 .link .flairselector form .flairremove a:hover {
5592 }
5593 .link .flairselector form .customizer {
5594 display:none;
5595 }
5596 .link .flairselector form button {
5597 margin:0 0 10px;
5598 }
5599 .link .flairselector form > .status {
5600 font-family:sans-serif;
5601 font-size:11px;
5602 color:#888;
5603 }
5604 @media screen and (-webkit-min-device-pixel-ratio:0){
5605 .link .flairselector.drop-choices .linkflairlabel {
5606 line-height:16px;
5607 }}
5608
5609
5610
5611
5612
5613 /* PSEUDO BORDER */
5614
5615 .titlebox:before,
5616 .linkinfo:before,
5617 body > .content > .menuarea:before,
5618 .trending-subreddits:before,
5619 .link .usertext-body .md:before,
5620 .messages-page .message .entry .md:before,
5621 .commentarea:before,
5622 .messages-page.compose-page .content > h1:before,
5623 .messages-page.compose-page .content > form .roundfield:before,
5624 body > .debuginfo:before,
5625 .submit-page .content.submit .info-notice:after,
5626 .searchpane.raisedbox:before,
5627 .wiki-page .wiki-page-content .md.wiki > .toc > ul:before,
5628 .flair-settings.fancy-settings > h1:before,
5629 .subreddits-page .sr-interest-bar:before,
5630 .fancy-settings .linefield:before,
5631 .sr-interest-bar + .searchpane.raisedbox:before,
5632 .menuarea .drop-choices.lightdrop:before,
5633 .login-form-side:before,
5634 .infobar.newsletterbar:before,
5635 .commentarea > .infobar:before {
5636 content:"";
5637 display:block;
5638 position:absolute;
5639 z-index:-1;
5640 }
5641
5642 .titlebox:before,
5643 .linkinfo:before,
5644 body > .content > .menuarea:before,
5645 .trending-subreddits:before,
5646 .commentarea:before,
5647 .messages-page.compose-page .content > h1:before,
5648 .messages-page.compose-page .content > form .roundfield:before,
5649 body > .debuginfo:before,
5650 .submit-page .content.submit .info-notice:after,
5651 .searchpane.raisedbox:before,
5652 .subreddits-page .sr-interest-bar:before,
5653 .flair-settings.fancy-settings > h1:before,
5654 .fancy-settings .linefield:before,
5655 .sr-interest-bar + .searchpane.raisedbox:before,
5656 .menuarea .drop-choices.lightdrop:before,
5657 .login-form-side:before,
5658 .infobar.newsletterbar:before {
5659 border:1px solid #101014;
5660 }
5661
5662 .messages-page .message .entry .md:before,
5663 .wiki-page .wiki-page-content .md.wiki > .toc > ul:before {
5664 border:1px solid #161618;
5665 }
5666
5667 .titlebox:before,
5668 .linkinfo:before,
5669 .messages-page .message .entry .md:before,
5670 .wiki-page .wiki-page-content .md.wiki > .toc > ul:before,
5671 .subreddits-page .sr-interest-bar:before,
5672 .sr-interest-bar + .searchpane.raisedbox:before,
5673 .commentarea:before,
5674 .flair-settings.fancy-settings > h1:before,
5675 .menuarea .drop-choices.lightdrop:before,
5676 .searchpane.raisedbox:before,
5677 .login-form-side:before,
5678 .infobar.newsletterbar:before {
5679 top:-2px;
5680 bottom:-2px;
5681 left:-2px;
5682 right:-2px;
5683 }
5684
5685 body > .content > .menuarea:before,
5686 .trending-subreddits:before {
5687 top:-2px;
5688 bottom:-1px;
5689 left:-2px;
5690 right:-2px;
5691 }
5692 .submit-page .content.submit .info-notice:after {
5693 top:-1px;
5694 left:-2px;
5695 right:-2px;
5696 bottom:-2px;
5697 border-top:0;
5698 }
5699
5700
5701 .link .usertext-body .md:before,
5702 .commentarea > .infobar:before {
5703 top:0;right:0;bottom:0;left:0;
5704 }
5705 .link .usertext-body .md:before {
5706 border:1px solid #303036;
5707 }
5708 .commentarea > .infobar:before {
5709 border:1px solid #333338;
5710 }
5711
5712
5713
5714
5715
5716 /* .searchpane.raisedbox:before, */
5717 .flair-settings.fancy-settings > h1:before {
5718 border-bottom:0;
5719 }
5720
5721 .fancy-settings .linefield:before {
5722 left:-2px;
5723 right:-2px;
5724 top:0;
5725 bottom:0;
5726 }
5727 .submit-page .content.submit .btn[name="submit"]:before,
5728 .messages-page.compose-page .content > form > button#send:before,
5729 .wiki-page .wiki-page-content #editform input#wiki_save_button:before {
5730 content:"";
5731 border:1px solid #101010;
5732 position:absolute;
5733 display:block;
5734 top:-2px;
5735 left:-2px;
5736 right:-2px;
5737 border-radius:1px;
5738 z-index:-1;
5739 bottom:-2px;
5740 }
5741 .comments-page .commentarea:before {
5742 border-top:0;
5743 top:-1px;
5744 }
5745 .messages-page.compose-page .content > h1:before {
5746 top:-2px;
5747 bottom:0;
5748 right:-2px;
5749 left:-2px;
5750 border-bottom:0;
5751 }
5752 .messages-page.compose-page .content > form .roundfield:before {
5753 top:0;
5754 bottom:0;
5755 right:-2px;
5756 left:-2px;
5757 border-top:0;
5758 border-bottom:0;
5759 }
5760 body > .debuginfo:before {
5761 top:-2px;
5762 bottom:0;
5763 left:0;
5764 right:0;
5765 }
5766 body.with-listing-chooser > .debuginfo:before {
5767 left:-2px;
5768 }
5769
5770
5771
5772
5773
5774 /* LISTING CHOOSER ---- */
5775
5776 body.with-listing-chooser .listing-chooser {
5777 top:115px;
5778 background:#202023;
5779 border:1px solid #101014;
5780 border-left:0;
5781 }
5782 body.with-listing-chooser .listing-chooser .grippy {
5783 background:#202023;
5784 border:1px solid #2d2d30;
5785 }
5786 body.with-listing-chooser .listing-chooser .grippy:hover {
5787 background:#242429;
5788 }
5789
5790 /* grippy image */
5791 body.with-listing-chooser .listing-chooser .grippy:before,
5792 body.with-listing-chooser .listing-chooser:hover .grippy:before {
5793 opacity:1;
5794 -webkit-transition:none;
5795 -moz-transition:none;
5796 -o-transition:none;
5797 transition:none;
5798 }
5799 body.with-listing-chooser .listing-chooser .grippy:before {
5800 background-image:url(https://b.thumbs.redditmedia.com/Bh6xlRY9TvTelyXqocJsVUyNrWHQemmOZOOxUKxyKoQ.png);
5801 background-position:133px center;
5802 }
5803 body.with-listing-chooser.listing-chooser-collapsed .listing-chooser .grippy:before {
5804 background-image:url(https://b.thumbs.redditmedia.com/RtrwscVjcyyVzczKGK3GKKkgeOgNOqntswHmXS2OduM.png);
5805 background-position:1px center;
5806 }
5807
5808 /* grippy left half + middle border */
5809 body.with-listing-chooser .listing-chooser .grippy:after,
5810 body.with-listing-chooser.listing-chooser-collapsed .listing-chooser .grippy:after {
5811 background:#252529;
5812 border-right:1px solid #1a1a1b;
5813 }
5814 body.with-listing-chooser .listing-chooser .grippy:hover:after {
5815 background:#28282d;
5816 border-right-color:#161618;
5817 }
5818
5819 .listing-chooser > .contents {
5820 border-top:1px solid #2d2d33;
5821 font-family:sans-serif;
5822 font-size:11px;
5823 }
5824
5825 .listing-chooser li.selected:before {
5826 right:5px;
5827 border-left-color:#99999f;
5828 }
5829
5830 .listing-chooser ul.global {
5831 width:127px;
5832 padding:0;
5833 border-right:1px solid #1d1d1f;
5834 }
5835 .listing-chooser ul.global li {
5836 padding:0;
5837 margin:0;
5838 background:#212125;
5839 border:0;
5840 box-shadow:none;
5841 }
5842 .listing-chooser ul.global li:hover {
5843 background:#252529;
5844 }
5845 .listing-chooser ul.global li.selected {
5846 z-index:1;
5847 }
5848 .listing-chooser ul.global li a {
5849 padding:10px 15px;
5850 margin:0;
5851 font-size:12px;
5852 font-weight:bold;
5853 }
5854 .listing-chooser ul.global li a[href="/"] {
5855 border-bottom:1px solid #161618;
5856 color:#27ae60;
5857 }
5858 .listing-chooser ul.global li a[href="/explore"] {
5859 border-top:1px solid #28282d;
5860 border-bottom:1px solid #28282d;
5861 }
5862 .listing-chooser ul.global li a .description {
5863 color:#99999f;
5864 }
5865
5866
5867 .listing-chooser h3 {
5868 width:97px;
5869 padding:10px 15px;
5870 border:1px solid #161618;
5871 border-right:1px solid #1a1a1b;
5872 border-left:0;
5873 text-align:left;
5874 color:#dddde1;
5875 }
5876 .listing-chooser .intro {
5877 width:127px;
5878 padding:5px 0;
5879 margin-bottom:0;
5880 background:#272727;
5881 border-top:1px solid #2e2e2e;
5882 border-bottom:1px solid #1d1d1d;
5883 border-right:1px solid #1b1b1b;
5884 color:#bbbbc1;
5885 }
5886 .listing-chooser .intro p {
5887 padding:3px 15px;
5888 margin:0;
5889 font-size:11px;
5890 }
5891
5892 .listing-chooser .contents > ul.multis {
5893 width:127px;
5894 padding:10px 0;
5895 background:#212125;
5896 border-top:1px solid #28282d;
5897 border-bottom:1px solid #28282d;
5898 border-right:1px solid #1a1a1b;
5899 position:relative;
5900 }
5901 .listing-chooser .contents > ul.multis:after {
5902 content:"";
5903 height:1px;
5904 display:block;
5905 position:absolute;
5906 left:0;
5907 right:0;
5908 bottom:-2px;
5909 background:#1d1d1d;
5910 }
5911 .listing-chooser ul.multis li {
5912 background:#39393f;
5913 border:1px solid #49494f;
5914 border-right:0;
5915 border-radius:1px 0 0 1px;
5916 }
5917 .listing-chooser ul.multis li:hover {
5918 background:#3d3d43;
5919 }
5920
5921 .listing-chooser ul.multis li.selected {
5922 margin-right:-10px;
5923 border-right:0;
5924 box-shadow:none;
5925 }
5926 .listing-chooser ul.multis li.selected:before,
5927 .listing-chooser ul.other li.selected:before {
5928 right:5px;
5929 border-left-color:#bbbbc1;
5930 }
5931 .listing-chooser ul.multis li a {
5932 padding:8px 5px 8px 10px;
5933 font-size:12px;
5934 color:#eeeef1;
5935 }
5936 .listing-chooser ul.multis li:hover a {
5937 color:#fff;
5938 }
5939 .listing-chooser ul.multis li.create {
5940 padding:3px 5px 8px 10px;
5941 background:#333337;
5942 border-color:#3d3d42;
5943 }
5944 .listing-chooser ul.multis li.create:hover,
5945 .listing-chooser ul.multis li.create.expanded {
5946 margin-left:12px;
5947 background:#333;
5948 }
5949 .listing-chooser ul.multis li.create input[type="text"] {
5950 width:80px;
5951 margin:5px 0;
5952 background:#444;
5953 border:1px solid #555;
5954 color:#eee;
5955 }
5956 .listing-chooser ul.multis li.create .error {
5957 margin:4px 0;
5958 font-size:11px;
5959 }
5960 .listing-chooser ul.multis li.create button {
5961 width:100%;
5962 padding:0;
5963 display:block;
5964 background:transparent;
5965 border:0;
5966 box-shadow:none;
5967 font-family:sans-serif;
5968 font-size:12px;
5969 text-align:left;
5970 color:#eee;
5971 opacity:1;
5972 }
5973 .listing-chooser ul.multis li.create button:before {
5974 content:"+ ";
5975 }
5976
5977 .listing-chooser ul.other {
5978 width:127px;
5979 margin-top:0;
5980 padding-top:18px;
5981 border-right:1px solid #1b1b1b;
5982 }
5983 .listing-chooser ul.other li {
5984 margin-left:12px;
5985 background:#2d2d32;
5986 border:1px solid #38383d;
5987 border-radius:1px 0 0 1px;
5988 box-shadow:none;
5989 transition:all 0.15s ease-in-out;
5990 }
5991 .listing-chooser ul.other li:hover {
5992 margin-left:9px;
5993 }
5994 .listing-chooser ul.other li.gold-perks {
5995 background:#2b2b30;
5996 }
5997 .listing-chooser ul.other li.selected {
5998 margin-right:-10px;
5999 background:#333;
6000 border-color:#3b3b3b;
6001 }
6002 .listing-chooser ul.other li a {
6003 padding:10px 5px 10px 10px;
6004 border-radius:0;
6005 font-size:12px;
6006 color:#eeeef1;
6007 }
6008 .listing-chooser ul.other li a[href="/r/mod"] {
6009 color:#18af92;
6010 }
6011 .listing-chooser ul.other li.gold-perks a {
6012 color:#cd9930;
6013 }
6014 .listing-chooser ul.other li .description {
6015 color:#bbbbc1;
6016 }
6017
6018
6019 /* LIVE NEWS */
6020 .happening-now-wrap {
6021 background:#222;
6022 border:1px solid #101010;
6023 }
6024 .happening-now-wrap .rank-spacer,
6025 .happening-now-wrap .midcol-spacer {display:none;}
6026 .happening-now-wrap .happening-now {
6027 padding-left:8px;
6028 margin-left:68px;
6029 background:#252525;
6030 border:1px solid #2b2b2b;
6031 font-family:sans-serif;
6032 color:#3498db;
6033 }
6034 .happening-now p.watching {
6035 font-family:verdana,sans-serif;
6036 font-size:10px;
6037 color:#637481;
6038 }
6039 .happening-now p.state:before {
6040 width:6px;
6041 height:6px;
6042 position:relative;
6043 top:-1px;
6044 }
6045 span.happening-now-logo {
6046 width:66px;
6047 height:24px;
6048 margin:0;
6049 background:url(%%live%%) no-repeat 8px 6px / 50px auto #222;
6050 border:1px solid #292929;
6051 border-right-color:#1e1e1e;
6052 }
6053
6054
6055
6056
6057 /* GOLD ONLY */
6058 .gold-only #header {
6059 background:#202020;
6060 border-bottom-color:#101010;
6061 }
6062 .gold-only #header #sr-header-area {
6063 background-color:#1a1a1a;
6064 border-bottom:1px solid #101010;
6065 opacity:1;
6066 }
6067 .gold-only #header .tabmenu li a,
6068 .gold-only #header .tabmenu li.selected a {
6069 background:transparent;
6070 border:0;
6071 color:#bbb;
6072 }
6073 .gold-only #header .tabmenu li a:hover {
6074 color:#eee;
6075 }
6076 .gold-only #header .tabmenu li.selected a,
6077 .gold-only #header .tabmenu li.selected a:hover {
6078 color:#cd9930;
6079 }
6080 .gold-only .titlebox .fancy-toggle-button .option.add {
6081 color:#cd9930;
6082 }
6083 .gold-only #header-img.default-header {
6084 background-image:url(https://a.thumbs.redditmedia.com/BZYB7y_rOxL5d1eLJujF48-5jL-V5cmXPgNWkFZ4HT0.png);
6085 }
6086 .gold-only .link .score.likes {
6087 color:#d0aa48;
6088 }
6089 .gold-only .link .score.dislikes {
6090 color:#927732;
6091 }
6092 .gold-only .link.stickied a.title {
6093 color:#cd9930!important;
6094 }
6095 .gold-only .link.stickied .flat-list.buttons li.first a,
6096 .gold-only .link.stickied .flat-list.buttons li a:hover,
6097 .gold-only .tagline .stickied-tagline {
6098 color:#cd9930;
6099 }
6100 .gold-only .arrow.upmod,
6101 .gold-only .arrow.downmod {
6102 background-image:url(https://b.thumbs.redditmedia.com/Fj9HUZNrfmGncVHNsf11t8A7ohgunNcGJZLqG4BfwCs.png);
6103 }
6104 .gold-only .arrow.upmod {
6105 background-position:-45px 0;
6106 }
6107 .gold-only .arrow.downmod {
6108 background-position:-15px 0;
6109 }
6110
6111 /* gold progress */
6112 .side .goldvertisement {
6113 background:#212125;
6114 border:1px solid #101014;
6115 border-radius:0;
6116 box-shadow:none;
6117 font-family:sans-serif;
6118 }
6119 .side .goldvertisement .inner {
6120 padding:0 0 8px;
6121 margin:0;
6122 border:1px solid #28282d;
6123 }
6124 .side .goldvertisement h2 {
6125 padding:10px 15px;
6126 background:#212125;
6127 border-bottom:1px solid #28282d;
6128 font-size:12px;
6129 font-weight:bold;
6130 color:#cd9930;
6131 }
6132 .side .goldvertisement .progress {
6133 padding:13px 15px 8px;
6134 border-top:1px solid #161618;
6135 }
6136 .gold-bubble div.history .progress {
6137 opacity:1;
6138 }
6139 .side .goldvertisement .progress p {
6140 margin-left:8px;
6141 color:#cd9930;
6142 }
6143 .hover-bubble.anchor-top-centered:after {
6144 border-bottom-color: #2d2d2d;
6145 }
6146 .gold-bubble.anchor-top-centered:before {
6147 border-bottom-color:#353535;
6148 }
6149 .side .goldvertisement .progress .bar,
6150 .gold-bubble div.history .progress .bar {
6151 background:#292929;
6152 border:1px solid #333;
6153 border-radius:1px;
6154 }
6155 .gold-bubble div.history .progress .bar {
6156 background:#222;
6157 }
6158 .side .goldvertisement .progress .bar span,
6159 .gold-bubble div.history .progress .bar span {
6160 background:-webkit-linear-gradient(left,#fed36e,#f4b639);/*!!*/
6161 border-radius:1px 0 0 1px;
6162 }
6163 .side .goldvertisement a {
6164 margin:5px 0 0;
6165 background:transparent;
6166 border:0;
6167 border-radius:0;
6168 font-size:11px;
6169 font-weight:bold;
6170 color:#3498DB;
6171 }
6172
6173
6174/* This replaces alternate gold icons XXX */
6175 .giftgold a:before,
6176 .gilded-link a:before {
6177 background:url(%%gildedalt2%%) no-repeat 0 0;
6178 position:relative;
6179 margin-left:0;
6180 }
6181 .giftgold.allminus-link a:before,
6182 .gilded-link a:before {
6183 top:-1px;
6184 }
6185
6186
6187 .hover-bubble.gold-bubble {
6188 background: #2d2d2d;
6189 border: 1px solid #353535;
6190 border-radius: 0;
6191 box-shadow: 0 0px 5px rgba(16,16,16,0.5);
6192 margin-left: 4px;
6193 color: #ddd;
6194 width:288px;
6195 font-family: sans-serif;
6196 font-size: 12px;
6197 line-height:normal;
6198 }
6199 .gold-bubble span.gold-branding {
6200 background-image:url(%%gold-logo%%);
6201 }
6202 .gold-bubble p.buy-gold a,
6203 .gold-bubble div.history p,
6204 .gold-bubble div.history .progress p {
6205 color: #cd9930;
6206 }
6207 .gold-bubble div.history .progress p {
6208 font-size: 12px;
6209 }
6210 .gold-bubble p.aside {
6211 color: #999;
6212 font-size: 11px;
6213 }
6214 .gold-bubble div.history {
6215 border-top: 1px solid #444;
6216 }
6217
6218 /* gold messages */
6219 .link .gold-wrap {
6220 margin-left:5px;
6221 }
6222 .comment .gold-wrap {
6223 margin-left:-11px;
6224 margin-bottom:15px;
6225 }
6226 .gold-wrap .fancy {
6227 background-color:#292929;
6228 border:1px solid #303030;
6229 }
6230 .gold-wrap .fancy .fancy-inner {
6231 border:1px solid #333;
6232 }
6233 .gold-wrap .fancy .fancy-inner .container a {
6234 color:#938870;
6235 }
6236 .gold-wrap .fancy .fancy-inner .gold-form.gold-payment,
6237 .gold-wrap .fancy .fancy-inner .gold-form .note {
6238 color:#bbb;
6239 }
6240 .gold-payment .close-button {
6241 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat 0 -85px;
6242 }
6243 .gold-wrap.cloneable-comment .container,
6244 .gold-wrap.cloneable-link .container {
6245 padding:10px 30px;
6246 background-color:#242424;
6247 background-color:rgba(31,31,31,0.5);
6248 border:1px solid #333;
6249 }
6250 .gold-wrap .container h2.sidelines span:before,
6251 .gold-wrap .container h2.sidelines span:after {
6252 border-color:#444;
6253 }
6254
6255
6256
6257
6258 /* ADD TO MULTI ------ */
6259 .hover-bubble.multi-selector {
6260 background:#353535;
6261 border:1px solid #101010;
6262 box-shadow:0 0 3px rgba(16,16,16,0.5);
6263 margin-top:-43px!important;
6264 padding:1px;
6265 font-family:sans-serif;
6266 color:#eee;
6267 }
6268 .hover-bubble.multi-selector .title {
6269 padding:8px 0 0 12px;
6270 background:#2d2d2d;
6271 }
6272 .hover-bubble.multi-selector .title strong {
6273 margin:0;
6274 font-size:13px;
6275 color:#eee;
6276 text-align:left;
6277 }
6278 .hover-bubble.multi-selector .title a.sr {
6279 margin:0;
6280 padding:3px 0 2px;
6281 font-size:12px;
6282 text-align:left;
6283 }
6284 .hover-bubble.multi-selector .multi-list {
6285 margin:0;
6286 padding:2px 0 5px;
6287 background:#2d2d2d;
6288 }
6289 .hover-bubble.multi-selector .create-multi input[type="text"] {
6290 background:#393939;
6291 border:1px solid #444;
6292 color:#eee;
6293 }
6294 .hover-bubble.multi-selector .create-multi input[type="text"]:hover,
6295 .hover-bubble.multi-selector .create-multi input[type="text"]:active,
6296 .hover-bubble.multi-selector .create-multi input[type="text"]:focus {
6297 background:#3d3d3d;
6298 border-color:#484848;
6299 outline:none;
6300 }
6301 .hover-bubble.multi-selector label:hover {
6302 background:transparent;
6303 }
6304 .hover-bubble.multi-selector label input[type="checkbox"] {
6305 vertical-align:baseline;
6306 }
6307 .hover-bubble.multi-selector label a {
6308 background:#444;
6309 border:1px solid #555;
6310 opacity:1;
6311 color:#eee;
6312 }
6313 .hover-bubble.multi-selector label a:hover {
6314 background:#494949;
6315 border-color:#5a5a5a;
6316 }
6317 .hover-bubble.anchor-right.anchor-right:after,
6318 .hover-bubble.anchor-left.anchor-right:after,
6319 .hover-bubble.anchor-right.anchor-left:after,
6320 .hover-bubble.anchor-left.anchor-left:after {
6321 width:12px;
6322 height:20px;
6323 top:42px;
6324 border:0;
6325 }
6326 .hover-bubble.anchor-right.anchor-right:after,
6327 .hover-bubble.anchor-left.anchor-right:after {
6328 right:-11px;
6329 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -36px -413px;
6330 }
6331 .hover-bubble.anchor-right.anchor-left:after,
6332 .hover-bubble.anchor-left.anchor-left:after {
6333 left:-11px;
6334 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -48px -413px;
6335 }
6336 .hover-bubble.anchor-right.anchor-right:before,
6337 .hover-bubble.anchor-left.anchor-right:before,
6338 .hover-bubble.anchor-right.anchor-left:before,
6339 .hover-bubble.anchor-left.anchor-left:before {
6340 display:none; /*!!*/ /*fix on subreddits/explore apge */
6341 }
6342
6343
6344
6345
6346
6347/* Style "curated by /u/..." and "... subreddits in this multi" headers */
6348.multi-details > h2,
6349.multi-details > h3 {
6350 padding:10px 15px 3px;
6351 margin:0;
6352 background:#1f1f22;
6353 border-top:1px solid #161618;
6354 font-weight:700;
6355 color:#eeeef1;
6356}
6357
6358/* Set lighter background and border to "... subreddits in this multi" header */
6359/* Remove default bottom margin */
6360.multi-details > h3 {
6361 background:#202023;
6362 border-top:1px solid #28282d;
6363}
6364
6365 /* Set padding on multi settings (visibility, copy, rename, etc.) container */
6366 /* //Note: the container of the "copy rename ..." links and also "edit description" share .settings class so specifying with > */
6367 .multi-details > .settings {
6368 padding:0 15px 12px;
6369 }
6370
6371 /* Removing bottom margin on .setting divs */
6372 .multi-details .settings {
6373 margin:0;
6374 background:#1f1f22;
6375 }
6376
6377 /* Replace margin with padding on visibility radio buttons container */
6378 .multi-details .settings .visibility-group {
6379 padding:8px 0;
6380 margin:0;
6381 }
6382
6383 /* Increase left margin of radio button labels (visibility settings) */
6384 /* //Note: matched default specificity */
6385 .multi-details .settings input[type="radio"] {
6386 margin-right:4px;
6387 }
6388
6389 /* Set color and font of .setting buttons (copy, rename, edit desc., etc.) */
6390 .multi-details .settings button {
6391 font-family:sans-serif;
6392 color:#9999a0;
6393 }
6394
6395 /* Set hover color and remove underline for .setting buttons (and share link) */
6396 .multi-details .settings button:hover,
6397 .multi-details .share-in-sr:hover {
6398 text-decoration:none;
6399 color:#bbbbbe;
6400 }
6401
6402 /* Rename warning message */
6403 /* //Note: included form in selector for specificity */
6404 /* //Note: default css includes .filtered-details but no rename option exist on filtered pages */
6405 .multi-details form.rename-multi .warning {
6406 margin:0 0 5px;
6407 font-weight:400;
6408 color:#e74c3c;
6409 }
6410
6411 /* Style delete multi confirmation text and yes/no buttons */
6412 /* //Note: matched default specificity */
6413 .confirm-button .confirmation,
6414 .confirm-button .confirmation button,
6415 .confirm-button .confirmation button:hover {
6416 font-size:11px;
6417 font-weight:400;
6418 color:#e74c3c;
6419 }
6420
6421 /* Reduce right margin of delete multi confirmation text */
6422 /* //Note: matched default specificity */
6423 .confirm-button .confirmation .prompt {
6424 margin-right:4px;
6425 }
6426
6427 /* Style "edit description" button container */
6428 .multi-details .description .settings {
6429 padding:8px 15px;
6430 background:#1f1f22;
6431 border-bottom:1px solid #161618;
6432 }
6433
6434 /* Style "share" link (appears next to "edit descrption" when multi made public) */
6435 /* //Note: default css includes .filtered-details but no share link exists on filtered pages */
6436 .multi-details .share-in-sr {
6437 font-size:11px;
6438 color:#9999a0;
6439 }
6440
6441 /* Set padding and remove margin of copy and rename multireddit forms */
6442 /* //Note: default css includes .filtered-details but no copy/rename options exist on filtered pages */
6443 /* //Note: matched default specificity */
6444 /* XXX had background but inherits can use that of titlebox */
6445 .multi-details form.copy-multi,
6446 .multi-details form.rename-multi {
6447 padding:0px 15px 10px;
6448 margin:0;
6449 }
6450
6451 /* Style copy/rename multi forms */
6452 /* //Note: default css includes .filtered-details but no copy/rename options exist on filtered pages */
6453 /* XXX confirm color scheme (should it match default input style?, could be too dark) and maybe add hover */
6454 .multi-details .copy-multi input.multi-name,
6455 .multi-details .rename-multi input.multi-name {
6456 border-color:#49494f; /* ZZZ */
6457 background:#39393f; /* ZZZ */
6458 }
6459
6460 /* Adjust padding, set left margin and fix opacity of */
6461 /* //Note: main styling applied along with buttons to reduce duplicate css */
6462 .multi-details form.copy-multi button,
6463 .multi-details form.rename-multi button {
6464 padding-top:2px;
6465 margin-left:6px;
6466 opacity:1;
6467 }
6468
6469 /* Set font size and margin of copy/rename error */
6470 .copy-error,
6471 .rename-error {
6472 margin-top:3px;
6473 font-size:11px;
6474 }
6475
6476 /* Remove margin and set dark top border on multi .md container */
6477 .multi-details > .description {
6478 margin:0;
6479 border-top:1px solid #161618;
6480 }
6481
6482 /* Set width/padding and remove margin on multi description edit container */
6483 /* //Note: default css includes .filtered-details but no .usertext-edit div exists on filtered pages */
6484 /* //Note: default css uses !important on width */
6485 /* //Note: matched default specificity */
6486 .multi-details .description .usertext-edit {
6487 width:270px!important;
6488 padding:10px 10px 0;
6489 margin:0;
6490 background:#1f1f22;
6491 border-top:1px solid #27272d;
6492 }
6493
6494 /* Set width on description edit textarea container */
6495 /* XXX reduced selector as should only be this .usertext-edit present in multi sidebar */
6496 .multi-details .usertext-edit .md {
6497 width:276px;
6498 }
6499
6500 /* Set width (default 294px) for description edit textarea */
6501 /* //Note: default css includes .filtered-details but no .usertext-edit div/textarea exists on filtered pages */
6502 /* //Note: matched default specificity */
6503 .multi-details .description .usertext-edit textarea {
6504 width:270px!important;
6505 }
6506
6507 /* Add top margin to description textarea options (save/cancel etc.) */
6508 .multi-details .bottom-area {
6509 margin-top:5px;
6510 }
6511
6512 /* Style container of added subreddits list */
6513 /* //Note: bottom border is to cover when no more subs can be added, if not hidden by form top margin */
6514 .multi-details ul.subreddits,
6515 .filtered-details ul.subreddits {
6516 padding:5px 15px 10px;
6517 margin:0;
6518 background:#202023;
6519 border-bottom:1px solid #28282d;
6520 }
6521
6522 /* Set font size and add relative position (for add/remove icons) to subreddits in list */
6523 .multi-details ul li,
6524 .filtered-details ul li {
6525 position:relative;
6526 font-size:12px;
6527 }
6528
6529
6530 .multi-details ul.subreddits li a,
6531 .filtered-details ul.subreddits li a {
6532 margin-left:12px;
6533 }
6534
6535 .multi-details.readonly ul.subreddits li a,
6536 .filtered-details.readonly ul.subreddits li a {
6537 margin-left:0;
6538 }
6539
6540 .multi-details form.add-sr,
6541 .filtered-details form.add-sr {
6542 margin: -1px 0 0;
6543 padding: 0 15px 10px;
6544 background: #222;
6545 }
6546 .multi-details form.add-sr {
6547 border-bottom:1px solid #272727;
6548 }
6549 .multi-details form.add-sr .sr-name,
6550 .filtered-details form.add-sr .sr-name {
6551 background: #393939;
6552 border: 1px solid #494949;
6553 color: #eee;
6554 font-size: 12px;
6555 }
6556 .multi-details form.add-sr #sr-drop-down,
6557 .filtered-details form.add-sr #sr-drop-down {
6558 background:#2d2d2d;
6559 border-color:#353535;
6560 }
6561
6562 .multi-details form.add-sr .error,
6563 .filtered-details form.add-sr .error {
6564 margin-top:3px;
6565 font-size:11px;
6566 }
6567
6568 .multi-details .bottom {
6569 margin-top:0;
6570 border-top:1px solid #161618;
6571 }
6572 .multi-details .recommend-box {
6573 margin: 0;
6574 padding: 0;
6575 background: #222;
6576 border-top: 1px solid #181818;
6577 }
6578 .multi-details .recommend-box .recs {
6579 padding: 10px 15px;
6580 border-top: 1px solid #272727;
6581 }
6582 .multi-details .recommend-box h1 {
6583 font-size:13px;
6584 }
6585 .recommend-box ul.recommendations {
6586 margin-bottom:8px;
6587 }
6588 .multi-details .recommend-box .rec-item {
6589 margin: 0;
6590 background: transparent;
6591 padding: 0;
6592 width:120px;
6593 border: none;
6594 }
6595 .multi-details .recommend-box .rec-item a {
6596 padding: 0;
6597 width:auto;
6598 line-height: normal;
6599 margin-left:12px;
6600 }
6601 .multi-details.readonly .recommend-box .rec-item a {
6602 margin-left:0;
6603 }
6604
6605
6606
6607 .multi-details .recommend-box .rec-item button.add,
6608 .multi-details .subreddits button.remove-sr,
6609 .filtered-details .recommend-box button.add,
6610 .filtered-details .subreddits button.remove-sr {
6611 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat;
6612 width:9px;
6613 height:9px;
6614 margin:0;
6615 position:absolute;
6616 left:0;
6617 top:5px;
6618 opacity:1;
6619 border:0;
6620 }
6621 .multi-details .recommend-box .rec-item button.add,
6622 .filtered-details .subreddits button.add {
6623 background-position:-24px -102px;
6624 }
6625 .multi-details .recommend-box .rec-item button.add:after,
6626 .filtered-details button.add:after {
6627 display:none;
6628 content:none;
6629 }
6630 .multi-details .subreddits button.remove-sr,
6631 .filtered-details .subreddits button.remove-sr {
6632 background-position:-24px -113px;
6633 }
6634 .multi-details .add-sr button.add,
6635 .filtered-details .add-sr button.add {
6636 margin-left:5px;
6637 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -37px -106px;
6638 border:0!important;
6639 opacity:1;
6640 }
6641
6642 .multi-details .recommend-box .more {
6643 color:#3498db;
6644 font-weight:normal;
6645 font-style:italic;
6646 font-size:11px;
6647 }
6648 .multi-details .recommend-box .endoflist {
6649 padding: 10px 15px;
6650 background:#222;
6651 border-top:1px solid #272727;
6652 }
6653 .multi-details .recommend-box .endoflist h1 {
6654 font-size:13px;
6655 }
6656 .multi-details .recommend-box .endoflist .heading {
6657 color:#999;
6658 }
6659
6660
6661 .titlebox > h1 + .usertext + .modsr-link,
6662 .filtered-details .unfilter {
6663 margin:0 15px 10px;
6664 }
6665 .filtered-details div.usertext .md {
6666 padding-bottom:0;
6667 margin-bottom:-5px;
6668 }
6669
6670
6671 /* Promoted link/ad help link */
6672 .organic-listing .help {
6673 margin-bottom:6px;
6674 color:#3498DB;
6675 }
6676 #spotlight-help.hover-bubble {
6677 padding:1px;
6678 margin-left:1px;
6679 background:#2b2b2b;
6680 border:1px solid #101010;
6681 box-shadow:0 0 1px rgba(16,16,16,0.5);
6682 color:#ddd;
6683 }
6684 #spotlight-help.hover-bubble .help-section {
6685 background:#252525;
6686 }
6687 #spotlight-help.hover-bubble .help-section > * {
6688 padding:0.5em;
6689 margin:0;
6690 }
6691 #spotlight-help.hover-bubble .help-section > p:nth-of-type(1) {
6692 padding-bottom:0;
6693 }
6694 .hover-bubble.anchor-top:after {
6695 display:none;
6696 }
6697 .hover-bubble.anchor-top:before {
6698 width:18px;
6699 height:11px;
6700 top:-10px;
6701 background:url(https://b.thumbs.redditmedia.com/ByDpJS_TIsnHeHRX3mktRAB6RLKGCJ7etqHc-uYHU9s.png) no-repeat -12px -413px;
6702 border:0;
6703 }
6704 .hover-bubble#beta-help {
6705 background: #25252c;
6706border: 1px solid #101014;
6707padding:0;
6708margin-top: 10px;
6709margin-left: 14px;
6710 }
6711 #beta-help .help-section {
6712 padding: 3px;
6713border: 1px solid #2e2e32;
6714color: #dddde1;
6715 }
6716
6717/* Login pop up */
6718 .modal-content {
6719 background: #222;
6720 border-radius:0;
6721 border: 1px solid #2d2d2d;
6722 }
6723 .modal-title {
6724 color:#eee;
6725 font-family:sans-serif;
6726 }
6727 .split-panel .split-panel-section.split-panel-divider:first-child {
6728 border-color:#333;
6729 }
6730 .login-disclaimer {
6731 color:#808080;
6732 }
6733 .modal-content .c-btn-primary {
6734 background:#393939;
6735 border:1px solid #494949;
6736 }
6737
6738
6739
6740
6741 /* Textarea buttons/help */
6742 .usertext-buttons .status {
6743 font-family:sans-serif;
6744 font-size:11px;
6745 color:#888;
6746 }
6747 /* //Note: this also styles save/cancel buttons for multi .titlebox .description */
6748 .usertext button {
6749 margin-top:0;
6750 }
6751 .error {
6752 color:#e74c3c;
6753 }
6754 .bottom-area .error {
6755 font-family:sans-serif;
6756 font-size:11px;
6757 color:#e74c3c;
6758 }
6759 .bottom-area a.reddiquette,
6760 .bottom-area .help-toggle a.option {
6761 font-family:sans-serif;
6762 }
6763 .bottom-area a.reddiquette,
6764 .bottom-area .help-toggle {
6765 margin-top:2px;
6766 }
6767 .bottom-area a.reddiquette {
6768 position:relative;
6769 top:3px;
6770 }
6771 .bottom-area a.reddiquette:active,
6772 .bottom-area a.reddiquette:focus,
6773 .bottom-area .help-toggle a.option:active,
6774 .bottom-area .help-toggle a.option:focus {
6775 outline:none;
6776 }
6777 @media screen and (-webkit-min-device-pixel-ratio:0){
6778 .bottom-area a.reddiquette {
6779 top:0;
6780 }}
6781 .messages-page.compose-page .roundfield .usertext-edit .bottom-area a.reddiquette {
6782 top:0;
6783 }
6784 .linefield .bottom-area a.reddiquette {
6785 top:0;
6786 }
6787 .markhelp,
6788 .usertext .markhelp {
6789 padding:10px 0 0;
6790 margin:0 0 10px;
6791 border-top:0;
6792 font-family:sans-serif;
6793 }
6794 .markhelp > p {
6795 font-size:12px;
6796 }
6797 .markhelp table.md {
6798 margin-top:10px;
6799 margin-left:0;
6800 margin-bottom:20px;
6801 font-size:12px;
6802 }
6803 .markhelp tbody tr,
6804 .usertext .markhelp tbody tr {
6805 border:0;
6806 }
6807 .markhelp tbody tr:nth-of-type(1) {
6808 text-transform:uppercase;
6809 }
6810 .markhelp tbody tr:nth-of-type(1) td em {
6811 font-style:normal;
6812 font-weight:bold;
6813 }
6814 .markhelp tbody td,
6815 .usertext .markhelp tbody td {
6816 padding:8px;
6817 border:1px solid #303036;
6818 text-align:left;
6819 color:#dddde1;
6820 }
6821 .markhelp tbody tr:nth-of-type(odd) > td {
6822 background:#27272c;
6823 }
6824 .markhelp tbody tr:nth-of-type(even) > td {
6825 background:#252529;
6826 }