PluginProbe
Catch Gallery / 1.3
Catch Gallery v1.3
trunk 1.0 1.0.1 1.1 1.2 1.3 1.4 1.5 1.6 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.7 1.6.8 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.4 All 27 releases
catch-gallery / css / jetpack-carousel.css

jetpack-carousel.css in Catch Gallery 1.3, at css/jetpack-carousel.css

1,107 lines 24.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 * {
2 line-height:inherit; /* prevent declarations of line-height in the universal selector */
3 }
4
5 .jp-carousel-overlay {
6 background: #000;
7 opacity: 0.98;
8 }
9
10 div.jp-carousel-fadeaway {
11 background: -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
12 background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
13 position: fixed;
14 bottom: 0;
15 z-index: 2147483647;
16 width: 100%;
17 height: 15px;
18 }
19
20 .jp-carousel-next-button span,
21 .jp-carousel-previous-button span {
22 background: url(../images/arrows.png) no-repeat center center;
23 background-size: 200px 126px;
24 }
25
26 @media
27 only screen and (-webkit-min-device-pixel-ratio: 1.5),
28 only screen and (-o-min-device-pixel-ratio: 3/2),
29 only screen and (min--moz-device-pixel-ratio: 1.5),
30 only screen and (min-device-pixel-ratio: 1.5) {
31 .jp-carousel-next-button span,
32 .jp-carousel-previous-button span {
33 background-image: url(../images/arrows-2x.png);
34 }
35 }
36
37 .jp-carousel-wrap {
38 font-family: "Helvetica Neue", sans-serif !important;
39 }
40
41 .jp-carousel-info {
42 position: absolute;
43 bottom: 0;
44 text-align: left !important;
45 -webkit-font-smoothing: subpixel-antialiased !important;
46 }
47
48 .jp-carousel-info ::selection {
49 background: #68c9e8; /* Safari */
50 color: #fff;
51 }
52
53 .jp-carousel-info ::-moz-selection {
54 background: #68c9e8; /* Firefox */
55 color: #fff;
56 }
57
58 .jp-carousel-photo-info {
59 position: relative;
60 -webkit-transition: 400ms ease-out;
61 -moz-transition: 400ms ease-out;
62 -o-transition: 400ms ease-out;
63 transition: 400ms ease-out;
64 left: 25%;
65 width: 50%;
66 }
67
68 .jp-carousel-info h2 {
69 background: none !important;
70 border: none !important;
71 color: #999;
72 display: block !important;
73 font: normal 13px/1.25em "Helvetica Neue", sans-serif !important;
74 letter-spacing: 0 !important;
75 margin: 7px 0 0 0 !important;
76 padding: 10px 0 0 !important;
77 overflow: hidden;
78 text-align: left;
79 text-shadow: none !important;
80 text-transform: none !important;
81 -webkit-font-smoothing: subpixel-antialiased;
82 }
83
84 .jp-carousel-next-button,
85 .jp-carousel-previous-button {
86 text-indent: -9999px;
87 overflow: hidden;
88 cursor: pointer;
89 }
90
91 .jp-carousel-next-button span,
92 .jp-carousel-previous-button span {
93 position: absolute;
94 top: 0;
95 bottom: 0;
96 width: 82px;
97 zoom: 1;
98 filter: alpha(opacity=20);
99 opacity: 0.2;
100 -webkit-transition: 500ms opacity ease-out;
101 -moz-transition: 500ms opacity ease-out;
102 -o-transition: 500ms opacity ease-out;
103 transition: 500ms opacity ease-out;
104 }
105
106 .jp-carousel-next-button:hover span,
107 .jp-carousel-previous-button:hover span {
108 filter: alpha(opacity=60);
109 opacity: 0.6;
110 }
111 .jp-carousel-next-button span {
112 background-position: -110px center;
113 right: 0;
114 }
115
116 .jp-carousel-previous-button span {
117 background-position: -10px center;
118 left:0;
119 }
120
121 .jp-carousel-buttons {
122 margin:-18px -20px 15px;
123 padding:8px 10px;
124 border-bottom:1px solid #222;
125 background: #222;
126 text-align: center;
127 }
128
129 div.jp-carousel-buttons a {
130 border: none !important;
131 color: #999;
132 font: normal 11px/1.2em "Helvetica Neue", sans-serif !important;
133 letter-spacing: 0 !important;
134 padding: 5px 2px 5px 0;
135 text-decoration: none !important;
136 text-shadow: none !important;
137 vertical-align: middle;
138 -webkit-font-smoothing: subpixel-antialiased;
139 }
140
141 div.jp-carousel-buttons a:hover {
142 color: #68c9e8;
143 border: none !important;
144 -webkit-transition: none !important;
145 -moz-transition: none !important;
146 -o-transition: none !important;
147 transition: none !important;
148 }
149
150 .jp-carousel-slide, .jp-carousel-slide img, .jp-carousel-next-button,
151 .jp-carousel-previous-button {
152 -webkit-transform:translate3d(0, 0, 0);
153 -moz-transform:translate3d(0, 0, 0);
154 -o-transform:translate3d(0, 0, 0);
155 -ms-transform:translate3d(0, 0, 0);
156 }
157
158 .jp-carousel-slide {
159 position:absolute;
160 width:0;
161 bottom:0;
162 background-color:#000;
163 border-radius:2px;
164 -webkit-border-radius:2px;
165 -moz-border-radius:2px;
166 -ms-border-radius:2px;
167 -o-border-radius:2px;
168 -webkit-transition: 400ms ease-out;
169 -moz-transition: 400ms ease-out;
170 -o-transition: 400ms ease-out;
171 transition: 400ms ease-out;
172 }
173
174 .jp-carousel-slide img {
175 display: block;
176 width: 100% !important;
177 height: 100% !important;
178 max-width: 100% !important;
179 max-height: 100% !important;
180 background: none !important;
181 border: none !important;
182 padding: 0 !important;
183 -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
184 -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
185 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
186 zoom: 1;
187 filter: alpha(opacity=25);
188 opacity: 0.25;
189 -webkit-transition: opacity 400ms linear;
190 -moz-transition: opacity 400ms linear;
191 -o-transition: opacity 400ms linear;
192 transition: opacity 400ms linear;
193 }
194
195 .jp-carousel-slide.selected img {
196 filter: alpha(opacity=100);
197 opacity: 1;
198 }
199
200 .jp-carousel-close-hint {
201 color: #999;
202 cursor: default;
203 letter-spacing: 0 !important;
204 padding:0.35em 0 0;
205 position: absolute;
206 text-align: left;
207 width: 90%;
208 -webkit-transition: color 200ms linear;
209 -moz-transition: color 200ms linear;
210 -o-transition: color 200ms linear;
211 transition: color 200ms linear;
212 }
213
214 .jp-carousel-close-hint span {
215 cursor: pointer;
216 background-color: black;
217 background-color: rgba(0,0,0,0.8);
218 display: block;
219 height: 22px;
220 font: 400 24px/1 "Helvetica Neue", sans-serif !important;
221 line-height: 22px;
222 margin: 0 0 0 0.4em;
223 text-align: center;
224 vertical-align: middle;
225 width: 22px;
226 -moz-border-radius: 4px;
227 -webkit-border-radius: 4px;
228 border-radius: 4px;
229 -webkit-transition: border-color 200ms linear;
230 -moz-transition: border-color 200ms linear;
231 -o-transition: border-color 200ms linear;
232 transition: border-color 200ms linear;
233 }
234
235 .jp-carousel-close-hint:hover {
236 cursor: default;
237 color: #fff;
238 }
239
240 .jp-carousel-close-hint:hover span {
241 border-color: #fff;
242 }
243
244 div.jp-carousel-buttons a.jp-carousel-like,
245 div.jp-carousel-buttons a.jp-carousel-reblog,
246 div.jp-carousel-buttons a.jp-carousel-commentlink,
247 a.jp-carousel-image-download {
248 background: url(../images/carousel-sprite.png?4) no-repeat;
249 background-size: 16px 160px;
250 }
251
252 div.jp-carousel-buttons a.jp-carousel-reblog,
253 div.jp-carousel-buttons a.jp-carousel-commentlink {
254 margin:0 14px 0 0 !important;
255 }
256
257 div.jp-carousel-buttons a.jp-carousel-reblog.reblogged,
258 div.jp-carousel-buttons a.jp-carousel-like.liked {
259 background-color: #303030;
260 padding-right: 8px !important;
261 border-radius: 2px;
262 border-radius:2px;
263 -webkit-border-radius:2px;
264 -moz-border-radius:2px;
265 -ms-border-radius:2px;
266 -o-border-radius:2px;
267 }
268
269 div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
270 margin:0 2px 0 -12px !important;
271 }
272
273
274 div.jp-carousel-buttons a.jp-carousel-reblog,
275 div.jp-carousel-buttons a.jp-carousel-reblog.reblogged:hover {
276 background-position: 6px -36px;
277 padding-left: 26px !important;
278 color: #999;
279 }
280
281 div.jp-carousel-buttons a.jp-carousel-commentlink {
282 background-position: 0px -116px;
283 padding-left: 19px !important;
284 }
285
286 div.jp-carousel-buttons a.jp-carousel-reblog.reblogged:hover {
287 cursor: default;
288 }
289
290 div.jp-carousel-buttons a.jp-carousel-reblog:hover {
291 background-position: 6px -56px;
292 color: #68c9e8;
293 }
294
295 div.jp-carousel-buttons a.jp-carousel-like {
296 background-position: 5px 5px;
297 padding-left: 24px !important;
298 }
299
300 div.jp-carousel-buttons a.jp-carousel-like:hover {
301 background-position: 5px -15px;
302 }
303
304 @media
305 only screen and (-webkit-min-device-pixel-ratio: 1.5),
306 only screen and (-o-min-device-pixel-ratio: 3/2),
307 only screen and (min--moz-device-pixel-ratio: 1.5),
308 only screen and (min-device-pixel-ratio: 1.5) {
309 div.jp-carousel-buttons a.jp-carousel-like,
310 div.jp-carousel-buttons a.jp-carousel-reblog,
311 div.jp-carousel-buttons a.jp-carousel-commentlink,
312 a.jp-carousel-image-download {
313 background-image: url(../images/carousel-sprite-2x.png?4);
314 }
315 }
316
317 /* reblog */
318 div#carousel-reblog-box {
319 background: #222;
320 background: -moz-linear-gradient(bottom, #222, #333);
321 background: -webkit-gradient(linear, left bottom, left top, from(#222), to(#333));
322 padding: 3px 0 0;
323 display: none;
324 margin: 5px auto 0;
325 -moz-border-radius: 2px;
326 -webkit-border-radius: 2px;
327 border-radius: 2px;
328 -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
329 -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
330 box-shadow: 0 0 20px rgba(0,0,0,0.9);
331 height: 74px;
332 width: 565px;
333 }
334
335 #carousel-reblog-box textarea {
336 background: #999;
337 font: 13px/1.4 "Helvetica Neue", sans-serif !important;
338 color: #444;
339 padding: 3px 6px;
340 width: 370px;
341 height: 48px;
342 float: left;
343 margin: 6px 9px 0 9px;
344 border: 1px solid #666;
345 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
346 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
347 -moz-border-radius: 2px;
348 -webkit-border-radius: 2px;
349 border-radius: 2px;
350 }
351
352 #carousel-reblog-box textarea:focus {
353 background: #ccc;
354 color: #222;
355 }
356
357 #carousel-reblog-box label {
358 color: #aaa;
359 font-size: 11px;
360 padding-right: 2px;
361 padding-left: 2px;
362 display: inline;
363 font-weight: normal;
364 }
365
366 #carousel-reblog-box select {
367 width: 110px;
368 padding: 0;
369 font-size: 12px;
370 font-family: "Helvetica Neue", sans-serif !important;
371 background: #333;
372 color: #eee;
373 border: 1px solid #444;
374 margin-top:5px;
375 }
376
377 #carousel-reblog-box .submit,
378 #wrapper #carousel-reblog-box p.response {
379 float: left;
380 width: 154px;
381 padding-top: 0;
382 padding-left: 1px;
383 overflow: hidden;
384 height: 34px;
385 margin:3px 0 0 2px !important;
386 }
387
388 #wrapper #carousel-reblog-box p.response {
389 font-size: 13px;
390 clear: none;
391 padding-left: 2px;
392 height: 34px;
393 color: #aaa;
394 }
395
396 #carousel-reblog-box input#carousel-reblog-submit, #jp-carousel-comment-form-button-submit {
397 font: 13px/24px "Helvetica Neue", sans-serif !important;
398 margin-top: 8px;
399 padding: 0 10px !important;
400 border-radius: 1em;
401 height: 24px;
402 color: #333;
403 cursor:pointer;
404 font-weight: normal;
405 background: #aaa;
406 background: -moz-linear-gradient(bottom, #aaa, #ccc);
407 background: -webkit-gradient(linear, left bottom, left top, from(#aaa), to(#ccc));
408 border: 1px solid #444;
409 }
410
411 #carousel-reblog-box input#carousel-reblog-submit:hover, #jp-carousel-comment-form-button-submit:hover {
412 background: #ccc;
413 background: -moz-linear-gradient(bottom, #ccc, #eee);
414 background: -webkit-gradient(linear, left bottom, left top, from(#ccc), to(#eee));
415 }
416
417 #carousel-reblog-box .canceltext {
418 color: #aaa;
419 font-size: 11px;
420 line-height: 24px;
421 }
422
423 #carousel-reblog-box .canceltext a {
424 color: #fff;
425 }
426 /* reblog end */
427
428
429 /** Title and Desc Start **/
430 .jp-carousel-titleanddesc {
431 border-top: 1px solid #222;
432 color: #999;
433 font-size: 15px;
434 padding-top: 24px;
435 margin-bottom: 20px;
436 font-weight:400;
437 }
438 .jp-carousel-titleanddesc-title {
439 font: 300 1.5em/1.1 "Helvetica Neue", sans-serif !important;
440 text-transform: none !important; /* prevents uppercase from leaking through */
441 color: #fff;
442 margin: 0 0 15px;
443 padding:0;
444 }
445
446 .jp-carousel-titleanddesc-desc p {
447 color: #999;
448 line-height:1.4;
449 margin-bottom: 0.75em;
450 }
451
452 .jp-carousel-titleanddesc p a,
453 .jp-carousel-comments p a,
454 .jp-carousel-info h2 a {
455 color: #fff !important;
456 border: none !important;
457 text-decoration: underline !important;
458 font-weight: normal !important;
459 font-style: normal !important;
460 }
461
462 .jp-carousel-titleanddesc p strong,
463 .jp-carousel-titleanddesc p b {
464 font-weight: bold;
465 color: #999;
466 }
467
468 .jp-carousel-titleanddesc p em,
469 .jp-carousel-titleanddesc p i {
470 font-style: italic;
471 color: #999;
472 }
473
474
475 .jp-carousel-titleanddesc p a:hover,
476 .jp-carousel-comments p a:hover,
477 .jp-carousel-info h2 a:hover {
478 color: #68c9e8 !important;
479 }
480
481 .jp-carousel-titleanddesc p:empty {
482 display: none;
483 }
484
485 .jp-carousel-photo-info h1:before,
486 .jp-carousel-photo-info h1:after,
487 .jp-carousel-left-column-wrapper h1:before,
488 .jp-carousel-left-column-wrapper h1:after {
489 content:none !important;
490 }
491 /** Title and Desc End **/
492
493 /** Meta Box Start **/
494 .jp-carousel-image-meta {
495 background: #111;
496 border: 1px solid #222;
497 color: #fff;
498 font-size: 13px;
499 font: 12px/1.4 "Helvetica Neue", sans-serif !important;
500 overflow: hidden;
501 padding: 18px 20px;
502 width: 209px !important;
503 }
504
505 .jp-carousel-image-meta li,
506 .jp-carousel-image-meta h5 {
507 font-family: "Helvetica Neue", sans-serif !important;
508 position: inherit !important;
509 top: auto !important;
510 right: auto !important;
511 left: auto !important;
512 bottom: auto !important;
513 background: none !important;
514 border: none !important;
515 font-weight: 400 !important;
516 line-height: 1.3em !important;
517 }
518
519 .jp-carousel-image-meta ul {
520 margin: 0 !important;
521 padding: 0 !important;
522 list-style: none !important;
523 }
524
525 .jp-carousel-image-meta li {
526 width: 48% !important;
527 float: left !important;
528 margin: 0 2% 15px 0 !important;
529 color: #fff !important;
530 font-size:13px !important;
531 }
532
533 .jp-carousel-image-meta h5 {
534 color: #999 !important;
535 text-transform: uppercase !important;
536 font-size:10px !important;
537 margin:0 0 2px !important;
538 letter-spacing: 0.1em !important;
539 }
540
541 a.jp-carousel-image-download {
542 padding-left: 23px;
543 display: inline-block;
544 clear: both;
545 color: #999;
546 line-height: 1;
547 font-weight: 400;
548 font-size: 13px;
549 text-decoration: none;
550 background-position: 0 -82px;
551 }
552
553 a.jp-carousel-image-download span.photo-size {
554 font-size: 11px;
555 border-radius: 1em;
556 margin-left: 2px;
557 display: inline-block;
558 }
559
560 a.jp-carousel-image-download span.photo-size-times {
561 padding: 0 1px 0 2px;
562 }
563
564 a.jp-carousel-image-download:hover {
565 background-position: 0 -102px;
566 color: #68c9e8;
567 border: none !important;
568 }
569
570 /** Meta Box End **/
571
572 /** GPS Map Start **/
573 .jp-carousel-image-map {
574 position: relative;
575 margin: -20px -20px 20px;
576 border-bottom: 1px solid rgba( 255, 255, 255, 0.17 );
577 height: 154px;
578 }
579
580 .jp-carousel-image-map img.gmap-main {
581 -moz-border-radius-topleft: 6px;
582 border-top-left-radius: 6px;
583 border-right: 1px solid rgba( 255, 255, 255, 0.17 );
584 }
585 .jp-carousel-image-map div.gmap-topright {
586 width: 94px;
587 height: 154px;
588 position: absolute;
589 top: 0;
590 right: 0;
591 }
592 .jp-carousel-image-map div.imgclip {
593 overflow: hidden;
594 -moz-border-radius-topright: 6px;
595 border-top-right-radius: 6px;
596 }
597 .jp-carousel-image-map div.gmap-topright img {
598 margin-left: -40px;
599 }
600 .jp-carousel-image-map img.gmap-bottomright {
601 position: absolute;
602 top: 96px;
603 right: 0;
604 }
605
606 /** Comments Start **/
607 .jp-carousel-comments {
608 font: 15px/1.7 "Helvetica Neue", sans-serif !important;
609 font-weight: 400;
610 background:none transparent;
611 }
612
613 .jp-carousel-comments p a:hover, .jp-carousel-comments p a:focus, .jp-carousel-comments p a:active {
614 color: #68c9e8 !important;
615 }
616
617 .jp-carousel-comment {
618 background:none transparent;
619 color: #999;
620 margin-bottom: 20px;
621 clear:left;
622 overflow: auto;
623 width: 100%
624 }
625
626 .jp-carousel-comment p {
627 color: #999 !important;
628 }
629
630 .jp-carousel-comment .comment-author {
631 font-size: 13px;
632 font-weight:400;
633 padding:0;
634 width:auto;
635 display: inline;
636 float:none;
637 border:none;
638 margin:0;
639 }
640
641 .jp-carousel-comment .comment-author a {
642 color: #fff;
643 }
644
645 .jp-carousel-comment .comment-gravatar {
646 float:left;
647 }
648
649 .jp-carousel-comment .comment-content {
650 border:none;
651 margin-left:85px;
652 padding: 0;
653 }
654
655 .jp-carousel-comment .avatar {
656 margin:0 20px 0 0;
657 -moz-border-radius: 4px;
658 -webkit-border-radius: 4px;
659 border-radius: 4px;
660 border: none !important;
661 padding: 0 !important;
662 background-color: transparent !important;
663 }
664
665 .jp-carousel-comment .comment-date {
666 color:#999;
667 margin-top: 4px;
668 font-size:11px;
669 display: inline;
670 float: right;
671 /*clear: right;*/
672 }
673
674 #jp-carousel-comment-form {
675 margin:0 0 10px !important;
676 float: left;
677 width: 100%;
678 }
679
680 textarea#jp-carousel-comment-form-comment-field {
681 background: rgba(34,34,34,0.9);
682 border: 1px solid #3a3a3a;
683 color: #aaa;
684 font: 15px/1.4 "Helvetica Neue", sans-serif !important;
685 width: 100%;
686 padding: 10px 10px 5px;
687 margin: 0;
688 float: none;
689 height: 147px;
690 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
691 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
692 -moz-border-radius: 3px;
693 -webkit-border-radius: 3px;
694 border-radius: 3px;
695 overflow: hidden;
696 -webkit-box-sizing: border-box;
697 -moz-box-sizing: border-box;
698 box-sizing: border-box;
699 }
700
701 textarea#jp-carousel-comment-form-comment-field::-webkit-input-placeholder {
702 color: #555;
703 }
704
705 textarea#jp-carousel-comment-form-comment-field:focus {
706 background: #ccc;
707 color: #222;
708 }
709
710 textarea#jp-carousel-comment-form-comment-field:focus::-webkit-input-placeholder {
711 color: #aaa;
712 }
713
714 #jp-carousel-comment-form-spinner {
715 color: #fff;
716 margin:22px 0 0 10px;
717 display: block;
718 width: 20px;
719 height: 20px;
720 float: left;
721 }
722
723 #jp-carousel-comment-form-submit-and-info-wrapper {
724 display: none;
725 /*margin-bottom:15px;*/
726 overflow: hidden;
727 width: 100%
728 }
729
730 #jp-carousel-comment-form-commenting-as {
731 }
732
733 #jp-carousel-comment-form-commenting-as input {
734 background: rgba(34,34,34,0.9);
735 border: 1px solid #3a3a3a;
736 color: #aaa;
737 font: 13px/1.4 "Helvetica Neue", sans-serif !important;
738 padding: 3px 6px;
739 float: left;
740 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
741 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
742 -moz-border-radius: 2px;
743 -webkit-border-radius: 2px;
744 border-radius: 2px;
745 width:285px;
746 }
747
748 #jp-carousel-comment-form-commenting-as input:focus {
749 background: #ccc;
750 color: #222;
751 }
752
753 #jp-carousel-comment-form-commenting-as p {
754 font: 400 13px/1.7 "Helvetica Neue", sans-serif !important;
755 margin:22px 0 0;
756 float: left;
757 }
758
759 #jp-carousel-comment-form-commenting-as fieldset {
760 float:left;
761 border:none;
762 margin:20px 0 0 0;
763 padding:0;
764 }
765
766 #jp-carousel-comment-form-commenting-as fieldset {
767 clear: both;
768 }
769
770 #jp-carousel-comment-form-commenting-as label {
771 font: 400 13px/1.7 "Helvetica Neue", sans-serif !important;
772 margin:0 20px 3px 0;
773 float:left;
774 width:100px;
775 }
776
777 #jp-carousel-comment-form-button-submit {
778 margin-top: 20px;
779 float:right;
780 }
781
782 #js-carousel-comment-form-container {
783 margin-bottom:15px;
784 overflow: auto;
785 width: 100%;
786 }
787
788 #jp-carousel-comment-form-container {
789 margin-bottom:15px;
790 overflow: auto;
791 width: 100%;
792 }
793
794 #jp-carousel-comment-post-results {
795 display: none;
796 overflow:auto;
797 width:100%;
798 }
799
800 #jp-carousel-comment-post-results span {
801 display:block;
802 text-align: center;
803 margin-top:20px;
804 width: 100%;
805 overflow: auto;
806 padding: 1em 0;
807 box-sizing: border-box;
808 background: rgba( 0, 0, 0, 0.7 );
809 border-radius: 2px;
810 font: 13px/1.4 "Helvetica Neue", sans-serif !important;
811 border: 1px solid rgba( 255, 255, 255, 0.17 );
812 -webkit-box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 1);
813 box-shadow: inset 0px 0px 5px 5px rgba(0, 0, 0, 1);
814 }
815
816 .jp-carousel-comment-post-error {
817 color:#DF4926;
818 }
819
820 .jp-carousel-comment-post-success {
821 /*color:#21759B;*/
822 }
823
824 #jp-carousel-comments-closed {
825 display: none;
826 color: #999;
827 }
828
829 #jp-carousel-comments-loading {
830 font: 444 15px/1.7 "Helvetica Neue", sans-serif !important;
831 display: none;
832 color: #999;
833 text-align: left;
834 margin-bottom: 20px;
835 }
836
837
838 /* ----- Light variant ----- */
839
840 .jp-carousel-light .jp-carousel-overlay {
841 background: #fff;
842 }
843
844 .jp-carousel-light .jp-carousel-next-button:hover span,
845 .jp-carousel-light .jp-carousel-previous-button:hover span {
846 opacity: 0.8;
847 }
848
849 .jp-carousel-light .jp-carousel-close-hint:hover,
850 .jp-carousel-light .jp-carousel-titleanddesc div {
851 color: #000 !important;
852 }
853
854 .jp-carousel-light .jp-carousel-comments p a,
855 .jp-carousel-light .jp-carousel-comment .comment-author a,
856 .jp-carousel-light .jp-carousel-titleanddesc p a,
857 .jp-carousel-light .jp-carousel-titleanddesc p a,
858 .jp-carousel-light .jp-carousel-comments p a,
859 .jp-carousel-light .jp-carousel-info h2 a {
860 color: #1e8cbe !important;
861 }
862
863 .jp-carousel-light .jp-carousel-comments p a:hover,
864 .jp-carousel-light .jp-carousel-comment .comment-author a:hover,
865 .jp-carousel-light .jp-carousel-titleanddesc p a:hover,
866 .jp-carousel-light .jp-carousel-titleanddesc p a:hover,
867 .jp-carousel-light .jp-carousel-comments p a:hover,
868 .jp-carousel-light .jp-carousel-info h2 a:hover {
869 color: #f1831e !important;
870 }
871
872 .jp-carousel-light .jp-carousel-info h2,
873 .jp-carousel-light .jp-carousel-titleanddesc,
874 .jp-carousel-light .jp-carousel-titleanddesc p,
875 .jp-carousel-light .jp-carousel-comment,
876 .jp-carousel-light .jp-carousel-comment p,
877 .jp-carousel-light div.jp-carousel-buttons a,
878 .jp-carousel-light .jp-carousel-titleanddesc p strong,
879 .jp-carousel-light .jp-carousel-titleanddesc p b,
880 .jp-carousel-light .jp-carousel-titleanddesc p em,
881 .jp-carousel-light .jp-carousel-titleanddesc p i {
882 color: #666;
883 }
884
885 .jp-carousel-light .jp-carousel-buttons {
886 border-bottom-color: #f0f0f0;
887 background: #f5f5f5;
888 }
889
890 .jp-carousel-light div.jp-carousel-buttons a:hover {
891 text-decoration: none;
892 color: #f1831e;
893 }
894
895 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog,
896 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog:hover {
897 background-position: 4px -56px;
898 padding-left: 24px !important;
899 }
900
901 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged,
902 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like.liked {
903 background-color: #2ea2cc;
904 color: #fff;
905 }
906
907 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-commentlink {
908 background-position: 0px -136px;
909 }
910
911 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like,
912 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like:hover {
913 background-position: 5px -15px;
914 padding-left: 23px !important;
915 }
916
917 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
918 background-position: 5px -36px;
919 }
920
921 .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like.liked {
922 background-position: 5px 5px;
923 }
924
925 .jp-carousel-light div#carousel-reblog-box {
926 background: #eee;
927 background: -moz-linear-gradient(bottom, #ececec, #f7f7f7);
928 background: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f7f7f7));
929 -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1);
930 -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.1);
931 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
932 border:1px solid #ddd;
933 }
934
935 .jp-carousel-light #carousel-reblog-box textarea {
936 border: 1px inset #ccc;
937 color: #666;
938 border: 1px solid #cfcfcf;
939 background: #fff;
940 }
941
942 .jp-carousel-light #carousel-reblog-box .canceltext {
943 color: #888;
944 }
945
946 .jp-carousel-light #carousel-reblog-box .canceltext a {
947 color: #666;
948 }
949
950 .jp-carousel-light #carousel-reblog-box select {
951 background: #eee;
952 color: #333;
953 border: 1px solid #aaa;
954 }
955
956 .jp-carousel-light #carousel-reblog-box input#carousel-reblog-submit, #jp-carousel-comment-form-button-submit {
957 color: #333;
958 background: #fff;
959 background: -moz-linear-gradient(bottom, #ddd, #fff);
960 background: -webkit-gradient(linear, left bottom, left top, from(#ddd), to(#fff));
961 border: 1px solid #aaa;
962 }
963
964 .jp-carousel-light .jp-carousel-image-meta {
965 background: #fafafa;
966 border: 1px solid #eee;
967 border-top-color: #f5f5f5;
968 border-left-color: #f5f5f5;
969 color: #333;
970 }
971
972 .jp-carousel-light .jp-carousel-image-meta li {
973 color: #000 !important;
974 }
975
976 .jp-carousel-light .jp-carousel-close-hint {
977 color: #ccc;
978 }
979
980 .jp-carousel-light .jp-carousel-close-hint span {
981 background-color: white;
982 border-color: #ccc;
983 }
984
985 .jp-carousel-light #jp-carousel-comment-form-comment-field::-webkit-input-placeholder {
986 color: #aaa;
987 }
988
989 .jp-carousel-light #jp-carousel-comment-form-comment-field:focus {
990 color: #333;
991 }
992
993 .jp-carousel-light #jp-carousel-comment-form-comment-field:focus::-webkit-input-placeholder {
994 color: #ddd;
995 }
996
997 .jp-carousel-light a.jp-carousel-image-download {
998 background-position: 0 -102px;
999 }
1000
1001 .jp-carousel-light a.jp-carousel-image-download:hover {
1002 background-position: 0 -102px;
1003 color: #f1831e;
1004 }
1005
1006 .jp-carousel-light textarea#jp-carousel-comment-form-comment-field {
1007 background: #fbfbfb;
1008 color: #333;
1009 border: 1px solid #dfdfdf;
1010 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
1011 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
1012 }
1013
1014 .jp-carousel-light #jp-carousel-comment-form-commenting-as input {
1015 background: #fbfbfb;
1016 border: 1px solid #dfdfdf;
1017 color: #333;
1018 -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
1019 box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
1020 }
1021
1022 .jp-carousel-light #jp-carousel-comment-form-commenting-as input:focus {
1023 background: #fbfbfb;
1024 color: #333;
1025 }
1026
1027 .jp-carousel-light #jp-carousel-comment-post-results span {
1028 background: #f7f7f7;
1029 border:1px solid #dfdfdf;
1030 -webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.05);
1031 box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.05);
1032 }
1033
1034 .jp-carousel-light .jp-carousel-slide {
1035 background-color:#fff;
1036 }
1037
1038 .jp-carousel-light .jp-carousel-titleanddesc {
1039 border-top: 1px solid #eee;
1040 }
1041
1042 .jp-carousel-light .jp-carousel-fadeaway {
1043 background: -moz-linear-gradient(bottom, rgba(255,255,255,0.75), rgba(255,255,255,0));
1044 background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));
1045 }
1046
1047 /* Small screens */
1048 @media only screen and (max-width: 760px) {
1049
1050 .jp-carousel-info {
1051 margin: 0 10px !important;
1052 }
1053
1054 .jp-carousel-next-button, .jp-carousel-previous-button {
1055 display: none !important;
1056 }
1057
1058 .jp-carousel-buttons {
1059 display: none !important;
1060 }
1061
1062 .jp-carousel-image-meta {
1063 float: none !important;
1064 width: 100% !important;
1065 -moz-box-sizing:border-box;
1066 -webkit-box-sizing:border-box;
1067 box-sizing: border-box;
1068 }
1069
1070 .jp-carousel-close-hint {
1071 font-weight: 800 !important;
1072 font-size: 26px !important;
1073 position: fixed !important;
1074 top: -10px;
1075 }
1076
1077 .jp-carousel-slide img {
1078 filter: alpha(opacity=100);
1079 opacity: 1;
1080 }
1081
1082 .jp-carousel-wrap {
1083 background-color: #000;
1084 }
1085
1086 .jp-carousel-fadeaway {
1087 display: none;
1088 }
1089
1090 #jp-carousel-comment-form-container {
1091 display: none !important;
1092 }
1093
1094 .jp-carousel-titleanddesc {
1095 padding-top: 0 !important;
1096 border: none !important;
1097 }
1098 .jp-carousel-titleanddesc-title {
1099 font-size: 1em !important;
1100 }
1101
1102 .jp-carousel-left-column-wrapper {
1103 padding: 0;
1104 }
1105 }
1106
1107