|
1 /** |
|
2 * Social comments styles |
|
3 * @package social-comments |
|
4 * ================================================ */ |
|
5 |
|
6 /** @section Basics |
|
7 * Covers resets and typography |
|
8 * a #social id is used to namespace our styles and create enough |
|
9 * specificity to make sure they take work. |
|
10 * |
|
11 * Always use a social- prefix on classes and IDs to prevent naming conflicts |
|
12 -------------------------------------------------- */ |
|
13 |
|
14 /* Override default theme line-height */ |
|
15 #social { |
|
16 background: #fff; |
|
17 line-height: 1.5; |
|
18 margin: 40px 0; |
|
19 } |
|
20 |
|
21 /** |
|
22 * Browser/theme style reset |
|
23 * This gives us a reliable foundation for our styles, regardless of theme |
|
24 * but scoped to our comments. |
|
25 * |
|
26 * Based on work by Eric Meyer |
|
27 * @see http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ |
|
28 */ |
|
29 #social * { |
|
30 margin: 0; |
|
31 padding: 0; |
|
32 border: 0; |
|
33 font-size: 100%; |
|
34 font: inherit; |
|
35 vertical-align: baseline; |
|
36 } |
|
37 |
|
38 #social a { |
|
39 text-decoration: none; |
|
40 outline: 0; |
|
41 } |
|
42 |
|
43 #social a:hover { |
|
44 text-decoration: underline; |
|
45 } |
|
46 |
|
47 /** @section Utility |
|
48 -------------------------------------------------- */ |
|
49 |
|
50 /** |
|
51 * Updated super safe clearfix |
|
52 * Taken from CSS section of HTML5 Boilerplate http://html5boilerplate.com/. Thanks guys! |
|
53 */ |
|
54 #social .social-clearfix:before, |
|
55 #social .social-clearfix:after { |
|
56 content: "\0020"; |
|
57 display: block; |
|
58 height: 0; |
|
59 visibility: hidden; |
|
60 } |
|
61 |
|
62 #social .social-clearfix:after { |
|
63 clear: both; |
|
64 } |
|
65 |
|
66 #social .social-clearfix { |
|
67 zoom: 1; |
|
68 } |
|
69 |
|
70 #social .social-imr { |
|
71 font-size: 0; |
|
72 line-height: 0; |
|
73 overflow: hidden; |
|
74 text-indent: -32000px; |
|
75 } |
|
76 |
|
77 /** |
|
78 * Subtext, help text, etc |
|
79 */ |
|
80 #social .social-help, |
|
81 #social .social-psst { |
|
82 color: #999; |
|
83 font-family: Helvetica, Arial, sans-serif; |
|
84 font-size: 12px; |
|
85 } |
|
86 |
|
87 #social .social-help { |
|
88 font-style: italic; |
|
89 } |
|
90 |
|
91 /** @section Sign-in and forms |
|
92 -------------------------------------------------- */ |
|
93 |
|
94 #social #commentform { |
|
95 overflow: hidden; |
|
96 } |
|
97 |
|
98 /* Threaded respond form */ |
|
99 #social .social-commentlist #respond { |
|
100 margin: 6px 0; |
|
101 padding: 0 0 0 7px; |
|
102 } |
|
103 |
|
104 #social .social-commentlist #reply-title { |
|
105 background-position: 0 -400px; |
|
106 } |
|
107 |
|
108 #social .social-commentlist #commentform { |
|
109 border-left: 1px solid #e1e1e1; |
|
110 padding-left: 10px; |
|
111 } |
|
112 |
|
113 /* Specificity of selector is dialed to |
|
114 override TwentyEleven's treatment of text inputs in |
|
115 the respond form */ |
|
116 #social input.social-input, |
|
117 #social textarea.social-input, |
|
118 #social .social-select { |
|
119 background: #f8f8f8; |
|
120 border: 1px solid #ccc; |
|
121 -moz-border-radius: 3px; /* FF1+ */ |
|
122 -webkit-border-radius: 3px; /* Saf3+, Chrome */ |
|
123 -khtml-border-radius: 3px; /* Konqueror */ |
|
124 border-radius: 3px; /* Standard. IE9 */ |
|
125 /** |
|
126 * @bugfix border-radius background bleed |
|
127 * @see http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed |
|
128 */ |
|
129 -webkit-background-clip: padding-box; |
|
130 -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); /* FF3.5+ */ |
|
131 -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); /* Saf3+, Chrome */ |
|
132 box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); /* Standard. Opera 10.5, IE9 */ |
|
133 font-family: Helvetica, Arial, sans-serif; |
|
134 font-size: 14px; |
|
135 padding: 2px 4px; |
|
136 text-indent: 0; |
|
137 } |
|
138 |
|
139 /** |
|
140 * Line-height fix |
|
141 */ |
|
142 #social input.social-input, |
|
143 #social .social-select { |
|
144 height: 22px; |
|
145 padding-bottom: 1px; |
|
146 padding-top: 3px; |
|
147 } |
|
148 |
|
149 #social .social-select { |
|
150 margin-top: 2px; |
|
151 } |
|
152 |
|
153 #social .social-select optgroup { |
|
154 padding: 2px; |
|
155 font-weight: bold; |
|
156 } |
|
157 |
|
158 #social .social-select option { |
|
159 font-weight: normal; |
|
160 } |
|
161 |
|
162 #social .social-post { |
|
163 font-family: Helvetica, Arial, sans-serif; |
|
164 } |
|
165 |
|
166 /* Input row styles */ |
|
167 #social .social-input-row, |
|
168 #social .form-submit { |
|
169 clear: left; |
|
170 margin: 0 0 10px; |
|
171 overflow: hidden; |
|
172 padding-left: 80px; |
|
173 position: relative; |
|
174 zoom: 1; |
|
175 } |
|
176 |
|
177 /* Override TwentyEleven |
|
178 Remove float from para wrapping submit button. */ |
|
179 #social .form-submit { |
|
180 float: none; |
|
181 } |
|
182 |
|
183 #social .form-submit, |
|
184 #social .social-input-row-submit { |
|
185 height: 30px; |
|
186 margin-bottom: 0; |
|
187 } |
|
188 |
|
189 #social .social-input-row .social-label { |
|
190 color: #333; |
|
191 cursor: pointer; |
|
192 font-size: 14px; |
|
193 display: block; |
|
194 left: 7px; |
|
195 position: absolute; |
|
196 top: 4px; |
|
197 width: 70px; |
|
198 } |
|
199 |
|
200 #social #submit, |
|
201 #social .social-input-row .social-input { |
|
202 /* Bypasses vertical alignment issues. |
|
203 only effects social-input-row inputs */ |
|
204 float: left; |
|
205 /* Specifically here to counteract issues with margins in TwentyTen, |
|
206 but good to have either way */ |
|
207 margin: 0; |
|
208 } |
|
209 |
|
210 #social .social-input-row .social-help { |
|
211 float: left; |
|
212 line-height: 28px; |
|
213 margin-left: 7px; |
|
214 } |
|
215 |
|
216 #social #respond { |
|
217 /* Override TwentyEleven theme |
|
218 Remove grey background */ |
|
219 background: transparent; |
|
220 margin-bottom: 30px; |
|
221 width: auto; |
|
222 } |
|
223 |
|
224 #social #respond input.social-input { |
|
225 width: 314px; |
|
226 } |
|
227 |
|
228 #social #respond textarea.social-input { |
|
229 height: 83px; |
|
230 max-width: 464px; |
|
231 } |
|
232 |
|
233 /* Specificity of this selector is dialed in to |
|
234 override submit styles in TwentyEleven theme */ |
|
235 #social input#submit { |
|
236 background: #e9e9e9 url(sprite-y-24.png) 0 0 no-repeat; |
|
237 border: 1px solid #ccc; |
|
238 -moz-border-radius: 4px; /* FF1+ */ |
|
239 -webkit-border-radius: 4px; /* Saf3+, Chrome */ |
|
240 -khtml-border-radius: 4px; /* Konqueror */ |
|
241 border-radius: 4px; /* Standard. IE9 */ |
|
242 /* Workaround for TwentyEleven theme |
|
243 Remove box shadow */ |
|
244 -moz-box-shadow: none; /* FF3.5+ */ |
|
245 -webkit-box-shadow: none; /* Saf3+, Chrome */ |
|
246 box-shadow: none; /* Standard. Opera 10.5, IE9 */ |
|
247 color: #0867ab; |
|
248 cursor: pointer; |
|
249 font: bold 14px/13px Helvetica, Arial, sans-serif; |
|
250 height: 24px; |
|
251 margin: 0; |
|
252 /** |
|
253 * @bugfix input width issue |
|
254 * @affected IE7 |
|
255 * IE7 likes to make buttons with CSS applied WIDE, unless you apply overflow:visible |
|
256 */ |
|
257 overflow: visible; |
|
258 padding: 4px 13px; |
|
259 /* Override TwentyEleven theme styles |
|
260 Remove left offset */ |
|
261 position: static; |
|
262 text-shadow: #fff 0 1px 0; |
|
263 } |
|
264 |
|
265 /* Specificity of this selector is dialed in to |
|
266 override submit styles in TwentyEleven theme */ |
|
267 #social input#submit:active { |
|
268 background: #dedede url(sprite-y-24.png) 0 -100px no-repeat; |
|
269 color: #0867ab; |
|
270 } |
|
271 |
|
272 /** |
|
273 * @bugfix invisible hidden element |
|
274 * FF adds an invisible pseudo element to inputs. Reset it here. |
|
275 * @affected Firefox |
|
276 * @valid no |
|
277 */ |
|
278 #social #submit::-moz-focus-inner { |
|
279 border: 0; |
|
280 margin: 0; |
|
281 padding: 0; |
|
282 } |
|
283 |
|
284 #social .social-twitter-icon, |
|
285 #social .social-facebook-icon, |
|
286 #social .social-facebook-like-icon { |
|
287 background: url(sprite-y-24-icons.png) 0 -99px no-repeat; |
|
288 display: block; |
|
289 padding-left: 21px; |
|
290 /** |
|
291 * @bugfix hasLayout fix |
|
292 * @affected IE6 |
|
293 * Keeps background from showing up twice. |
|
294 */ |
|
295 zoom: 1; |
|
296 } |
|
297 |
|
298 #social .social-facebook-icon, |
|
299 #social .social-facebook-like-icon { |
|
300 background-position: 0 -199px; |
|
301 } |
|
302 |
|
303 #social .social-sign-in-links { |
|
304 margin: 0 auto 9px; |
|
305 width: 360px; |
|
306 } |
|
307 |
|
308 #social .social-sign-in-links a { |
|
309 display: inline; |
|
310 float: left; |
|
311 height: 22px; |
|
312 margin: 0 15px; |
|
313 width: 150px; |
|
314 } |
|
315 |
|
316 #social .social-sign-in-links .social-twitter { |
|
317 background: url('social.png') 0 0 no-repeat; |
|
318 } |
|
319 |
|
320 #social .social-sign-in-links .social-twitter:hover { |
|
321 background-position: 0 -22px; |
|
322 } |
|
323 |
|
324 #social .social-sign-in-links .social-twitter:active { |
|
325 background-position: 0 -44px; |
|
326 } |
|
327 |
|
328 #social .social-sign-in-links .social-facebook { |
|
329 background: url('social.png') -150px 0 no-repeat; |
|
330 } |
|
331 |
|
332 #social .social-sign-in-links .social-facebook:hover { |
|
333 background-position: -150px -22px; |
|
334 } |
|
335 |
|
336 #social .social-sign-in-links .social-facebook:active { |
|
337 background-position: -150px -44px; |
|
338 } |
|
339 |
|
340 /* Logged in form */ |
|
341 |
|
342 .logged-in #social .social-input-row-comment .social-label { |
|
343 /* Hide visually, but remain readable by screen readers */ |
|
344 left: -999em; |
|
345 position: absolute; |
|
346 } |
|
347 |
|
348 .logged-in #social #respond .form-submit, |
|
349 .logged-in #social .social-input-row { |
|
350 /* Override TwentyEleven theme |
|
351 remove float:right */ |
|
352 float: none; |
|
353 padding-left: 50px; |
|
354 } |
|
355 |
|
356 /** @section Tabs |
|
357 -------------------------------------------------- */ |
|
358 |
|
359 /** |
|
360 * Work around Javascript FOUC accessibly |
|
361 * Prevent flash before tabs init... |
|
362 * Relies on snippet in master.js |
|
363 */ |
|
364 .social-js .social-tabs-panel { |
|
365 display: none; |
|
366 } |
|
367 |
|
368 .social-js .social-tabs-first-panel { |
|
369 display: block; |
|
370 } |
|
371 |
|
372 #social .social-heading { |
|
373 background: url('background-strikethrough.gif') 0 13px repeat-x; |
|
374 font-family: Helvetica, Arial, sans-serif; |
|
375 margin-bottom: 10px; |
|
376 } |
|
377 |
|
378 #social .social-title { |
|
379 margin: 0 0 0 9px; |
|
380 zoom: 1; |
|
381 } |
|
382 |
|
383 #social .social-title span { |
|
384 display: block; |
|
385 } |
|
386 |
|
387 #social .social-divider { |
|
388 background: url('background-strikethrough.gif') center repeat-x; |
|
389 clear: both; |
|
390 font: italic 13px/1.5 Helvetica, Arial, sans-serif; |
|
391 margin: 0 7px 10px; |
|
392 text-align: center; |
|
393 } |
|
394 |
|
395 #social .social-divider span { |
|
396 background-color: #fff; |
|
397 padding: 0 10px; |
|
398 } |
|
399 |
|
400 #social .must-log-in { |
|
401 text-align: center; |
|
402 } |
|
403 |
|
404 #social .social-must-log-in { |
|
405 margin-bottom: 25px; |
|
406 } |
|
407 |
|
408 /** @section Comments List |
|
409 -------------------------------------------------- */ |
|
410 #social .social-commentlist { |
|
411 list-style-image: none; |
|
412 list-style-position: outside; |
|
413 list-style-type: none; |
|
414 margin: 10px 0 0; |
|
415 } |
|
416 |
|
417 #social .social-comment { |
|
418 position: relative; |
|
419 border-top: 1px solid #e1e1e1; |
|
420 border-left: 1px solid #e1e1e1; |
|
421 -moz-border-radius-topleft: 4px; /* FF1+ */ |
|
422 -webkit-border-top-left-radius: 4px; /* Saf3+, Chrome */ |
|
423 -khtml-border-top-left-radius: 4px; /* Konqueror */ |
|
424 border-top-left-radius: 4px; /* Standard. IE9 */ |
|
425 margin: 0 0 10px; |
|
426 zoom: 1; |
|
427 } |
|
428 |
|
429 #social .social-comment-header { |
|
430 margin-bottom: 6px; |
|
431 position: relative; |
|
432 z-index: 4; |
|
433 } |
|
434 |
|
435 #social .social-comment-author { |
|
436 margin-right: 125px; |
|
437 } |
|
438 |
|
439 #social .social-fn { |
|
440 display: block; |
|
441 font-size: 16px; |
|
442 line-height: 1.2; |
|
443 -o-text-overflow: ellipsis; /* Opera */ |
|
444 text-overflow: ellipsis; /* IE6+, Safari, Konqueror, Standard? */ |
|
445 overflow: hidden; |
|
446 /** |
|
447 * @workaround Prevent ugly overflow issues in IE6 |
|
448 * @valid yes |
|
449 * @affected IE6 |
|
450 */ |
|
451 width: 100%; |
|
452 } |
|
453 |
|
454 /* Callout post-author name */ |
|
455 #social .bypostauthor .social-fn { |
|
456 font-weight: bold; |
|
457 } |
|
458 |
|
459 #social .social-identity { |
|
460 margin-top: 10px; |
|
461 position: relative; |
|
462 } |
|
463 |
|
464 #social .social-identity .avatar { |
|
465 left: 0; |
|
466 position: absolute; |
|
467 top: 2px; |
|
468 } |
|
469 |
|
470 #social #cancel-comment-reply-link { |
|
471 display: inline; |
|
472 font-family: Helvetica, Arial, sans-serif; |
|
473 font-size: 12px; |
|
474 margin: 3px 10px; |
|
475 position: static; |
|
476 text-transform: none; |
|
477 } |
|
478 |
|
479 #social .social-comment-header .avatar { |
|
480 left: 0px; |
|
481 position: absolute; |
|
482 /** |
|
483 * Align with visual text top |
|
484 */ |
|
485 top: 3px; |
|
486 } |
|
487 |
|
488 #social .social-replied { |
|
489 background: url(sprite-y-24-icons.png) 0 -300px no-repeat; |
|
490 display: block; |
|
491 height: 16px; |
|
492 left: -67px; |
|
493 position: absolute; |
|
494 top: -17px; |
|
495 width: 16px; |
|
496 } |
|
497 |
|
498 #social .social-comment-inner { |
|
499 margin-right: 10px; |
|
500 padding: 7px 0 0 10px; |
|
501 position: relative; |
|
502 zoom: 1; |
|
503 } |
|
504 |
|
505 #social .social-comment-header, |
|
506 #social .social-comment-body, |
|
507 #social .social-comment-entry-meta { |
|
508 padding-left: 50px; |
|
509 } |
|
510 |
|
511 #social .social-comment-body { |
|
512 font-size: 14px; |
|
513 line-height: 18px; |
|
514 overflow: hidden; |
|
515 /** |
|
516 * @workaround Prevent ugly overflow issues in IE6 |
|
517 * @valid yes |
|
518 * @affected IE6 |
|
519 */ |
|
520 width: 100%; |
|
521 } |
|
522 |
|
523 #social .social-comment-body p { |
|
524 margin: 0 0 5px; |
|
525 } |
|
526 |
|
527 /* Children Comments */ |
|
528 #social .social-children { |
|
529 margin: 0; |
|
530 padding: 0; |
|
531 zoom: 1; |
|
532 } |
|
533 |
|
534 #social .social-children li { |
|
535 list-style: none; |
|
536 margin: 0; |
|
537 } |
|
538 |
|
539 #social .social-children .social-comment { |
|
540 border-right: 0; |
|
541 -moz-border-radius-topright: 0; /* FF1+ */ |
|
542 -webkit-border-top-right-radius: 0; /* Saf3+, Chrome */ |
|
543 -khtml-border-top-right-radius: 0; /* Konqueror */ |
|
544 border-top-right-radius: 0; /* Standard. IE9 */ |
|
545 -moz-border-radius-bottomright: 0; /* FF1+ */ |
|
546 -webkit-border-bottom-right-radius: 0; /* Saf3+, Chrome */ |
|
547 -khtml-border-bottom-right-radius: 0; /* Konqueror */ |
|
548 border-bottom-right-radius: 0; /* Standard. IE9 */ |
|
549 margin-left: 6px; |
|
550 } |
|
551 |
|
552 #social .social-actions, |
|
553 #social .social-actions a, |
|
554 #social .social-comment-meta, |
|
555 #social .social-comment-meta a, |
|
556 #social .social-last-reply-when { |
|
557 color: #999; |
|
558 font-family: Helvetica, Arial, sans-serif; |
|
559 font-size: 12px; |
|
560 } |
|
561 |
|
562 #social a.comment-reply-link { |
|
563 /* Override TwentyEleven theme |
|
564 Remove background from reply links. */ |
|
565 background: transparent; |
|
566 } |
|
567 |
|
568 #social .social-actions { |
|
569 margin-bottom: 8px; |
|
570 } |
|
571 |
|
572 #social .social-actions a, |
|
573 #social .social-comment-meta a { |
|
574 text-decoration: underline; |
|
575 } |
|
576 |
|
577 #social .social-comment-meta { |
|
578 background: url('sprite-y-24-icons.png') no-repeat; |
|
579 line-height: 16px; |
|
580 padding-right: 20px; |
|
581 position: absolute; |
|
582 right: 0; |
|
583 top: 2px; |
|
584 white-space: nowrap; |
|
585 } |
|
586 |
|
587 #social .social-comment-meta .social-posted-from a, |
|
588 #social .social-comment-meta .social-posted-from { |
|
589 display: block; |
|
590 position: absolute; |
|
591 right: 0; |
|
592 width: 16px; |
|
593 height: 16px; |
|
594 margin-left: 5px; |
|
595 } |
|
596 |
|
597 #social .social-comment-meta .social-posted-from span { |
|
598 display: none; |
|
599 } |
|
600 |
|
601 #social .social-actions, |
|
602 #social .social-actions a, |
|
603 #social .social-last-reply-when, |
|
604 #social .social-last-reply-when a { |
|
605 text-transform: lowercase; |
|
606 } |
|
607 |
|
608 #social .social-last-reply-when { |
|
609 float: right; |
|
610 font-size: 11px; |
|
611 font-style: italic; |
|
612 margin-bottom: 4px; |
|
613 text-align: right; |
|
614 } |
|
615 |
|
616 #social .social-comment-meta { |
|
617 background-position: right -1px; |
|
618 } |
|
619 |
|
620 #social .social-comment-meta-twitter { |
|
621 background-position: right -100px; |
|
622 } |
|
623 |
|
624 #social .social-comment-meta-facebook { |
|
625 background-position: right -200px; |
|
626 } |
|
627 |
|
628 #social .social-comment-meta-pingback { |
|
629 background-position: right -400px; |
|
630 } |
|
631 |
|
632 #social .social-pingback > .social-comment-inner { |
|
633 padding-left: 10px; |
|
634 } |
|
635 |
|
636 #social .social-comment-collapse > .social-comment-inner > .social-comment-body, |
|
637 #social .social-comment-collapse > .social-comment-inner > .social-actions, |
|
638 #social .social-comment-collapse > .social-comment-inner > .social-items-comment { |
|
639 display: none; |
|
640 } |
|
641 |
|
642 #social .social-comment-collapse > .social-comment-inner > .social-comment-header, |
|
643 #social .social-comment-collapse.social-facebook-like > .social-comment-inner > .social-comment-body { |
|
644 filter: alpha(opacity = 30); |
|
645 font-size: 12px; |
|
646 min-height: 18px; |
|
647 opacity: .3; |
|
648 padding-left: 35px; |
|
649 } |
|
650 |
|
651 #social .social-facebook-like { |
|
652 margin-bottom: 5px; |
|
653 } |
|
654 |
|
655 #social .social-facebook-like > .social-comment-inner > .social-comment-body { |
|
656 z-index: 3; |
|
657 position: relative; |
|
658 top: -1px; |
|
659 font-size: 12px; |
|
660 } |
|
661 |
|
662 #social .social-comment-collapse.social-facebook-like > .social-comment-inner > .social-comment-body { |
|
663 top: -5px; |
|
664 } |
|
665 |
|
666 #social .social-facebook-like > .social-comment-inner > .social-comment-header > .social-comment-author img { |
|
667 top: 1px; |
|
668 } |
|
669 |
|
670 #social .social-comment-collapse > .social-comment-inner > .social-comment-header .social-fn { |
|
671 font-size: 12px; |
|
672 position: relative; |
|
673 left: -10px; |
|
674 } |
|
675 |
|
676 #social .social-pingback.social-comment-collapse > .social-comment-inner > .social-comment-header .social-fn { |
|
677 left: 0; |
|
678 } |
|
679 |
|
680 #social .social-comment-collapse > .social-comment-inner > .social-comment-header > .social-comment-author img { |
|
681 width: 16px; |
|
682 height: 16px; |
|
683 top: -1px; |
|
684 } |
|
685 |
|
686 /*Tabs*/ |
|
687 #social .social-nav { |
|
688 background: url('background-strikethrough.gif') 0 13px repeat-x; |
|
689 font-family: Helvetica, Arial, sans-serif; |
|
690 font-size: 13px; |
|
691 line-height: 28px; |
|
692 list-style: none; |
|
693 margin: 0 0 3px; |
|
694 padding: 0 0 0 4px; |
|
695 } |
|
696 |
|
697 #social .social-nav li { |
|
698 display: inline; |
|
699 float: left; |
|
700 margin-left: 10px; |
|
701 } |
|
702 |
|
703 #social .social-nav .social-tab-main { |
|
704 margin-left: 0; |
|
705 } |
|
706 |
|
707 #social #social-tabs-comments .social-nav li a span { |
|
708 background: url('sprite-y-24-icons.png') 0 100px no-repeat; |
|
709 display: block; |
|
710 } |
|
711 |
|
712 #social #social-tabs-comments .social-nav .social-wordpress a span { |
|
713 background-position: 0 4px; |
|
714 padding-left: 19px; |
|
715 } |
|
716 |
|
717 #social #social-tabs-comments .social-nav .social-twitter a span { |
|
718 background-position: 0 -96px; |
|
719 padding-left: 19px; |
|
720 } |
|
721 |
|
722 #social #social-tabs-comments .social-nav .social-facebook a span { |
|
723 background-position: 0 -195px; |
|
724 padding-left: 19px; |
|
725 } |
|
726 |
|
727 #social #social-tabs-comments .social-nav .social-pingback a span { |
|
728 background-position: 0 -394px; |
|
729 padding-left: 19px; |
|
730 } |
|
731 |
|
732 /* Tab graphical treatment - selected tabs, and section headers*/ |
|
733 #social #reply-title { |
|
734 margin: 0; |
|
735 overflow: hidden; |
|
736 padding-left: 13px; |
|
737 zoom: 1; |
|
738 } |
|
739 |
|
740 #social #reply-title span, |
|
741 #social .social-nav li a { |
|
742 float: left; |
|
743 font-size: 14px; |
|
744 height: 26px; |
|
745 line-height: 26px; |
|
746 } |
|
747 |
|
748 #social .social-nav li a { |
|
749 background: #fff; |
|
750 padding: 0 12px 4px 12px; |
|
751 } |
|
752 |
|
753 #social #reply-title span, |
|
754 #social .social-nav .social-current-tab a { |
|
755 padding: 0 12px 4px 8px; |
|
756 } |
|
757 |
|
758 #social #reply-title, |
|
759 #social .social-nav .social-current-tab { |
|
760 background: url(sprite-y-24.png) 0 -200px no-repeat; |
|
761 } |
|
762 |
|
763 #social .social-nav .social-current-tab { |
|
764 background-position: -9px -200px; |
|
765 padding-left: 4px; |
|
766 } |
|
767 |
|
768 #social #reply-title span, |
|
769 #social .social-nav .social-current-tab a { |
|
770 background: url(sprite-y-24.png) right -300px no-repeat; |
|
771 color: #000; |
|
772 } |
|
773 |
|
774 /** |
|
775 * This is for the "more important" tabs |
|
776 */ |
|
777 #social .social-tab-main, |
|
778 #social .social-heading .social-title { |
|
779 color: #000; |
|
780 font-size: 14px; |
|
781 font-weight: bold; |
|
782 } |
|
783 |
|
784 #social #post_to { |
|
785 margin: 0 10px; |
|
786 } |
|
787 |
|
788 #social #post_to label { |
|
789 cursor: pointer; |
|
790 width: auto; |
|
791 } |
|
792 |
|
793 #social #post_to input { |
|
794 width: auto; |
|
795 } |
|
796 |
|
797 /** |
|
798 * Comment Aggregation Widget |
|
799 */ |
|
800 .social-aggregation-spinner { |
|
801 vertical-align: middle; |
|
802 } |
|
803 |
|
804 #wp-adminbar-comments-social { |
|
805 position: absolute; |
|
806 visibility: hidden; |
|
807 } |
|
808 |
|
809 .social-aggregation-results { |
|
810 white-space: nowrap; |
|
811 } |
|
812 |
|
813 /** |
|
814 * Social items display (retweets, likes, etc...) |
|
815 */ |
|
816 #social-items-wrapper { |
|
817 float: left; |
|
818 } |
|
819 |
|
820 #social .social-items { |
|
821 clear: both; |
|
822 } |
|
823 |
|
824 #social .social-items-icon { |
|
825 display: block; |
|
826 float: left; |
|
827 margin: 9px 7px 0 7px; |
|
828 width: 14px; |
|
829 } |
|
830 |
|
831 #social .social-items-comments { |
|
832 float: left; |
|
833 } |
|
834 |
|
835 #social .social-items-comment { |
|
836 margin: 6px 0; |
|
837 } |
|
838 |
|
839 #social .social-items.social-twitter .social-items-icon { |
|
840 background-image: url('retweet.png'); |
|
841 height: 8px; |
|
842 } |
|
843 |
|
844 #social .social-items.social-facebook .social-items-icon { |
|
845 background-image: url('like.png'); |
|
846 width: 13px; |
|
847 margin: 6px 8px 0 7px; |
|
848 height: 12px; |
|
849 } |
|
850 |
|
851 #social .social-comment .social-items-icon { |
|
852 margin-top: 6px; |
|
853 } |
|
854 |
|
855 #social .social-items.social-comment-collapse { |
|
856 filter: alpha(opacity = 30); |
|
857 opacity: .3; |
|
858 } |
|
859 |
|
860 #social .social-items img { |
|
861 margin: 0 2px; |
|
862 } |
|
863 |
|
864 #social .social-items-comments a { |
|
865 float: left; |
|
866 } |
|
867 |
|
868 #social .social-items-and-more { |
|
869 margin: 8px 0 0 5px; |
|
870 font-size: 12px; |
|
871 color: #666; |
|
872 } |
|
873 |
|
874 #social .social-items-comments .social-items-and-more { |
|
875 font-size: 11px; |
|
876 margin-top: 4px; |
|
877 } |
|
878 |
|
879 .cf-clearfix { |
|
880 display: block; |
|
881 zoom: 1; |
|
882 } |
|
883 |
|
884 .cf-clearfix:after { |
|
885 content: " "; |
|
886 display: block; |
|
887 font-size: 0; |
|
888 height: 0; |
|
889 clear: both; |
|
890 visibility: hidden; |
|
891 } |