PluginProbe
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) / 1.3.0
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) v1.3.0
2.1.3 2.1.2 2.1.1 2.1.0 2.0.4 2.0.3 2.0.2 2.0.1 2.0.0 1.5.5 1.5.4 1.5.3 1.5.2 1.5.1 1.5.0 trunk 1.0.1 1.1.0 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.3.0 All 57 releases
darkify / src / Admin / Framework / assets / css / help-page.css

help-page.css in Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) 1.3.0, at src/Admin/Framework/assets/css/help-page.css

663 lines 13.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .themeatelier-container {
2 padding: 0 15px;
3 max-width: 1240px;
4 margin: auto;
5 }
6 .chat_btn_primary,
7 .chat_btn_secondary {
8 text-decoration: none;
9 transition: all 0.3s;
10 padding: 10px 24px;
11 border-radius: 4px;
12 font-weight: 700;
13 font-size: 14px;
14 border: 1px solid #171717;
15 display: inline-block;
16 }
17 .chat_btn_primary {
18 color: #fff;
19 background-color: #171717;
20 }
21 .chat_btn_secondary {
22 color: #171717;
23 border: 1px solid #171717;
24 background-color: transparent;
25 }
26 .chat_btn_primary:hover,
27 .chat_btn_secondary:hover {
28 background-color: #171717;
29 color: #fff !important;
30 border: 1px solid #171717;
31 }
32 .darkify {
33 margin-left: -20px;
34 }
35 .header {
36 background-color: #fff;
37 border-bottom: 1px solid #dadce0;
38 }
39 .header_nav {
40 display: flex;
41 align-items: center;
42 gap: 15px;
43 justify-content: space-between;
44 }
45 .header_nav .header_nav_left .header_nav_logo img {
46 max-width: 60px;
47 padding: 4px 0;
48 }
49 .header_nav .header_nav_left {
50 display: flex;
51 align-items: center;
52 gap: 20px;
53 }
54 .header_nav .header_nav_menu ul {
55 display: flex;
56 align-items: center;
57 gap: 8px;
58 margin: 0;
59 }
60 .header_nav .header_nav_menu ul li {
61 margin: 0;
62 }
63 .header_nav .header_nav_menu ul li a {
64 padding: 15px 20px;
65 font-size: 16px;
66 color: #1e2939;
67 display: block;
68 text-decoration: none;
69 box-shadow: none;
70 border-bottom: 2px solid transparent;
71 font-weight: 500;
72 }
73 .header_nav .header_nav_menu ul li a:focus {
74 outline: none;
75 }
76 .header_nav .header_nav_menu ul li a.active {
77 border-bottom-color: #171717;
78 background-color: #f5f5f5;
79 }
80 .header_nav .header_nav_right .header_nav_right_menu {
81 display: flex;
82 align-items: center;
83 gap: 8px;
84 font-weight: bold;
85 }
86 .header_nav .header_nav_right a {
87 font-size: 16px;
88 color: #171717;
89 text-decoration: none;
90 text-transform: capitalize;
91 }
92 .tab-content {
93 display: none;
94 }
95 .tab-content.active {
96 display: block;
97 }
98
99 .start_page {
100 margin-top: 24px;
101 }
102 .start_page_wrapper {
103 background-color: #fff;
104 border-radius: 8px;
105 border: 1px solid #dadce0;
106 }
107 .start_page_nav {
108 border-bottom: 1px solid #dadce0;
109 display: flex;
110 justify-content: space-between;
111 padding: 16px 24px;
112 gap: 8px;
113 align-items: center;
114 }
115 .start_page_nav .nav_left .section_title {
116 font-size: 20px;
117 font-weight: 700;
118 margin: 0;
119 margin-bottom: 10px;
120 color: #1e2939;
121 }
122 .start_page_nav .nav_left .section_title .version__badge{
123 background: #000;
124 color: #fff;
125 font-size: 14px;
126 margin-left: 8px;
127 padding: 3px;
128 font-weight: normal;
129 }
130 .start_page_nav .nev_right {
131 font-weight: 600;
132 display: flex;
133 align-items: center;
134 color: #171717;
135 }
136 .start_page_nav .nev_right i {
137 font-size: 24px;
138 margin-right: 6px;
139 }
140 .start_page_nav .nev_right a {
141 text-decoration: none;
142 font-size: 16px;
143 color: #171717;
144 }
145 .start_page_nav .nev_right a:focus {
146 outline: none;
147 }
148 .section_video {
149 padding: 20px 24px;
150 display: flex;
151 gap: 24px;
152 border-bottom: 1px solid #dadce0;
153 }
154 .section_video .video {
155 width: 60%;
156 }
157 .section_video .video iframe {
158 border-radius: 10px;
159 width: 100%;
160 }
161 .section_video .section_video_play_list {
162 display: flex;
163 flex-direction: column;
164 gap: 10px;
165 height: 407px;
166 overflow-y: auto;
167 width: 40%;
168 margin-right: -10px;
169 padding-right: 10px;
170 }
171 .section_video .section_video_play_list::-webkit-scrollbar {
172 width: 0.5em;
173 height: 0.5em;
174 margin-left: 10px;
175 padding-left: 10px;
176 }
177 .section_video .section_video_play_list::-webkit-scrollbar-track {
178 background-color: #f5f5f5;
179 margin-block: 0.5em;
180 }
181 .section_video .section_video_play_list::-webkit-scrollbar-thumb {
182 background-color: #171717;
183 }
184 .section_video .section_video_play_list::-webkit-scrollbar-thumb:hover {
185 opacity: 0.2;
186 }
187 .section_video_play_list .play_list_item {
188 display: flex;
189 align-items: center;
190 gap: 15px;
191 padding: 5px;
192 cursor: pointer;
193 border-radius: 5px;
194 }
195 .section_video_play_list .play_list_item.active {
196 background-color: #f5f5f5;
197 }
198 .play_list_item .play_list_item_title {
199 background: #000;
200 border-radius: 3px;
201 color: #fff;
202 padding: 10px;
203 min-width: 80px;
204 min-height: 80px;
205 display: flex;
206 align-items: center;
207 justify-content: center;
208 }
209 .play_list_item_title h3 {
210 color: #fff;
211 font-weight: 600;
212 font-size: 16px;
213 }
214 .play_list_item .title {
215 font-size: 16px;
216 font-weight: 600;
217 margin: 0;
218 padding: 10px 0;
219 color: #1e2939;
220 }
221 .section_buttons {
222 margin: 0;
223 padding: 20px 24px;
224 display: flex;
225 align-items: center;
226 gap: 15px;
227 }
228
229 .section_quick_help {
230 margin-top: 20px;
231 }
232 .quick_help_wrapper {
233 display: flex;
234 align-items: center;
235 gap: 20px;
236 }
237 .quick_help_item {
238 padding: 20px;
239 border-radius: 8px;
240 background-color: #fff;
241 border: 1px solid #dadce0;
242 text-decoration: none;
243 color: #1e2939;
244 display: grid;
245 grid-template-columns: 50px 1fr;
246 align-items: center;
247 gap: 10px;
248 transition: all 0.3s;
249 }
250 .quick_help_item:hover {
251 text-decoration: none;
252 color: #1e2939;
253 border-color: #171717;
254 }
255 .quick_help_item .quick_help_item_icon {
256 width: 50px;
257 height: 50px;
258 display: flex;
259 align-items: center;
260 justify-content: center;
261 font-size: 20px;
262 color: #fff;
263 border-radius: 50%;
264 background-color: #171717;
265 }
266 .quick_help_item .quick_help_item_title {
267 font-size: 16px;
268 font-weight: 600;
269 margin-top: 0;
270 margin-bottom: 10px;
271 color: #1e2939;
272 }
273 .themeatelier_footer {
274 margin-top: 80px;
275 }
276 .themeatelier_footer ul {
277 display: flex;
278 align-items: center;
279 gap: 8px;
280 margin: 0;
281 }
282 .themeatelier_footer_top {
283 display: flex;
284 flex-direction: column;
285 align-items: center;
286 gap: 10px;
287 }
288 .themeatelier_footer_top p {
289 margin: 0;
290 }
291 .themeatelier_footer_top p a {
292 color: #171717;
293 text-decoration: none;
294 }
295 .themeatelier_footer ul li a {
296 width: 35px;
297 height: 35px;
298 display: flex;
299 align-items: center;
300 justify-content: center;
301 border-radius: 50%;
302 border: 1px solid #171717;
303 color: #171717;
304 text-decoration: none;
305 transition: all 0.3s;
306 }
307 .themeatelier_footer ul li a:hover {
308 background-color: #171717;
309 color: #fff;
310 }
311
312 .recommended_plugins a {
313 text-decoration: none;
314 }
315
316 /* Recommended Page css*/
317 .recommended_page .recommended_page_title {
318 margin: 24px 8px 30px 8px;
319 font-size: 20px;
320 font-weight: 700;
321 color: #1e2939;
322 }
323 .recommended_page .plugin-card {
324 width: calc(49.1% - 8px);
325 }
326 .recommended_page .plugin-card:nth-child(3n) {
327 margin-right: 8px;
328 }
329 .recommended_page .plugin-card:nth-child(3n + 1) {
330 margin-left: 8px;
331 }
332
333 /* lite_vs_pro_page css */
334 .lite_vs_pro_page .themeatelier-call-to-action-top {
335 display: flex;
336 justify-content: space-between;
337 align-items: center;
338 margin-top: 40px;
339 margin-bottom: 24px;
340 font-size: 20px;
341 font-weight: 700;
342 }
343 .lite_vs_pro_page .themeatelier-big-btn {
344 padding: 16px 30px;
345 background-color: #171717;
346 color: #fff;
347 border-color: transparent;
348 }
349 .lite_vs_pro_page .themeatelier-big-btn:hover {
350 background-color: #171717;
351 }
352 .lite_vs_pro_page .lite_vs_pro_page_wrap {
353 padding: 24px;
354 background-color: #fff;
355 border-radius: 8px;
356 border: 1px solid #dadce0;
357 }
358 .lite_vs_pro_page .themeatelier-features {
359 border-radius: 6px;
360 border: 1px solid #dadce0;
361 overflow: hidden;
362 line-height: 24px;
363 }
364 .lite_vs_pro_page .themeatelier-features ul {
365 margin: 0;
366 }
367 .lite_vs_pro_page .themeatelier-features ul li.themeatelier-header,
368 .themeatelier-features ul li.themeatelier-body {
369 display: flex;
370 justify-content: space-between;
371 background: #171717;
372 border-bottom: 1px solid #dadce0;
373 font-size: 16px;
374 color: #fff;
375 font-weight: 600;
376 margin-bottom: 0;
377 }
378 .lite_vs_pro_page
379 .themeatelier-features
380 ul
381 li.themeatelier-body
382 .themeatelier-title,
383 .lite_vs_pro_page
384 .themeatelier-features
385 ul
386 li.themeatelier-header
387 .themeatelier-title {
388 flex-basis: 70%;
389 width: 70%;
390 text-align: left;
391 }
392 .lite_vs_pro_page .themeatelier-features ul li.themeatelier-body span,
393 .lite_vs_pro_page .themeatelier-features ul li.themeatelier-header span {
394 padding: 20px;
395 width: 15%;
396 text-align: center;
397 }
398 .lite_vs_pro_page
399 .themeatelier-features
400 ul
401 li.themeatelier-header
402 span.themeatelier-pro
403 i {
404 position: relative;
405 font-size: 18px;
406 }
407 .lite_vs_pro_page .themeatelier-features ul li.themeatelier-body {
408 background-color: #fff;
409 color: #3c434a;
410 font-size: 16px;
411 font-weight: 400;
412 }
413 .lite_vs_pro_page
414 .themeatelier-features
415 ul
416 li.themeatelier-body
417 span:not(:last-of-type) {
418 border-right: 1px solid #dadce0;
419 }
420 .lite_vs_pro_page .themeatelier-features ul li.themeatelier-body span {
421 padding: 20px 30px;
422 }
423 .lite_vs_pro_page .themeatelier-check-icon {
424 background-image: url(../images/check-icon.svg);
425 }
426 .lite_vs_pro_page .themeatelier-check-icon,
427 .themeatelier-close-icon {
428 background-position: center;
429 background-repeat: no-repeat;
430 }
431 .lite_vs_pro_page
432 .themeatelier-features
433 ul
434 li.themeatelier-body:nth-child(odd) {
435 background-color: #f5f5f5;
436 }
437 .lite_vs_pro_page i.themeatelier-hot {
438 background-color: #ec2121 !important;
439 }
440 .lite_vs_pro_page i.themeatelier-hot,
441 .lite_vs_pro_page i.themeatelier-new {
442 display: inline-block;
443 background-color: #171717;
444 color: #fff;
445 font-size: 10px;
446 text-align: center;
447 border-radius: 40px;
448 font-style: normal;
449 font-weight: 600;
450 text-transform: uppercase;
451 padding: 0 8px;
452 margin-left: 5px;
453 line-height: 17px;
454 }
455 .lite_vs_pro_page .themeatelier-close-icon {
456 background-image: url(../images/close-icon.svg);
457 }
458 .lite_vs_pro_page .themeatelier-upgrade-to-pro {
459 text-align: center;
460 margin: auto;
461 max-width: 750px;
462 margin-top: 40px;
463 }
464 .lite_vs_pro_page .themeatelier-upgrade-to-pro .themeatelier-section-subtitle {
465 margin: 20px 0 30px;
466 display: inline-block;
467 font-size: 14px;
468 line-height: 28px;
469 font-weight: 400;
470 margin: 0;
471 padding-top: 15px;
472 padding-bottom: 15px;
473 color: #1e2939;
474 }
475 .lite_vs_pro_page
476 .themeatelier-upgrade-to-pro
477 .themeatelier-upgrade-to-pro-btn {
478 display: flex;
479 justify-content: center;
480 align-items: flex-start;
481 gap: 15px;
482 }
483 .lite_vs_pro_page
484 .themeatelier-upgrade-to-pro
485 .themeatelier-upgrade-to-pro-btn
486 .themeatelier-action-btn
487 span {
488 display: block;
489 font-size: 11px;
490 }
491 .lite_vs_pro_page
492 .themeatelier-upgrade-to-pro
493 .themeatelier-upgrade-to-pro-btn
494 .themeatelier-action-btn
495 span
496 a {
497 color: #3c434a;
498 }
499 .lite_vs_pro_page
500 .themeatelier-upgrade-to-pro
501 .themeatelier-upgrade-to-pro-btn
502 .themeatelier-action-btn
503 span
504 a:hover {
505 color: #171717;
506 }
507
508 .lite_vs_pro_page .chat_testimonial_title_section {
509 text-align: center;
510 margin: 50px 0 40px;
511 }
512 .lite_vs_pro_page
513 .chat_testimonial
514 .chat_testimonial_title_section
515 span {
516 font-size: 14px;
517 font-weight: 600;
518 color: #171717;
519 margin-bottom: 12px;
520 display: inline-block;
521 }
522 .themeatelier-section-title {
523 font-size: 20px;
524 font-weight: 700;
525 line-height: 28px;
526 color: #1e2939;
527 margin: 0;
528 }
529 .lite_vs_pro_page .chat_testimonial_wrap {
530 display: flex;
531 gap: 30px;
532 }
533 .lite_vs_pro_page
534 .chat_testimonial_wrap
535 .chat_testimonial_area {
536 width: 33%;
537 flex-basis: 33.33%;
538 }
539 .lite_vs_pro_page .chat_testimonial_content {
540 background-color: #fff;
541 padding: 20px 25px;
542 position: relative;
543 border-radius: 8px;
544 margin-bottom: 20px;
545 min-height: 140px;
546 border: 1px solid #dadce0;
547 }
548 .lite_vs_pro_page .chat_testimonial_content::after {
549 content: "";
550 position: absolute;
551 bottom: -13px;
552 left: 40px;
553 width: 25px;
554 height: 15px;
555 background-color: #fff;
556 clip-path: polygon(0 0, 50% 100%, 100% 0);
557 }
558 .lite_vs_pro_page .chat_testimonial_content p {
559 font-size: 16px;
560 line-height: 28px;
561 }
562 .lite_vs_pro_page .chat_testimonial-info {
563 display: flex;
564 gap: 20px;
565 margin-left: 20px;
566 }
567 .lite_vs_pro_page .chat_testimonial-info .themeatelier-img img {
568 border-radius: 50%;
569 width: 60px;
570 }
571 .lite_vs_pro_page .chat_testimonial-info .themeatelier-info {
572 display: flex;
573 flex-direction: column;
574 justify-content: center;
575 gap: 6px;
576 }
577 .lite_vs_pro_page .chat_testimonial-info .themeatelier-info h3 {
578 font-size: 16px;
579 margin: 0px;
580 }
581 .lite_vs_pro_page
582 .chat_testimonial-info
583 .themeatelier-info
584 .themeatelier-star {
585 color: #ffc329;
586 font-size: 17px;
587 }
588
589 .about-page .themeatelier-our-plugin-list .themeatelier-section-title {
590 margin-top: 40px;
591 }
592 .about-page .themeatelier-our-plugin-list-wrap {
593 display: flex;
594 gap: 40px;
595 margin-top: 24px;
596 flex-wrap: wrap;
597 }
598 .about-page .themeatelier-our-plugin-list-box {
599 background-color: #fff;
600 padding: 26px;
601 border-radius: 8px;
602 width: 33%;
603 flex-basis: calc(33% - 80px);
604 border: 1px solid transparent;
605 transition: 0.3s;
606 position: relative;
607 text-decoration: none;
608 border: 1px solid #dadce0;
609 border-bottom: 2px solid #dadce0;
610 }
611 .about-page .themeatelier-our-plugin-list-box:hover {
612 border-bottom-color: #171717;
613 }
614 .about-page .themeatelier-our-plugin-list-box .box_btn {
615 position: absolute;
616 top: 40px;
617 right: 26px;
618 font-size: 14px;
619 border: 1px solid #171717;
620 border-radius: 4px;
621 color: #171717;
622 transition: 0.3s;
623 opacity: 0;
624 display: flex;
625 justify-content: center;
626 align-items: center;
627 padding: 5px 8px;
628 }
629 .about-page .themeatelier-our-plugin-list-box .box_btn i {
630 font-size: 20px;
631 }
632 .about-page .themeatelier-our-plugin-list-box:hover .box_btn {
633 opacity: 1;
634 }
635 .about-page .themeatelier-our-plugin-list-box img {
636 width: 64px;
637 }
638 .about-page .themeatelier-our-plugin-list-box h4 {
639 font-size: 18px;
640 font-weight: 600;
641 margin: 15px 0;
642 color: #1d2327;
643 }
644 .about-page .themeatelier-our-plugin-list-box p {
645 font-size: 14px;
646 font-weight: 400;
647 line-height: 22px;
648 color: #3c434a;
649 margin-bottom: 0;
650 }
651
652
653 @media screen and (max-width: 1200px) {
654 .header_nav .header_nav_menu ul li a {
655 padding: 24px 15px;
656 }
657 }
658 @media screen and (max-width: 1024px) {
659 .header_nav_right_menu {
660 display: none;
661 }
662 }
663