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

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