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

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