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

456 lines 11.8 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 img {
285 width: 20px;
286 margin-right: 15px;
287 align-self: flex-start;
288 margin-top: 3px;
289 }
290 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro {
291 display: block;
292 padding: 50px 0;
293 width: 100%;
294 margin: 0 auto;
295 }
296 @media screen and (min-width: 768px) {
297 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro {
298 display: flex;
299 padding-right: 20px;
300 padding-left: 20px;
301 }
302 }
303 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content {
304 display: flex;
305 }
306 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-icon {
307 display: flex;
308 justify-content: center;
309 align-items: center;
310 flex-shrink: 0;
311 position: relative;
312 }
313 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-icon img {
314 width: 100px;
315 border-radius: 5px;
316 }
317 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text {
318 align-self: center;
319 margin-left: 30px;
320 }
321 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text h2 {
322 font-size: 24px;
323 font-weight: 500;
324 line-height: 36px;
325 margin-top: 0;
326 margin-bottom: 0;
327 }
328 #wpfooter {
329 display: none;
330 }
331 @media screen and (min-width: 1170px) {
332 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text h2 {
333 font-size: 26px;
334 }
335 }
336 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text p {
337 font-size: 16px;
338 font-weight: 400;
339 margin-top: 5px;
340 }
341 @media screen and (min-width: 1170px) {
342 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-content .pro-text p {
343 font-size: 16px;
344 }
345 }
346 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-btn {
347 margin-left: auto;
348 align-self: center;
349 flex-shrink: 0;
350 margin-top: 30px;
351 text-align: center;
352 }
353 @media screen and (min-width: 768px) {
354 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-btn {
355 margin-top: 0;
356 }
357 }
358 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-btn a {
359 display: inline-block;
360 text-decoration: none;
361 padding: 15px 30px;
362 background-color: #3fad43;
363 color: #fff;
364 border-radius: 5px;
365 font-size: 16px;
366 font-weight: 500;
367 }
368 .sp-smart-post__help-page .sp-sps__help.upgrade .upgrade-pro .pro-btn a:hover {
369 background-color: #1e7b25;
370 }
371
372 /*----------------------------------------*/
373 /* testimonial section css
374 /*----------------------------------------*/
375 .sp-smart-post__help-page .sp-sps__help.testimonial {
376 width: 90%;
377 margin: 0 auto;
378 margin-top: 10px;
379 }
380
381 @media screen and (min-width: 992px) {
382 .sp-smart-post__help-page .sp-sps__help.testimonial {
383 width: 80%;
384 }
385 }
386 @media screen and (min-width: 1200px) {
387 .sp-smart-post__help-page .sp-sps__help.testimonial {
388 width: 960px;
389 }
390 }
391 .sp-smart-post__help-page .sp-sps__help.testimonial .col,
392 .sp-smart-post__help-page .col-lg-6 {
393 padding-right: 20px;
394 padding-left: 20px;
395 }
396 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area {
397 margin-top: 30px;
398 }
399 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-content {
400 background-color: #fff;
401 border-radius: 5px;
402 position: relative;
403 box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
404 }
405 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-content::after {
406 position: absolute;
407 content: "";
408 border-style: solid;
409 border-color: transparent;
410 border-width: 18px 18px 0;
411 border-top-color: #ffff;
412 bottom: -16px;
413 left: 45px;
414 }
415 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-content p {
416 padding: 25px 50px;
417 font-size: 14px;
418 font-weight: 400;
419 line-height: 24px;
420 font-style: italic;
421 }
422 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info {
423 display: flex;
424 margin-top: 25px;
425 margin-left: 30px;
426 }
427 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .img img{
428 border-radius: 50%;
429 height: 60px;
430 }
431 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .info {
432 margin-left: 15px;
433 align-self: center;
434 }
435 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .info h3 {
436 font-size: 15px;
437 margin-top: 0;
438 margin-bottom: 0;
439 font-weight: 500;
440 }
441 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .info .star {
442 display: flex;
443 margin-top: 5px;
444 }
445 .sp-sps__help.testimonial .testimonial-area .testimonial-info .info .star .fa{
446 font-size: 15px;
447 margin-right: 1px;
448 color: #ffb900;
449
450 }
451 .sp-smart-post__help-page .sp-sps__help.testimonial .testimonial-area .testimonial-info .info p {
452 font-size: 12px;
453 color: #808080;
454 margin-top: 5px;
455 }
456