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

714 lines 12.2 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 /* Bullet pagination */
321
322 .pcp-carousel-wrapper .swiper-pagination-bullets.dots .swiper-pagination-bullet {
323 width: 11px;
324 height: 11px;
325 opacity: 1;
326 margin: 0 4px;
327 }
328
329 .pcp-carousel-wrapper .swiper-pagination-bullets.number .swiper-pagination-bullet {
330 margin: 0 4px;
331 background: #444;
332 padding: 5px 10px;
333 border-radius: 0;
334 opacity: 1;
335 height: auto;
336 color: #fff;
337 width: auto;
338 margin: 3px 3px;
339 display: inline-block;
340 font-size: 14px;
341 }
342
343 /* Grid CSS */
344
345 .sp-pcp-container {
346 width: 100%;
347 margin-right: auto;
348 margin-left: auto;
349 position: relative;
350 overflow: hidden;
351 }
352
353 .sp-pcp-row.no-gutters>[class*="sp-pcp-col-"] {
354 padding-right: 0;
355 padding-left: 0;
356 }
357
358 .sp-pcp-row {
359 display: flex;
360 flex-wrap: wrap;
361 margin-right: -10px;
362 margin-left: -10px;
363 }
364
365 .sp-pcp-row [class*="sp-pcp-col-"] {
366 /* position: relative; */
367 width: 100%;
368 padding-right: 10px;
369 padding-left: 10px;
370 padding-bottom: 20px;
371 }
372
373 @media (min-width: 1200px) {
374 .sp-pcp-row .sp-pcp-col-xl-1 {
375 flex: 0 0 100%;
376 max-width: 100%;
377 }
378
379 .sp-pcp-row .sp-pcp-col-xl-2 {
380 flex: 0 0 50%;
381 max-width: 50%;
382 }
383
384 .sp-pcp-row .sp-pcp-col-xl-3 {
385 flex: 0 0 33.22222222%;
386 max-width: 33.22222222%;
387 }
388
389 .sp-pcp-row .sp-pcp-col-xl-4 {
390 flex: 0 0 25%;
391 max-width: 25%;
392 }
393
394 .sp-pcp-row .sp-pcp-col-xl-5 {
395 flex: 0 0 20%;
396 max-width: 20%;
397 }
398
399 .sp-pcp-row .sp-pcp-col-xl-6 {
400 flex: 0 0 16.66666666666667%;
401 max-width: 16.66666666666667%;
402 }
403
404 .sp-pcp-row .sp-pcp-col-xl-7 {
405 flex: 0 0 14.28571428%;
406 max-width: 14.28571428%;
407 }
408
409 .sp-pcp-row .sp-pcp-col-xl-8 {
410 flex: 0 0 12.5%;
411 max-width: 12.5%;
412 }
413 }
414
415 @media (max-width: 1200px) {
416 .sp-pcp-row .sp-pcp-col-lg-1 {
417 flex: 0 0 100%;
418 max-width: 100%;
419 }
420
421 .sp-pcp-row .sp-pcp-col-lg-2 {
422 flex: 0 0 50%;
423 max-width: 50%;
424 }
425
426 .sp-pcp-row .sp-pcp-col-lg-3 {
427 flex: 0 0 33.22222222%;
428 max-width: 33.22222222%;
429 }
430
431 .sp-pcp-row .sp-pcp-col-lg-4 {
432 flex: 0 0 25%;
433 max-width: 25%;
434 }
435
436 .sp-pcp-row .sp-pcp-col-lg-5 {
437 flex: 0 0 20%;
438 max-width: 20%;
439 }
440
441 .sp-pcp-row .sp-pcp-col-lg-6 {
442 flex: 0 0 16.66666666666667%;
443 max-width: 16.66666666666667%;
444 }
445
446 .sp-pcp-row .sp-pcp-col-lg-7 {
447 flex: 0 0 14.28571428%;
448 max-width: 14.28571428%;
449 }
450
451 .sp-pcp-row .sp-pcp-col-lg-8 {
452 flex: 0 0 12.5%;
453 max-width: 12.5%;
454 }
455 }
456
457 @media (max-width: 992px) {
458 .sp-pcp-row .sp-pcp-col-md-1 {
459 flex: 0 0 100%;
460 max-width: 100%;
461 }
462
463 .sp-pcp-row .sp-pcp-col-md-2 {
464 flex: 0 0 50%;
465 max-width: 50%;
466 }
467
468 .sp-pcp-row .sp-pcp-col-md-2-5 {
469 flex: 0 0 75%;
470 max-width: 75%;
471 }
472
473 .sp-pcp-row .sp-pcp-col-md-3 {
474 flex: 0 0 33.333%;
475 max-width: 33.333%;
476 }
477
478 .sp-pcp-row .sp-pcp-col-md-4 {
479 flex: 0 0 25%;
480 max-width: 25%;
481 }
482
483 .sp-pcp-row .sp-pcp-col-md-5 {
484 flex: 0 0 20%;
485 max-width: 20%;
486 }
487
488 .sp-pcp-row .sp-pcp-col-md-6 {
489 flex: 0 0 16.66666666666667%;
490 max-width: 16.66666666666667%;
491 }
492
493 .sp-pcp-row .sp-pcp-col-md-7 {
494 flex: 0 0 14.28571428%;
495 max-width: 14.28571428%;
496 }
497
498 .sp-pcp-row .sp-pcp-col-md-8 {
499 flex: 0 0 12.5%;
500 max-width: 12.5%;
501 }
502 }
503
504 @media (max-width: 768px) {
505 .sp-pcp-row .sp-pcp-col-sm-1 {
506 flex: 0 0 100%;
507 max-width: 100%;
508 }
509
510 .sp-pcp-row .sp-pcp-col-sm-2 {
511 flex: 0 0 50%;
512 max-width: 50%;
513 }
514
515 .sp-pcp-row .sp-pcp-col-sm-2-5 {
516 flex: 0 0 75%;
517 max-width: 75%;
518 }
519
520 .sp-pcp-row .sp-pcp-col-sm-3 {
521 flex: 0 0 33.333%;
522 max-width: 33.333%;
523 }
524
525 .sp-pcp-row .sp-pcp-col-sm-4 {
526 flex: 0 0 25%;
527 max-width: 25%;
528 }
529
530 .sp-pcp-row .sp-pcp-col-sm-5 {
531 flex: 0 0 20%;
532 max-width: 20%;
533 }
534
535 .sp-pcp-row .sp-pcp-col-sm-6 {
536 flex: 0 0 16.66666666666667%;
537 max-width: 16.66666666666667%;
538 }
539
540 .sp-pcp-row .sp-pcp-col-sm-7 {
541 flex: 0 0 14.28571428%;
542 max-width: 14.28571428%;
543 }
544
545 .sp-pcp-row .sp-pcp-col-sm-8 {
546 flex: 0 0 12.5%;
547 max-width: 12.5%;
548 }
549 }
550
551 .pcp-post-pagination.pcp-on-mobile {
552 display: none;
553 }
554
555 @media (max-width: 420px) {
556 .sp-pcp-row .sp-pcp-col-xs-1 {
557 flex: 0 0 100%;
558 max-width: 100%;
559 }
560
561 .sp-pcp-row .sp-pcp-col-xs-2 {
562 flex: 0 0 50%;
563 max-width: 50%;
564 }
565
566 .sp-pcp-row .sp-pcp-col-xs-3 {
567 flex: 0 0 33.22222222%;
568 max-width: 33.22222222%;
569 }
570
571 .sp-pcp-row .sp-pcp-col-xs-4 {
572 flex: 0 0 25%;
573 max-width: 25%;
574 }
575
576 .sp-pcp-row .sp-pcp-col-xs-5 {
577 flex: 0 0 20%;
578 max-width: 20%;
579 }
580
581 .sp-pcp-row .sp-pcp-col-xs-6 {
582 flex: 0 0 16.66666666666667%;
583 max-width: 16.66666666666667%;
584 }
585
586 .sp-pcp-row .sp-pcp-col-xs-7 {
587 flex: 0 0 14.28571428%;
588 max-width: 14.28571428%;
589 }
590
591 .sp-pcp-row .sp-pcp-col-xs-8 {
592 flex: 0 0 12.5%;
593 max-width: 12.5%;
594 }
595
596 .pcp-post-pagination.pcp-on-mobile:not(.pcp-hide) {
597 display: block;
598 }
599
600 .pcp-post-pagination:not(.pcp-on-mobile) {
601 display: none;
602 }
603 }
604
605 /* post pagination */
606 .pcp-post-pagination {
607 margin-top: 20px;
608 margin-bottom: 30px;
609 }
610
611 .pcp-post-pagination a,
612 .pcp-post-pagination .page-numbers {
613 background: #fff;
614 color: #5e5e5e;
615 border: 2px solid #bbb;
616 width: 34px;
617 height: 34px;
618 line-height: 34px;
619 font-size: 14px;
620 text-align: center;
621 display: inline-block;
622 font-weight: 700;
623 margin-right: 4px;
624 text-decoration: none;
625 font-weight: 700;
626 border-radius: 3px;
627 -webkit-transition: all 0.33s;
628 transition: all 0.33s;
629 -webkit-box-sizing: content-box;
630 box-sizing: content-box;
631 cursor: pointer;
632 }
633
634 .pcp-post-pagination a.pcp_next.active,
635 .pcp-post-pagination a.pcp_prev.active {
636 display: none;
637 }
638
639 .pcp-post-pagination .page-numbers.current,
640 .pcp-post-pagination a.active {
641 cursor: auto;
642 color: #fff;
643 background: #e1624b;
644 border-color: #e1624b;
645 }
646
647 .pcp-load-more button {
648 margin-top: 20px;
649 box-shadow: none;
650 border: none;
651 border-radius: 2px;
652 padding: 10px 18px;
653 background: #e1624b;
654 color: #fff;
655 font-size: 14px;
656 text-transform: uppercase;
657 font-weight: 500;
658 }
659
660 .pcp-hide {
661 display: none;
662 }
663
664 .pcp-post-pagination a.pcp-hide,
665 .pcp-post-pagination .page-numbers.pcp-hide {
666 display: none;
667 }
668
669 .pcp-infinite-scroll-loader svg {
670 stroke: #e1624b;
671 }
672
673 .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-initialized,.swiper-container-initialized) .swiper-wrapper {
674 display: flex;
675 width: unset;
676 }
677
678 @media screen and (min-width: 992px) {
679 .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-initialized,.swiper-container-initialized) .swiper-wrapper {
680 margin-left: -20px;
681 }
682 .pcp-carousel-wrapper.standard .sp-pcp-carousel:not(.swiper-initialized,.swiper-container-initialized) .swiper-wrapper>.swiper-slide {
683 width: 25%;
684 min-width: 25%;
685 padding-left: 20px;
686 }
687 }
688
689 /**
690 * Ajax Preloader.
691 */
692 .pcp-ajax-preloader {
693 text-align: center;
694 }
695
696 /* Preloader */
697 .pcp-preloader {
698 background-color: #fff;
699 background-image: url(../img/preloader.svg);
700 background-repeat: no-repeat;
701 background-position: center center;
702 position: absolute;
703 z-index: 9999;
704 width: 100%;
705 height: 100%;
706 visibility: visible;
707 }
708 .block-editor-page a.sp_sps_block_edit_button,
709 a.sp_sps_block_edit_button {
710 display: inline-block;
711 text-decoration: underline;
712 font-size: 16px;
713 margin: 10px 0;
714 }