PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 2.4.17
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v2.4.17
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / public / assets / css / style.css

style.css in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 2.4.17, at public/assets/css/style.css

743 lines 13.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Extra CSS */
2
3 .pcp-demo-section {
4 max-width: 1200px;
5 margin: 0 auto;
6 }
7
8 .pcp-section-padding {
9 padding: 80px 0;
10 }
11
12 /* Common CSS */
13 .pcp-align-left {
14 text-align: left;
15 }
16
17 .pcp-align-center {
18 text-align: center;
19 }
20
21 .pcp-align-right {
22 text-align: right;
23 }
24
25 .sp-pcp-section {
26 color: #444;
27 }
28
29 .entry .entry-content .sp-pcp-section a,
30 .sp-pcp-section a {
31 text-decoration: none;
32 transition: all 0.33s;
33 }
34
35 .sp-pcp-section img {
36 max-width: 100%;
37 vertical-align: middle;
38 }
39
40 .sp-pcp-section * {
41 box-sizing: border-box;
42 }
43
44 .sp-pcp-section .swiper-container {
45 position: initial;
46 }
47
48 .sp-pcp-section .swiper-container.sp-pcp-carousel.top_right {
49 position: relative;
50 }
51
52 /* Single post */
53
54 .sp-pcp-post .sp-pcp-thumb:focus,
55 .sp-pcp-post .sp-pcp-thumb img:focus,
56 .sp-pcp-post .sp-pcp-thumb:hover,
57 .sp-pcp-post .sp-pcp-thumb img:hover {
58 outline: none;
59 text-decoration: none;
60 outline-offset: 0;
61 color: transparent;
62 border: none;
63 }
64
65 .sp-pcp-post {
66 display: -webkit-flex;
67 display: flex;
68 flex-direction: column;
69 overflow: hidden;
70 }
71
72 .sp-pcp-post a {
73 text-decoration: none;
74 }
75
76 .sp-pcp-post .pcp-post-thumb-wrapper {
77 overflow: hidden;
78 display: block;
79 margin-bottom: 11px;
80 }
81
82 /* .sp-pcp-post .sp-pcp-post:hover .sp-pcp-post-thumb-area img {
83 transform: scale(1.2);
84 } */
85 .sp-pcp-post .sp-pcp-post-thumb-area {
86 position: relative;
87 /* margin-bottom: 15px;
88 order: 1; */
89 }
90
91 .sp-pcp-post .sp-pcp-post-thumb-area img {
92 max-width: 100%;
93 transition: ease all 0.3s;
94 height: 100%;
95 }
96
97 .sp-pcp-post .sp-pcp-title {
98 margin: 0;
99 font-size: 15px;
100 }
101
102 .sp-pcp-post .sp-pcp-title {
103 margin: 0 0 9px 0;
104 }
105
106 .sp-pcp-post .sp-pcp-title a,
107 .sp-pcp-post .sp-pcp-title {
108 text-transform: none;
109 font-size: 20px;
110 line-height: 24px;
111 color: #111;
112 font-weight: 400;
113 text-decoration: none;
114 }
115
116 .sp-pcp-post .sp-pcp-post-meta {
117 margin: 0px 0px 9px 0px;
118 text-align: left;
119 }
120
121 .sp-pcp-post .sp-pcp-post-meta ul {
122 list-style: none;
123 margin: 0;
124 padding: 0;
125 line-height: 1;
126 }
127
128 .sp-pcp-post .sp-pcp-post-meta ul li {
129 display: inline-block;
130 margin: 0 5px 5px 0;
131 }
132
133 .sp-pcp-post .sp-pcp-post-meta ul li .fa,
134 .sp-pcp-post .sp_pcp_cf_list .fa {
135 margin-right: 3px;
136 }
137
138 .sp-pcp-post .sp-pcp-post-meta ul li a {
139 display: inline-block;
140 text-decoration: none;
141 box-shadow: none;
142 }
143
144 .sp-pcp-post .sp-pcp-post-meta li,
145 .sp-pcp-post .sp-pcp-post-meta ul,
146 .sp-pcp-post .sp-pcp-post-meta li a {
147 text-transform: none;
148 font-size: 14px;
149 line-height: 16px;
150 letter-spacing: 0px;
151 color: #888;
152 }
153
154 .sp-pcp-post .sp-pcp-post-content {
155 text-transform: none;
156 font-size: 16px;
157 line-height: 20px;
158 letter-spacing: 0px;
159 margin: 0px 0px 17px 0px;
160 color: #444;
161 }
162
163 .sp-pcp-post .sp-pcp-post-content p:first-of-type {
164 margin-top: 0;
165 }
166
167 .sp-pcp-post .sp-pcp-post-content p:last-of-type {
168 margin-bottom: 0;
169 }
170
171 .sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore {
172 margin-top: 15px;
173 }
174
175 .sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a {
176 display: inline-block;
177 border: 1px solid #888;
178 padding: 7px 12px;
179 box-shadow: 0 0 0;
180 text-transform: uppercase;
181 font-size: 12px;
182 line-height: 18px;
183 letter-spacing: 0px;
184 background: transparent;
185 color: #111;
186 border-color: #888;
187 border-radius: 0;
188 }
189
190 /* Carousel */
191 .pcp-carousel-wrapper .sp-pcp-carousel {
192 padding-bottom: 60px;
193 padding-top: 60px;
194 }
195
196 .pcp-carousel-wrapper .bottom_center.sp-pcp-carousel {
197 padding-bottom: 72px;
198 }
199
200 .pcp-carousel-wrapper {
201 position: relative;
202 }
203
204 .pcp-carousel-wrapper .pcp-button-prev,
205 .pcp-carousel-wrapper .pcp-button-next {
206 background-image: none;
207 background-size: auto;
208 font-size: 25px;
209 height: 33px;
210 width: 33px;
211 margin-top: 16px;
212 /* border: 2px solid #444; */
213 text-align: center;
214 /* color: #444; */
215 line-height: 31px;
216 -webkit-transition: 0.3s;
217 }
218
219 .pcp-carousel-wrapper .pcp-button-prev.top_right,
220 .pcp-carousel-wrapper .pcp-button-next.top_right {
221 top: 0;
222 right: 0;
223 }
224
225 .pcp-carousel-wrapper .pcp-button-prev.top_right {
226 right: 42px;
227 left: auto;
228 }
229
230 .pcp-carousel-wrapper .pcp-button-prev.top_center,
231 .pcp-carousel-wrapper .pcp-button-next.top_center {
232 top: 0;
233 left: calc(50% + 5px);
234 text-align: center;
235 }
236
237 .pcp-carousel-wrapper .pcp-button-prev.top_center {
238 right: auto;
239 left: calc(50% - 40px);
240 }
241
242 .pcp-carousel-wrapper .pcp-button-prev.top_left,
243 .pcp-carousel-wrapper .pcp-button-next.top_left {
244 top: 0;
245 left: 0;
246 text-align: center;
247 }
248
249 .pcp-carousel-wrapper .pcp-button-next.top_left {
250 right: auto;
251 left: 40px;
252 }
253
254 .pcp-carousel-wrapper .swiper-button-prev::after,
255 .pcp-carousel-wrapper .swiper-button-next::after {
256 display: none;
257 }
258
259 .swiper-lazy-preloader-black {
260 --swiper-preloader-color: #888;
261 }
262
263 .pcp-carousel-wrapper.center .swiper-slide .sp-pcp-post {
264 transform: scale(0.9);
265 opacity: 0.8;
266 transition: 0.22s all;
267 }
268
269 .pcp-carousel-wrapper.center .swiper-slide.swiper-slide-active .sp-pcp-post {
270 transform: scale(1.1);
271 opacity: 1;
272 }
273
274 /* Bottom Position */
275 .pcp-carousel-wrapper .pcp-button-prev.bottom_right,
276 .pcp-carousel-wrapper .pcp-button-next.bottom_right {
277 bottom: 0;
278 right: 0;
279 top: auto;
280 }
281
282 .pcp-carousel-wrapper .pcp-button-prev.bottom_right {
283 right: 44px;
284 left: auto;
285 }
286
287 .pcp-carousel-wrapper .pcp-button-prev.bottom_center,
288 .pcp-carousel-wrapper .pcp-button-next.bottom_center {
289 top: auto;
290 bottom: 33px;
291 left: calc(50% + 5px);
292 text-align: center;
293 }
294
295 .pcp-carousel-wrapper .pcp-button-prev.bottom_center {
296 right: auto;
297 left: calc(50% - 40px);
298 }
299
300 .pcp-carousel-wrapper .pcp-button-prev.bottom_left,
301 .pcp-carousel-wrapper .pcp-button-next.bottom_left {
302 top: auto;
303 bottom: 0;
304 left: 0;
305 }
306
307 .pcp-carousel-wrapper .pcp-button-next.bottom_left {
308 right: auto;
309 left: 40px;
310 }
311
312 .sp-pcp-post {
313 direction: ltr
314 }
315
316 html[dir="rtl"] .sp-pcp-post {
317 direction: rtl
318 }
319
320 /* Center outer */
321 /*
322 .pcp-carousel-wrapper .pcp-button-next.vertically_center_outer,
323 .pcp-carousel-wrapper .pcp-button-prev.vertically_center_outer {
324 top: 50%;
325 -webkit-transform: translateY(-50%);
326 transform: translateY(-50%);
327 left: -35px;
328 }
329
330 .pcp-carousel-wrapper .pcp-button-next.vertically_center_outer,
331 .pcp-carousel-wrapper .pcp-button-next.vertical_center_inner_hover {
332 right: -35px;
333 left: auto;
334 }
335 .pcp-carousel-wrapper .pcp-button-prev.vertical_center_inner_hover {
336 right: auto;
337 left: -35px;
338 }
339 .pcp-carousel-wrapper:hover .pcp-button-next.vertical_center_inner_hover {
340 right: 10px;
341 }
342 .pcp-carousel-wrapper:hover .pcp-button-prev.vertical_center_inner_hover {
343 left: 10px;
344 }
345
346 .pcp-carousel-wrapper .pcp-button-prev.swiper-button-prev .fa,
347 .pcp-carousel-wrapper .pcp-button-next.swiper-button-next .fa {
348 line-height: 31px;
349 }
350
351 .pcp-carousel-wrapper .pcp-button-prev.swiper-button-prev:hover,
352 .pcp-carousel-wrapper .pcp-button-next.swiper-button-next:hover {
353 background: #444444;
354 color: #fff;
355 }
356 */
357 /* Bullet pagination */
358
359 .pcp-carousel-wrapper .swiper-pagination-bullets.dots .swiper-pagination-bullet {
360 width: 11px;
361 height: 11px;
362 opacity: 1;
363 margin: 0 4px;
364 }
365
366 .pcp-carousel-wrapper .swiper-pagination-bullets.number .swiper-pagination-bullet {
367 margin: 0 4px;
368 background: #444;
369 padding: 5px 10px;
370 border-radius: 0;
371 opacity: 1;
372 height: auto;
373 color: #fff;
374 width: auto;
375 margin: 3px 3px;
376 display: inline-block;
377 font-size: 14px;
378 }
379
380 /* Grid CSS */
381
382 .sp-pcp-container {
383 width: 100%;
384 margin-right: auto;
385 margin-left: auto;
386 position: relative;
387 }
388
389 .sp-pcp-row.no-gutters>[class*="sp-pcp-col-"] {
390 padding-right: 0;
391 padding-left: 0;
392 }
393
394 .sp-pcp-row {
395 display: flex;
396 flex-wrap: wrap;
397 margin-right: -10px;
398 margin-left: -10px;
399 }
400
401 .sp-pcp-row [class*="sp-pcp-col-"] {
402 /* position: relative; */
403 width: 100%;
404 padding-right: 10px;
405 padding-left: 10px;
406 padding-bottom: 20px;
407 }
408
409 @media (min-width: 1200px) {
410 .sp-pcp-row .sp-pcp-col-xl-1 {
411 flex: 0 0 100%;
412 max-width: 100%;
413 }
414
415 .sp-pcp-row .sp-pcp-col-xl-2 {
416 flex: 0 0 50%;
417 max-width: 50%;
418 }
419
420 .sp-pcp-row .sp-pcp-col-xl-3 {
421 flex: 0 0 33.22222222%;
422 max-width: 33.22222222%;
423 }
424
425 .sp-pcp-row .sp-pcp-col-xl-4 {
426 flex: 0 0 25%;
427 max-width: 25%;
428 }
429
430 .sp-pcp-row .sp-pcp-col-xl-5 {
431 flex: 0 0 20%;
432 max-width: 20%;
433 }
434
435 .sp-pcp-row .sp-pcp-col-xl-6 {
436 flex: 0 0 16.66666666666667%;
437 max-width: 16.66666666666667%;
438 }
439
440 .sp-pcp-row .sp-pcp-col-xl-7 {
441 flex: 0 0 14.28571428%;
442 max-width: 14.28571428%;
443 }
444
445 .sp-pcp-row .sp-pcp-col-xl-8 {
446 flex: 0 0 12.5%;
447 max-width: 12.5%;
448 }
449 }
450
451 @media (max-width: 1200px) {
452 .sp-pcp-row .sp-pcp-col-lg-1 {
453 flex: 0 0 100%;
454 max-width: 100%;
455 }
456
457 .sp-pcp-row .sp-pcp-col-lg-2 {
458 flex: 0 0 50%;
459 max-width: 50%;
460 }
461
462 .sp-pcp-row .sp-pcp-col-lg-3 {
463 flex: 0 0 33.22222222%;
464 max-width: 33.22222222%;
465 }
466
467 .sp-pcp-row .sp-pcp-col-lg-4 {
468 flex: 0 0 25%;
469 max-width: 25%;
470 }
471
472 .sp-pcp-row .sp-pcp-col-lg-5 {
473 flex: 0 0 20%;
474 max-width: 20%;
475 }
476
477 .sp-pcp-row .sp-pcp-col-lg-6 {
478 flex: 0 0 16.66666666666667%;
479 max-width: 16.66666666666667%;
480 }
481
482 .sp-pcp-row .sp-pcp-col-lg-7 {
483 flex: 0 0 14.28571428%;
484 max-width: 14.28571428%;
485 }
486
487 .sp-pcp-row .sp-pcp-col-lg-8 {
488 flex: 0 0 12.5%;
489 max-width: 12.5%;
490 }
491 }
492
493 @media (max-width: 992px) {
494 .sp-pcp-row .sp-pcp-col-md-1 {
495 flex: 0 0 100%;
496 max-width: 100%;
497 }
498
499 .sp-pcp-row .sp-pcp-col-md-2 {
500 flex: 0 0 50%;
501 max-width: 50%;
502 }
503
504 .sp-pcp-row .sp-pcp-col-md-2-5 {
505 flex: 0 0 75%;
506 max-width: 75%;
507 }
508
509 .sp-pcp-row .sp-pcp-col-md-3 {
510 flex: 0 0 33.333%;
511 max-width: 33.333%;
512 }
513
514 .sp-pcp-row .sp-pcp-col-md-4 {
515 flex: 0 0 25%;
516 max-width: 25%;
517 }
518
519 .sp-pcp-row .sp-pcp-col-md-5 {
520 flex: 0 0 20%;
521 max-width: 20%;
522 }
523
524 .sp-pcp-row .sp-pcp-col-md-6 {
525 flex: 0 0 16.66666666666667%;
526 max-width: 16.66666666666667%;
527 }
528
529 .sp-pcp-row .sp-pcp-col-md-7 {
530 flex: 0 0 14.28571428%;
531 max-width: 14.28571428%;
532 }
533
534 .sp-pcp-row .sp-pcp-col-md-8 {
535 flex: 0 0 12.5%;
536 max-width: 12.5%;
537 }
538 }
539
540 @media (max-width: 768px) {
541 .sp-pcp-row .sp-pcp-col-sm-1 {
542 flex: 0 0 100%;
543 max-width: 100%;
544 }
545
546 .sp-pcp-row .sp-pcp-col-sm-2 {
547 flex: 0 0 50%;
548 max-width: 50%;
549 }
550
551 .sp-pcp-row .sp-pcp-col-sm-2-5 {
552 flex: 0 0 75%;
553 max-width: 75%;
554 }
555
556 .sp-pcp-row .sp-pcp-col-sm-3 {
557 flex: 0 0 33.333%;
558 max-width: 33.333%;
559 }
560
561 .sp-pcp-row .sp-pcp-col-sm-4 {
562 flex: 0 0 25%;
563 max-width: 25%;
564 }
565
566 .sp-pcp-row .sp-pcp-col-sm-5 {
567 flex: 0 0 20%;
568 max-width: 20%;
569 }
570
571 .sp-pcp-row .sp-pcp-col-sm-6 {
572 flex: 0 0 16.66666666666667%;
573 max-width: 16.66666666666667%;
574 }
575
576 .sp-pcp-row .sp-pcp-col-sm-7 {
577 flex: 0 0 14.28571428%;
578 max-width: 14.28571428%;
579 }
580
581 .sp-pcp-row .sp-pcp-col-sm-8 {
582 flex: 0 0 12.5%;
583 max-width: 12.5%;
584 }
585 }
586
587 .pcp-post-pagination.pcp-on-mobile {
588 display: none;
589 }
590
591 @media (max-width: 420px) {
592 .sp-pcp-row .sp-pcp-col-xs-1 {
593 flex: 0 0 100%;
594 max-width: 100%;
595 }
596
597 .sp-pcp-row .sp-pcp-col-xs-2 {
598 flex: 0 0 50%;
599 max-width: 50%;
600 }
601
602 .sp-pcp-row .sp-pcp-col-xs-3 {
603 flex: 0 0 33.22222222%;
604 max-width: 33.22222222%;
605 }
606
607 .sp-pcp-row .sp-pcp-col-xs-4 {
608 flex: 0 0 25%;
609 max-width: 25%;
610 }
611
612 .sp-pcp-row .sp-pcp-col-xs-5 {
613 flex: 0 0 20%;
614 max-width: 20%;
615 }
616
617 .sp-pcp-row .sp-pcp-col-xs-6 {
618 flex: 0 0 16.66666666666667%;
619 max-width: 16.66666666666667%;
620 }
621
622 .sp-pcp-row .sp-pcp-col-xs-7 {
623 flex: 0 0 14.28571428%;
624 max-width: 14.28571428%;
625 }
626
627 .sp-pcp-row .sp-pcp-col-xs-8 {
628 flex: 0 0 12.5%;
629 max-width: 12.5%;
630 }
631
632 .pcp-post-pagination.pcp-on-mobile:not(.pcp-hide) {
633 display: block;
634 }
635
636 .pcp-post-pagination:not(.pcp-on-mobile) {
637 display: none;
638 }
639 }
640
641 /* post pagination */
642 .pcp-post-pagination {
643 margin-top: 20px;
644 margin-bottom: 30px;
645 }
646
647 .pcp-post-pagination a,
648 .pcp-post-pagination .page-numbers {
649 background: #fff;
650 color: #5e5e5e;
651 border: 2px solid #bbb;
652 width: 34px;
653 height: 34px;
654 line-height: 34px;
655 font-size: 14px;
656 text-align: center;
657 display: inline-block;
658 font-weight: 700;
659 margin-right: 4px;
660 text-decoration: none;
661 font-weight: 700;
662 border-radius: 3px;
663 -webkit-transition: all 0.33s;
664 transition: all 0.33s;
665 -webkit-box-sizing: content-box;
666 box-sizing: content-box;
667 cursor: pointer;
668 }
669
670 .pcp-post-pagination a.pcp_next.active,
671 .pcp-post-pagination a.pcp_prev.active {
672 display: none;
673 }
674
675 .pcp-post-pagination .page-numbers.current,
676 .pcp-post-pagination a.active {
677 cursor: auto;
678 color: #fff;
679 background: #e1624b;
680 border-color: #e1624b;
681 }
682
683 .pcp-load-more button {
684 margin-top: 20px;
685 box-shadow: none;
686 border: none;
687 border-radius: 2px;
688 padding: 10px 18px;
689 background: #e1624b;
690 color: #fff;
691 font-size: 14px;
692 text-transform: uppercase;
693 font-weight: 500;
694 }
695
696 .pcp-hide {
697 display: none;
698 }
699
700 .pcp-post-pagination a.pcp-hide,
701 .pcp-post-pagination .page-numbers.pcp-hide {
702 display: none;
703 }
704
705 .pcp-infinite-scroll-loader svg {
706 stroke: #e1624b;
707 }
708
709 .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-container-initialized) .swiper-wrapper {
710 display: flex;
711 width: unset;
712 }
713
714 @media screen and (min-width: 992px) {
715 .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-container-initialized) .swiper-wrapper {
716 margin-left: -20px;
717 }
718 .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-container-initialized) .swiper-wrapper>.swiper-slide {
719 width: 25%;
720 min-width: 25%;
721 padding-left: 20px;
722 }
723 }
724
725 /**
726 * Ajax Preloader.
727 */
728 .pcp-ajax-preloader {
729 text-align: center;
730 }
731
732 /* Preloader */
733 .pcp-preloader {
734 background-color: #fff;
735 background-image: url(../img/preloader.svg);
736 background-repeat: no-repeat;
737 background-position: center center;
738 position: absolute;
739 z-index: 9999;
740 width: 100%;
741 height: 100%;
742 visibility: visible;
743 }