PluginProbe
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) / 1.5.5
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) v1.5.5
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 / HelpPage / assets / css / help-page.css

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

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