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

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