PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.4
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.4
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 4.0.4, at public/assets/css/style.css

799 lines 13.9 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-meta ul li .fa-comments-o {
155 font-family: FontAwesome;
156 }
157
158 .sp-pcp-post .sp-pcp-post-content {
159 text-transform: none;
160 font-size: 16px;
161 line-height: 20px;
162 letter-spacing: 0px;
163 margin: 0px 0px 17px 0px;
164 color: #444;
165 }
166
167 .sp-pcp-post .sp-pcp-post-content p:first-of-type {
168 margin-top: 0;
169 }
170
171 .sp-pcp-post .sp-pcp-post-content p:last-of-type {
172 margin-bottom: 0;
173 }
174
175 .sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore {
176 margin-top: 15px;
177 }
178
179 .sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a {
180 display: inline-block;
181 border: 1px solid #888;
182 padding: 7px 12px;
183 box-shadow: 0 0 0;
184 text-transform: uppercase;
185 font-size: 12px;
186 line-height: 18px;
187 letter-spacing: 0px;
188 background: transparent;
189 color: #111;
190 border-color: #888;
191 border-radius: 0;
192 }
193
194 /* Carousel */
195 .pcp-carousel-wrapper .sp-pcp-carousel {
196 padding-bottom: 60px;
197 padding-top: 60px;
198 }
199
200 .pcp-carousel-wrapper .bottom_center.sp-pcp-carousel {
201 padding-bottom: 72px;
202 }
203
204 .pcp-carousel-wrapper {
205 position: relative;
206 }
207
208 .pcp-carousel-wrapper .pcp-button-prev,
209 .pcp-carousel-wrapper .pcp-button-next {
210 background-image: none;
211 background-size: auto;
212 font-size: 25px;
213 height: 33px;
214 width: 33px;
215 margin-top: 16px;
216 /* border: 2px solid #444; */
217 text-align: center;
218 /* color: #444; */
219 line-height: 31px;
220 -webkit-transition: 0.3s;
221 }
222
223 .pcp-carousel-wrapper .pcp-button-prev.top_right,
224 .pcp-carousel-wrapper .pcp-button-next.top_right {
225 top: 0;
226 right: 0;
227 }
228
229 .pcp-carousel-wrapper .pcp-button-prev.top_right {
230 right: 42px;
231 left: auto;
232 }
233
234 .pcp-carousel-wrapper .pcp-button-prev.top_center,
235 .pcp-carousel-wrapper .pcp-button-next.top_center {
236 top: 0;
237 left: calc(50% + 5px);
238 text-align: center;
239 }
240
241 .pcp-carousel-wrapper .pcp-button-prev.top_center {
242 right: auto;
243 left: calc(50% - 40px);
244 }
245
246 .pcp-carousel-wrapper .pcp-button-prev.top_left,
247 .pcp-carousel-wrapper .pcp-button-next.top_left {
248 top: 0;
249 left: 0;
250 text-align: center;
251 }
252
253 .pcp-carousel-wrapper .pcp-button-next.top_left {
254 right: auto;
255 left: 40px;
256 }
257
258 .pcp-carousel-wrapper .swiper-button-prev::after,
259 .pcp-carousel-wrapper .swiper-button-next::after {
260 display: none;
261 }
262
263 .swiper-lazy-preloader-black {
264 --swiper-preloader-color: #888;
265 }
266
267 .pcp-carousel-wrapper.center .swiper-slide .sp-pcp-post {
268 transform: scale(0.9);
269 opacity: 0.8;
270 transition: 0.22s all;
271 }
272
273 .pcp-carousel-wrapper.center .swiper-slide.swiper-slide-active .sp-pcp-post {
274 transform: scale(1.1);
275 opacity: 1;
276 }
277
278 /* Bottom Position */
279 .pcp-carousel-wrapper .pcp-button-prev.bottom_right,
280 .pcp-carousel-wrapper .pcp-button-next.bottom_right {
281 bottom: 0;
282 right: 0;
283 top: auto;
284 }
285
286 .pcp-carousel-wrapper .pcp-button-prev.bottom_right {
287 right: 44px;
288 left: auto;
289 }
290
291 .pcp-carousel-wrapper .pcp-button-prev.bottom_center,
292 .pcp-carousel-wrapper .pcp-button-next.bottom_center {
293 top: auto;
294 bottom: 33px;
295 left: calc(50% + 5px);
296 text-align: center;
297 }
298
299 .pcp-carousel-wrapper .pcp-button-prev.bottom_center {
300 right: auto;
301 left: calc(50% - 40px);
302 }
303
304 .pcp-carousel-wrapper .pcp-button-prev.bottom_left,
305 .pcp-carousel-wrapper .pcp-button-next.bottom_left {
306 top: auto;
307 bottom: 0;
308 left: 0;
309 }
310
311 .pcp-carousel-wrapper .pcp-button-next.bottom_left {
312 right: auto;
313 left: 40px;
314 }
315
316 .sp-pcp-post {
317 direction: ltr
318 }
319
320 html[dir="rtl"] .sp-pcp-post {
321 direction: rtl
322 }
323
324 /* Bullet pagination */
325
326 .pcp-carousel-wrapper .swiper-pagination-bullets.dots .swiper-pagination-bullet {
327 width: 11px;
328 height: 11px;
329 opacity: 1;
330 margin: 0 4px;
331 }
332
333 .pcp-carousel-wrapper .swiper-pagination-bullets.number .swiper-pagination-bullet {
334 margin: 0 4px;
335 background: #444;
336 padding: 5px 10px;
337 border-radius: 0;
338 opacity: 1;
339 height: auto;
340 color: #fff;
341 width: auto;
342 margin: 3px 3px;
343 display: inline-block;
344 font-size: 14px;
345 }
346
347 /* Grid CSS */
348
349 .sp-pcp-container {
350 width: 100%;
351 margin-right: auto;
352 margin-left: auto;
353 position: relative;
354 overflow: hidden;
355 }
356
357 .sp-pcp-row.no-gutters>[class*="sp-pcp-col-"] {
358 padding-right: 0;
359 padding-left: 0;
360 }
361
362 .sp-pcp-row {
363 display: flex;
364 flex-wrap: wrap;
365 }
366
367 .sp-pcp-row [class*="sp-pcp-col-"] {
368 width: 100%;
369 }
370
371 @media (min-width: 1200px) {
372 .sp-pcp-row .sp-pcp-col-xl-1 {
373 max-width: 100%;
374 }
375
376 .sp-pcp-row .sp-pcp-col-xl-2 {
377 max-width: 50%;
378 }
379
380 .sp-pcp-row .sp-pcp-col-xl-3 {
381 max-width: 33.22222222%;
382 }
383
384 .sp-pcp-row .sp-pcp-col-xl-4 {
385 max-width: 25%;
386 }
387
388 .sp-pcp-row .sp-pcp-col-xl-5 {
389 max-width: 20%;
390 }
391
392 .sp-pcp-row .sp-pcp-col-xl-6 {
393 max-width: 16.66666666666667%;
394 }
395
396 .sp-pcp-row .sp-pcp-col-xl-7 {
397 max-width: 14.28571428%;
398 }
399
400 .sp-pcp-row .sp-pcp-col-xl-8 {
401 max-width: 12.5%;
402 }
403 }
404
405 @media (max-width: 1200px) {
406 .sp-pcp-row .sp-pcp-col-lg-1 {
407 max-width: 100%;
408 }
409
410 .sp-pcp-row .sp-pcp-col-lg-2 {
411 max-width: 50%;
412 }
413
414 .sp-pcp-row .sp-pcp-col-lg-3 {
415 max-width: 33.22222222%;
416 }
417
418 .sp-pcp-row .sp-pcp-col-lg-4 {
419 max-width: 25%;
420 }
421
422 .sp-pcp-row .sp-pcp-col-lg-5 {
423 max-width: 20%;
424 }
425
426 .sp-pcp-row .sp-pcp-col-lg-6 {
427 max-width: 16.66666666666667%;
428 }
429
430 .sp-pcp-row .sp-pcp-col-lg-7 {
431 max-width: 14.28571428%;
432 }
433
434 .sp-pcp-row .sp-pcp-col-lg-8 {
435 max-width: 12.5%;
436 }
437 }
438
439 @media (max-width: 992px) {
440 .sp-pcp-row .sp-pcp-col-md-1 {
441 max-width: 100%;
442 }
443
444 .sp-pcp-row .sp-pcp-col-md-2 {
445 max-width: 50%;
446 }
447
448 .sp-pcp-row .sp-pcp-col-md-2-5 {
449 max-width: 75%;
450 }
451
452 .sp-pcp-row .sp-pcp-col-md-3 {
453 max-width: 33.333%;
454 }
455
456 .sp-pcp-row .sp-pcp-col-md-4 {
457 max-width: 25%;
458 }
459
460 .sp-pcp-row .sp-pcp-col-md-5 {
461 max-width: 20%;
462 }
463
464 .sp-pcp-row .sp-pcp-col-md-6 {
465 max-width: 16.66666666666667%;
466 }
467
468 .sp-pcp-row .sp-pcp-col-md-7 {
469 max-width: 14.28571428%;
470 }
471
472 .sp-pcp-row .sp-pcp-col-md-8 {
473 max-width: 12.5%;
474 }
475 }
476
477 @media (max-width: 768px) {
478 .sp-pcp-row .sp-pcp-col-sm-1 {
479 max-width: 100%;
480 }
481
482 .sp-pcp-row .sp-pcp-col-sm-2 {
483 max-width: 50%;
484 }
485
486 .sp-pcp-row .sp-pcp-col-sm-2-5 {
487 max-width: 75%;
488 }
489
490 .sp-pcp-row .sp-pcp-col-sm-3 {
491 max-width: 33.333%;
492 }
493
494 .sp-pcp-row .sp-pcp-col-sm-4 {
495 max-width: 25%;
496 }
497
498 .sp-pcp-row .sp-pcp-col-sm-5 {
499 max-width: 20%;
500 }
501
502 .sp-pcp-row .sp-pcp-col-sm-6 {
503 max-width: 16.66666666666667%;
504 }
505
506 .sp-pcp-row .sp-pcp-col-sm-7 {
507 max-width: 14.28571428%;
508 }
509
510 .sp-pcp-row .sp-pcp-col-sm-8 {
511 max-width: 12.5%;
512 }
513 }
514
515 .pcp-post-pagination.pcp-on-mobile {
516 display: none;
517 }
518
519 @media (max-width: 420px) {
520 .sp-pcp-row .sp-pcp-col-xs-1 {
521 max-width: 100%;
522 }
523
524 .sp-pcp-row .sp-pcp-col-xs-2 {
525 max-width: 50%;
526 }
527
528 .sp-pcp-row .sp-pcp-col-xs-3 {
529 max-width: 33.22222222%;
530 }
531
532 .sp-pcp-row .sp-pcp-col-xs-4 {
533 max-width: 25%;
534 }
535
536 .sp-pcp-row .sp-pcp-col-xs-5 {
537 max-width: 20%;
538 }
539
540 .sp-pcp-row .sp-pcp-col-xs-6 {
541 max-width: 16.66666666666667%;
542 }
543
544 .sp-pcp-row .sp-pcp-col-xs-7 {
545 max-width: 14.28571428%;
546 }
547
548 .sp-pcp-row .sp-pcp-col-xs-8 {
549 max-width: 12.5%;
550 }
551
552 .pcp-post-pagination.pcp-on-mobile:not(.pcp-hide) {
553 display: block;
554 }
555
556 .pcp-post-pagination:not(.pcp-on-mobile) {
557 display: none;
558 }
559 }
560
561 /* post pagination */
562 .pcp-post-pagination {
563 margin-top: 20px;
564 margin-bottom: 30px;
565 }
566
567 .pcp-post-pagination a,
568 .pcp-post-pagination .page-numbers {
569 background: #fff;
570 color: #5e5e5e;
571 border: 2px solid #bbb;
572 width: 34px;
573 height: 34px;
574 line-height: 34px;
575 font-size: 14px;
576 text-align: center;
577 display: inline-block;
578 font-weight: 700;
579 margin-right: 4px;
580 text-decoration: none;
581 font-weight: 700;
582 border-radius: 3px;
583 -webkit-transition: all 0.33s;
584 transition: all 0.33s;
585 -webkit-box-sizing: content-box;
586 box-sizing: content-box;
587 cursor: pointer;
588 }
589
590 .pcp-post-pagination a.pcp_next.active,
591 .pcp-post-pagination a.pcp_prev.active {
592 display: none;
593 }
594
595 .pcp-post-pagination .page-numbers.current,
596 .pcp-post-pagination a.active {
597 cursor: auto;
598 color: #fff;
599 background: #e1624b;
600 border-color: #e1624b;
601 }
602
603 .pcp-load-more button {
604 margin-top: 20px;
605 box-shadow: none;
606 border: none;
607 border-radius: 2px;
608 padding: 10px 18px;
609 background: #e1624b;
610 color: #fff;
611 font-size: 14px;
612 text-transform: uppercase;
613 font-weight: 500;
614 }
615
616 .pcp-hide {
617 display: none;
618 }
619
620 .pcp-post-pagination a.pcp-hide,
621 .pcp-post-pagination .page-numbers.pcp-hide {
622 display: none;
623 }
624
625 .pcp-infinite-scroll-loader svg {
626 stroke: #e1624b;
627 }
628
629 .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-initialized, .swiper-container-initialized) .swiper-wrapper {
630 display: flex;
631 width: unset;
632 }
633
634 @media screen and (min-width: 992px) {
635 .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-initialized, .swiper-container-initialized) .swiper-wrapper {
636 margin-left: -20px;
637 }
638
639 .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-initialized, .swiper-container-initialized) .swiper-wrapper>.swiper-slide {
640 width: 25%;
641 min-width: 25%;
642 padding-left: 20px;
643 }
644 }
645
646 /**
647 * Ajax Preloader.
648 */
649 .pcp-ajax-preloader {
650 text-align: center;
651 }
652
653 /* Preloader */
654 .pcp-preloader {
655 background-color: #fff;
656 background-image: url(../img/preloader.svg);
657 background-repeat: no-repeat;
658 background-position: center center;
659 position: absolute;
660 z-index: 9999;
661 width: 100%;
662 height: 100%;
663 visibility: visible;
664 }
665
666 .block-editor-page a.sp_sps_block_edit_button,
667 a.sp_sps_block_edit_button {
668 display: inline-block;
669 text-decoration: underline;
670 font-size: 16px;
671 margin: 10px 0;
672 }
673
674 /* Fix the issue of not showing carousel with Elementor Pro v3.14.1 */
675 .elementor-default .sp-pcp-section .swiper-container:not(.swiper-container-initialized) .swiper-wrapper,
676 .elementor-default .sp-pcp-section .swiper:not(.swiper-initialized) .swiper-wrapper {
677 overflow: initial;
678 }
679
680 /* Slider layout */
681 .sp-slider_layout .sp-pcp-post.sp-overlay {
682 position: relative;
683 overflow: hidden;
684 }
685
686 .sp-slider_layout .sp-pcp-post .sp-pcp-post-thumb-area {
687 position: relative;
688 text-align: center;
689 }
690
691 .sp-slider_layout .sp-pcp-post .pcp-post-thumb-wrapper {
692 margin: 0px;
693 }
694
695 .sp-slider_layout .sp-pcp-post .pcp-post-thumb-wrapper {
696 overflow: hidden;
697 display: block;
698 }
699
700 .sp-slider_layout .sp-pcp-post .sp-pcp-post-details {
701 display: flex;
702 -webkit-box-align: center;
703 -webkit-align-items: center;
704 -ms-flex-align: center;
705 align-items: center;
706 }
707
708 .sp-slider_layout .sp-pcp-post .sp-pcp-post-details {
709 background: rgba(0, 0, 0, 0.5);
710 }
711
712 .sp-slider_layout .sp-pcp-post-details-content {
713 width: 100%;
714 text-align: center;
715 padding: 0 15px
716 }
717
718 .sp-slider_layout .sp-pcp-post .sp-pcp-post-details-content .sp-pcp-post-meta {
719 text-align: center;
720 }
721
722 .sp-slider_layout .sp-pcp-post .sp-pcp-post-details {
723 position: absolute;
724 /* height: 100%;
725 width: 100%; */
726 bottom: 0;
727 left: 0;
728 top: 0;
729 right: 0;
730 }
731
732 .sps-list-layout .sp-pcp-post.left-thumb {
733 -ms-flex-align: start;
734 -webkit-box-align: start;
735 align-items: flex-start;
736 flex-direction: unset;
737 gap: 20px;
738 }
739
740 .sps-list-layout .sp-pcp-post.left-thumb .sp-pcp-post-details {
741 max-width: calc(60% - 20px);
742 }
743
744 .sps-list-layout .sp-pcp-post.left-thumb .pcp-post-thumb-wrapper {
745 order: unset;
746 /* flex: 0 0 40%; */
747 margin: 0;
748 max-width: 40%;
749 flex-shrink: 0;
750 }
751
752 /* Left Thumb right content */
753 .sp-pcp-post.left-thumb {
754 display: -ms-flexbox;
755 display: -webkit-box;
756 display: flex;
757 -ms-flex-align: start;
758 -webkit-box-align: start;
759 align-items: flex-start;
760 flex-direction: unset;
761 }
762
763 .sp-pcp-post.left-thumb .sp-pcp-post-details {
764 margin-left: 20px;
765 }
766
767 .thumbnails_slider .sp-pcp-post.left-thumb .sp-pcp-post-details {
768 margin-left: 1px;
769 }
770
771 .sp-pcp-post.left-thumb .pcp-post-thumb-wrapper {
772 order: unset;
773 margin: 0;
774 max-width: 40%;
775 }
776
777 /* Right Thumb left content */
778 .sp-pcp-post.right-thumb {
779 display: -ms-flexbox;
780 display: -webkit-box;
781 display: flex;
782 -ms-flex-align: start;
783 -webkit-box-align: start;
784 align-items: flex-start;
785 flex-direction: row-reverse;
786 /* width: 100%; */
787 }
788
789 .sp-pcp-post.right-thumb .pcp-post-thumb-wrapper {
790 order: unset;
791 flex: 0 0 40%;
792 margin: 0;
793 }
794
795 .sp-pcp-post.right-thumb .sp-pcp-post-details {
796 text-align: right;
797 margin-right: 20px;
798 }
799