PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.11
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.11
1.8.13 1.8.12.3 1.8.12.2 1.8.12.1 1.8.12 1.8.11.3 1.8.11.2 1.8.11.1 1.8.11 1.6.6 1.6.60 1.6.7 1.6.8 1.6.9 1.7.0 1.7.0.1 1.7.0.11 1.7.0.12 1.7.0.14 1.7.0.2 1.7.0.3 1.7.0.5 1.7.0.6 1.7.0.7 1.7.0.9 All 211 releases
charitable / assets / scss / admin / charitable-admin.scss

charitable-admin.scss in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.11, at assets/scss/admin/charitable-admin.scss

6,276 lines 145.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 // General styles.
2 //
3 // @since 1.8.0
4
5 // CSS Variables.
6
7 @import '../_colors';
8 @import '../_fonts';
9 @import '../_variables';
10 @import '../campaign-builder/partials/mixins';
11 @import '../campaign-builder/partials/field-option-toggle-control';
12
13 /* v2 header */
14
15 body[class*="charitable_page_"]*="charitable_page_""],
16 body.post-type-charitable,
17 body.post-type-donation {
18 #wpbody-content {
19 .wrap {
20 padding-left: 10px;
21 padding-right: 10px;
22 }
23 }
24 }
25
26 body.charitable_page_charitable-addons {
27 #wpbody-content {
28 .wrap {
29 padding-left: 5px;
30 padding-right: 5px;
31 }
32 }
33 }
34
35 #charitable-admin-header {
36
37 background-color: $color_white;
38 // clear: both;
39 margin: 0 0 0 -20px;
40 padding-right: 20px;
41 width: 100%;
42 border-top: 3px solid #E89940;
43 border-bottom: 1px solid #ddd;
44 border-left: 0;
45 border-right: 0;
46
47 [dir='rtl']='rtl'] & {
48 margin: 0 -20px 0 0px;
49 }
50
51 .charitable-admin-header-interior {
52 padding: 0px 30px;
53 display: flex;
54 justify-content: center;
55 align-items: center;
56 min-height: 80px;
57 }
58
59 h1 {
60 flex: 1;
61 text-align: left;
62 [dir=rtl]=rtl] & {
63 text-align: right;
64 }
65
66 }
67
68 .round {
69 border-radius: 50%;
70 width: 40px;
71 height: 40px;
72 display: flex;
73 align-items: center;
74 justify-content: center;
75 cursor: pointer;
76 transition: background-color .2s ease;
77 animation: wpchar-menu-notification-indicator-pulse 1.5s infinite;
78 }
79
80 .charitable-header-logos {
81 text-align: right;
82
83 ul {
84 margin: 0 -20px 0 0;
85 padding: 0;
86 display: flex;
87
88 li {
89 margin: 0 10px;
90 display: inline-block;
91 width: 30px;
92 height: 30px;
93
94 a {
95 display: block;
96 }
97
98 a.charitable-notification-inbox {
99 svg {
100 width: 30px;
101 height: 34.5px;
102 margin: 0;
103 padding: 0;
104 position: relative;
105 top: -4px;
106 color: #8c8e96;
107 }
108 position: relative;
109 .number {
110 position: absolute;
111 background-color: #df2a4a;
112 width: 16px;
113 height: 16px;
114 font-weight: 600;
115 font-size: 10px;
116 color: #fff;
117 right: -3px;
118 top: -5px;
119 margin: 0;
120 margin-left: 0px;
121 animation: wpchar-bounce-in 1.2s 5;
122 z-index: 2;
123 }
124 }
125
126 a:hover {
127 opacity: 0.50;
128 }
129 }
130 }
131 }
132 }
133
134 @keyframes wpchar-bounce-in {
135 0%, 30%, 50%, 80%, 100% {
136 transform: translateY(0);
137 opacity: 1;
138 }
139 40% {
140 transform: translateY(-10px);
141 }
142 60% {
143 transform: translateY(-5px);
144 }
145 }
146
147 /* campaign list page */
148
149 body.post-type-campaign {
150
151 #posts-filter {
152
153 input,
154 select,
155 textarea,
156 button {
157 font-family: 'Inter', sans-serif !important;
158 }
159 }
160
161 table {
162 border-color: #DDD;
163
164 thead th a,
165 tfoot th a {
166 color: #6A6C77;
167 font-weight: 500;
168 }
169
170 thead th,
171 tfoot th,
172 thead td,
173 tfoot td {
174 border-color: #DDD;
175 }
176
177 td.title {
178 font-weight: 400;
179 padding-right: 50px;
180
181 a {
182 font-weight: 400;
183 }
184 }
185 }
186
187 h1 {
188 font-family: 'Inter', sans-serif;
189 font-weight: 500;
190
191 &.wp-heading-inline {
192 font-size: 21px;
193 margin-right: 10px;
194 margin-bottom: 5px;
195 margin-top: 20px;
196 }
197
198 }
199
200 #screen-meta-links {
201 display: none;
202 }
203
204 &.edit-tags-php {
205
206 p.search-box {
207 position: relative;
208 right: 0;
209 bottom: 0;
210 margin-top: 20px;
211 display: none;
212 }
213
214 span.subtitle {
215 padding: 0;
216 margin: 25px 0 0 0;
217 display: block;
218 width: 100%;
219 }
220
221 }
222
223 select,
224 input#search-submit,
225 #input.button {
226 background-color: #F9F9FA;
227 color: #52545F;
228 border-color: #E4E4E7;
229 height: 38px;
230 padding-top: 0;
231 padding-bottom: 0;
232 }
233
234 form#posts-filter .tablenav {
235 font-family: 'Inter', sans-serif;
236
237 select {
238 min-width: 160px;
239 }
240
241 &.top {
242 margin-bottom: 20px;
243
244 select,
245 button {
246 font-size: 13px;
247 line-height: 29px;
248 font-weight: 500;
249 }
250
251 button {
252 padding: 0 15px;
253 }
254 }
255
256 &.bottom {
257 margin-top: 25px;
258
259 select,
260 button {
261 font-size: 13px;
262 line-height: 29px;
263 font-weight: 500;
264 }
265
266 button {
267 padding: 0 15px;
268 }
269 }
270 }
271
272 .charitable-campaign-legacy-actions,
273 .charitable-campaign-export-actions,
274 .charitable-campaign-filter-actions {
275 font-family: 'Inter', sans-serif;
276
277 a {
278 font-size: 14px;
279 pointer-events: all;
280 line-height: 19px;
281 color: #2B66D1;
282 font-weight: 500;
283 display: inline-block;
284 padding-top: 8px;
285
286 label {
287 display: block;
288 text-decoration: underline;
289 float: left;
290 margin-top: -2px;
291 cursor: pointer;
292 }
293
294 img {
295 width: 16px;
296 height: 16px;
297 display: block;
298 margin-right: 4px;
299 float: left;
300 }
301 }
302
303 a.charitable-campaigns-clear {
304 font-weight: 400;
305 padding: 5px 15px;
306 margin: 0 0 0 5px;
307 }
308 }
309
310 .charitable-campaign-legacy-actions {
311 a {
312 img {
313 width: 33px;
314 height: 32px;
315 display: block;
316 float: left;
317 margin: 2px -2px 0 -5px;
318 }
319 }
320
321 a:hover {
322 // background-color: #d7d7d7 !important;
323 // border-color: #CFCFD2 !important;
324 // color: #595B67 !important;
325 }
326 }
327
328 .charitable-campaign-filter-actions {
329 margin-right: 10px;
330
331 a {
332 img {
333 width: 11px;
334 height: 11px;
335 margin-top: 2px;
336 }
337 }
338 }
339
340 .charitable-legacy-actions {
341 margin-left: 10px;
342 margin-top: 3px;
343 }
344
345 input#post-search-input {
346 border-color: #E4E4E7;
347 }
348
349 /* popups */
350
351 .jconfirm .jconfirm-cell {
352 display: block;
353 }
354
355 /* list items */
356
357 &.edit-php.post-type-campaign {
358 th.check-column {
359 label:hover {
360 background-color: transparent;
361 }
362 }
363
364 .check-column input:hover+label {
365 background-color: transparent;
366 }
367
368 tbody#the-list td {
369 vertical-align: middle;
370 }
371
372 .actions {
373 vertical-align: middle;
374
375 button {
376 font-size: 18px;
377 border-radius: 0;
378 box-shadow: none;
379 border: 1px solid #ccc;
380 background-color: transparent;
381 margin: 0 5px 0 0;
382 }
383 }
384
385 tbody#the-list th.check-column {
386 input[type="checkbox"]="checkbox""] {
387 margin-top: 3px;
388 }
389 }
390
391 tbody#the-list th.check-column,
392 tbody#the-list td {
393 vertical-align: top;
394 padding-top: 20px;
395 height: 80px;
396 }
397
398 tbody#the-list td.column-actions {
399 padding-top: 19px;
400 }
401
402 tbody#the-list td.column-creator {
403 .charitable-campaign-creator-avatar {
404 border-radius: 50%;
405 max-width: 25px;
406 max-height: 25px;
407 float: left;
408 }
409
410 .charitable-campaign-creator-name {
411 display: inline-block;
412 margin-left: 10px;
413 margin-top: 2px;
414 }
415 }
416
417 .donated {
418 .meter {
419 height: 10px;
420 position: relative;
421 background: lightgray;
422 padding: 0px;
423 margin: 10px auto 0 0;
424 width: 75%;
425 box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
426 }
427
428 .meter>span {
429 display: block;
430 height: 100%;
431 border-top-right-radius: 8px;
432 border-bottom-right-radius: 8px;
433 border-top-left-radius: 20px;
434 border-bottom-left-radius: 20px;
435 background-color: $color_green;
436 background-image: linear-gradient(center bottom,
437 rgb(43, 194, 83) 37%,
438 rgb(84, 240, 84) 69%);
439 box-shadow:
440 inset 0 2px 9px rgba(255, 255, 255, 0.3),
441 inset 0 -2px 6px rgba(0, 0, 0, 0.4);
442 position: relative;
443 overflow: hidden;
444 }
445 }
446
447 .column-status {
448
449 mark {
450 padding: 0px 0px;
451 margin: 0;
452 text-align: center;
453 white-space: nowrap;
454 background: white;
455 border-radius: 0;
456 font-size: 14px;
457 font-weight: 400;
458 letter-spacing: 1px;
459 text-transform: capitalize;
460 color: $color_black;
461 }
462
463 }
464
465 .column-status mark.active {
466 color: $color_green;
467 background-color: transparent;
468 }
469
470 .column-status mark.draft {
471 color: #545660;
472 background-color: transparent;
473 }
474
475 .column-status mark.finished {
476 color: $color_dark_blue;
477 background-color: transparent;
478 }
479
480 .column-status mark.successful {
481 color: $color_dark_blue;
482 background-color: transparent;
483 }
484
485 .column-status mark.unsuccessful {
486 color: $color_red;
487 background-color: transparent;
488 }
489
490 .tablenav.top>.tablenav-pages {
491 display: none;
492 }
493
494 }
495
496 /* buttons */
497 #wpbody-content {
498
499 .page-title-action {
500 background-color: #5AA152;
501 border-radius: 5px;
502 border-color: #5AA152;
503 color: $color_white;
504 height: 28px;
505 display: inline-block;
506 padding-top: 0;
507 padding-bottom: 0;
508 line-height: 26px;
509 top: -2px;
510 }
511
512 .page-title-action:hover {
513 background-color: #3f7539;
514 }
515
516 }
517
518 /* trash */
519
520 &.charitable-trash {
521
522 .charitable-export-actions {
523 display: none;
524 }
525
526 #delete_all {
527
528 margin-top: 0 !important;
529 background-color: #F8F8F9;
530 border: 1px solid #D7D7DB;
531 border-radius: 5px;
532 box-shadow: none;
533 color: #5C5F6A;
534 font-weight: 600 !important;
535 }
536
537 }
538
539 }
540
541 @media screen and (max-width: 1200px) {
542 body.post-type-campaign {
543 form#posts-filter .tablenav.top {
544 max-width: 500px;
545 display: table;
546
547 select {
548 margin-bottom: 15px;
549 }
550 }
551 }
552 }
553
554 @media screen and (max-width: 782px) {
555 body.post-type-campaign {
556
557 .tablenav .view-switch,
558 .tablenav.top .actions {
559 display: block !important;
560 }
561
562 p.search-box {
563 position: relative;
564 margin: 0;
565 right: auto;
566 top: auto;
567 }
568
569 &.admin-bar {
570 #charitable-admin-header {
571 margin-top: 46px;
572 }
573 }
574 }
575
576 body.charitable_page_charitable-reports,
577 body.charitable_page_charitable-tools,
578 body.charitable_page_charitable-about {
579 #wpbody {
580 padding-top: 0;
581 }
582
583 .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before {
584 display: none;
585 }
586
587 .tablenav .view-switch,
588 .tablenav.top .actions {
589 display: block !important;
590 }
591
592 h2.nav-tab-wrapper {
593 margin-bottom: 0px !important;
594 margin-top: 0 !important;
595
596 a.nav-tab {
597 margin-top: 10px !important;
598 margin-bottom: 10px !important;
599 }
600 }
601
602 &.admin-bar {
603 #charitable-admin-header {
604 padding-top: 46px;
605 }
606 }
607 }
608
609 body.charitable_page_charitable-dashboard {
610
611 .tablenav.top .actions,
612 .tablenav .view-switch {
613 display: block !important;
614 width: 100%;
615 }
616 }
617 }
618
619 @media screen and (max-width: 600px) {
620
621 body.admin-bar.post-type-campaign,
622 body.admin-bar.charitable_page_charitable-dashboard {
623 #charitable-admin-header {
624 margin-bottom: -46px;
625 padding-top: 46px;
626 margin-top: 0;
627 }
628
629 .row-actions {
630 span.id {
631 color: black;
632 line-height: 24px;
633 font-size: 13px;
634 margin-left: 8px;
635 margin-right: 0px;
636 }
637 }
638 }
639 }
640
641 body[class*="charitable_page_"]*="charitable_page_""],
642 body.post-type-campaign,
643 body.post-type-donation {
644
645 .search-box input[name="s"]="s""] {
646 margin: 2px 4px 0 0;
647 height: 34px;
648
649 }
650
651 input#search-submit {
652 margin-top: 2px;
653 height: 34px;
654 }
655
656 .alignleft.actions {
657
658 input[type="submit"]="submit""],
659 select {
660 min-height: 32px;
661 height: 38px;
662 }
663 }
664
665 .charitable-campaign-action-button {
666 cursor: pointer;
667 padding: 5px 4px;
668 border: 1px solid #E1E3E5;
669 background-color: white;
670 width: 20px;
671 height: 18px;
672 border-radius: 3px;
673 color: #5F616B;
674 display: inline-block;
675 text-align: center;
676 vertical-align: middle;
677 margin-right: 10px;
678 line-height: 23px;
679 }
680
681 .charitable-campaign-action-button:hover {
682 // background-color: #5F616B;
683 color: white;
684 }
685
686 }
687
688 /* specific to starting from scratch */
689
690 body.post-type-campaign.edit-php.charitable-campaigns-0-published,
691 body.post-type-campaign.edit-php.charitable-campaigns-0-trash {
692 #posts-filter tbody#the-list td {
693 vertical-align: middle;
694 padding-top: 20px;
695 padding-bottom: 20px;
696 height: auto;
697 }
698
699 #posts-filter tbody#the-list tr.child td {
700 padding-top: 0;
701 padding-bottom: 0;
702 }
703
704 .tablenav.top .charitable-export-actions {
705 margin-left: 0px;
706 }
707
708 .tablenav.top .charitable-legacy-actions {
709 margin-left: 15px;
710 }
711 }
712
713 .body.post-type-campaign.edit-php.charitable-campaigns-0-trash {
714 .charitable-campaign-legacy-actions {
715 display: none !important;
716 }
717 }
718
719 /* donation list page */
720
721 body.post-type-donation {
722
723 #posts-filter {
724
725 input,
726 select,
727 textarea,
728 button {
729 font-family: 'Inter', sans-serif !important;
730 }
731 }
732
733 table {
734 border-color: #DDD;
735
736 thead th a,
737 tfoot th a {
738 color: #6A6C77;
739 font-weight: 500;
740 }
741
742 thead th,
743 tfoot th,
744 thead td,
745 tfoot td {
746 border-color: #DDD;
747 }
748
749 td.title {
750 font-weight: 400;
751 padding-right: 50px;
752
753 a {
754 font-weight: 400;
755 color: #454955;
756 }
757 }
758 }
759
760 h1 {
761 font-family: 'Inter', sans-serif;
762 font-weight: 500;
763
764 &.wp-heading-inline {
765 font-size: 21px;
766 margin-right: 10px;
767 margin-bottom: 5px;
768 margin-top: 20px;
769 }
770
771 }
772
773 #screen-meta-links {
774 display: none;
775 }
776
777 p.search-box {
778 position: absolute;
779 right: 20px;
780 top: auto;
781 margin-top: 39px;
782 }
783
784 select,
785 input#search-submit,
786 input.button {
787 background-color: #F9F9FA;
788 color: #52545F;
789 border-color: #E4E4E7;
790 // height: 38px;
791 // padding-top: 0;
792 // padding-bottom: 0;
793 }
794
795 form#posts-filter .tablenav {
796 font-family: 'Inter', sans-serif;
797
798 select {
799 min-width: 160px;
800 }
801
802 &.top {
803 margin-bottom: 20px;
804
805 select,
806 button {
807 font-size: 13px;
808 line-height: 29px;
809 font-weight: 500;
810 }
811
812 button {
813 padding: 0 15px;
814 }
815 }
816
817 &.bottom {
818 margin-top: 25px;
819
820 select,
821 button {
822 font-size: 13px;
823 line-height: 29px;
824 font-weight: 500;
825 }
826
827 button {
828 padding: 0 15px;
829 }
830 }
831 }
832
833 .charitable-donation-legacy-actions,
834 .charitable-donation-export-actions,
835 .charitable-donation-filter-actions {
836 font-family: 'Inter', sans-serif;
837
838 a {
839 font-size: 14px;
840 line-height: 19px;
841 color: #2B66D1;
842 font-weight: 500;
843 display: inline-block;
844 padding-top: 9px;
845
846 label {
847 display: block;
848 text-decoration: underline;
849 float: left;
850 margin-top: -2px;
851 }
852
853 img {
854 width: 16px;
855 height: 16px;
856 display: block;
857 margin-right: 4px;
858 float: left;
859 }
860 }
861
862 a.charitable-campaigns-clear {
863 font-weight: 400;
864 padding: 5px 15px;
865 margin: 0 0 0 5px;
866 }
867 }
868
869 .charitable-donations-clear.button {
870 padding-top: 4px;
871 margin-left: 10px;
872 margin-top: 2px;
873 }
874
875 .charitable-donation-legacy-actions {
876 a {
877 img {
878 margin-top: 2px;
879 }
880
881 color: green;
882 }
883 }
884
885 .charitable-donation-filter-actions {
886 margin-right: 10px;
887
888 a {
889 img {
890 width: 11px;
891 height: 11px;
892 margin-top: 2px;
893 }
894 }
895 }
896
897
898 input#post-search-input {
899 border-color: #E4E4E7;
900 }
901
902 #wpbody-content {
903
904 .page-title-action {
905 background-color: $color_green;
906 color: $color_white;
907 }
908
909 .charitable-donation-action-button {
910 cursor: pointer;
911 padding: 5px 4px;
912 border: 1px solid #E1E3E5;
913 background-color: white;
914 width: 20px;
915 height: 18px;
916 border-radius: 3px;
917 color: #5F616B;
918 display: inline-block;
919 text-align: center;
920 vertical-align: middle;
921 margin-right: 10px;
922 }
923
924 .charitable-donation-action-button:hover {
925 // background-color: #5F616B;
926 color: white;
927 }
928
929 }
930
931 /* popups */
932
933 .jconfirm .jconfirm-cell {
934 display: block;
935 }
936
937 /* list items */
938
939 &.edit-php.post-type-donation {
940 tbody#the-list td {
941 vertical-align: middle;
942 }
943
944 .actions {
945 vertical-align: middle;
946
947 button {
948 font-size: 18px;
949 border-radius: 0;
950 box-shadow: none;
951 border: 1px solid #ccc;
952 background-color: transparent;
953 margin: 0 5px 0 0;
954 }
955 }
956
957 tbody#the-list th.check-column {
958 input[type="checkbox"]="checkbox""] {
959 margin-top: 3px;
960 }
961 }
962
963 tbody#the-list th.check-column,
964 tbody#the-list td {
965 vertical-align: top;
966 padding-top: 20px;
967 }
968
969 tbody#the-list tr.no-items td {
970 padding-top: 10px;
971 }
972
973 tbody#the-list td.column-actions {
974 padding-top: 19px;
975 }
976
977 tbody#the-list td.column-creator {
978 .charitable-donation-creator-avatar {
979 border-radius: 50%;
980 max-width: 25px;
981 max-height: 25px;
982 float: left;
983 }
984
985 .charitable-donation-creator-name {
986 display: inline-block;
987 margin-left: 10px;
988 margin-top: 2px;
989 }
990 }
991
992 .donated {
993 .meter {
994 height: 10px;
995 position: relative;
996 background: lightgray;
997 padding: 0px;
998 margin: 10px auto 0 0;
999 width: 75%;
1000 box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
1001 }
1002
1003 .meter>span {
1004 display: block;
1005 height: 100%;
1006 border-top-right-radius: 8px;
1007 border-bottom-right-radius: 8px;
1008 border-top-left-radius: 20px;
1009 border-bottom-left-radius: 20px;
1010 background-color: $color_green;
1011 background-image: linear-gradient(center bottom,
1012 rgb(43, 194, 83) 37%,
1013 rgb(84, 240, 84) 69%);
1014 box-shadow:
1015 inset 0 2px 9px rgba(255, 255, 255, 0.3),
1016 inset 0 -2px 6px rgba(0, 0, 0, 0.4);
1017 position: relative;
1018 overflow: hidden;
1019 }
1020 }
1021
1022 .column-status {
1023
1024 mark {
1025 padding: 0px 0px;
1026 margin: 0;
1027 text-align: center;
1028 white-space: nowrap;
1029 background: white;
1030 border-radius: 0;
1031 font-size: 14px;
1032 font-weight: 400;
1033 letter-spacing: 1px;
1034 text-transform: capitalize;
1035 color: $color_black;
1036 }
1037
1038 }
1039
1040 .column-status mark.active {
1041 color: $color_green;
1042 background-color: transparent;
1043 }
1044
1045 .column-status mark.draft {
1046 color: #545660;
1047 background-color: transparent;
1048 }
1049
1050 .column-status mark.finished {
1051 color: $color_dark_blue;
1052 background-color: transparent;
1053 }
1054
1055 .column-status mark.successful {
1056 color: $color_dark_blue;
1057 background-color: transparent;
1058 }
1059
1060 .column-status mark.unsuccessful {
1061 color: $color_red;
1062 background-color: transparent;
1063 }
1064
1065 .tablenav.top>.tablenav-pages {
1066 display: none;
1067 }
1068 }
1069
1070 /* buttons */
1071 #wpbody-content .page-title-action {
1072 background-color: #5AA152;
1073 border-radius: 5px;
1074 }
1075
1076 /* blank slate */
1077 .charitable-blank-slate {
1078 max-width: 764px;
1079 text-align: center;
1080 margin: auto;
1081 padding: 5em 0 0;
1082
1083 .charitable-blank-slate-hero-image {
1084 min-height: 150px;
1085 opacity: 0.30;
1086 }
1087
1088 .charitable-blank-slate-message {
1089 color: #444;
1090 font-size: 1.5em;
1091 margin: 1em auto 1em;
1092 }
1093
1094 .charitable-blank-slate-buttons {
1095 margin-bottom: 4em;
1096
1097 .charitable-blank-slate-cta {
1098 font-size: 1.2em;
1099 padding: .75em 1.5em;
1100 margin: 0 .25em;
1101 height: auto;
1102 display: inline-block !important;
1103 background: white;
1104 border-color: black;
1105 color: black;
1106 &.charitable-button {
1107 display: inline-block;
1108 border-radius: 4px;
1109 cursor: pointer;
1110 text-decoration: none;
1111 text-align: center;
1112 vertical-align: middle;
1113 white-space: nowrap;
1114 box-shadow: none;
1115 font-size: 16px;
1116 font-weight: 600 !important;
1117 line-height: 19px;
1118 padding: 10px 20px;
1119 border: none;
1120 background-color: #df7739;
1121 color: #ffffff;
1122 text-transform: capitalize;
1123 letter-spacing: normal;
1124 padding: 15px 25px;
1125 }
1126 &.charitable-button:hover {
1127 background-color: #bd632f;
1128 color: white;
1129 }
1130 &.button-secondary {
1131 background-color: #5AA152;
1132 color: #ffffff;
1133 }
1134
1135 &.button-secondary:hover {
1136 color: white;
1137 }
1138 }
1139
1140 .charitable-blank-slate-cta:hover {
1141 color: black;
1142 }
1143 }
1144
1145 }
1146
1147 }
1148
1149 /* Campaigns Page */
1150
1151 body.wp-admin.charitable-campaigns {
1152 table.wp-list-table {
1153 td.column-creator {
1154 a {
1155 display: flex;
1156 }
1157 }
1158 }
1159 }
1160
1161 /* Blank Slate */
1162
1163 .charitable-blank-slate {
1164 max-width: 800px;
1165 text-align: center;
1166 margin: auto;
1167 padding: 2em 0 0;
1168
1169 // Page header styling
1170 .page-header {
1171 background: white;
1172 border: 1px solid #ccd0d4;
1173 padding: 20px;
1174 display: flex;
1175 justify-content: space-between;
1176 align-items: center;
1177 margin: 0 0 20px 0;
1178
1179 .page-title {
1180 font-size: 23px;
1181 font-weight: 400;
1182 color: #23282d;
1183 margin: 0;
1184 }
1185 }
1186
1187 // Welcome card styling
1188 .welcome-card {
1189 background: white;
1190 border: 1px solid #ccd0d4;
1191 border-radius: 4px;
1192 padding: 40px;
1193 text-align: center;
1194 margin-bottom: 30px;
1195 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
1196
1197 .welcome-title {
1198 font-size: 28px;
1199 color: #23282d;
1200 margin-bottom: 16px;
1201 font-weight: 600;
1202 }
1203
1204 .welcome-description {
1205 font-size: 16px;
1206 color: #666;
1207 margin-bottom: 32px;
1208 max-width: 600px;
1209 margin-left: auto;
1210 margin-right: auto;
1211 line-height: 1.5;
1212 }
1213 }
1214
1215 // Button styling
1216 .btn-primary {
1217 background: #87B655;
1218 color: white;
1219 border: none;
1220 padding: 8px 16px;
1221 border-radius: 3px;
1222 font-size: 13px;
1223 cursor: pointer;
1224 text-decoration: none;
1225 display: inline-block;
1226
1227 &:hover {
1228 background: #7a9f4f;
1229 color: white;
1230 }
1231
1232 &.btn-large {
1233 font-size: 16px;
1234 padding: 16px 32px;
1235 border-radius: 5px;
1236 }
1237 }
1238
1239 .btn-secondary {
1240 background: #f47c3c;
1241 color: white;
1242 border: none;
1243 padding: 10px 20px;
1244 border-radius: 3px;
1245 font-size: 13px;
1246 cursor: pointer;
1247 text-decoration: none;
1248 display: inline-block;
1249
1250 &:hover {
1251 background: #e66a2a;
1252 color: white;
1253 }
1254 }
1255
1256 .secondary-actions {
1257 display: grid;
1258 grid-template-columns: 1fr;
1259 gap: 20px;
1260 margin: 30px auto;
1261 max-width: 800px;
1262
1263 @media (min-width: 768px) {
1264 grid-template-columns: 1fr 1fr;
1265 }
1266 }
1267
1268 .action-card {
1269 background: white;
1270 border: 1px solid #ccd0d4;
1271 text-align: left;
1272 border-radius: 4px;
1273 padding: 24px;
1274 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
1275
1276 h3 {
1277 font-size: 16px;
1278 color: #23282d;
1279 margin: 0 0 20px 0;
1280 font-weight: 600;
1281 text-align: left;
1282 }
1283
1284 p {
1285 color: #666;
1286 margin: 0 0 16px 0;
1287 font-size: 14px;
1288 line-height: 1.4;
1289 }
1290 }
1291
1292 // GiveWP detection text
1293 .givewp-detection-text {
1294 margin: 0 0 8px 0;
1295 font-size: 14px;
1296 line-height: 1.4;
1297
1298 strong {
1299 color: #23282d;
1300 }
1301
1302 .givewp-count {
1303 color: #f47c3c;
1304 font-weight: 700;
1305 }
1306 }
1307
1308 .help-resources {
1309 background: white;
1310 border: 1px solid #ccd0d4;
1311 border-radius: 4px;
1312 padding: 24px;
1313 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
1314 margin: 30px auto;
1315 max-width: 800px;
1316 text-align: left;
1317
1318 h3 {
1319 font-size: 16px;
1320 color: #23282d;
1321 margin: 0 0 16px 0;
1322 font-weight: 600;
1323 }
1324 }
1325
1326 .help-links {
1327 list-style: none;
1328 margin: 0;
1329 padding: 0;
1330
1331 li {
1332 margin: 0 0 8px 0;
1333 padding: 0;
1334
1335 a {
1336 color: #0073aa;
1337 text-decoration: none;
1338 font-size: 14px;
1339
1340 &:hover {
1341 text-decoration: underline;
1342 }
1343 }
1344 }
1345 }
1346
1347 // Feature card styling
1348 .blank-slate-feature-card {
1349 background: white;
1350 border: 1px solid #ccd0d4;
1351 border-radius: 4px;
1352 padding: 24px;
1353 text-align: left;
1354 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
1355 display: flex;
1356 flex-direction: column;
1357 align-items: flex-start;
1358 gap: 16px;
1359
1360 .blank-slate-feature-title-icon-row {
1361 display: flex;
1362 align-items: center;
1363 justify-content: center;
1364 gap: 8px;
1365 }
1366
1367 .blank-slate-feature-icon {
1368 display: flex;
1369 align-items: center;
1370 justify-content: center;
1371 img {
1372 width: 24px;
1373 height: 24px;
1374 opacity: 0.7;
1375 }
1376 }
1377
1378 .blank-slate-feature-content {
1379 display: flex;
1380 flex-direction: column;
1381 align-items: flex-start;
1382 gap: 12px;
1383 }
1384
1385 .blank-slate-button-row {
1386 display: flex;
1387 flex-direction: row;
1388 align-items: center;
1389 gap: 10px;
1390 }
1391
1392 .blank-slate-feature-title {
1393 font-size: 16px;
1394 color: #23282d;
1395 margin: 0;
1396 font-weight: 600;
1397 display: flex;
1398 align-items: center;
1399 gap: 8px;
1400 }
1401
1402 .blank-slate-pro-badge {
1403 background: #f47c3c;
1404 color: white;
1405 font-size: 10px;
1406 padding: 2px 6px;
1407 border-radius: 2px;
1408 font-weight: 600;
1409 display: inline-block;
1410 text-transform: uppercase;
1411 }
1412
1413 .blank-slate-feature-description {
1414 color: #666;
1415 margin: 0;
1416 font-size: 14px;
1417 line-height: 1.4;
1418 text-align: left;
1419 max-width: 100%;
1420 }
1421 }
1422
1423 // Dashboard-style AJAX buttons for blank slate
1424 .charitable-dashboard-v2-enhance-grid-button {
1425 background: #f47c3c;
1426 color: white;
1427 border: none;
1428 padding: 10px 20px;
1429 border-radius: 3px;
1430 font-size: 13px;
1431 cursor: pointer;
1432 text-decoration: none;
1433 display: inline-block;
1434 font-weight: normal;
1435 transition: all 0.2s ease;
1436 text-align: center;
1437
1438 &:hover:not(:disabled) {
1439 background: #e66a2a;
1440 color: white;
1441 text-decoration: none;
1442 }
1443
1444 &:focus {
1445 box-shadow: 0 0 0 1px #e66a2a;
1446 outline: none;
1447 }
1448
1449 &:disabled {
1450 opacity: 0.6;
1451 cursor: not-allowed;
1452 }
1453
1454 &.charitable-dashboard-v2-install-button {
1455 background: #f47c3c;
1456
1457 &:hover {
1458 background: #e66a2a;
1459 }
1460 }
1461
1462 &.charitable-dashboard-v2-activate-button {
1463 background: #87B655;
1464
1465 &:hover {
1466 background: #7a9f4f;
1467 }
1468 }
1469
1470 &.charitable-dashboard-v2-installed-button {
1471 background: #6c757d;
1472 color: white;
1473
1474 &:hover {
1475 background: #6c757d;
1476 }
1477 }
1478
1479 &.charitable-dashboard-v2-upgrade-button {
1480 background: #f47c3c;
1481
1482 &:hover {
1483 background: #e66a2a;
1484 }
1485 }
1486
1487 &.charitable-dashboard-v2-learn-more-button {
1488 background: #f47c3c;
1489 color: white;
1490 border: none;
1491
1492 &:hover {
1493 background: #e66a2a;
1494 color: white;
1495 text-decoration: none;
1496 }
1497 }
1498 }
1499 }
1500
1501 // Feature card button sizing
1502 .blank-slate-feature-content .charitable-dashboard-v2-enhance-grid-button {
1503 padding: 4px 15px !important;
1504 margin-top: 2px;
1505 font-size: 13px;
1506 line-height: 29px;
1507 font-weight: 500;
1508 }
1509
1510 /* Hide WordPress admin elements on blank slate pages.
1511 Note: campaign/donation hide rules are in inline <style> output
1512 by the blank slate renderer so they only apply when blank slate is active. */
1513
1514
1515 /* Growth Tools */
1516 .charitable-growth-tools-dashboard {
1517 &.charitable-growth-tools-notice {
1518 position: absolute;
1519 top: 50%;
1520 left: 50%;
1521 transform: translate(-50%, -50%);
1522
1523 .charitable-growth-tools-notice-interior {
1524 background-color: white;
1525 padding: 20px;
1526 margin-top: -50px;
1527 box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
1528 border-radius: 4px;
1529 text-align: center;
1530 position: relative;
1531
1532 h2 {
1533 font-size: 21px;
1534 line-height: 24px;
1535 font-weight: 500;
1536 margin: 0 0 10px 0;
1537 font-family: 'Inter', sans-serif;
1538 }
1539
1540 p {
1541 font-size: 16px;
1542 line-height: 21px;
1543 margin: 5px auto;
1544 font-family: 'Inter', sans-serif;
1545
1546 &.another-suggestion {
1547 margin-top: 20px;
1548 font-size: 12px;
1549 line-height: 12px;
1550
1551 a {
1552 font-weight: 300;
1553 color: #444;
1554
1555 }
1556 }
1557
1558 &.more-recommendations {
1559 font-size: 14px;
1560 }
1561 }
1562
1563 .charitable-notice-why {
1564 width: 75%;
1565 margin: 20px auto;
1566
1567 strong {
1568 text-transform: uppercase;
1569 font-weight: 700;
1570 font-size: 14px;
1571 }
1572 }
1573
1574 a.charitable-remove-growth-tools {
1575 position: absolute;
1576 right: 20px;
1577 top: 20px;
1578 font-size: 14px;
1579 line-height: 14px;
1580 width: 16px;
1581 height: 16px;
1582 text-decoration: none;
1583 opacity: 0.3;
1584 background-image: url(../../images/onboarding/checklist/times-circle-regular.svg);
1585 color: #b6b6b6;
1586 }
1587
1588 p.charitable-dashboard-notice-another-suggestion a {
1589 color: black;
1590 font-size: 12px;
1591 line-height: 14px;
1592 text-decoration: underline;
1593 font-weight: 300;
1594
1595 &:hover {
1596 color: darkgrey
1597 }
1598 }
1599
1600 }
1601
1602 z-index: 9999;
1603
1604
1605 }
1606 }
1607
1608 /* suggestions */
1609
1610 .marketplace-suggestions-container {
1611
1612 .marketplace-suggestion-container {
1613 padding: 1.5em;
1614 align-items: center;
1615 flex-direction: row;
1616 }
1617
1618 h4 {
1619 margin: 0 auto;
1620 font-weight: 500;
1621 font-size: 18px;
1622 }
1623
1624 &.showing-suggestion {
1625 .marketplace-suggestion-container {
1626 display: flex;
1627 position: relative;
1628
1629 .marketplace-suggestion-container-content {
1630 h4 {
1631 text-align: left;
1632 }
1633
1634 p {
1635 font-size: 13px;
1636 line-height: 1.5;
1637 margin: 4px 0 0 0;
1638 color: #444;
1639 text-align: left;
1640 }
1641 }
1642
1643 img.marketplace-suggestion-icon {
1644 margin: 0 1.5em 0 0;
1645 height: 40px;
1646 flex: 0 0 40px;
1647 }
1648
1649 .marketplace-suggestion-container-cta {
1650 flex: 1 1 30%;
1651 min-width: 160px;
1652 text-align: right;
1653 }
1654
1655 .suggestion-dismiss {
1656 position: relative;
1657 top: 5px;
1658 right: auto;
1659 margin-left: 1em;
1660 color: #ddd;
1661 }
1662
1663 a.suggestion-dismiss::before {
1664 font-family: Dashicons;
1665 speak: never;
1666 font-weight: 400;
1667 font-variant: normal;
1668 text-transform: none;
1669 line-height: 1;
1670 -webkit-font-smoothing: antialiased;
1671 content: "\f335";
1672 text-decoration: none;
1673 font-size: 1.5em;
1674 }
1675
1676 a.charitable-button-link {
1677 background-color: #5aa152;
1678 color: #fff;
1679 padding: 10px 15px;
1680 position: relative;
1681 top: -4px;
1682 text-decoration: none;
1683 border-radius: 5px;
1684 text-shadow: none;
1685 font-weight: 600;
1686 font-size: 13px;
1687 line-height: normal;
1688 cursor: pointer;
1689 margin: 5px auto 0 auto;
1690 display: inline-block;
1691
1692 &.charitable-learn-more {
1693 background-color: #f18200;
1694 }
1695 &:hover {
1696 background-color: #3f7539;
1697 }
1698 }
1699
1700 }
1701
1702 .marketplace-suggestion-container-footer {
1703 .marketplace-suggestion-container-cta {
1704 text-align: center;
1705
1706 a.linkout {
1707 text-decoration: none;
1708 margin-right: 20px;
1709 color: #999;
1710 &:hover {
1711 color: #444;
1712 text-decoration: underline;
1713 }
1714 }
1715 }
1716 }
1717 }
1718 }
1719
1720 /* menu */
1721
1722 #adminmenu #toplevel_page_charitable ul.wp-submenu li.wp-first-item {
1723 display: none !important;
1724 visibility: hidden !important;
1725 }
1726
1727 body.charitable_legacy_dashboard #adminmenu #toplevel_page_charitable ul.wp-submenu li.wp-first-item {
1728 display: unset;
1729 visibility: unset;
1730 }
1731
1732 body.taxonomy-campaign_category li#toplevel_page_charitable ul li.tools,
1733 body.taxonomy-campaign_tag li#toplevel_page_charitable ul li.tools {
1734 font-weight: 600 !important;
1735 color: white;
1736 a {
1737 font-weight: 600 !important;
1738 color: white;
1739 }
1740 }
1741
1742
1743 #adminmenu .wp-submenu a .charitable-menu-new-indicator {
1744 color: #f18200;
1745 vertical-align: super;
1746 font-size: 9px;
1747 }
1748
1749
1750
1751 /* settings */
1752
1753 body.charitable_page_charitable-settings,
1754 body.charitable_page_charitable-reports,
1755 body.post-type-charitable.edit-tags-php,
1756 body.charitable_page_charitable-tools,
1757 body.charitable_page_charitable-addons {
1758
1759 table {
1760 border-color: #DDD;
1761
1762 thead th a,
1763 tfoot th a {
1764 color: #6A6C77;
1765 font-weight: 500;
1766 }
1767
1768 thead th,
1769 tfoot th,
1770 thead td,
1771 tfoot td {
1772 border-color: #DDD;
1773 }
1774
1775 td.title {
1776 font-weight: 400;
1777 padding-right: 50px;
1778
1779 a {
1780 font-weight: 400;
1781 color: #454955;
1782 }
1783 }
1784 }
1785
1786 h1 {
1787 font-family: 'Inter', sans-serif;
1788 font-weight: 500;
1789 font-size: 21px;
1790 margin-right: 10px;
1791 margin-bottom: 20px;
1792 margin-top: 20px;
1793
1794 }
1795
1796 }
1797
1798 body.post-type-charitable.edit-tags-php {
1799 #col-container {
1800 margin-top: 15px;
1801 }
1802
1803 h1.wp-heading-inline {
1804 display: none;
1805 }
1806 }
1807
1808 body.charitable_page_charitable-settings {
1809 div#charitable-settings table.form-table tbody tr th[scope="row"]="row""] label {
1810 font-weight: normal;
1811 font-size: inherit;
1812 margin: 10px 0 6px 0;
1813 line-height: 20px;
1814 font-family: "Inter", sans-serif;
1815 display: block;
1816 }
1817 }
1818
1819 /* customerizer legacy */
1820
1821 .charitable-customizer-section {
1822 img {
1823 float: left;
1824 border: 1px solid #ccc;
1825 padding: 5px;
1826 margin-right: 20px;
1827 }
1828 a.button.button-primary {
1829 background-color: #5AA152;
1830 border-color: #5AA152;
1831 color: white;
1832 border-radius: 5px;
1833 font-family: "Inter", sans-serif;
1834 font-weight: 600;
1835 font-size: 14px;
1836 line-height: 14px;
1837 padding: 15px 20px;
1838 text-transform: capitalize;
1839 }
1840 }
1841
1842 /* tabs */
1843
1844 body.charitable_page_charitable-reports,
1845 body.charitable_page_charitable-tools,
1846 body.post-type-charitable.edit-tags-php,
1847 body.term-php.taxonomy-campaign_category,
1848 body.term-php.taxonomy-campaign_tag,
1849 body.charitable_page_charitable-growth-tools,
1850 body.charitable_page_charitable-settings,
1851 body.charitable_page_charitable-about {
1852
1853 h2.nav-tab-wrapper {
1854
1855 font-family: "Inter", sans-serif;
1856 margin-bottom: 25px;
1857 display: inline-block;
1858 border-bottom: 1px solid #D5D6D8;
1859 padding-left: 0px;
1860 padding-right: 20px;
1861 margin-bottom: 5px;
1862 width: calc(100% - 40px);
1863
1864 a.nav-tab {
1865 margin: 0 15px 0 0;
1866 font-family: "Inter", sans-serif;
1867 border: 0;
1868 background: none;
1869 color: #85878F;
1870 font-size: 15px;
1871 line-height: 18px;
1872 padding-bottom: 25px;
1873 padding-left: 15px;
1874 padding-right: 15px;
1875 font-weight: 400;
1876 border-bottom: 2px solid transparent;
1877
1878 &.nav-tab-active {
1879 color: #2F3241;
1880 font-weight: 600;
1881 border-bottom: 2px solid #5AA152;
1882 }
1883 &.nav-tab-marketing::after,
1884 &.nav-tab-donors::after {
1885 // insert content before element.
1886 content: "Pro";
1887 background-color: #F99E36;
1888 padding: 3px 7px;
1889 font-size: 11px;
1890 line-height: 11px;
1891 text-transform: uppercase;
1892 color: white;
1893 font-weight: 600;
1894 margin-left: 5px;
1895 margin-right: 5px;
1896 margin-top: 0;
1897 position: relative;
1898 top: -7px;
1899 }
1900 &.no-pro-tab::after {
1901 /* undo the content css above */
1902 display: none;
1903 }
1904
1905 }
1906 a.nav-tab:hover {
1907 color: #2F3241;
1908 border-bottom: 2px solid #D5D6D8;
1909 }
1910
1911 }
1912
1913 }
1914
1915 body.charitable_page_charitable-reports,
1916 body.charitable_page_charitable-tools,
1917 body.charitable_page_charitable-settings {
1918
1919 div#charitable-settings table.form-table tbody tr:first-child th[scope="row"]="row""] h4,
1920 h4 {
1921 font-family: "Inter", sans-serif;
1922 font-weight: 500;
1923 }
1924
1925 &.charitable-admin-settings-gateways {
1926
1927 div#charitable-settings table.form-table th {
1928 min-width: auto !important;
1929 }
1930
1931 div#charitable-settings table.form-table tbody tr th[scope="row"]="row""] {
1932
1933 h4 {
1934 padding-bottom: 20px;
1935 }
1936 }
1937
1938 div#charitable-settings table.form-table tbody tr th[scope="row"]="row""] {}
1939
1940 div#charitable-settings table.form-table tbody tr td {
1941 padding-top: 5px;
1942 }
1943
1944 div#charitable-settings table.form-table a.wpcharitable-stripe-connect {
1945 margin-top: -10px;
1946 }
1947
1948 .charitable-settings-field {
1949 font-size: 13px;
1950 margin-top: 10px;
1951 }
1952
1953 #charitable_settings_test_mode.charitable-settings-field {
1954 margin-top: -10px;
1955 }
1956 }
1957
1958 .charitable-settings-object h4 {
1959 line-height: 40px;
1960 }
1961
1962 .charitable-settings-object {
1963
1964 &.charitable-gateway {
1965 min-height: 40px;
1966 }
1967
1968 .gateway-logo {
1969 float: left;
1970 padding: 5px 0 0 20px;
1971 }
1972
1973 .gateway-badge {
1974 background-color: #347d39 !important;
1975 font-weight: 500;
1976 color: white;
1977 font-size: .775rem;
1978 line-height: 1.25rem;
1979 padding-bottom: .225rem;
1980 padding-left: .625rem;
1981 padding-right: .625rem;
1982 padding-top: .225rem;
1983 }
1984
1985 .make-default-gateway {
1986
1987 display: inline-block;
1988 color: #2B66D1;
1989 text-transform: capitalize;
1990 font-weight: 500;
1991 font-size: 12px;
1992 line-height: 12px;
1993 margin-left: 0 !important;
1994 text-decoration: underline;
1995
1996 i {
1997 font-size: 15px;
1998 line-height: 15px;
1999 margin-right: 3px;
2000 }
2001 }
2002
2003 .default-gateway {
2004 margin-top: 6px;
2005 display: inline-block;
2006 }
2007 }
2008
2009 .charitable-settings-object>.charitable-badge {
2010 margin-left: 15px;
2011 top: 8px;
2012 position: relative;
2013 }
2014
2015 .charitable-settings-object>.charitable-badge~.charitable-badge {
2016 margin-left: 5px;
2017 }
2018
2019 .charitable-settings-object {
2020 display: flex;
2021 flex-direction: row;
2022 align-items: center;
2023 justify-content: space-between;
2024 .gateway-logo {
2025 padding: 0;
2026 }
2027 .gateway-logo-name {
2028 padding: 0 0 0 10px;
2029 .charitable-badge {
2030 margin-right: 10px;
2031 }
2032 }
2033 .gateway-logo,
2034 .gateway-logo-name h4 {
2035 width: 130px;
2036 }
2037 .gateway-logo {
2038 margin-bottom: -5px;
2039 }
2040 .gateway-logo-name {
2041 display: flex;
2042 align-items: center;
2043 justify-content: center;
2044 flex-direction: row;
2045 }
2046 }
2047 .charitable-settings-object.square {
2048 .gateway-logo {
2049 margin-bottom: -5px;
2050 }
2051
2052 }
2053
2054 tr.charitable-test-mode-checkbox {
2055 display: flex;
2056 justify-content: left;
2057 align-items: center;
2058 width: calc(100% - 20px);
2059 th {
2060 h4 {
2061 padding: 0 !important;
2062 margin: 0 !important;
2063 }
2064 }
2065 td {
2066 margin: 0;
2067 padding: 0;
2068 }
2069 }
2070
2071 .square-business-locations.square-disconnected {
2072 display: none !important;
2073 }
2074
2075 }
2076
2077 body.charitable-admin-settings-gateways.charitable-admin-settings-gateways-main {
2078 table.form-table tbody tr:last-child {
2079 display: none;
2080 }
2081 p.submit {
2082 margin-bottom: 40px;
2083 }
2084 }
2085
2086 /* buttons */
2087
2088 body.charitable-admin-settings,
2089 body.taxonomy-campaign_tag,
2090 body.taxonomy-campaign_category {
2091
2092 a.button {
2093 background-color: #F8F8F9;
2094 border-color: #D7D7DB;
2095 color: #5C5F6A;
2096 border-radius: 5px;
2097 padding: 5px 10px;
2098 }
2099
2100 a.button:hover {
2101 background-color: #d1d1d8;
2102 border-color: #D7D7DB;
2103 }
2104
2105 a.button-primary {
2106 background-color: #5AA152;
2107 border-color: #5AA152;
2108 color: white;
2109 border-radius: 5px;
2110 }
2111
2112 a.button-primary:hover {
2113 background-color: #3f7539;
2114 border-color: #3f7539;
2115 }
2116
2117 input.button-primary[type="submit"]="submit""] {
2118 background-color: #5AA152;
2119 border-color: #5AA152;
2120 color: white;
2121 border-radius: 5px;
2122 font-family: "Inter", sans-serif;
2123 font-weight: 600;
2124 font-size: 14px;
2125 line-height: 14px;
2126 padding: 15px 20px;
2127 text-transform: capitalize;
2128 }
2129
2130 input.button-primary[type="submit"]="submit""]:hover {
2131 background-color: #3f7539;
2132 border-color: #3f7539;
2133 }
2134 }
2135
2136 body.taxonomy-campaign_tag,
2137 body.taxonomy-campaign_category {
2138 input.button-primary[type="submit"]="submit""] {
2139 line-height: 0;
2140 height: 50px;
2141 }
2142 }
2143
2144 /* badges */
2145
2146 .charitable-badge {
2147 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2148 text-transform: uppercase;
2149 font-weight: 700;
2150 text-align: center;
2151 line-height: 6px;
2152 user-select: none;
2153 transition-property: all;
2154 transition-duration: 0.15s;
2155 transition-timing-function: ease-out;
2156 }
2157
2158 .charitable-badge i.fa {
2159 margin-right: 5px;
2160 }
2161
2162 .charitable-badge-sm {
2163 font-size: 8px;
2164 letter-spacing: 0.4px;
2165 padding: 6px 8px;
2166 }
2167
2168 .charitable-badge-inline {
2169 display: inline-block;
2170 }
2171
2172 .charitable-badge-green {
2173 color: #30b450;
2174 background-color: #e5f6e9;
2175 }
2176
2177 .charitable-badge-orange {
2178 color: #f18200;
2179 background-color: #fff3e6;
2180 }
2181
2182 .charitable-badge-rounded {
2183 border-radius: 3px;
2184 }
2185
2186 .charitable-panel-sidebar {
2187 .charitable-badge {
2188 border-radius: 4px;
2189 color: #ffffff;
2190 font-size: 10px;
2191 font-weight: 700;
2192 line-height: 1;
2193 padding: 4px 5px;
2194 margin-inline-end: 10px;
2195 position: relative;
2196 top: -2px;
2197 left: 10px;
2198 }
2199
2200 .charitable-badge-green {
2201 color: #fff;
2202 background-color: #00a32a;
2203 }
2204 }
2205
2206 /* mascot */
2207
2208 body.wp-admin #wpbody .charitable-wrap .badge.v2 {
2209 background-color: transparent !important;
2210
2211 .mascot {
2212 height: 75px;
2213 width: 75px;
2214 background-image: url("../../assets/images/charitable-logo.svg");
2215 background-size: cover;
2216 background-repeat: no-repeat;
2217 }
2218 }
2219
2220 /* general */
2221
2222 .charitable-hide {
2223 display: none;
2224 }
2225
2226 .charitable-hidden {
2227 display: none !important;
2228 }
2229
2230 .screen-reader-text {
2231 border: 0;
2232 clip: rect(1px, 1px, 1px, 1px);
2233 clip-path: inset(50%);
2234 height: 1px;
2235 margin: -1px;
2236 overflow: hidden;
2237 padding: 0;
2238 position: absolute;
2239 width: 1px;
2240 word-wrap: normal !important;
2241 }
2242
2243 div#charitable-settings table.form-table tbody tr.section-heading th[scope="row"]="row""] h4,
2244 div#charitable-settings table.form-table tbody tr:first-child th[scope="row"]="row""] h4 {
2245 font-weight: 600 !important;
2246 }
2247
2248 div#charitable-tools table.form-table tbody tr:first-child th[scope="row"]="row""] h4 {
2249 font-weight: 600 !important;
2250 font-size: 20px;
2251 margin: 0 0 -20px 0;
2252 line-height: 20px;
2253 }
2254
2255 div#charitable-tools h4#system-information,
2256 div#charitable-tools h4#code-snippets {
2257 font-weight: 600 !important;
2258 font-size: 20px;
2259 margin: 20px 0;
2260 line-height: 20px;
2261 }
2262
2263 // Charitable notice padding
2264 .notice.charitable-notice {
2265 padding: 10px 10px;
2266 }
2267
2268 /* modal */
2269
2270 body.post-type-campaign {
2271
2272 .jconfirm .jconfirm-box {
2273 padding: 0 0 0;
2274
2275 .jconfirm-closeIcon {
2276 color: #545660;
2277 padding-top: 5px;
2278 padding-right: 10px;
2279 font-size: 40px !important;
2280 }
2281
2282 div.jconfirm-content-pane {
2283 // margin: 0 30px 0 30px;
2284 margin: 35px 30px -10px 30px;
2285 width: -webkit-calc(100% - 30px);
2286 width: -moz-calc(100% - 30px);
2287 width: calc(100% - 30px);
2288 // width: 90%;
2289 }
2290
2291 div.jconfirm-title-c {
2292 padding: 30px 0 40px 30px;
2293 background-color: #282937;
2294
2295 span.jconfirm-title {
2296 color: $color_white;
2297 font-weight: 600;
2298 }
2299 }
2300
2301 .jconfirm-buttons {
2302 float: left;
2303 padding: 0 30px 30px 30px;
2304
2305 button.btn-green {
2306 background-color: #5AA152;
2307 text-transform: capitalize;
2308 border-radius: 5px;
2309 font-weight: 500;
2310 padding: 15px 25px;
2311 font-size: 16px;
2312 line-height: 20px;
2313 }
2314
2315 button.btn-green:hover {
2316 background-color: #3f7539;
2317 }
2318 }
2319
2320 input.campaign_name.form-control {
2321 border-color: #DFDFE1;
2322 display: inline-block;
2323 margin-left: 10px;
2324 margin-top: 20px;
2325 margin-bottom: 20px !important;
2326 width: 90% !important;
2327 }
2328
2329 label {
2330 display: inline-block !important;
2331 margin-top: 0 !important;
2332 }
2333
2334 a.charitable-lite-pro-popup-link {
2335 color: #3459C4 !important;
2336 text-decoration: none;
2337 }
2338
2339 a.charitable-lite-pro-popup-link:hover {
2340 text-decoration: underline;
2341 }
2342
2343 &.jconfirm-type-create-campaign {
2344 .jconfirm-closeIcon {
2345 color: white;
2346 opacity: 0.7;
2347 width: 15px;
2348 height: 15px;
2349 top: 25px;
2350 right: 25px;
2351 font-weight: 200;
2352 font-size: 28px !important;
2353 }
2354
2355 .jconfirm-title-c {
2356 color: #E7E7E9;
2357 padding: 30px 0 30px 30px !important;
2358 font-size: 18px;
2359 font-weight: 600;
2360 }
2361
2362 div.jconfirm-content-pane {
2363 margin: 0 30px 0 30px;
2364 }
2365 }
2366
2367 }
2368
2369 &.edit-php.post-type-charitable .charitable-modal {
2370
2371 max-width: 400px;
2372 background-color: $color_white;
2373 color: #5C5F6B;
2374 font-family: "Inter", sans-serif;
2375
2376 .modal-close {
2377 position: absolute;
2378 top: 10px;
2379 right: 10px;
2380 z-index: 10;
2381 cursor: pointer;
2382 }
2383
2384 .modal-close::before {
2385 content: "\f158";
2386 display: block !important;
2387 font: normal 20px/1 dashicons;
2388 speak: none;
2389 height: 22px;
2390 margin: 2px 0;
2391 text-align: center;
2392 width: 22px;
2393 color: #777;
2394 -webkit-font-smoothing: antialiased !important;
2395 -moz-osx-font-smoothing: grayscale;
2396 }
2397
2398 h3 {
2399 margin: 0 0 30px 0;
2400 font-size: 24px;
2401 line-height: 32px;
2402 font-weight: 400;
2403 text-align: left;
2404 color: #5C5F6B;
2405 }
2406
2407 legend,
2408 label {
2409 color: #303442;
2410 margin-bottom: 10px;
2411 display: block;
2412 font-size: 14px;
2413
2414 }
2415
2416 select {
2417 width: 100%;
2418 padding: 5px 15px;
2419 }
2420
2421 select,
2422 input[type="text"]="text""] {
2423 margin-bottom: 20px;
2424 border-radius: 4px;
2425 }
2426
2427 button.button {
2428 background: #FAFAFB;
2429 font-weight: 500;
2430 font-size: 12px;
2431 line-height: 14px;
2432 text-align: center;
2433 margin: 0 auto 0 0;
2434 color: #5E616C;
2435 border: 1px solid #DDD;
2436 border-radius: 4px;
2437 }
2438
2439 input.charitable-datepicker {
2440 width: 48%;
2441 display: inline-block;
2442 background-image: url('../../images/icons/calendar.png');
2443 background-repeat: no-repeat;
2444 background-position: 163px center;
2445 background-size: 15px 15px;
2446 border: 1px solid #E3E3E5;
2447 border-radius: 4px;
2448 }
2449
2450 #charitable-filter-end_date_to,
2451 #charitable-filter-start_date_to {
2452 float: right;
2453 }
2454
2455
2456 }
2457
2458 }
2459
2460 body.post-type-donation {
2461
2462 .jconfirm .jconfirm-box {
2463 padding: 0 0 0;
2464
2465 .jconfirm-closeIcon {
2466 color: #545660;
2467 padding-top: 5px;
2468 padding-right: 10px;
2469 font-size: 40px !important;
2470 }
2471
2472 div.jconfirm-content-pane {
2473 // margin: 0 30px 0 30px;
2474 margin: 35px 30px -10px 30px;
2475 width: -webkit-calc(100% - 30px);
2476 width: -moz-calc(100% - 30px);
2477 width: calc(100% - 30px);
2478 // width: 90%;
2479 }
2480
2481 div.jconfirm-title-c {
2482 padding: 30px 0 40px 30px;
2483 background-color: #282937;
2484
2485 span.jconfirm-title {
2486 color: $color_white;
2487 font-weight: 600;
2488 }
2489 }
2490
2491 .jconfirm-buttons {
2492 float: left;
2493 padding: 0 30px 30px 30px;
2494
2495 button.btn-green {
2496 background-color: #5AA152;
2497 text-transform: capitalize;
2498 border-radius: 5px;
2499 font-weight: 500;
2500 padding: 15px 25px;
2501 font-size: 16px;
2502 line-height: 20px;
2503 }
2504
2505 button.btn-green:hover {
2506 background-color: #3f7539;
2507 }
2508 }
2509
2510 input.donation_name.form-control {
2511 border-color: #DFDFE1;
2512 display: inline-block;
2513 margin-left: 10px;
2514 margin-top: 20px;
2515 margin-bottom: 20px !important;
2516 width: 90% !important;
2517 }
2518
2519 label {
2520 display: inline-block !important;
2521 margin-top: 0 !important;
2522 }
2523
2524 a.charitable-lite-pro-popup-link {
2525 color: #3459C4 !important;
2526 text-decoration: none;
2527 }
2528
2529 a.charitable-lite-pro-popup-link:hover {
2530 text-decoration: underline;
2531 }
2532
2533 &.jconfirm-type-create-donation {
2534 .jconfirm-closeIcon {
2535 color: white;
2536 opacity: 0.7;
2537 width: 15px;
2538 height: 15px;
2539 top: 25px;
2540 right: 25px;
2541 font-weight: 200;
2542 font-size: 28px !important;
2543 }
2544
2545 .jconfirm-title-c {
2546 color: #E7E7E9;
2547 padding: 30px 0 30px 30px !important;
2548 font-size: 18px;
2549 font-weight: 600;
2550 }
2551
2552 div.jconfirm-content-pane {
2553 margin: 0 30px 0 30px;
2554 }
2555 }
2556
2557 }
2558
2559 &.edit-php.post-type-charitable .charitable-modal {
2560
2561 max-width: 400px;
2562 background-color: $color_white;
2563 color: #5C5F6B;
2564 font-family: "Inter", sans-serif;
2565
2566 .modal-close {
2567 position: absolute;
2568 top: 10px;
2569 right: 10px;
2570 z-index: 10;
2571 cursor: pointer;
2572 }
2573
2574 .modal-close::before {
2575 content: "\f158";
2576 display: block !important;
2577 font: normal 20px/1 dashicons;
2578 speak: none;
2579 height: 22px;
2580 margin: 2px 0;
2581 text-align: center;
2582 width: 22px;
2583 color: #777;
2584 -webkit-font-smoothing: antialiased !important;
2585 -moz-osx-font-smoothing: grayscale;
2586 }
2587
2588 h3 {
2589 margin: 0 0 30px 0;
2590 font-size: 24px;
2591 line-height: 32px;
2592 font-weight: 400;
2593 text-align: left;
2594 color: #5C5F6B;
2595 }
2596
2597 legend,
2598 label {
2599 color: #303442;
2600 margin-bottom: 10px;
2601 display: block;
2602 font-size: 14px;
2603
2604 }
2605
2606 select {
2607 width: 100%;
2608 padding: 5px 15px;
2609 }
2610
2611 select,
2612 input[type="text"]="text""] {
2613 margin-bottom: 20px;
2614 border-radius: 4px;
2615 }
2616
2617 button.button {
2618 background: #FAFAFB;
2619 font-weight: 500;
2620 font-size: 12px;
2621 line-height: 14px;
2622 text-align: center;
2623 margin: 0 auto 0 0;
2624 color: #5E616C;
2625 border: 1px solid #DDD;
2626 border-radius: 4px;
2627 }
2628
2629 input.charitable-datepicker {
2630 width: 48%;
2631 display: inline-block;
2632 background-image: url('../../images/icons/calendar.png');
2633 background-repeat: no-repeat;
2634 background-position: 163px center;
2635 background-size: 15px 15px;
2636 border: 1px solid #E3E3E5;
2637 border-radius: 4px;
2638 }
2639
2640 #charitable-filter-end_date_to,
2641 #charitable-filter-start_date_to {
2642 float: right;
2643 }
2644
2645
2646 }
2647
2648 }
2649
2650 /* reports */
2651
2652 body.charitable_page_charitable-reports {
2653
2654 .charitable-overview-report,
2655 .charitable-activity-report {
2656 position: relative;
2657 padding: 0px;
2658
2659 a {
2660 &.button {
2661 border-radius: 5px;
2662 font-family: "Inter", sans-serif;
2663 font-weight: 600;
2664 font-size: 14px;
2665 line-height: 14px;
2666 padding: 15px 20px;
2667 text-transform: capitalize;
2668
2669 &.button-primary {
2670 background-color: #5AA152;
2671 border-color: #5AA152;
2672 color: white;
2673 }
2674 }
2675 }
2676 }
2677
2678 .charitable-overview-report-loading {
2679 background-color: rgba(255, 255, 255, 0.85);
2680 position: absolute;
2681 top: 0;
2682 bottom: 0;
2683 left: 0;
2684 right: 0;
2685 width: 100%;
2686 height: 100%;
2687 z-index: 99;
2688 }
2689
2690 .charitable-section-loading {
2691 opacity: 0.25;
2692 }
2693
2694 .nav-tab.advanced::after,
2695 .nav-tab.activity::after,
2696 .nav-tab.donors::after {
2697 // insert content before element.
2698 content: "Pro";
2699 background-color: #F99E36;
2700 padding: 3px 7px;
2701 font-size: 11px;
2702 line-height: 11px;
2703 text-transform: uppercase;
2704 color: white;
2705 font-weight: 600;
2706 margin-left: 5px;
2707 margin-right: 5px;
2708 margin-top: 0;
2709 position: relative;
2710 top: -7px;
2711 }
2712
2713 .tablenav {
2714 font-family: "Inter", sans-serif !important;
2715 min-height: 30px;
2716 height: auto;
2717 margin-top: 0;
2718 margin-bottom: 0;
2719
2720 .alignleft,
2721 .alignright {
2722 margin-top: 10px;
2723 margin-bottom: 10px;
2724 }
2725
2726 #charitable-advanced-date-pickers,
2727 #charitable-advanced-filter-buttons {
2728 display: inline-block;
2729 }
2730
2731 form {
2732 display: block;
2733 margin: 0;
2734 padding: 0;
2735 float: left;
2736 }
2737
2738 select {
2739 font-size: 13px;
2740 line-height: 29px;
2741 font-weight: 500;
2742 max-width: none;
2743 padding-right: 30px;
2744 background-color: #F9F9FA;
2745 color: #52545F;
2746 border-color: #E4E4E7;
2747 height: 38px;
2748 }
2749
2750 a.button,
2751 input.button {
2752 background-color: #F9F9FA;
2753 color: #52545F;
2754 border-color: #E4E4E7;
2755 height: 38px;
2756 padding-top: 0;
2757 padding-bottom: 0;
2758 min-height: auto;
2759 line-height: 38px;
2760 font-size: 13px;
2761
2762 &:hover {
2763 background-color: #E4E4E7;
2764 }
2765 }
2766
2767 .charitable-datepicker-container a.button {
2768 display: block;
2769 }
2770
2771 a.button.with-icon {
2772 label {
2773 padding-right: 10px;
2774 }
2775
2776 img {
2777 margin-bottom: -2px;
2778 }
2779 }
2780
2781 button.charitable-report-download-button {
2782
2783 background-color: #F9F9FA;
2784 color: #52545F;
2785 border-color: #E4E4E7;
2786 margin-left: 4px;
2787 margin-right: 4px;
2788 height: 38px;
2789 padding-top: 0;
2790 padding-bottom: 0;
2791
2792 &:hover {
2793 background-color: #E4E4E7;
2794 }
2795
2796 label {
2797 padding-right: 10px;
2798 pointer-events: none;
2799 }
2800
2801 img {
2802 margin-bottom: -2px;
2803 }
2804 }
2805
2806
2807 button.charitable-report-print-button {
2808
2809 background-color: #F9F9FA;
2810 color: #52545F;
2811 border-color: #E4E4E7;
2812 margin-left: 4px;
2813 margin-right: 4px;
2814 height: 38px;
2815 padding-top: 0;
2816 padding-bottom: 0;
2817
2818 &:hover {
2819 background-color: #E4E4E7;
2820 }
2821
2822 label {
2823 padding-right: 10px;
2824 pointer-events: none;
2825 }
2826
2827 img {
2828 margin-bottom: -4px;
2829 }
2830 }
2831
2832 input.charitable-datepicker {
2833 width: 115px;
2834 display: inline-block;
2835 background-image: url('../../images/icons/calendar.png');
2836 background-repeat: no-repeat;
2837 background-position: 90px center;
2838 background-size: 15px 15px;
2839 font-size: 13px;
2840 border-radius: 0;
2841 background-color: #F9F9FA;
2842 color: #52545F;
2843 border-color: #E4E4E7;
2844 }
2845
2846 input.charitable-datepicker-ranged,
2847 input.charitable-reports-datepicker {
2848 width: 195px;
2849 display: inline-block;
2850 background-image: url("../../images/icons/calendar.png");
2851 background-repeat: no-repeat;
2852 background-position: 170px center;
2853 background-size: 15px 15px;
2854 font-size: 13px;
2855 border-radius: 0;
2856 background-color: #F9F9FA;
2857 color: #52545F;
2858 border-color: #E4E4E7;
2859 margin-left: 4px;
2860 margin-right: 4px;
2861 height: 38px;
2862 padding-top: 0;
2863 padding-bottom: 0;
2864
2865 &:hover {
2866 background-color: #E4E4E7;
2867 }
2868 }
2869
2870
2871 &.with-margin {
2872 margin-bottom: 20px;
2873 }
2874
2875 }
2876
2877 .charitable-section {
2878 margin-top: 20px;
2879 margin-bottom: 20px;
2880 display: table;
2881
2882 .alignleft,
2883 .alignright {
2884 margin-bottom: 15px;
2885 margin-top: 15px;
2886 }
2887
2888 &.no-bottom {
2889 margin-bottom: 0;
2890
2891 .alignleft,
2892 .alignright {
2893 margin-bottom: 0;
2894 }
2895 }
2896
2897 }
2898
2899 .charitable-container {
2900 border-radius: 5px;
2901 color: #757781;
2902 background-color: #FFF;
2903 }
2904
2905 .charitable-datepicker-container {
2906 display: inline-block;
2907 margin-left: 5px;
2908 }
2909
2910 .charitable-headline-graph-container {
2911 padding: 20px 30px;
2912
2913 &.charitable-with-growth-tools {
2914 position: relative;
2915 }
2916 }
2917
2918 .charitable-section-grid {
2919 display: grid;
2920 grid-template-columns: repeat(2, 1fr);
2921 grid-gap: 20px;
2922 margin-top: 20px;
2923
2924 &.one-third {
2925 display: flex;
2926 flex-direction: row;
2927 }
2928
2929 &.charitable-section-grid-column-flexible {
2930 align-items: flex-start;
2931 }
2932
2933 &.charitable-section-grid-column-single {
2934 columns: 1;
2935 column-gap: none;
2936 display: block;
2937 }
2938 }
2939
2940 .charitable-cards {
2941 display: grid;
2942 grid-template-columns: repeat(4, 1fr);
2943 margin-top: 20px;
2944 margin-bottom: 20px;
2945 grid-gap: 20px;
2946 width: 100%;
2947
2948 .charitable-card {
2949 padding-top: 60px;
2950 padding-bottom: 60px;
2951 font-weight: 500px;
2952 font-size: 16px;
2953 line-height: 16px;
2954 text-align: center;
2955
2956 p {
2957 margin-top: 5px;
2958 margin-bottom: 0;
2959 }
2960
2961 strong {
2962 color: #474A57;
2963 font-weight: 600;
2964 font-size: 42px;
2965 line-height: 44px;
2966 }
2967 }
2968
2969 }
2970
2971 .donations-breakdown {
2972
2973 tr th {
2974 color: #6A6C77;
2975 }
2976
2977 td {
2978 padding-top: 20px;
2979 padding-bottom: 20px;
2980 color: #8C8E96;
2981
2982 &.negative {
2983 color: #F99E36;
2984 }
2985
2986 &.positive {
2987 color: #5AA152;
2988 }
2989 }
2990
2991 tr th:first-child,
2992 td:first-child {
2993 padding-left: 30px;
2994 }
2995
2996 td.column-date {
2997 font-weight: 600;
2998 }
2999
3000 }
3001
3002 .charitable-report-card {
3003 .header {
3004 margin: 20px 0 0 0;
3005 padding-bottom: 20px;
3006 padding-left: 30px;
3007 padding-right: 30px;
3008 border-bottom: 1px solid #EFEFF1;
3009
3010 h4 {
3011 color: #303442;
3012 font-weight: 600;
3013 font-size: 17px;
3014 line-height: 22px;
3015 display: inline-block;
3016 margin: 0;
3017 padding: 0;
3018 }
3019
3020 a {
3021 display: block;
3022 float: right;
3023 font-size: 23px;
3024 line-height: 23px;
3025 }
3026 }
3027
3028 .the-graph {
3029 width: 100%;
3030 }
3031
3032 .the-list {
3033 padding-left: 20px;
3034 padding-right: 20px;
3035 margin-left: 10px;
3036 margin-right: 10px;
3037 max-height: 550px;
3038 overflow: scroll;
3039 /* width: 100%; */
3040
3041 &.charitable-no-scroll {
3042 overflow: visible;
3043 max-height: none;
3044 }
3045
3046 ul {
3047 li {
3048 color: #474A57;
3049 display: flex;
3050 border-bottom: 1px solid #EFEFF1;
3051 padding-bottom: 15px;
3052 padding-top: 15px;
3053
3054 .avatar,
3055 .icon {
3056 width: 25px;
3057 text-align: center;
3058
3059 img {
3060 margin: 5px auto;
3061 max-width: 25px;
3062 }
3063 }
3064
3065 .avatar {
3066 width: 55px;
3067
3068 img {
3069 width: 55px;
3070 }
3071 }
3072
3073 .info {
3074 flex-grow: 1;
3075 margin-left: 15px;
3076 margin-right: 15px;
3077 font-size: 14px;
3078 line-height: 23px;
3079
3080 p {
3081 font-size: 14px;
3082 line-height: 23px;
3083 margin: 0;
3084 font-weight: 700;
3085
3086 &.name {
3087 margin: 10px 0 0 0;
3088 line-height: 14px;
3089 }
3090
3091 &.amount {
3092 margin: 10px 0 0 0;
3093 font-weight: 500;
3094 color: #8C8E96;
3095 }
3096
3097 &.campaign-title {
3098 margin: 10px 0 0 0;
3099 font-style: italic;
3100 font-weight: 500;
3101 color: #8C8E96;
3102 }
3103
3104 &.email {
3105 margin: 10px 0 0 0;
3106 font-weight: 500;
3107 color: #8C8E96;
3108 line-height: 14px;
3109 }
3110 }
3111
3112 .badge {
3113 font-weight: 200;
3114 display: inline-block;
3115 margin-left: 10px;
3116 }
3117 }
3118
3119 .time-ago {
3120 color: #8C8E96;
3121 }
3122
3123 .donor-donation-info {
3124 font-size: 14px;
3125 line-height: 14px;
3126 text-align: right;
3127
3128 p {
3129 margin: 0;
3130 }
3131
3132 p:first-of-type {
3133 margin-top: 10px;
3134 margin-bottom: 5px;
3135 }
3136
3137 .badge {
3138 font-weight: 200;
3139 display: block;
3140 }
3141 }
3142 }
3143
3144 li:last-child {
3145 border-bottom: 0;
3146 }
3147 }
3148 }
3149 }
3150
3151 .charitable-activity-report {
3152 .charitable-tablenav-activity {
3153 width: 100%;
3154
3155 h2 {
3156 line-height: 30px;
3157 font-size: 18px;
3158 }
3159 }
3160
3161 .charitable-activity-list-container {
3162 background-color: #FFF;
3163
3164 .charitable-no-results {
3165 padding: 20px;
3166 text-align: left;
3167 font-size: 16px;
3168 line-height: 16px;
3169 color: #8C8E96;
3170 }
3171 }
3172 }
3173
3174 .charitable-the-list-container {
3175 padding: 20px;
3176 margin-left: 10px;
3177 margin-right: 10px;
3178 max-height: 550px;
3179 overflow: scroll;
3180
3181 &.charitable-no-scroll {
3182 overflow: visible;
3183 max-height: none;
3184 }
3185
3186 ul {
3187 margin-top: 0;
3188 margin-bottom: 0;
3189
3190 li {
3191 color: #474A57;
3192 display: flex;
3193 border-bottom: 1px solid #EFEFF1;
3194 padding-bottom: 15px;
3195 padding-top: 15px;
3196
3197 .avatar,
3198 .icon {
3199 width: 25px;
3200 text-align: center;
3201
3202 img {
3203 margin: 5px auto;
3204 max-width: 25px;
3205 }
3206 }
3207
3208 .avatar {
3209 width: 55px;
3210
3211 img {
3212 width: 55px;
3213 }
3214 }
3215
3216 .info {
3217 flex-grow: 1;
3218 margin-left: 15px;
3219 margin-right: 15px;
3220 font-size: 14px;
3221 line-height: 23px;
3222
3223 p {
3224 font-size: 14px;
3225 line-height: 23px;
3226 margin: 0;
3227 font-weight: 700;
3228
3229 &.name {
3230 margin: 10px 0 0 0;
3231 line-height: 14px;
3232 }
3233
3234 &.amount {
3235 margin: 10px 0 0 0;
3236 font-weight: 500;
3237 color: #8C8E96;
3238 }
3239
3240 &.campaign-title {
3241 margin: 10px 0 0 0;
3242 font-style: italic;
3243 font-weight: 500;
3244 color: #8C8E96;
3245 }
3246
3247 &.email {
3248 margin: 10px 0 0 0;
3249 font-weight: 500;
3250 color: #8C8E96;
3251 line-height: 14px;
3252 }
3253 }
3254
3255 .badge {
3256 font-weight: 200;
3257 display: inline-block;
3258 margin-left: 10px;
3259 }
3260 }
3261
3262 .time-ago {
3263 color: #8C8E96;
3264 }
3265
3266 .donor-donation-info {
3267 font-size: 14px;
3268 line-height: 14px;
3269
3270 p {
3271 margin: 0;
3272 }
3273
3274 p:first-of-type {
3275 margin-top: 10px;
3276 margin-bottom: 5px;
3277 }
3278
3279 .badge {
3280 font-weight: 200;
3281 display: block;
3282 }
3283 }
3284 }
3285
3286 li:last-child {
3287 border-bottom: 0;
3288 }
3289 }
3290 }
3291
3292 .charitable-top-campaigns-report {
3293 width: 66%;
3294
3295 p.link {
3296 display: table;
3297 }
3298
3299 a {
3300 color: #494E5A;
3301 text-decoration: none;
3302
3303 img {
3304 float: right;
3305 margin-left: 10px;
3306 }
3307 }
3308
3309 a:hover {
3310 text-decoration: underline;
3311 }
3312 }
3313
3314 .charitable-top-donors-report {
3315 .avatar {
3316 img {
3317 border-radius: 50%;
3318 }
3319 }
3320 }
3321
3322 .charitable-payment-methods-report {
3323 width: 33%;
3324
3325 .apexcharts-canvas {
3326 background-image: url("../../../assets/images/icons/payments.svg");
3327 background-repeat: no-repeat;
3328 background-position: center;
3329 margin-left: auto;
3330 margin-right: auto;
3331 }
3332
3333 .the-legend {
3334 margin: 20px auto;
3335 width: 55%;
3336 max-width: 300px;
3337
3338 li {
3339 display: flex;
3340 margin-bottom: 15px;
3341 width: 100%;
3342 }
3343
3344 .icon {
3345 span {
3346 display: block;
3347 border-radius: 50%;
3348 width: 15px;
3349 height: 15px;
3350 }
3351 }
3352
3353 li.stripe .icon span {
3354 background-color: #5AA152;
3355 }
3356
3357 li.paypal .icon span {
3358 background-color: #2B66D1;
3359 }
3360
3361 li.manual .icon span {
3362 background-color: #F99E36;
3363 }
3364
3365 li.offline .icon span {
3366 background-color: #9e36f9;
3367 }
3368
3369 li.square_core .icon span,
3370 li.square .icon span {
3371 background-color: #d21561;
3372 }
3373
3374 li.none .icon span {
3375 background-color: #d21561;
3376 }
3377
3378 .info {
3379 margin-left: 10px;
3380 flex-grow: 1;
3381 font-size: 14px;
3382 line-height: 14px;
3383 color: #474A57;
3384 font-weight: 600;
3385 text-align: left;
3386
3387 }
3388
3389 .total {
3390 font-size: 14px;
3391 line-height: 14px;
3392 color: #868890;
3393 font-weight: 400;
3394 text-align: right;
3395 }
3396 }
3397 }
3398
3399 .charitable-top-campaigns-report {
3400
3401 .the-list {
3402
3403 ul li {
3404 display: block;
3405
3406 .main {
3407 display: flex;
3408 }
3409
3410 .info {
3411 margin-left: 0;
3412
3413 .info-summary {
3414 font-weight: 400;
3415 color: #9899A0;
3416
3417 p {
3418 display: inline-block;
3419 margin-right: 20px;
3420
3421 strong {
3422 color: #494E5A;
3423 font-weight: 400;
3424 }
3425 }
3426 }
3427 }
3428
3429 .progress-bar {
3430 margin: 10px auto;
3431 width: 100%;
3432 }
3433 }
3434
3435 }
3436
3437
3438 }
3439
3440 .charitable-title-card {
3441 padding: 20px 30px;
3442 margin-top: 0px;
3443 margin-bottom: 0px;
3444 position: relative;
3445
3446 h1 {
3447 color: #303442;
3448 font-weight: 600;
3449 font-size: 17px;
3450 line-height: 22px;
3451 display: inline-block;
3452 margin: 0;
3453 padding: 0;
3454 }
3455
3456 a {
3457 display: block;
3458 float: right;
3459 font-size: 23px;
3460 line-height: 23px;
3461 }
3462
3463 button.dismiss {
3464 position: absolute;
3465 top: 10px;
3466 right: 10px;
3467 color: #666;
3468 font-size: 16px;
3469 text-decoration: none;
3470 }
3471
3472 .charitable-title-card-content {}
3473
3474 }
3475
3476 select#report-donor-type-filter,
3477 select#report-advanced-type-filter {
3478 float: none !important;
3479 margin-left: 10px;
3480 }
3481
3482 .charitable-advanced-report {
3483 .tablenav {
3484 width: 100%;
3485 }
3486 }
3487
3488 .progress-bar {
3489 height: 4px;
3490 background-color: #F5F5F5;
3491 border-radius: 0;
3492 border: 0;
3493
3494 .progress {
3495 height: 4px;
3496 background-color: #5AA152;
3497 }
3498 }
3499
3500 .charitable-toggle:hover,
3501 .charitable-toggle:focus,
3502 .charitable-toggle:focus-visible,
3503 .charitable-toggle:active,
3504 .charitable-toggle i:focus,
3505 .charitable-toggle i:focus-visible {
3506 text-decoration: none;
3507 border: 0;
3508 box-shadow: none;
3509 }
3510
3511 .charitable-toggle .charitable-angle-right {
3512 rotate: -90deg;
3513 }
3514
3515 .badge {
3516
3517 &.completed {
3518 color: #50A66A;
3519 }
3520
3521 &.pending {
3522 color: #E38632;
3523 }
3524
3525 &.active {
3526 color: #50A66A;
3527 }
3528
3529 &.recurring {
3530 color: #50A66A;
3531 }
3532
3533 &.one-time {
3534 color: #EAA465;
3535 }
3536
3537 &.paid,
3538 &.publish,
3539 &.published,
3540 &.charitable-completed {
3541 color: #50A66A;
3542 }
3543
3544 &.cancelled {
3545 color: #CE3E4E;
3546 }
3547
3548 &.draft {
3549 color: #ccc;
3550 }
3551
3552 }
3553
3554 }
3555
3556 /* reports - analytics */
3557
3558 body.charitable_page_charitable-reports .charitable-analytics-container {
3559 max-width: 790px;
3560 margin: 30px auto 60px auto;
3561 display: table;
3562 text-align: center;
3563
3564 .charitable-monsterinsights-logo {
3565 margin: 0 auto;
3566 }
3567
3568 h1 {
3569 font-weight: 600;
3570 font-size: 28px;
3571 line-height: 38px;
3572 margin-top: 20px;
3573 color: #444754;
3574 }
3575
3576 h2 {
3577 font-weight: 400;
3578 font-size: 14px;
3579 line-height: 22px;
3580 margin-top: 20px;
3581 color: #909299;
3582 }
3583
3584 .vertical-wrapper {
3585 margin: 0;
3586 padding: 0;
3587 height: 100%;
3588 width: 100%;
3589 display: table;
3590 }
3591
3592 .bullets-thumbnail {
3593 margin: 60px auto;
3594 display: grid;
3595 grid-template-columns: repeat(2, 1fr);
3596 grid-gap: 10px;
3597 align-content: space-evenly;
3598
3599 img {
3600 max-width: 300px;
3601 }
3602
3603 ul {
3604 padding: 0;
3605 margin: 0;
3606 display: table-cell;
3607 vertical-align: middle;
3608 }
3609
3610 li {
3611 text-align: left;
3612 min-height: 25px;
3613 font-size: 14px;
3614 line-height: 21px;
3615 color: #474A57;
3616 padding-left: 25px;
3617 margin-bottom: 15px;
3618 margin-top: 0;
3619 background: url(../../images/reports/analytics/check.svg) 0 2px no-repeat;
3620 }
3621 }
3622
3623 .charitable-intergration-steps {
3624 .charitable-intergration-step {
3625 margin: 20px auto;
3626 text-align: left;
3627 display: grid;
3628 grid-template-columns: 1fr 100px;
3629 grid-gap: 0px;
3630 clear: both;
3631
3632 max-width: 670px;
3633 background-color: #fff;
3634
3635 .instructions {
3636 padding: 25px;
3637 float: left;
3638 }
3639
3640 .step {
3641 width: 100px;
3642 background-color: #F7F8FB;
3643 text-align: center;
3644 float: right;
3645
3646 .step-image {
3647 display: table-cell;
3648 vertical-align: middle;
3649 }
3650 }
3651
3652 h3 {
3653 color: #23282D;
3654 font-weight: 700;
3655 font-size: 18px;
3656 line-height: 23px;
3657 margin: 0;
3658 padding: 0;
3659 }
3660
3661 p {
3662 padding: 0;
3663 margin: 10px auto;
3664 font-weight: 200;
3665 color: #646970;
3666 font-size: 16px;
3667 line-height: 24px;
3668 }
3669
3670 a {
3671 margin: 5px auto 0 auto;
3672 display: inline-block;
3673
3674 &.button-link {
3675 background-color: #5AA152;
3676 color: #ffffff;
3677 padding: 10px 15px;
3678 position: relative;
3679 top: -4px;
3680 text-decoration: none;
3681 border-radius: 5px;
3682 text-shadow: none;
3683 font-weight: 600;
3684 font-size: 13px;
3685 line-height: normal;
3686 cursor: pointer;
3687 }
3688
3689 &.button-link:hover {
3690 background-color: #1E5B38 !important;
3691 border-color: #1E5B38 !important;
3692 }
3693 }
3694
3695 }
3696 }
3697
3698 }
3699
3700 /* tools */
3701
3702 body.charitable_page_charitable-tools {}
3703
3704 /* dashboard */
3705
3706 body.charitable_page_charitable-dashboard {
3707
3708 .tablenav {
3709 font-family: "Inter", sans-serif !important;
3710 min-height: 30px;
3711 height: auto;
3712 margin-top: 0;
3713 margin-bottom: 0;
3714
3715 .alignleft,
3716 .alignright {
3717 margin-top: 10px;
3718 margin-bottom: 10px;
3719 }
3720
3721 #charitable-advanced-date-pickers,
3722 #charitable-advanced-filter-buttons {
3723 display: inline-block;
3724 }
3725
3726 form {
3727 display: block;
3728 margin: 0;
3729 padding: 0;
3730 float: left;
3731 }
3732
3733 select {
3734 font-size: 13px;
3735 line-height: 29px;
3736 font-weight: 500;
3737 max-width: none;
3738 padding-right: 30px;
3739 background-color: #F9F9FA;
3740 color: #52545F;
3741 border-color: #E4E4E7;
3742 height: 38px;
3743 }
3744
3745 a.button,
3746 input.button {
3747 background-color: #F9F9FA;
3748 color: #52545F;
3749 border-color: #E4E4E7;
3750 }
3751
3752 .charitable-datepicker-container a.button {
3753 display: block;
3754 }
3755
3756 a.button.with-icon {
3757 label {
3758 padding-right: 10px;
3759 }
3760
3761 img {
3762 margin-bottom: -2px;
3763 }
3764 }
3765
3766 button.charitable-report-download-button {
3767
3768 background-color: #F9F9FA;
3769 color: #52545F;
3770 border-color: #E4E4E7;
3771 height: 38px;
3772 padding-top: 0;
3773 padding-bottom: 0;
3774 margin-left: 4px;
3775 margin-right: 4px;
3776
3777 label {
3778 padding-right: 10px;
3779 pointer-events: none;
3780 }
3781
3782 img {
3783 margin-bottom: -2px;
3784 }
3785 }
3786
3787 button.charitable-report-print-button {
3788
3789 background-color: #F9F9FA;
3790 color: #52545F;
3791 border-color: #E4E4E7;
3792 margin-left: 4px;
3793 margin-right: 4px;
3794 height: 38px;
3795 padding-top: 0;
3796 padding-bottom: 0;
3797
3798 &:hover {
3799 background-color: #E4E4E7;
3800 }
3801
3802 label {
3803 padding-right: 10px;
3804 pointer-events: none;
3805 }
3806
3807 img {
3808 margin-bottom: -4px;
3809 }
3810 }
3811
3812 input.charitable-datepicker {
3813 width: 115px;
3814 display: inline-block;
3815 background-image: url('../../images/icons/calendar.png');
3816 background-repeat: no-repeat;
3817 background-position: 90px center;
3818 background-size: 15px 15px;
3819 font-size: 13px;
3820 border-radius: 0;
3821 background-color: #F9F9FA;
3822 color: #52545F;
3823 border-color: #E4E4E7;
3824 height: 38px;
3825 padding-top: 0;
3826 padding-bottom: 0;
3827 margin-left: 4px;
3828 margin-right: 4px;
3829 }
3830
3831 input.charitable-datepicker-ranged,
3832 input.charitable-reports-datepicker {
3833 width: 195px;
3834 display: inline-block;
3835 background-image: url("../../images/icons/calendar.png");
3836 background-repeat: no-repeat;
3837 background-position: 170px center;
3838 background-size: 15px 15px;
3839 font-size: 13px;
3840 border-radius: 0;
3841 background-color: #F9F9FA;
3842 color: #52545F;
3843 border-color: #E4E4E7;
3844 height: 38px;
3845 padding-top: 0;
3846 padding-bottom: 0;
3847 margin-left: 4px;
3848 margin-right: 4px;
3849 }
3850
3851
3852 &.with-margin {
3853 margin-bottom: 20px;
3854 }
3855
3856 }
3857
3858 .charitable-section {
3859 margin-top: 20px;
3860 margin-bottom: 20px;
3861 display: table;
3862
3863 .alignleft,
3864 .alignright {
3865 margin-bottom: 15px;
3866 margin-top: 15px;
3867 }
3868 }
3869
3870 .charitable-section-loading {
3871 opacity: 0.25;
3872 }
3873
3874 h1 {
3875 .badge {
3876 font-size: 11px;
3877 font-weight: 400;
3878 }
3879 }
3880
3881 .charitable-container {
3882 border-radius: 5px;
3883 color: #757781;
3884 background-color: #FFF;
3885 .charitable-toggle-container {
3886 display: flex;
3887 justify-content: space-between;
3888 padding: 20px 30px;
3889 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
3890 align-items: center;
3891 }
3892 &.charitable-dashboard-notifications .charitable-toggle-container {
3893 padding-bottom: 10px;
3894 padding-left: 24px;
3895 padding-right: 24px;
3896 }
3897 .the-list {
3898 width: 100%;
3899 }
3900 }
3901
3902 .charitable-headline-graph-container {
3903 padding: 20px 30px;
3904
3905 &.charitable-with-growth-tools {
3906 position: relative;
3907 }
3908 }
3909
3910 .charitable-section-grid {
3911 display: grid;
3912 grid-template-columns: repeat(2, 1fr);
3913 grid-gap: 20px;
3914 margin-bottom: 20px;
3915
3916 &.one-third {
3917 display: flex;
3918 flex-direction: row;
3919 }
3920
3921 &.charitable-section-grid-column-flexible {
3922 align-items: flex-start;
3923 }
3924
3925 &.charitable-section-grid-column-single {
3926 columns: 1;
3927 column-gap: none;
3928 display: block;
3929 }
3930 }
3931
3932 .charitable-section-flexible {
3933 columns: 2 200px;
3934 column-gap: 20px;
3935 display: block;
3936
3937 .charitable-recent-donations-report,
3938 .charitable-top-campaigns-report,
3939 .charitable-support,
3940 .charitable-dashboard-notifications,
3941 .charitable-recommended-addons,
3942 .charitable-recommended-snippets {
3943 display: inline-block;
3944 margin-bottom: 20px;
3945 width: 100%;
3946 }
3947 }
3948
3949 .charitable-cards {
3950 display: grid;
3951 grid-template-columns: repeat(4, 1fr);
3952 /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
3953 /* grid-template-rows: repeat(2); */
3954 margin-top: 20px;
3955 margin-bottom: 20px;
3956 grid-gap: 20px;
3957
3958 .charitable-card {
3959 padding-top: 60px;
3960 padding-bottom: 60px;
3961 font-weight: 500px;
3962 font-size: 16px;
3963 line-height: 16px;
3964 text-align: center;
3965
3966 p {
3967 margin-top: 5px;
3968 margin-bottom: 0;
3969 }
3970
3971 strong {
3972 color: #474A57;
3973 font-weight: 600;
3974 font-size: 42px;
3975 line-height: 44px;
3976 }
3977 }
3978
3979 }
3980
3981 .charitable-report-card {
3982 .header {
3983 margin: 0 0 0 0;
3984 padding-top: 20px;
3985 padding-bottom: 20px;
3986 padding-left: 25px;
3987 padding-right: 25px;
3988 border-bottom: 1px solid #EFEFF1;
3989
3990 h4 {
3991 color: #303442;
3992 font-weight: 600;
3993 font-size: 17px;
3994 line-height: 22px;
3995 display: inline-block;
3996 margin: 0;
3997 padding: 0;
3998 }
3999
4000 a {
4001 display: block;
4002 float: right;
4003 font-size: 23px;
4004 line-height: 23px;
4005 }
4006 }
4007
4008 .the-list {
4009 // padding-left: 20px;
4010 // padding-right: 20px;
4011 // margin-left: 10px;
4012 // margin-right: 10px;
4013
4014 ul {
4015 margin-top: 0;
4016 margin-bottom: 0;
4017 li {
4018 color: #474A57;
4019 display: flex;
4020 border-bottom: 1px solid #EFEFF1;
4021 padding-bottom: 15px;
4022 padding-top: 15px;
4023
4024 .avatar,
4025 .icon {
4026 width: 25px;
4027 text-align: center;
4028
4029 img {
4030 margin: 5px auto;
4031 max-width: 25px;
4032 }
4033 }
4034
4035 .avatar {
4036 width: 55px;
4037
4038 img {
4039 width: 55px;
4040 }
4041 }
4042
4043 .info {
4044 flex-grow: 1;
4045 margin-left: 15px;
4046 margin-right: 15px;
4047 font-size: 14px;
4048 line-height: 23px;
4049
4050 p {
4051 font-size: 14px;
4052 line-height: 23px;
4053 margin: 0;
4054 font-weight: 700;
4055
4056 &.name {
4057 margin: 10px 0 0 0;
4058 line-height: 14px;
4059 }
4060
4061 &.amount {
4062 margin: 10px 0 0 0;
4063 font-weight: 500;
4064 color: #8C8E96;
4065 }
4066
4067 &.campaign-title {
4068 margin: 10px 0 0 0;
4069 font-style: italic;
4070 font-weight: 500;
4071 color: #8C8E96;
4072 }
4073
4074 &.email {
4075 margin: 10px 0 0 0;
4076 font-weight: 500;
4077 color: #8C8E96;
4078 line-height: 14px;
4079 }
4080 }
4081
4082 .badge {
4083 font-weight: 200;
4084 display: inline-block;
4085 margin-left: 10px;
4086 }
4087 }
4088
4089 .time-ago {
4090 color: #8C8E96;
4091 }
4092
4093 .donor-donation-info {
4094 font-size: 14px;
4095 line-height: 14px;
4096
4097 p {
4098 margin: 0;
4099 }
4100
4101 p:first-of-type {
4102 margin-top: 10px;
4103 margin-bottom: 5px;
4104 }
4105
4106 .badge {
4107 font-weight: 200;
4108 display: block;
4109 }
4110 }
4111 }
4112
4113 li:last-child {
4114 border-bottom: 0;
4115 padding-bottom: 0;
4116 }
4117 li:first-child {
4118 padding-top: 0;
4119 }
4120 }
4121 }
4122
4123 .more {
4124 margin: 30px 25px;
4125 display: table;
4126 padding: 0;
4127 text-align: left;
4128
4129 a {
4130 font-weight: 600;
4131 font-size: 14px;
4132 line-height: 16px;
4133 text-decoration: none;
4134
4135 img {
4136 margin-left: 10px;
4137 float: right;
4138 display: block;
4139 }
4140 }
4141 }
4142 }
4143
4144 .charitable-dashboard-title-cards {
4145 display: grid;
4146 grid-template-columns: repeat(2, 1fr);
4147 margin-top: 0px;
4148 margin-bottom: 0px;
4149 grid-gap: 20px;
4150
4151 .charitable-dashboard-title-card {
4152 padding: 20px 30px;
4153 margin-top: 0px;
4154 margin-bottom: 0px;
4155 position: relative;
4156 display: table;
4157 clear: both;
4158
4159 h1 {
4160 color: #303442;
4161 font-weight: 600;
4162 font-size: 17px;
4163 line-height: 22px;
4164 display: inline-block;
4165 margin: 0;
4166 padding: 0;
4167 }
4168
4169 h3 {
4170 margin-top: 0;
4171 margin-bottom: 0;
4172 }
4173
4174 a {
4175 margin: 5px auto 0 auto;
4176 display: inline-block;
4177
4178 &.button-link {
4179 background-color: #5AA152;
4180 color: #ffffff;
4181 padding: 10px 15px;
4182 position: relative;
4183 top: -4px;
4184 text-decoration: none;
4185 border-radius: 5px;
4186 text-shadow: none;
4187 font-weight: 600;
4188 font-size: 13px;
4189 line-height: normal;
4190 cursor: pointer;
4191
4192 &.charitable-button-link-upgrade {
4193 background-color: #F18500;
4194 }
4195 }
4196
4197 &.button-link:hover {
4198 background-color: #43833b !important;
4199 border-color: #43833b !important;
4200 }
4201 }
4202
4203 button.dismiss {
4204 position: absolute;
4205 top: 10px;
4206 right: 10px;
4207 color: #666;
4208 font-size: 16px;
4209 text-decoration: none;
4210 }
4211
4212 .checklist {
4213 .done {
4214 color: #79ba49;
4215 }
4216
4217 .done:before {
4218 content: "\f147";
4219 font-family: "dashicons";
4220 font-size: 20px;
4221 margin-right: 5px;
4222 vertical-align: middle;
4223 }
4224
4225 .not-done {
4226 color: #5aa152;
4227 }
4228
4229 .not-done:before {
4230 content: "\f464";
4231 font-family: "dashicons";
4232 font-size: 20px;
4233 margin-right: 8px;
4234 vertical-align: middle;
4235 margin-left: 1px;
4236 }
4237 }
4238
4239 }
4240 }
4241
4242 .charitable-activity-report {}
4243
4244 .charitable-top-campaigns-report {
4245 width: 66%;
4246 }
4247
4248 .charitable-recent-donations-report {
4249
4250 .the-list {
4251
4252 ul li {
4253 display: block;
4254
4255 .main {
4256 display: flex;
4257 }
4258
4259 .info {
4260 margin-left: 0;
4261
4262 .info-summary {
4263 font-weight: 400;
4264 color: #9899A0;
4265
4266 p {
4267 display: inline-block;
4268 margin-right: 20px;
4269
4270 strong {
4271 color: #494E5A;
4272 font-weight: 400;
4273 }
4274 }
4275 }
4276 }
4277
4278 }
4279
4280 }
4281
4282 }
4283
4284 .charitable-top-campaigns-report {
4285
4286 .the-list {
4287
4288 ul li {
4289 display: block;
4290
4291 .main {
4292 display: flex;
4293 }
4294
4295 .info {
4296 margin-left: 0;
4297
4298 .info-summary {
4299 font-weight: 400;
4300 color: #9899A0;
4301
4302 p {
4303 display: inline-block;
4304 margin-right: 20px;
4305
4306 strong {
4307 color: #494E5A;
4308 font-weight: 400;
4309 }
4310 }
4311 }
4312 }
4313
4314 .progress-bar {
4315 margin: 10px auto;
4316 width: 100%;
4317 }
4318 }
4319
4320 }
4321
4322
4323 }
4324
4325 .charitable-support {
4326
4327 .the-list {
4328
4329 ul li {
4330 display: flex;
4331 border: 0;
4332 padding-top: 5px;
4333 padding-bottom: 5px;
4334
4335 .icon {
4336 margin-right: 10px;
4337 height: 25px;
4338 line-height: 25px;
4339
4340 img {
4341 max-height: 25px;
4342 vertical-align: middle;
4343 }
4344 }
4345
4346 .info {
4347 margin-left: 0;
4348
4349 a {
4350 text-decoration: none;
4351 font-weight: 600;
4352 font-size: 14px;
4353 line-height: 30px;
4354 color: #474A57;
4355 }
4356
4357 a:hover {
4358 text-decoration: underline;
4359 }
4360 }
4361
4362 }
4363
4364 }
4365
4366 }
4367
4368 .charitable-recommended-addons,
4369 .charitable-recommended-snippets {
4370
4371 .the-list {
4372 ul {
4373 width: 100%;
4374 margin: 0 auto;
4375 padding: 0;
4376 display: grid;
4377 grid-template-columns: repeat(2, 1fr);
4378 grid-gap: 20px;
4379 }
4380
4381 ul li {
4382 border: 0;
4383 padding-top: 5px;
4384 padding-bottom: 5px;
4385 padding-left: 5px;
4386 padding-right: 5px;
4387 text-align: center;
4388 font-weight: 400;
4389
4390 a {
4391 text-decoration: none;
4392 font-size: 13px;
4393 line-height: 17px;
4394 color: #474A57;
4395 font-family: 'Inter', sans-serif !important;
4396 width: 100%;
4397
4398 h4 {
4399 font-weight: 600;
4400 font-size: 18px;
4401 line-height: 21px;
4402 margin-top: 5px;
4403 margin-bottom: 5px;
4404 }
4405 }
4406
4407 img {
4408 width: 100%;
4409 }
4410
4411 a:hover {
4412 text-decoration: underline;
4413 }
4414
4415 .popular,
4416 .recommended {
4417 position: absolute;
4418 background-color: green;
4419 color: white;
4420 padding: 10px 15px;
4421 font-weight: 700;
4422 text-transform: uppercase;
4423 }
4424
4425 }
4426
4427 }
4428
4429 }
4430
4431 .charitable-recommended-addons {
4432 .the-list ul li {
4433 padding-top: 0;
4434 padding: 0;
4435 }
4436 .charitable-toggle-container {
4437 padding: 26px 26px;
4438 }
4439 }
4440
4441 .charitable-title-card-content {
4442 .button-wrap {
4443 margin: 20px 0 0 0;
4444 display: flex;
4445 flex-direction: row;
4446 justify-content: space-between;
4447 }
4448 }
4449
4450 .progress-bar {
4451 height: 4px;
4452 background-color: #F5F5F5;
4453 border-radius: 0;
4454 border: 0;
4455
4456 .progress {
4457 height: 4px;
4458 background-color: #5AA152;
4459 }
4460 }
4461
4462 .charitable-toggle .charitable-angle-right {
4463 rotate: -90deg;
4464 }
4465
4466 .badge {
4467
4468 &.completed {
4469 color: #50A66A;
4470 }
4471
4472 &.pending {
4473 color: #E38632;
4474 }
4475
4476 &.active {
4477 color: #50A66A;
4478 }
4479
4480 &.recurring {
4481 color: #50A66A;
4482 }
4483
4484 &.one-time {
4485 color: #EAA465;
4486 }
4487
4488 &.paid,
4489 &.charitable-completed {
4490 color: #50A66A;
4491 }
4492
4493 &.cancelled {
4494 color: #CE3E4E;
4495 }
4496
4497 &.draft {
4498 color: #ccc;
4499 }
4500
4501 }
4502
4503 .no-items {
4504 text-align: center;
4505 font-size: 17px;
4506 line-height: 22px;
4507 margin: 50px auto;
4508
4509 strong {
4510 font-weight: 600;
4511
4512 }
4513
4514 p {
4515 font-size: 17px;
4516 line-height: 22px;
4517 margin: 12px auto;
4518
4519 &.link {
4520 font-size: 14px;
4521 line-height: 14px;
4522 display: table;
4523
4524 a {
4525 font-weight: 600;
4526 font-size: 14px;
4527 line-height: 14px;
4528 text-decoration: none;
4529
4530 img {
4531 margin-left: 10px;
4532 margin-top: -2px;
4533 float: right;
4534 display: block;
4535 }
4536 }
4537 }
4538 }
4539 }
4540 #charitable-wpcode-snippets-list {
4541 width: 100%;
4542 .no-items {
4543 margin: 35px auto 10px auto;
4544 p.link {
4545 text-align: left;
4546 margin: 0 auto 0 0;
4547 }
4548 }
4549 }
4550
4551 }
4552
4553 /* pagination */
4554
4555 nav.charitable-reports-pagination-nav {
4556 margin: 0 0 9px;
4557
4558 div.total-count {
4559 float: left;
4560 }
4561
4562 ul {
4563 float: right;
4564 margin: 0;
4565
4566 li {
4567 font-size: 13px;
4568 line-height: 30px;
4569 display: inline-block;
4570
4571 text-decoration: none;
4572 vertical-align: baseline;
4573 min-width: 30px;
4574 min-height: 30px;
4575 margin: 0;
4576 padding: 0 4px;
4577
4578 text-align: center;
4579
4580 color: #a7aaad !important;
4581 border-color: #dcdcde !important;
4582 background: #f6f7f7 !important;
4583 box-shadow: none !important;
4584 cursor: default;
4585 transform: none !important;
4586
4587 a {
4588 display: inline-block;
4589 line-height: 30px;
4590 text-decoration: none;
4591 vertical-align: baseline;
4592 min-width: 30px;
4593 min-height: 30px;
4594 margin: 0;
4595 padding: 0 4px;
4596
4597 text-align: center;
4598 color: #2271b1;
4599 border-color: #2271b1;
4600 background: #f6f7f7;
4601
4602 cursor: pointer;
4603 border-width: 1px;
4604 border-style: solid;
4605 -webkit-appearance: none;
4606 border-radius: 3px;
4607 white-space: nowrap;
4608 box-sizing: border-box;
4609 }
4610
4611 div.charitable-inactive {}
4612
4613 span {
4614 text-align: center;
4615 display: inline-block;
4616 }
4617 }
4618 }
4619 }
4620
4621 /* UI - Checkboxes */
4622
4623 .charitable-admin-ui {
4624 &.charitable-admin-ui-field {
4625 &.charitable-admin-ui-toggle {
4626 margin-top: -8px;
4627 }
4628 }
4629 }
4630
4631 /* pointer */
4632
4633 .wp-pointer-buttons {
4634 .charitable-pointer-buttons {
4635 display: table;
4636 width: 100%;
4637 margin: 0 0 0 auto;
4638
4639 a {
4640 &.close {
4641 margin: 4px 0 0 25px;
4642 }
4643
4644 &.button.button-primary {
4645 background: #2271b1;
4646 border-color: #2271b1;
4647 color: #fff;
4648 text-decoration: none;
4649 text-shadow: none;
4650 font-size: 13px;
4651 line-height: 2.15384615;
4652 min-height: 30px;
4653 margin: 0;
4654 padding: 0 10px;
4655 cursor: pointer;
4656 border-width: 1px;
4657 border-style: solid;
4658 -webkit-appearance: none;
4659 border-radius: 3px;
4660 white-space: nowrap;
4661 box-sizing: border-box;
4662 }
4663 }
4664
4665 a.button-visit {
4666 float: left;
4667 }
4668 }
4669 }
4670
4671 .charitable-disabled {
4672 cursor: default;
4673 opacity: .5;
4674 pointer-events: none;
4675 }
4676
4677 .charitable-headline-reports,
4678 .charitable-restricted {
4679 position: relative;
4680 }
4681
4682 .restricted-access-overlay {
4683 position: absolute;
4684 display: flex;
4685 justify-content: center;
4686 inset: 1px;
4687 background-color: hsla(0, 0%, 100%, .35);
4688 -webkit-backdrop-filter: blur(2px);
4689 backdrop-filter: blur(2px);
4690 z-index: 99;
4691 }
4692
4693 /* notifications AM START */
4694
4695 body {
4696 &.modal-open {
4697 overflow: hidden;
4698 }
4699 }
4700
4701 .charitable-menu-notification-indicator {
4702 margin: 6px 0 0;
4703 width: 8px;
4704 height: 8px;
4705 border-radius: 50%;
4706 background-color: #d63638;
4707 line-height: 1.6;
4708 animation: wpchar-menu-notification-indicator-pulse 1.5s infinite;
4709 float: right;
4710 }
4711 [dir="ltr"]="ltr""] #toplevel_page_charitable .charitable-menu-notification-indicator {
4712 float: right;
4713 }
4714 [dir="rtl"]="rtl""] #toplevel_page_charitable .charitable-menu-notification-indicator {
4715 float: left;
4716 }
4717
4718 @keyframes wpchar-menu-notification-indicator-pulse {
4719 0% {
4720 transform: scale(0.95);
4721 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
4722 }
4723
4724 70% {
4725 transform: scale(1);
4726 box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
4727 }
4728
4729 100% {
4730 transform: scale(0.95);
4731 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
4732 }
4733 }
4734
4735 // .charitable-help {
4736 // display: block;
4737 // position: fixed;
4738 // top: 0;
4739 // bottom: 0;
4740 // left: 0;
4741 // right: 0;
4742 // height: 100%;
4743 // width: 100vw;
4744 // background-color: #fff;
4745 // color: #141b38;
4746 // opacity: 0;
4747 // max-height: 100vh;
4748 // overflow-y: auto;
4749 // transition: opacity 0.3s ease-in 0s;
4750 // z-index: -999;
4751
4752 // &.visible {
4753 // opacity: 1;
4754 // z-index: 100000;
4755 // }
4756
4757 // .charitable-help-header {
4758 // background: #fff;
4759 // width: 100%;
4760 // height: 60px;
4761 // z-index: 1;
4762 // padding: 20px;
4763 // display: flex;
4764
4765 // >.logo {
4766 // flex: 1;
4767 // }
4768 // }
4769
4770 // .charitable-help-docs {
4771 // margin-bottom: 25px;
4772 // display: none;
4773
4774 // li {
4775 // margin: 0;
4776
4777 // [dir=ltr] & {
4778 // padding: 0 0 14px 4px;
4779 // }
4780
4781 // [dir=rtl] & {
4782 // padding: 0 4px 14px 0;
4783 // }
4784 // }
4785
4786 // .charitable-help-docs-viewall {
4787 // margin: 10px 0 0;
4788 // }
4789
4790 // .charitable-help-additional-docs {
4791 // display: none;
4792
4793 // &.opened {
4794 // display: block;
4795 // }
4796 // }
4797
4798 // .icon {
4799 // .charitable-description {
4800 // width: 20px;
4801 // margin-top: 0;
4802 // position: relative;
4803 // top: 5px;
4804 // color: #8c8f9a;
4805
4806 // [dir=ltr] & {
4807 // left: -5px;
4808 // }
4809
4810 // [dir=rtl] & {
4811 // right: -5px;
4812 // }
4813 // }
4814 // }
4815 // }
4816
4817 // .help-content {
4818 // background-color: #fff;
4819 // width: 100%;
4820 // max-width: 740px;
4821 // margin: 0 auto 50px;
4822 // padding: 0 20px;
4823 // box-sizing: border-box;
4824 // z-index: 1;
4825
4826 // .charitable-help-category {
4827 // border-top: 1px solid #e8e8eb;
4828 // margin: 0;
4829
4830 // &:last-child {
4831 // border-bottom: 1px solid #e8e8eb;
4832 // }
4833
4834 // header {
4835 // display: block;
4836 // position: relative;
4837 // cursor: pointer;
4838 // width: 100%;
4839 // height: 68px;
4840
4841 // .title {
4842 // display: block;
4843 // font-size: 16px;
4844 // color: #141b38;
4845 // font-weight: 600;
4846
4847 // [dir=ltr] & {
4848 // padding: 23px 11px 23px 30px;
4849 // }
4850
4851 // [dir=rtl] & {
4852 // padding: 23px 30px 23px 11px;
4853 // }
4854 // }
4855 // }
4856
4857 // .folder-open {
4858 // position: absolute;
4859 // top: 24px;
4860 // width: 20px;
4861 // height: 20px;
4862 // color: #141b38;
4863 // }
4864
4865 // .dashicons-arrow-right-alt2 {
4866 // position: absolute;
4867 // top: 20px;
4868 // transition: transform 0.3s ease-out;
4869
4870 // [dir=ltr] & {
4871 // right: 0;
4872 // }
4873
4874 // [dir=rtl] & {
4875 // left: 0;
4876 // }
4877 // }
4878
4879 // &.opened {
4880 // .charitable-help-docs {
4881 // display: block;
4882 // }
4883
4884 // [dir=ltr] .dashicons-arrow-right-alt2 {
4885 // transform: rotate(90deg);
4886 // }
4887
4888 // [dir=rtl] .dashicons-arrow-right-alt2 {
4889 // transform: rotate(-90deg);
4890 // }
4891 // }
4892 // }
4893
4894 // #charitable-help-search {
4895 // position: relative;
4896 // background-color: #fff;
4897 // text-align: center;
4898 // top: 0;
4899 // padding: 20px 0 50px;
4900 // }
4901
4902 // #charitable-help-result {
4903 // .charitable-help-docs {
4904 // display: block;
4905 // }
4906 // }
4907
4908 // #charitable-help-footer {
4909 // display: flex;
4910 // flex-wrap: nowrap;
4911 // justify-content: space-between;
4912 // align-items: center;
4913 // margin: 50px 0 0;
4914
4915 // .charitable-help-footer-block {
4916 // box-sizing: border-box;
4917 // max-width: 325px;
4918 // border: 1px solid #8c8f9a;
4919 // border-radius: 6px;
4920 // text-align: center;
4921
4922 // a {
4923 // display: block;
4924 // padding: 25px;
4925 // text-decoration: none;
4926 // color: #141b38;
4927
4928 // h3 {
4929 // color: #141b38;
4930 // }
4931
4932 // span {
4933 // font-size: 16px;
4934 // color: #E38632;
4935 // text-decoration: underline;
4936
4937 // &:hover {
4938 // text-decoration: none;
4939 // }
4940 // }
4941 // }
4942
4943 // [dir=ltr] & {
4944 // margin-right: 20px;
4945 // }
4946
4947 // [dir=rtl] & {
4948 // margin-left: 20px;
4949 // }
4950
4951 // @media screen and (max-width: 750px) {
4952 // max-width: 100%;
4953
4954 // &:first-child {
4955 // margin: 0 0 20px;
4956 // }
4957 // }
4958 // }
4959 // }
4960
4961 // #charitable-help-logo {
4962 // width: 132px;
4963 // height: 26px;
4964 // z-index: 2;
4965 // }
4966
4967 // #charitable-help-close {
4968 // color: #141b38;
4969 // width: 20px;
4970 // height: 20px;
4971 // cursor: pointer;
4972 // opacity: .7;
4973 // transition: all .05s;
4974 // z-index: 2;
4975
4976 // @media screen and (max-width: 750px) {
4977 // top: 20px;
4978
4979 // [dir=ltr] & {
4980 // right: 20px;
4981 // }
4982
4983 // [dir=rtl] & {
4984 // left: 20px;
4985 // }
4986 // }
4987 // }
4988 // }
4989 // }
4990
4991 .charitable-notification {
4992 margin-bottom: 20px;
4993 &:last-child {
4994 margin-bottom: 0;
4995 }
4996
4997 > div {
4998 display: flex;
4999 align-items: flex-start;
5000 padding-bottom: 10px;
5001 border-bottom: 1px solid #e8e8eb;
5002 &:last-child {
5003 padding-bottom: 0;
5004 border-bottom: 0;
5005 margin-bottom: 0;
5006 }
5007
5008 .body {
5009 font-size: 14px;
5010 line-height: 22px;
5011 flex: 1;
5012
5013 .title {
5014 font-size: 14px;
5015 font-weight: 600;
5016 color: #141b38;
5017 margin-bottom: 9px;
5018 display: flex;
5019 align-items: left;
5020 flex-direction: column;
5021
5022 &.dashboard-title {
5023 flex-direction: row;
5024 }
5025
5026 div:first-child {
5027 flex: 1;
5028 line-height: 22px;
5029
5030 [dir=ltr]=ltr] & {
5031 margin-right: 5px;
5032 }
5033
5034 [dir=rtl]=rtl] & {
5035 margin-left: 5px;
5036 }
5037 }
5038 .date {
5039 font-weight:initial;
5040 color:#8c8f9a;
5041 font-size:12px
5042 }
5043 }
5044
5045 .notification-content {
5046 margin-bottom: 12px;
5047 max-width: calc( 100% - 110px );
5048
5049 img {
5050 max-width: 100%;
5051 }
5052 }
5053
5054 .actions {
5055 flex-wrap: wrap;
5056 display: flex;
5057 align-items: baseline;
5058 [dir='rtl']='rtl'] & {
5059 flex-direction: row-reverse;
5060 justify-content: right;
5061 }
5062
5063 >* {
5064 margin-bottom: 12px;
5065 }
5066
5067 .charitable-button {
5068 [dir=ltr]=ltr] & {
5069 margin-right: 20px;
5070 }
5071
5072 [dir=rtl]=rtl] & {
5073 margin-left: 20px;
5074 }
5075 }
5076
5077 .dismiss {
5078 color: #8c8f9a;
5079 font-size: 13px;
5080 margin-top: 0;
5081 margin-bottom: 0;
5082 }
5083 }
5084 }
5085
5086 .icon {
5087 margin-right: 14px;
5088
5089 [dir=ltr]=ltr] & {
5090 margin-right: 14px;
5091 }
5092
5093 [dir=rtl]=rtl] & {
5094 margin-left: 14px;
5095 }
5096
5097 svg {
5098 width: 25px;
5099 height: 25px;
5100 color: #00aa63;
5101
5102 &.warning {
5103 color: #f18200;
5104 }
5105
5106 &.info {
5107 color: #E38632;
5108 }
5109
5110 &.success {
5111 color: #00aa63;
5112 }
5113
5114 &.error {
5115 color: #df2a4a;
5116 }
5117 }
5118 }
5119 }
5120 .actions {
5121 display: flex;
5122 justify-content: left;
5123 align-items: center;
5124 margin-top: 5px;
5125 .dismiss {
5126 margin-left: 10px;
5127 text-decoration: none;
5128 font-size: 12px;
5129 line-height: 14px;
5130 text-decoration: underline;
5131 &:hover {
5132 color: #8c8f9a;
5133 }
5134 }
5135 }
5136 .charitable-notifications-buttons {
5137 display: flex;
5138 justify-content: space-between;
5139 margin-top: 5px;
5140 }
5141 .button {
5142 &.button-primary {
5143 padding: 3px 15px !important;
5144 border-radius: 5px !important;
5145 font-size: 13px !important;
5146 line-height: 2.15 !important;
5147 background-color: #E38632;
5148 color: #fff;
5149 border-color: #E38632;
5150 &:hover {
5151 padding: 3px 16px;
5152 border-radius: 5px;
5153 background-color: #E38632;
5154 border-color: #E38632;
5155 /* filter darker */
5156 filter: brightness(0.9);
5157
5158 }
5159 }
5160 &.button-secondary {
5161 padding: 3px 15px !important;
5162 border-radius: 5px !important;
5163 font-size: 13px !important;
5164 line-height: 2.15 !important;
5165 margin-left: 15px;
5166 background-color: #F9F9FA;
5167 color: #52545F;
5168 border-color: #E4E4E7;
5169 &:hover {
5170 padding: 3px 16px;
5171 border-radius: 5px;
5172 background-color: #F9F9FA;
5173 border-color: #E4E4E7;
5174 /* filter darker */
5175 filter: brightness(0.9);
5176 }
5177 }
5178 }
5179 }
5180 .charitable-notification-cards {
5181 display: none;
5182 &.notification-cards-visible {
5183 display: block;
5184 }
5185 .charitable-notification {
5186 &:last-child>div {
5187 border-bottom: none;
5188 margin-bottom: none;
5189 }
5190 }
5191
5192 .no-notifications {
5193 display: flex;
5194 align-items: center;
5195 flex-direction: column;
5196 font-size: 14px;
5197 line-height: 22px;
5198 color: #8c8f9a;
5199
5200 img {
5201 width: 30%;
5202 max-width: 108px;
5203 height: auto;
5204 }
5205
5206 .great-scott {
5207 margin: 20px 0 8px;
5208 font-size: 18px;
5209 font-weight: 600;
5210 color: #434960;
5211 }
5212
5213 .no-new-notifications {
5214 margin-bottom: 20px;
5215 }
5216
5217 @media (min-height: 500px) {
5218 padding-top: 100px;
5219 }
5220 }
5221 }
5222
5223 body.charitable-show-notifications {
5224 .charitable-main {
5225 pointer-events: none;
5226 -webkit-user-select: none;
5227 user-select: none;
5228 }
5229 }
5230
5231 .charitable-plugin-notifications {
5232 margin-top: 32px;
5233 position: fixed;
5234 top: 0;
5235 z-index: 999992;
5236 width: 570px; /*modify this value to fit your needs*/
5237 right: -570px;
5238 /*css transition*/
5239 -webkit-transition: right 500ms ease-out;
5240 -moz-transition: right 500ms ease-out;
5241 -o-transition: right 500ms ease-out;
5242 transition: right 500ms ease-out;
5243 &.in {
5244 right: 0;
5245 }
5246
5247 /* override for right-to-left languages */
5248 [dir=rtl]=rtl] & {
5249 left: -570px;
5250 /*css transition*/
5251 -webkit-transition: left 500ms ease-out;
5252 -moz-transition: left 500ms ease-out;
5253 -o-transition: left 500ms ease-out;
5254 transition: left 500ms ease-out;
5255 &.in {
5256 left: 0;
5257 }
5258 }
5259
5260 [dir=ltr]=ltr] & {
5261
5262 }
5263
5264 a.dismiss {
5265 color: #8c8f9a;
5266 font-size: 13px;
5267 margin-top: 0;
5268 margin-bottom: 0;
5269 }
5270
5271 .charitable-button {
5272 border-radius: 5px;
5273 font-family: "Inter",sans-serif;
5274 font-weight: 600;
5275 font-size: 14px;
5276 line-height: 14px;
5277 padding: 15px 20px;
5278 text-transform: capitalize;
5279 text-decoration: none;
5280
5281 display: inline-block;
5282 cursor: pointer;
5283 min-height: 30px;
5284 border-width: 1px;
5285 border-style: solid;
5286 -webkit-appearance: none;
5287 border-radius: 3px;
5288 white-space: nowrap;
5289 box-sizing: border-box;
5290 color: white;
5291 &.charitable-button-green {
5292 background-color: #00aa63;
5293 }
5294 &.charitable-button-orange {
5295 background-color: #e27730;
5296 }
5297 }
5298
5299 .notification-menu {
5300 display: flex;
5301 flex-direction: column;
5302 height: calc(100% - var(--wp-admin--admin-bar--height, 32px));
5303 width: 100%;
5304 max-width: 570px;
5305 position: fixed;
5306 z-index: 1053;
5307 top: 32px;
5308 bottom: 0;
5309 background-color: white;
5310 overflow-x: hidden;
5311 transition: 0.5s;
5312
5313 .notification-header {
5314 height: 64px;
5315 display: flex;
5316 align-items: center;
5317 padding: 0 20px;
5318 color: #fff;
5319 background-color: #E38632;
5320
5321 .new-notifications,
5322 .old-notifications {
5323 font-size: 18px;
5324 font-weight: 600;
5325 display: none;
5326 }
5327
5328 .notifications-visible {
5329 display: block;
5330 }
5331
5332 .dismissed-notifications {
5333 flex: 1 1 auto;
5334 margin-left: 25px;
5335
5336 [dir=ltr]=ltr] & {
5337 margin-left: 25px;
5338 }
5339
5340 [dir=rtl]=rtl] & {
5341 margin-right: 25px;
5342 }
5343
5344 a {
5345 font-size: 12px;
5346 color: #fff;
5347 &:focus {
5348 border: 0;
5349 box-shadow: none;
5350 }
5351 }
5352 }
5353
5354 svg.charitable-close {
5355 width: 14px;
5356 height: 14px;
5357 cursor: pointer;
5358
5359 &:hover {
5360 color: #ccc;
5361 }
5362 }
5363 }
5364
5365 .notification-cards {
5366 flex: 1;
5367 padding: 24px;
5368 overflow: auto;
5369 }
5370
5371 .notification-footer {
5372 /* height: 90px; */
5373 padding: 24px;
5374 display: flex;
5375 align-items: center;
5376
5377 div.pagination {
5378 flex: 1;
5379 display: flex;
5380 align-items: center;
5381
5382 .page-number {
5383 font-size: 13px;
5384 color: #141b38;
5385 background: #e8e8eb;
5386 height: 30px;
5387 width: 30px;
5388 display: flex;
5389 align-items: center;
5390 justify-content: center;
5391 border-radius: 2px;
5392 cursor: pointer;
5393
5394 &.active,
5395 &:hover {
5396 color: #fff;
5397 background-color: #E38632;
5398 }
5399
5400 [dir=ltr]=ltr] & {
5401 margin-right: 4px;
5402
5403 &:last-child {
5404 margin-right: 0;
5405 }
5406 }
5407
5408 [dir=rtl]=rtl] & {
5409 margin-left: 4px;
5410
5411 &:last-child {
5412 margin-left: 0;
5413 }
5414 }
5415 }
5416 }
5417 }
5418 }
5419
5420 .charitable-notifications-overlay {
5421 display: none;
5422 position: fixed;
5423 z-index: 998;
5424 top: 32px;
5425 bottom: 0;
5426 background-color: #141b38;
5427 opacity: .5;
5428 transition: .5s;
5429 cursor: pointer;
5430 right: 0;
5431 left: 160px;
5432
5433 [dir=ltr]=ltr] & {
5434 right: 0;
5435 left: 160px;
5436 }
5437
5438 [dir=rtl]=rtl] & {
5439 left: 0;
5440 right: 160px;
5441 }
5442 }
5443
5444 .notifications-fade-enter-active,
5445 .notifications-fade-leave-active {
5446 transition: opacity .5s;
5447 }
5448
5449 .notifications-fade-enter-from,
5450 .notifications-fade-leave-to {
5451 opacity: 0;
5452 }
5453
5454 .notifications-slide-enter-active,
5455 .notifications-slide-leave-active {
5456 transition: all .5s ease-in-out;
5457 }
5458
5459 [dir=ltr]=ltr] .notifications-slide-enter-from,
5460 [dir=ltr]=ltr] .notifications-slide-leave-to {
5461 right: -570px;
5462 }
5463
5464 [dir=rtl]=rtl] .notifications-slide-enter-from,
5465 [dir=rtl]=rtl] .notifications-slide-leave-to {
5466 left: -570px;
5467 }
5468 }
5469
5470 /* for print */
5471 @media print {
5472 .charitable-plugin-notifications {
5473 display: none;
5474 }
5475 }
5476
5477 /* notifications AM END */
5478
5479 /* notifications */
5480
5481 .charitable-dashboard-notifications {
5482 background-color: white;
5483 box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
5484 border-radius: 4px;
5485 position: relative;
5486
5487 .charitable-dashboard-notification {
5488 padding: 10px;
5489 display: flex;
5490 justify-content: left;
5491 background-color: #f18500;
5492 text-align: left;
5493 align-items: center;
5494
5495 .charitable-dashboard-notification-icon {
5496 margin: 0 10px 0 10px;
5497 width: 18px;
5498 height: 18px;
5499 }
5500
5501 h4.charitable-dashboard-notification-headline {
5502 display: none;
5503 }
5504 p:first-of-type {
5505 margin-top: 0;
5506 }
5507 }
5508
5509 .charitable-dashboard-notification-bar {
5510 position: absolute;
5511 right: 0px;
5512 top: 0px;
5513 display: flex;
5514 justify-content: space-between;
5515 align-items: center;
5516
5517 .charitable-dashboard-notification-navigation {
5518 position: relative;
5519 right: 20px;
5520 top: -14px;
5521 padding: 0px;
5522 display: flex;
5523 justify-content: space-between;
5524 align-items: center;
5525 min-height: 45px;
5526
5527 a {
5528 cursor: pointer;
5529 color:black;
5530 text-decoration: none;
5531 font-weight: 200;
5532 font-size: 32px;
5533 line-height: 32px;
5534 display: inline-block;
5535 opacity: 0.3;
5536 padding: 0px 4px;
5537 position: relative;
5538 top: 1px;
5539 border-radius: 5px;
5540 background-color: transparent;
5541 }
5542
5543 a:hover {
5544 opacity: 0.5;
5545 }
5546
5547 .charitable-dashboard-notification-counter {
5548 font-size: 13px;
5549 color: #666;
5550 white-space: nowrap;
5551 padding: 0 4px;
5552 line-height: 32px;
5553 }
5554 }
5555
5556 .charitable-remove-dashboard-notification {
5557 position: relative;
5558 right: 5px;
5559 top: -10px;
5560 font-size: 14px;
5561 line-height: 14px;
5562 width: 18px;
5563 height: 18px;
5564 text-decoration: none;
5565 opacity: .3;
5566 background-image: url(../../images/onboarding/checklist/times-circle-regular.svg);
5567 color: white;
5568 background-color: white;
5569 -webkit-mask-image: url(../../images/onboarding/checklist/times-circle-regular.svg);
5570 mask-image: url(../../images/onboarding/checklist/times-circle-regular.svg);
5571
5572 &:hover {
5573 opacity: 0.5;
5574 }
5575 }
5576 }
5577 .charitable-dashboard-notification {
5578 background-color: white;
5579 border: 1px solid #c3c4c7;
5580 border-left-width: 4px;
5581 padding: 0;
5582 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
5583 border-radius: 4px;
5584 border-left-color: #72aee6;
5585 &.charitable-notification-type-notice {
5586 border-left-color: #72aee6;
5587 }
5588 &.charitable-notification-type-important {
5589 border-left-color: #EAA465;
5590 }
5591 }
5592 .charitable-dashboard-notification-message {
5593 padding: 20px;
5594
5595 h5:first-of-type {
5596 font-size: 18px;
5597 line-height: 21px;
5598 margin: 0 0 10px 0;
5599 padding: 0;
5600 }
5601 p:first-child {
5602 margin-top: 2px;
5603 }
5604 p:last-child {
5605 margin-bottom: 2px;
5606 }
5607 ul, ol {
5608 margin-top: 5px;
5609 }
5610 }
5611
5612 ul {
5613 margin: 0 0 0 20px;
5614 padding: 0;
5615 list-style-type: disc;
5616 }
5617
5618 .charitable-dashboard-notification[data-notification-type="notice"]="notice""] {
5619 header {
5620 background-color: #0054f1;
5621 }
5622 }
5623
5624 }
5625
5626 /* gutenberg */
5627
5628 .interface-interface-skeleton__sidebar {
5629 .wpchar-gutenberg-panel-notice {
5630 background-color: #f0f6fc;
5631 border-left: solid 4px #017cba;
5632 color: #1e1e1e;
5633 padding: 12px 12px 12px 16px;
5634 margin-bottom: 0;
5635
5636 strong {
5637 display: block;
5638 }
5639
5640 a {
5641 display: block;
5642 }
5643
5644 &.wpchar-warning {
5645 background-color: #fef8ee;
5646 border-left-color: #efb84a;
5647 margin-bottom: 12px;
5648 }
5649 }
5650 }
5651
5652 .editor-styles-wrapper .block-editor-block-list__layout {
5653 .wp-block-charitable-campaigns-block .charitable-logo,
5654 .wp-block-charitable-donations-block .charitable-logo,
5655 .wp-block-charitable-donors-block .charitable-logo,
5656 .wp-block-charitable-campaign-progress-bar .charitable-logo,
5657 .wp-block-charitable-donation-button .charitable-logo,
5658 .wp-block-charitable-campaign-stats .charitable-logo,
5659 .wp-block-charitable-my-donations .charitable-logo {
5660 max-width: 255px !important;
5661 margin-bottom: 10px !important;
5662 padding-bottom: 10px !important;
5663 border-bottom: 1px solid #e8e8eb;
5664 }
5665 .wp-block-charitable-campaigns-block p,
5666 .wp-block-charitable-donations-block p,
5667 .wp-block-charitable-donors-block p,
5668 .wp-block-charitable-campaign-progress-bar p,
5669 .wp-block-charitable-donation-button p,
5670 .wp-block-charitable-campaign-stats p,
5671 .wp-block-charitable-my-donations p {
5672 margin-top: 2px !important;
5673 margin-bottom: 2px !important;
5674 }
5675 }
5676
5677 /* post new donation */
5678
5679 body.post-type-donation.charitable-admin-donation-edit {
5680 #post-body {
5681 select {}
5682
5683 input[type="text"]="text""],
5684 input[type="email"]="email""],
5685 input[type="number"]="number""],
5686 input[type="password"]="password""],
5687 input[type="search"]="search""],
5688 input[type="tel"]="tel""],
5689 input[type="url"]="url""] {
5690 padding: 8px 10px;
5691 }
5692 }
5693
5694 #donation-form-meta {
5695 padding-top: 0;
5696 }
5697
5698 #postbox-container-2 {
5699 .postbox-header {
5700 display: none;
5701 }
5702 }
5703
5704 }
5705
5706 #charitable-reports .charitable-report-table-container {
5707 position: relative;
5708
5709 .reports-lite-cta {
5710 z-index: 999;
5711 position: absolute;
5712 top: 25%;
5713 left: 0;
5714 right: 0;
5715 margin: 25px;
5716 }
5717 }
5718
5719 @media screen and (max-width: 1200px) {
5720
5721 body.charitable_page_charitable-reports,
5722 body.charitable_page_charitable-dashboard {
5723 .charitable-cards {
5724 .charitable-card {
5725 padding-top: 30px;
5726 padding-bottom: 30px;
5727
5728 strong {
5729 font-size: 24px;
5730 line-height: 24px;
5731 }
5732 }
5733 }
5734 }
5735 }
5736
5737 @media screen and (max-width: 1000px) {
5738
5739 body.charitable_page_charitable-reports,
5740 body.charitable_page_charitable-dashboard {
5741 .charitable-cards {
5742 grid-template-columns: repeat(2, 1fr);
5743
5744 .charitable-card {
5745 strong {
5746 font-size: 42px;
5747 line-height: 44px;
5748 }
5749 }
5750 }
5751 }
5752 }
5753
5754 @media screen and (max-width: 800px) {
5755
5756 body.charitable_page_charitable-reports,
5757 body.charitable_page_charitable-dashboard {
5758 .charitable-cards {
5759 grid-template-columns: repeat(2, 1fr);
5760
5761 .charitable-card {
5762 strong {
5763 font-size: 24px;
5764 line-height: 24px;
5765 }
5766 }
5767 }
5768
5769 .charitable-section-grid {
5770 grid-template-columns: repeat(1, 1fr);
5771 }
5772
5773 .charitable-section-grid.one-third {
5774 display: grid;
5775
5776 .charitable-top-campaigns-report {
5777 width: 100%;
5778 }
5779
5780 .charitable-payment-methods-report {
5781 width: 100%;
5782 }
5783 }
5784
5785 .charitable-section-flexible {
5786 columns: 1;
5787 column-gap: 0;
5788 display: block;
5789 }
5790 }
5791
5792 #charitable-reports .charitable-report-table-container {
5793 table.wp-list-table {
5794
5795 th,
5796 td {
5797 white-space: nowrap;
5798 overflow: hidden;
5799 text-overflow: ellipsis;
5800 }
5801
5802 th.charitable-avatar,
5803 td.charitable-avatar {
5804 display: none;
5805 width: 1px;
5806 }
5807
5808 td.manage-column.column-actions,
5809 th.manage-column.column-actions {
5810 width: 30px;
5811 }
5812 }
5813 }
5814 }
5815
5816 @media screen and (max-width: 700px) {
5817
5818 body.charitable_page_charitable-reports,
5819 body.charitable_page_charitable-dashboard {
5820 .charitable-cards {
5821 grid-template-columns: repeat(2, 1fr);
5822
5823 .charitable-card {
5824 strong {
5825 font-size: 24px;
5826 line-height: 24px;
5827 }
5828 }
5829 }
5830
5831 .charitable-section-grid {
5832 grid-template-columns: repeat(1, 1fr);
5833 }
5834
5835 .charitable-section-grid.one-third {
5836 display: grid;
5837
5838 .charitable-top-campaigns-report {
5839 width: 100%;
5840 }
5841
5842 .charitable-payment-methods-report {
5843 width: 100%;
5844 }
5845 }
5846
5847 .charitable-section-flexible {
5848 columns: 1;
5849 column-gap: 0;
5850 display: block;
5851 }
5852 }
5853 }
5854
5855
5856
5857 body.charitable_page_charitable-settings {
5858 .charitable-education-page {
5859 .charitable-settings-heading-pro {
5860 h4 {
5861 margin-top: 40px;
5862 }
5863 }
5864 }
5865 }
5866 .charitable-education-page {
5867 max-width: 1000px;
5868 margin-bottom: 30px;
5869 padding: 0;
5870 .charitable-education-page-heading,
5871 .charitable-settings-heading-pro {
5872 h4 {
5873 font-size: 20px;
5874 font-weight: 600;
5875 margin: 20px 0 6px 0;
5876 line-height: 20px;
5877 &:after {
5878 background-color: #F99E36;
5879 color: white;
5880 content: "Pro";
5881 padding: 3px 7px;
5882 font-size: 9px;
5883 line-height: 9px;
5884 text-transform: uppercase;
5885 font-weight: 600;
5886 margin-left: 5px;
5887 margin-right: 5px;
5888 margin-top: 0;
5889 position: relative;
5890 top: -3px;
5891 }
5892 }
5893 }
5894 .charitable-education-page-images {
5895 display: flex;
5896 gap: 25px;
5897 margin: 25px 0px;
5898 figure {
5899 margin: 0;
5900 }
5901 figcaption {
5902 font-style: normal;
5903 font-weight: 400;
5904 font-size: 14px;
5905 line-height: 17px;
5906 text-align: center;
5907 color: rgb(119, 119, 119);
5908 margin-top: 10px;
5909 }
5910 .charitable-education-page-images-image {
5911 display: inline-block;
5912 position: relative;
5913 background-color: rgb(255, 255, 255);
5914 box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px 0px;
5915 padding: 5px;
5916 border-radius: 3px;
5917 img {
5918 max-width: 100%;
5919 display: block;
5920 }
5921
5922 .hover {
5923 position: absolute;
5924 opacity: 0;
5925 height: calc(100% - 10px);
5926 width: calc(100% - 10px);
5927 top: 0;
5928 left: 0;
5929 border: 5px solid #ffffff;
5930 background-color: rgba(0, 0, 0, 0.15);
5931 background-image: url(../../images/pro/icons/zoom.svg);
5932 background-repeat: no-repeat;
5933 background-position: center;
5934 background-size: 50px;
5935 transition: all 0.3s;
5936 box-sizing: initial;
5937 }
5938
5939 &:hover {
5940 .hover {
5941 opacity: 1;
5942 transition: all 0.3s;
5943 }
5944 }
5945 }
5946 }
5947 .charitable-education-page-caps {
5948 max-width: 986px;
5949 box-sizing: content-box;
5950 box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
5951 background: rgb(255, 255, 255);
5952 border-radius: 6px;
5953 padding: 20px 20px 0 20px;
5954 overflow: auto;
5955 p {
5956 font-weight: 600;
5957 font-size: 16px;
5958 line-height: 23px;
5959 color: #32373c;
5960 margin-bottom: 20px;
5961 margin-top: 0;
5962 }
5963 ul {
5964 display: flex;
5965 flex-wrap: wrap;
5966 margin: 0;
5967 li {
5968 flex: 0 0 calc(33.333% - 40px);
5969 font-weight: 400;
5970 font-size: 14px;
5971 line-height: 20px;
5972 color: rgb(80, 87, 94);
5973 margin-bottom: 20px;
5974 position: relative;
5975 padding-left: 20px;
5976 padding-right: 20px;
5977 i {
5978 margin-right: 10px;
5979 position: absolute;
5980 top: 2px;
5981 left: 0;
5982 }
5983 }
5984 }
5985 }
5986 .charitable-education-page-button {
5987 margin-top: 25px;
5988 a {
5989 font-size: 16px;
5990 font-weight: 600;
5991 padding: 16px 28px !important;
5992 background-color: #5AA152 !important;
5993 color: #ffffff !important;
5994 &:hover {
5995 /* background color darker */
5996 background-color: #4a8742 !important;
5997 }
5998 }
5999 }
6000 .charitable-education-page-disabled-download {
6001 margin-top: 25px;
6002 p {
6003 font-size: 16px;
6004 font-weight: 600;
6005 color: #d63638;
6006 }
6007 }
6008 }
6009
6010 /* Footer Promotion Styles */
6011
6012 body.charitable-admin-promotion-footer #wpbody {
6013 padding-bottom: 150px !important;
6014 }
6015
6016 #wpfooter {
6017 .charitable-footer-promotion {
6018 text-align: center;
6019 font-weight: 400;
6020 font-size: 13px;
6021 line-height: normal;
6022 color: #646970;
6023 padding: 30px 0;
6024 margin-bottom: 20px;
6025
6026 p {
6027 font-weight: 600;
6028 }
6029
6030 .charitable-footer-promotion-links,
6031 .charitable-footer-promotion-social {
6032 display: flex;
6033 justify-content: center;
6034 align-items: center;
6035 }
6036
6037 .charitable-footer-promotion-links {
6038 margin: 10px 0;
6039 color: #646970;
6040
6041 a {
6042 color: #056aab;
6043
6044 &:hover {
6045 color: #04558a;
6046 }
6047 }
6048
6049 span {
6050 color: #c3c4c7;
6051 padding: 0 7px;
6052 }
6053 }
6054
6055 .charitable-footer-promotion-social {
6056 gap: 10px;
6057 margin: 0;
6058
6059 li {
6060 margin-bottom: 0;
6061
6062 path {
6063 color: #646970;
6064 }
6065
6066 &:hover {
6067 path {
6068 fill: #50575e;
6069 }
6070 }
6071
6072 a {
6073 display: block;
6074 height: 16px;
6075 }
6076 }
6077 }
6078 }
6079
6080 #footer-left {
6081 color: #50575e;
6082 font-size: 13px;
6083 font-style: normal;
6084 font-weight: 400;
6085 line-height: normal;
6086
6087 strong {
6088 font-weight: 600;
6089 }
6090 }
6091 }
6092
6093
6094 /* Responsive adjustments for footer promotion */
6095 @media (max-width: 782px) {
6096 body.charitable-admin-promotion-footer {
6097 #wpbody {
6098 padding-bottom: 200px !important;
6099 }
6100 }
6101
6102 #wpfooter {
6103 .charitable-footer-promotion {
6104 padding: 20px 0;
6105
6106 .charitable-footer-promotion-links {
6107 flex-direction: column;
6108 gap: 10px;
6109
6110 li {
6111 margin: 0;
6112 }
6113 }
6114
6115 .charitable-footer-promotion-social {
6116 margin-top: 20px;
6117 }
6118 }
6119 }
6120 }
6121
6122 /* Charitable Test Mode Admin Bar Badge */
6123 #wpadminbar .charitable-test-mode-active .charitable-test-mode-badge {
6124 color: #fff;
6125 background-color: #E89940 !important;
6126 font-weight: 600;
6127 padding: 0px 8px;
6128 border-radius: 4px;
6129 margin: 0 4px;
6130 display: inline-block;
6131 white-space: nowrap;
6132 border: 2px solid black;
6133 font-size: 12px;
6134 line-height: 25px;
6135 }
6136
6137 #wpadminbar .charitable-test-mode-active .charitable-test-mode-badge::before {
6138 content: "⚠ ";
6139 margin-right: 4px;
6140 font-weight: bold;
6141 }
6142
6143 #wpadminbar .charitable-test-mode-active:hover .charitable-test-mode-badge {
6144 background-color: #d68a37 !important;
6145 }
6146
6147 /* Test Mode Checkbox Flash Animation */
6148 @keyframes charitable-test-mode-flash {
6149 0% {
6150 background-color: transparent;
6151 }
6152 50% {
6153 background-color: rgba(232, 153, 64, 0.5);
6154 color: white;
6155 }
6156 100% {
6157 background-color: transparent;
6158 }
6159 }
6160
6161 /* Apply flash animation to test mode checkbox row */
6162 tr.charitable-settings-field.charitable-test-mode-checkbox.charitable-test-mode-flash {
6163 animation: charitable-test-mode-flash 2s ease-in-out;
6164 }
6165
6166 /* Global Upgrade CTA Styles */
6167 .charitable-global-upgrade-cta {
6168 width: fit-content;
6169 margin-left: auto;
6170 margin-right: auto;
6171 padding: 20px 80px;
6172 background: white;
6173
6174 .charitable-dashboard-v2-upgrade-title {
6175 font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
6176 font-weight: 700;
6177 font-style: normal;
6178 font-size: 20px;
6179 line-height: 33px;
6180 letter-spacing: 0.01em;
6181 text-align: center;
6182 color: rgba(25, 29, 45, 0.8);
6183 margin: 0;
6184 padding-top: 10px;
6185 }
6186
6187 .charitable-dashboard-v2-upgrade-features {
6188 display: flex;
6189 gap: 10px 10px;
6190 margin: 30px auto;
6191 max-width: 530px;
6192 justify-content: center;
6193
6194 .charitable-dashboard-v2-upgrade-column {
6195 flex: 1;
6196 max-width: 300px;
6197 display: flex;
6198 flex-direction: column;
6199 gap: 20px;
6200 }
6201
6202 .charitable-dashboard-v2-upgrade-feature {
6203 display: flex;
6204 align-items: flex-start;
6205 gap: 12px;
6206
6207 .charitable-dashboard-v2-upgrade-checkmark {
6208 width: 18px;
6209 height: 18px;
6210 flex-shrink: 0;
6211 margin-top: 2px;
6212 }
6213
6214 .charitable-dashboard-v2-upgrade-feature-text {
6215 font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
6216 font-weight: 500;
6217 font-size: 14px;
6218 line-height: 150%;
6219 letter-spacing: 0px;
6220 color: rgba(25, 29, 45, 0.8);
6221 margin: 0;
6222 }
6223 }
6224 }
6225
6226 .charitable-dashboard-v2-upgrade-actions {
6227 display: flex;
6228 flex-direction: column;
6229 align-items: center;
6230 gap: 20px;
6231 margin-top: 30px;
6232 padding-bottom: 20px;
6233
6234 .charitable-dashboard-v2-upgrade-button {
6235 background: rgba(218, 144, 33, 1);
6236 border: none;
6237 border-radius: 4px;
6238 padding: 22px 42px;
6239 font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
6240 font-weight: 600;
6241 font-size: 19px;
6242 line-height: 100%;
6243 letter-spacing: 0px;
6244 color: white;
6245 cursor: pointer;
6246 transition: background 0.2s ease;
6247 text-decoration: none;
6248
6249 &:hover {
6250 background: rgba(196, 130, 30, 1);
6251 }
6252 }
6253
6254 .charitable-dashboard-v2-learn-more-link {
6255 font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
6256 font-weight: 600;
6257 font-size: 14px;
6258 line-height: 150%;
6259 letter-spacing: 0px;
6260 text-align: center;
6261 text-decoration: underline;
6262 color: rgba(25, 29, 45, 0.5);
6263 transition: color 0.2s ease;
6264
6265 &:hover {
6266 color: rgba(25, 29, 45, 0.7);
6267 }
6268 }
6269 }
6270 }
6271
6272 /* Reports CTA Specific Styles */
6273 #charitable-reports .charitable-report-table-container .reports-lite-cta {
6274 margin: auto !important;
6275 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
6276 }