PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 2.4.20
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v2.4.20
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 / admin / assets / css / help-page.css

help-page.css in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 2.4.20, at admin/assets/css/help-page.css

467 lines 12.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap"); */
2 /*----------------------------------------*/
3 /* testimonial free help page base css
4 /*----------------------------------------*/
5 .sp_post_carousel_page_pcp_help * {
6 margin: 0;
7 padding: 0;
8 box-sizing: border-box;
9 }
10 .sp_post_carousel_page_pcp_help #smart-post-show-review-notice{
11 margin-bottom: 20px;
12 }
13 .sp-smart-post__help-page {
14 font-family: Roboto, sans-serif;
15 color: #444;
16 background-color: #f0f4f7;
17 padding: 30px 0 50px 40px;
18 margin-left: -30px;
19 margin-top: -20px;
20 }
21 #wpbody-content{
22 padding-bottom: 0;
23 }
24 /*--------------------------------------
25 - Layout
26 ----------------------------------------*/
27 .sp-smart-post__help-page .col,
28 .sp-smart-post__help-page .col-lg-6 {
29 position: relative;
30 width: 100%;
31 padding-right: 15px;
32 padding-left: 15px;
33 }
34 /*----------------------------------------*/
35 /* Grid Layout
36 /*----------------------------------------*/
37 .sp-smart-post__help-page .container {
38 width: 100%;
39 padding-right: 15px;
40 padding-left: 15px;
41 margin-right: auto;
42 margin-left: auto;
43 }
44 @media (min-width: 576px) {
45 .sp-smart-post__help-page .container {
46 max-width: 540px;
47 }
48 }
49 @media (min-width: 768px) {
50 .sp-smart-post__help-page .container {
51 max-width: 720px;
52 }
53 }
54 @media (min-width: 992px) {
55 .sp-smart-post__help-page .container {
56 max-width: 960px;
57 }
58 }
59 @media (min-width: 1170px) {
60 .sp-smart-post__help-page .container {
61 max-width: 1170px;
62 }
63 }
64 @media (min-width: 1170px) {
65 .sp-smart-post__help-page .container {
66 max-width: 1170px;
67 }
68 }
69
70 .sp-smart-post__help-page .row {
71 display: flex;
72 flex-wrap: wrap;
73 margin-right: -15px;
74 margin-left: -15px;
75 }
76
77 @media (min-width: 992px) {
78 .sp-smart-post__help-page .col-lg-6 {
79 flex: 0 0 50%;
80 max-width: 50%;
81 }
82 }
83 /*----------------------------------------*/
84 /* header section css
85 /*----------------------------------------*/
86 .sp-smart-post__help-page .sp-sps__help.header {
87 background-color: #fff;
88 padding: 50px 0;
89 width: 90%;
90 margin: 0 auto;
91 margin-top: 40px;
92 border-radius: 6px;
93 box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
94 }
95 @media screen and (min-width: 992px) {
96 .sp-smart-post__help-page .sp-sps__help.header {
97 width: 80%;
98 }
99 }
100 @media screen and (min-width: 1200px) {
101 .sp-smart-post__help-page .sp-sps__help.header {
102 width: 960px;
103 }
104 }
105 .sp-smart-post__help-page .sp-sps__help.header .header-area .header-logo {
106 text-align: center;
107 position: relative;
108 }
109 .sp-smart-post__help-page .sp-sps__help.header .header-area .header-logo span {
110 transform: translateY(-30px);
111 display: inline-block;
112 font-size: 14px;
113 font-weight: 500;
114 }
115 .sp-smart-post__help-page .sp-sps__help.header .header-area .header-content {
116 text-align: center;
117 position: relative;
118 }
119 @media screen and (min-width: 1200px) {
120 .sp-smart-post__help-page .upgrade-area .upgrade-img {
121 right: 40px;
122 }
123 }
124 .sp-smart-post__help-page .sp-sps__help.header .header-area .header-content p {
125 font-size: 17px;
126 font-weight: 400;
127 margin-top: 20px;
128 }
129 .sp-smart-post__help-page .sp-sps__help.header .video-area {
130 width: 100%;
131 height: 340px;
132 margin-top: 30px;
133 }
134 @media screen and (min-width: 768px) {
135 .sp-smart-post__help-page .sp-sps__help.header .video-area {
136 width: 100%;
137 height: 540px;
138 margin-top: 30px;
139 }
140 }
141 .sp-smart-post__help-page .sp-sps__help.header .video-area iframe {
142 width: 100%;
143 height: 100%;
144 }
145 .sp-smart-post__help-page .sp-sps__help.header .content-area {
146 text-align: center;
147 }
148 .sp-smart-post__help-page .sp-sps__help.header .content-area p {
149 margin-top: 40px;
150 font-size: 18px;
151 line-height: 28px;
152 font-weight: 400;
153 }
154 .sp-smart-post__help-page .sp-sps__help.header .content-area p br {
155 display: none;
156 }
157 @media screen and (min-width: 768px) {
158 .sp-smart-post__help-page .sp-sps__help.header .content-area p br {
159 display: block;
160 }
161 }
162 .Start_Displaying_Category_ {
163 font-size: 16px;
164 font-family: "Roboto";
165 color: rgb( 255, 255, 255 );
166 line-height: 1.5;
167 text-align: center;
168 position: absolute;
169 left: 565.161px;
170 top: 869.546px;
171 z-index: 213;
172 }
173
174 .sp-smart-post__help-page .sp-sps__help.header .content-area .content-button a {
175 display: inline-block;
176 text-decoration: none;
177 padding: 18px 30px;
178 border-radius: 4px;
179 background-color: #f05d31;
180 color: #fff;
181 margin-right: 15px;
182 font-size: 16px;
183 font-weight: 500;
184 margin-top: 48px;
185 }
186 .sp-smart-post__help-page .sp-sps__help.header .content-area .content-button a:hover {
187 background-color:#E2572C ;
188 }
189 .sp-smart-post__help-page .sp-sps__help.header .content-area .content-button a:last-child {
190 background-color: #d8e0e6;
191 color: #818181;
192 }
193 .sp-smart-post__help-page .sp-sps__help.header .content-area .content-button a:last-child:hover {
194 background-color: #c0cbd5;
195 }
196
197 /*----------------------------------------*/
198 /* upgrade section css
199 /*----------------------------------------*/
200
201 .sp-smart-post__help-page .sp-sps__help.upgrade {
202 background-color: #fff;
203 width: 90%;
204 margin: 0 auto;
205 margin-top: 40px;
206 border-radius: 5px;
207 box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
208 overflow: hidden;
209 }
210 .sp-smart-post__help-page .sp-sps__help.upgrade .container {
211 padding: 0 60px;
212 }
213 @media screen and (min-width: 992px) {
214 .sp-smart-post__help-page .sp-sps__help.upgrade {
215 width: 80%;
216 }
217 }
218 @media screen and (min-width: 1200px) {
219 .sp-smart-post__help-page .sp-sps__help.upgrade {
220 width: 960px;
221 }
222 }
223 .sp-smart-post__help-page .sp-sps__help.header .header-area .header-logo::before,
224 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-icon:before,
225 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-area .upgrade-img:before {
226 position: absolute;
227 left: 0;
228 top: 0;
229 right: 0;
230 bottom: 0;
231 content: '';
232 z-index: 99;
233 }
234 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-area .upgrade-img{
235 position: absolute;
236 bottom: -5px;
237 right: 40px;
238 opacity: .2;
239 z-index: -1;
240 }
241 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-area {
242 padding: 50px 30px;
243 text-align: center;
244 background-color: #157592;
245 background-image: -moz-linear-gradient(180deg, rgb(233, 100, 67) 0%, rgb(178, 86, 118) 100%);
246 background-image: -webkit-linear-gradient(180deg, rgb(233, 100, 67) 0%, rgb(178, 86, 118) 100%);
247 background-image: -ms-linear-gradient(180deg, rgb(233, 100, 67) 0%, rgb(178, 86, 118) 100%);
248 color: #fff;
249 position: relative;
250 z-index: 1;
251 box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
252 }
253
254 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-area h2 {
255 font-size: 28px;
256 font-weight: 500;
257 color: #fff;
258 line-height: 36px;
259 margin-bottom: 0;
260 margin-top: 0;
261 }
262
263 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-area p {
264 font-size: 18px;
265 margin-top: 12px;
266 font-weight: 400;
267 margin-bottom: 0;
268 line-height: 24px;
269 padding: 0px 40px;
270 }
271 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-info {
272 padding-top: 30px;
273 padding-bottom: 40px;
274 background-color: #f0faff;
275 }
276 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-info ul.upgrade-list li {
277 display: flex;
278 font-size: 18px;
279 font-weight: 500;
280 margin-top: 15px;
281 list-style: none;
282 line-height: 25px;
283 }
284 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-info ul.upgrade-list li .spcp-new-ft {
285 background: #e66346;
286 color: #fff;
287 display: inline-block;
288 font-size: 10px;
289 font-weight: 400;
290 line-height: 17px;
291 padding: 0 5px;
292 text-transform: uppercase;
293 transform: translateY(-2px);
294 }
295 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-info ul.upgrade-list li img {
296 width: 20px;
297 margin-right: 15px;
298 align-self: flex-start;
299 margin-top: 3px;
300 }
301 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro {
302 display: block;
303 padding: 50px 0;
304 width: 100%;
305 margin: 0 auto;
306 }
307 @media screen and (min-width: 768px) {
308 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro {
309 display: flex;
310 padding-right: 20px;
311 padding-left: 20px;
312 }
313 }
314 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content {
315 display: flex;
316 }
317 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-icon {
318 display: flex;
319 justify-content: center;
320 align-items: center;
321 flex-shrink: 0;
322 position: relative;
323 }
324 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-icon img {
325 width: 100px;
326 border-radius: 5px;
327 }
328 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text {
329 align-self: center;
330 margin-left: 30px;
331 }
332 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text h2 {
333 font-size: 24px;
334 font-weight: 500;
335 line-height: 36px;
336 margin-top: 0;
337 margin-bottom: 0;
338 }
339 #wpfooter {
340 display: none;
341 }
342 @media screen and (min-width: 1170px) {
343 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text h2 {
344 font-size: 26px;
345 }
346 }
347 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text p {
348 font-size: 16px;
349 font-weight: 400;
350 margin-top: 5px;
351 }
352 @media screen and (min-width: 1170px) {
353 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text p {
354 font-size: 16px;
355 }
356 }
357 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-btn {
358 margin-left: auto;
359 align-self: center;
360 flex-shrink: 0;
361 margin-top: 30px;
362 text-align: center;
363 }
364 @media screen and (min-width: 768px) {
365 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-btn {
366 margin-top: 0;
367 }
368 }
369 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-btn a {
370 display: inline-block;
371 text-decoration: none;
372 padding: 15px 30px;
373 background-color: #3fad43;
374 color: #fff;
375 border-radius: 5px;
376 font-size: 16px;
377 font-weight: 500;
378 }
379 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-btn a:hover {
380 background-color: #1e7b25;
381 }
382
383 /*----------------------------------------*/
384 /* testimonial section css
385 /*----------------------------------------*/
386 .sp-smart-post__help-page .sp-sps__help.testimonial {
387 width: 90%;
388 margin: 0 auto;
389 margin-top: 10px;
390 }
391
392 @media screen and (min-width: 992px) {
393 .sp-smart-post__help-page .sp-sps__help.testimonial {
394 width: 80%;
395 }
396 }
397 @media screen and (min-width: 1200px) {
398 .sp-smart-post__help-page .sp-sps__help.testimonial {
399 width: 960px;
400 }
401 }
402 .sp-smart-post__help-page .sp-sps__help.testimonial .col,
403 .sp-smart-post__help-page .col-lg-6 {
404 padding-right: 20px;
405 padding-left: 20px;
406 }
407 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area {
408 margin-top: 30px;
409 }
410 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-content {
411 background-color: #fff;
412 border-radius: 5px;
413 position: relative;
414 box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
415 }
416 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-content::after {
417 position: absolute;
418 content: "";
419 border-style: solid;
420 border-color: transparent;
421 border-width: 18px 18px 0;
422 border-top-color: #ffff;
423 bottom: -16px;
424 left: 45px;
425 }
426 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-content p {
427 padding: 25px 50px;
428 font-size: 14px;
429 font-weight: 400;
430 line-height: 24px;
431 font-style: italic;
432 }
433 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info {
434 display: flex;
435 margin-top: 25px;
436 margin-left: 30px;
437 }
438 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .img img{
439 border-radius: 50%;
440 height: 60px;
441 }
442 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .info {
443 margin-left: 15px;
444 align-self: center;
445 }
446 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .info h3 {
447 font-size: 15px;
448 margin-top: 0;
449 margin-bottom: 0;
450 font-weight: 500;
451 }
452 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .info .star {
453 display: flex;
454 margin-top: 5px;
455 }
456 .sp-sps__help.testimonial .testimonial-area .testimonial-info .info .star .fa{
457 font-size: 15px;
458 margin-right: 1px;
459 color: #ffb900;
460
461 }
462 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .info p {
463 font-size: 12px;
464 color: #808080;
465 margin-top: 5px;
466 }
467