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

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