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-legacy.scss

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

3,189 lines 56.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Clearfix helper class.
3 * Credit: h5bp.com/q
4 */
5 .cf {
6 *zoom: 1;
7
8 &:before,
9 &:after {
10 content: " ";
11 display: table;
12 }
13
14 &:after {
15 clear: both;
16 }
17 }
18
19 /**
20 * Media block
21 *
22 * Credit: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
23 */
24 .charitable-media-block {
25 overflow: hidden;
26
27 .charitable-media-image {
28 float: left;
29 margin-right: 12px;
30
31 img {
32 display: block;
33 }
34 }
35
36 .charitable-media-body {
37 overflow: hidden;
38 }
39 }
40
41 .ui-datepicker {
42 display: none;
43
44 &.charitable-datepicker-table {
45 background-color: #fff;
46 padding: 0;
47 border: 1px solid #dedede;
48 width: auto;
49 z-index: 100000 !important;
50
51 .ui-datepicker-header {
52 padding: 10px 20px;
53 background: #f5f5f5;
54 text-align: center;
55 border: 0;
56 border-bottom: 1px solid #dfdfdf;
57 -webkit-border-radius: 0;
58 -moz-border-radius: 0;
59 border-radius: 0;
60 }
61
62 .ui-datepicker-prev,
63 .ui-datepicker-next {
64 position: absolute;
65 top: 10px;
66 width: auto;
67 height: auto;
68 color: #0073AA;
69 cursor: pointer;
70
71 .ui-icon {
72 position: static;
73 top: 0;
74 left: 0;
75 width: auto;
76 height: auto;
77 margin: 0;
78 background-image: none;
79 text-indent: 0;
80 font-weight: 400;
81 }
82 }
83
84 .ui-datepicker-prev {
85 left: 10px;
86 }
87
88 .ui-datepicker-next {
89 right: 10px;
90 }
91
92 .ui-state-hover {
93 border: none;
94 background: none;
95 }
96
97 .ui-datepicker-calendar {
98 width: 100%;
99 padding: 10px;
100 margin: 0;
101 text-align: center;
102
103 td {
104 border: 1px solid #dedede;
105 }
106
107 a {
108 display: block;
109 padding: 6px;
110 border: none;
111 color: #747474;
112 background: none;
113 text-decoration: none;
114 text-align: center;
115 }
116
117 td:first-child {
118 border-left: 0;
119 }
120
121 td:hover,
122 .ui-datepicker-unselectable {
123 background-color: #f5f5f5;
124 }
125 }
126 }
127 }
128
129 .charitable-metabox.postbox {
130 min-width: 0;
131 padding: 0 0 24px 0;
132 margin: 0;
133 background-color: transparent;
134 border: none;
135 box-shadow: none;
136
137 .inside {
138 margin-top: 0;
139 padding: 0;
140 }
141 }
142 .charitable-metabox {
143 .postbox-title {
144 padding: 0 0 8px 0;
145 }
146
147 .postbox-header {
148 border-bottom: none;
149 }
150
151 .handlediv,
152 .hndle {
153 display: none;
154 }
155
156 input,
157 textarea {
158 padding: 14px 10px;
159 width: 100%;
160 }
161
162 select {
163 width: 100%;
164 }
165
166 input[type=checkbox]=checkbox],
167 input[type=radio]=radio],
168 input[type=button]=button],
169 input[type=submit]=submit] {
170 width: auto;
171 }
172
173 .charitable-metabox-title {
174 font-size: 14px;
175 margin-top: 0;
176 margin-bottom: 8px;
177 }
178
179 .widefat {
180 th {
181 font-size: 13px;
182 }
183
184 tbody {
185 th {
186 width: 33%;
187 border-right: 1px solid #e1e1e1;
188 background: #f5f5f5;
189 }
190 }
191
192 .remove-col,
193 .reorder-col {
194 vertical-align: middle;
195 text-align: center;
196
197 span {
198 font-size: 20px;
199 color: #aaa;
200
201 &:hover {
202 color: #444;
203 }
204 }
205 }
206
207 .reorder-col {
208 width: 10px;
209 padding-right: 0;
210
211 span {
212 cursor: move;
213 }
214 }
215
216 .remove-col {
217 width: 20px;
218 padding-left: 0;
219
220 span {
221 cursor: pointer;
222 }
223 }
224
225 .ui-sortable-helper {
226 border: 1px solid #ddd;
227 background: #efefef;
228 }
229 }
230
231 .table-header {
232 background: #f5f5f5;
233
234 label {
235 margin-bottom: 0;
236 font-weight: bold;
237 }
238 }
239
240 .charitable-metabox-header {
241 margin: 24px 0;
242 }
243
244 h4.charitable-metabox-header {
245 border-bottom: 1px solid #dedede;
246 padding-bottom: 12px;
247 margin-bottom: 12px;
248 font-size: 14px;
249 }
250
251 .inside > .charitable-metabox-header:first-child {
252 margin-top: 0;
253 }
254 }
255
256 #side-sortables .charitable-metabox-wrap {
257 float: none;
258 }
259
260 .charitable-metabox-header {
261 float: left;
262 width: 100%;
263 }
264
265 .charitable-metabox-wrap {
266 width: 100%;
267 float: left;
268 margin-bottom: 24px;
269 /* Select2 styling */
270
271 .charitable-helper {
272 display: block;
273 padding-top: 8px;
274 font-style: italic;
275 }
276
277 label,
278 legend {
279 display: block;
280 margin-bottom: 8px;
281 font-weight: bold;
282 }
283
284 th label {
285 margin-bottom: 0;
286 }
287
288 input,
289 textarea {
290 width: 100%;
291 padding: 8px 10px; // was 14px.
292 }
293
294 select {
295 width: 100%;
296 padding: 0 10px;
297 height: 46px;
298 line-height: 46px;
299 }
300
301 input[type=checkbox]=checkbox],
302 input[type=radio]=radio] {
303 width: auto;
304 }
305
306 &.charitable-radio-wrap,
307 &.charitable-multi-checkbox-wrap {
308 margin-bottom: 14px;
309 }
310
311 .charitable-radio-fieldset,
312 .charitable-checkbox-fieldset {
313 legend {
314 margin-bottom: 0;
315 }
316
317 .charitable-helper {
318 padding: 0;
319 }
320
321 .charitable-radio-list,
322 .charitable-checkbox-list {
323 margin-top: 8px;
324
325 li {
326 display: block;
327 }
328
329 label {
330 vertical-align: baseline;
331 }
332 }
333 }
334
335 .select2-selection.select2-selection--single {
336 height: 46px;
337 font-size: 14px;
338 }
339
340 .select2-container--default .select2-selection--single .select2-selection__rendered {
341 line-height: 46px;
342 }
343
344 .select2-container--default .select2-selection--single .select2-selection__arrow {
345 height: 46px;
346 }
347
348 .select2-results__option {
349 margin-bottom: 0;
350 }
351 }
352
353 .charitable-checkbox-wrap label {
354 display: inline;
355 font-weight: normal;
356 }
357
358 .charitable-checkbox-list {
359 display: flex;
360 flex-direction: row;
361 flex-wrap: wrap;
362 width: 75% !important;
363 gap: 8px;
364
365 li {
366 font-size: 15px;
367 line-height: 15px;
368 width: calc(50% - 5px);
369 }
370
371
372 }
373 .charitable-radio-list {
374 label {
375 display: inline-block;
376 font-weight: normal;
377 }
378
379 li {
380 margin-bottom: 8px;
381 }
382 }
383
384 .charitable-radio-list {
385 label {
386 margin-bottom: 0;
387 vertical-align: text-bottom;
388 }
389 }
390
391 .charitable-metabox-block {
392 padding: 10px;
393 margin-bottom: 10px;
394 border: 1px solid #dedede;
395 }
396
397 body.post-type-donation .postbox-container .empty-container,
398 body.post-type-campaign .postbox-container .empty-container {
399 border: none;
400 height: auto;
401 }
402
403 .charitable-actions-form {
404 padding: 12px 12px 18px 12px;
405 }
406
407 .charitable-actions-submit {
408 background-color: #f8f8f8;
409 padding: 12px;
410 border-top: 1px solid #e5e5e5;
411
412 .button-primary {
413 float: right;
414 }
415 }
416
417 .charitable-action-fields {
418 margin-top: 20px;
419 }
420
421 .post-type-campaign .postbox-title {
422 border-bottom: 1px solid #eee;
423 }
424
425 #campaign-title.postbox,
426 #campaign-goal.postbox,
427 #campaign-end-date.postbox,
428 #campaign-description.postbox {
429 min-width: 0;
430 padding: 0 0 24px 0;
431 margin: 0;
432 background-color: transparent;
433 border: none;
434 box-shadow: none;
435
436 .inside {
437 margin-top: 0;
438 padding: 0;
439 }
440 }
441 #campaign-title,
442 #campaign-goal,
443 #campaign-end-date,
444 #campaign-description {
445 &.postbox {
446
447 .postbox-title {
448 padding: 0 0 8px 0;
449 }
450
451 .postbox-header {
452 border-bottom: none;
453 }
454
455 .handlediv,
456 .hndle {
457 display: none;
458 }
459 }
460
461 input,
462 textarea {
463 padding: 14px 10px;
464 width: 100%;
465 }
466
467 select {
468 width: 100%;
469 }
470
471 input[type=checkbox]=checkbox],
472 input[type=radio]=radio],
473 input[type=button]=button],
474 input[type=submit]=submit] {
475 width: auto;
476 }
477
478 .charitable-metabox-title {
479 font-size: 14px;
480 margin-top: 0;
481 margin-bottom: 8px;
482 }
483
484 .widefat {
485 th {
486 font-size: 13px;
487 }
488
489 tbody {
490 th {
491 width: 33%;
492 border-right: 1px solid #e1e1e1;
493 background: #f5f5f5;
494 }
495 }
496
497 .remove-col,
498 .reorder-col {
499 vertical-align: middle;
500 text-align: center;
501
502 span {
503 font-size: 20px;
504 color: #aaa;
505
506 &:hover {
507 color: #444;
508 }
509 }
510 }
511
512 .reorder-col {
513 width: 10px;
514 padding-right: 0;
515
516 span {
517 cursor: move;
518 }
519 }
520
521 .remove-col {
522 width: 20px;
523 padding-left: 0;
524
525 span {
526 cursor: pointer;
527 }
528 }
529
530 .ui-sortable-helper {
531 border: 1px solid #ddd;
532 background: #efefef;
533 }
534 }
535
536 .table-header {
537 background: #f5f5f5;
538
539 label {
540 margin-bottom: 0;
541 font-weight: bold;
542 }
543 }
544
545 .charitable-metabox-header {
546 margin: 24px 0;
547 }
548
549 h4.charitable-metabox-header {
550 border-bottom: 1px solid #dedede;
551 padding-bottom: 12px;
552 margin-bottom: 12px;
553 font-size: 14px;
554 }
555
556 .inside > .charitable-metabox-header:first-child {
557 margin-top: 0;
558 }
559 }
560
561 /* --- Top campaign meta boxes --- */
562 #campaign-top-sortables {
563 padding-top: 20px;
564
565 > .postbox:nth-child(2),
566 > .postbox:nth-child(3) {
567 float: left;
568 width: 48%;
569 }
570
571 > .postbox:nth-child(2) {
572 padding-right: 4%;
573 }
574
575 #campaign-description {
576 clear: both;
577 }
578
579 @media (max-width: 37.5em) {
580 > .postbox:nth-child(2),
581 > .postbox:nth-child(3) {
582 width: 100%;
583 padding: 0 0 24px;
584 }
585 }
586 }
587
588 /* --- End Date --- */
589 #charitable-campaign-end-date-metabox-wrap {
590 position: relative;
591
592 .charitable-end-time {
593 position: absolute;
594 right: 0;
595 top: 2px;
596 width: 80px;
597 padding: 20px 10px;
598 border-left: 1px solid rgba(0, 0, 0, 0.07);
599 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
600 background: #f5f5f5;
601 text-align: center;
602 border-radius: 0 4px 4px 0;
603
604 @media (min-width: 48.875em) {
605 padding: 18px 10px;
606 }
607 }
608 }
609
610 #campaign-end-date.postbox #charitable-campaign-end-date-metabox-wrap label {
611 border: 0;
612 clip: rect(1px, 1px, 1px, 1px);
613 -webkit-clip-path: inset(50%);
614 clip-path: inset(50%);
615 height: 1px;
616 margin: -1px;
617 overflow: hidden;
618 padding: 0;
619 position: absolute;
620 width: 1px;
621 word-wrap: normal !important;
622 }
623
624 /* --- Advanced Metabox --- */
625 #campaign-settings {
626 .postbox-title {
627 border: none;
628 }
629
630 .inside {
631 margin: 0;
632 padding: 0;
633 }
634
635 .ui-tabs {
636 *zoom: 1;
637 clear: both;
638 padding: 0;
639 background-color: #f5f5f5;
640 border: none;
641 border-radius: 0;
642 font-family: "Open Sans", sans-serif;
643 font-size: 13px;
644
645 &:before,
646 &:after {
647 content: " ";
648 display: table;
649 }
650
651 &:after {
652 clear: both;
653 }
654
655 .wp-editor-expand #wp-content-editor-tools {
656 background-color: transparent;
657 }
658 }
659
660 .ui-tabs-nav {
661 float: left;
662 width: 20%;
663 margin: 0;
664 padding: 0;
665 border: none;
666 background: none;
667 line-height: 1em;
668 height: auto;
669
670 li {
671 position: relative;
672 top: 0;
673 display: block;
674 width: 100%;
675 float: none;
676 background: none;
677 margin: 0;
678 padding: 0 1px 0 0;
679 border: 0;
680 white-space: normal;
681 }
682
683 a {
684 display: block;
685 float: none;
686 padding: 10px;
687 color: #747474;
688 text-decoration: none;
689 border: none;
690 text-shadow: none;
691 margin: 0;
692 font-weight: normal;
693 }
694
695 li.ui-tabs-active {
696 z-index: 2;
697 margin-right: -2px;
698 border-top: 1px solid #dedede;
699 border-bottom: 1px solid #dedede !important;
700 background-color: #fff;
701 }
702
703 li:first-child {
704 border-top-color: 1px solid #dedede;
705 }
706
707 li.ui-tabs-active:first-child {
708 border-top-color: transparent;
709 }
710
711 li:last-child {
712 margin-bottom: 10px;
713 border-bottom-color: transparent;
714 }
715 }
716
717 .ui-tabs-panel {
718 clear: none;
719 box-sizing: border-box;
720 float: right;
721 width: 80%;
722 padding: 20px;
723 margin: 0;
724 border-left: 1px solid #dedede;
725 border-top: 0;
726 background-color: #fff;
727 }
728
729 #wp-content-editor-tools {
730 padding-top: 0;
731 }
732 }
733
734 .charitable-campaign-settings-panel .charitable-metabox-header:first-child {
735 margin-top: 0;
736 }
737
738 /* --- Suggested Donations --- */
739 #charitable-campaign-suggested-donations .amount-col {
740 width: 100px;
741 min-width: 35%;
742 }
743
744 /* --- Benefactors --- */
745 .charitable-benefactor-wrap {
746 padding: 0 10px 10px;
747 margin-top: 10px;
748 border: 1px solid #ddd;
749 background: #f5f5f5;
750
751 select {
752 width: 100%;
753 }
754 }
755
756 .charitable-benefactor-summary {
757 *zoom: 1;
758
759 &:before,
760 &:after {
761 content: " ";
762 display: table;
763 }
764
765 &:after {
766 clear: both;
767 }
768
769 .summary {
770 float: left;
771 width: 82%;
772 }
773
774 .alignright {
775 float: right;
776 width: 18%;
777 text-align: right;
778 }
779 }
780
781 .charitable-benefactor-form-cancel {
782 float: right;
783 margin-top: 10px;
784 }
785
786 .charitable-benefactor-contribution-amount {
787 margin-bottom: 10px;
788
789 .contribution-amount {
790 margin-bottom: 10px;
791 font-size: 16px;
792 }
793
794 @media (min-width: 42.5em) {
795 border: 1px solid #ddd;
796 background-color: #fff;
797
798 .contribution-amount {
799 width: auto;
800 min-width: 220px;
801 margin: 1px;
802 border: none;
803 box-shadow: none;
804 }
805
806 .contribution-type {
807 float: right;
808 margin: 10px;
809 width: auto;
810 }
811
812 input:focus,
813 select:focus {
814 box-shadow: none;
815 }
816 }
817 }
818
819 .charitable-benefactor-date-wrap {
820 margin-top: 10px;
821
822 label {
823 float: left;
824 width: 49%;
825 }
826
827 label:nth-child(2n+2) {
828 margin-left: 2%;
829 }
830
831 input {
832 margin: 1em 0;
833 font-weight: normal;
834 }
835 }
836
837 .charitable-benefactor-inactive,
838 .charitable-benefactor-expired {
839 background-color: #f5f5f5;
840
841 .summary span {
842 font-weight: bold;
843 text-transform: uppercase;
844 padding-right: 8px;
845 color: #f89d35;
846 }
847 }
848
849 /* --- Campaign Creator --- */
850 #campaign-creator {
851 .creator-facts {
852 .creator-name {
853 padding: 0;
854
855 a {
856 color: #333;
857 text-decoration: none;
858 }
859 }
860
861 dt {
862 display: inline-block;
863 font-weight: bold;
864 }
865
866 dd {
867 display: inline-block;
868 }
869 }
870 }
871
872 #charitable-campaign-creator-metabox-wrap #campaign-creator {
873 padding-bottom: 24px;
874 margin-bottom: 12px;
875 border-bottom: 1px solid #e1e1e1;
876 }
877
878 body.post-type-donation {
879 #post-body-content,
880 #titlediv {
881 display: none;
882 }
883
884 .closed .inside {
885 display: block;
886 }
887
888 .donation-banner-wrapper {
889 float: left;
890 width: 100%;
891 background: #f8f8f8;
892 border-radius: 4px 4px 0 0;
893 border-bottom: 1px solid #e5e5e5;
894 }
895
896 .donation-banner {
897 position: relative;
898 padding: 12px;
899
900 .donation-edit-link {
901 position: absolute;
902 top: 12px;
903 right: 12px;
904 }
905
906 .donation-number {
907 margin: 0;
908 padding: 0;
909 font-size: 1.3em;
910 }
911 }
912
913 .donation-erasure-notice-wrapper {
914 float: left;
915 width: 100%;
916 }
917
918 .donation-erasure-notice {
919 padding: 12px 20px;
920 border-bottom: 1px solid #e5e5e5;
921 font-style: italic;
922 }
923
924 @media (min-width: 70em) {
925 #poststuff #post-body.columns-2 {
926 margin-right: 340px;
927
928 #postbox-container-1 {
929 margin-right: -340px;
930 width: 320px;
931
932 #side-sortables {
933 width: 100%;
934 }
935 }
936 }
937 }
938 }
939
940 #donation-overview {
941 .charitable-metabox {
942 *zoom: 1;
943
944 &:before,
945 &:after {
946 content: " ";
947 display: table;
948 }
949
950 &:after {
951 clear: both;
952 }
953 }
954
955 .hndle {
956 display: none;
957 }
958
959 .inside {
960 margin: 0;
961 padding: 0;
962 }
963
964 #donor {
965 float: left;
966 padding: 12px 12px 36px 12px;
967 width: 300px;
968 max-width: 67%;
969 }
970
971 .donor-name {
972 font-weight: normal;
973 }
974
975 h3 {
976 margin: 0 0 0.5em;
977 padding: 0;
978 font-size: 1.3em;
979 }
980
981 #donation-summary {
982 float: right;
983 padding: 12px 12px 36px 0;
984 max-width: 33%;
985 text-align: right;
986 }
987
988 .donation-status {
989 display: block;
990 margin-bottom: 6px;
991
992 .status,
993 .contact-consent .consent {
994 font-weight: bolder;
995 }
996 }
997
998 table#overview {
999 float: left;
1000 width: 100%;
1001 border-spacing: 0;
1002
1003 thead {
1004 th {
1005 padding: 0 0 0.8em;
1006 }
1007 }
1008
1009 .col-campaign-name {
1010 padding-left: 12px;
1011 text-align: left;
1012 }
1013
1014 .col-campaign-donation-amount {
1015 padding-right: 12px;
1016 text-align: right;
1017 }
1018
1019 tbody {
1020 td {
1021 padding: 2em 0;
1022 border-top: 1px solid #e5e5e5;
1023 }
1024
1025 tr:last-child td {
1026 border-bottom: 1px solid #e5e5e5;
1027 }
1028 }
1029
1030 .campaign-name {
1031 padding-left: 12px;
1032 font-size: 18px;
1033 }
1034
1035 .campaign-donation-amount {
1036 padding-right: 12px;
1037 font-size: 16px;
1038 text-align: right;
1039 }
1040
1041 tfoot {
1042 td,
1043 th {
1044 padding: 0.6em 12px 0.6em 0;
1045 background-color: #f8f8f8;
1046 text-align: right;
1047 }
1048
1049 tr:first-of-type {
1050 td,
1051 th {
1052 padding-top: 1.2em;
1053 }
1054 }
1055
1056 tr:last-of-type {
1057 td,
1058 th {
1059 padding-bottom: 1.2em;
1060 }
1061 }
1062 }
1063 }
1064 }
1065
1066 #donation-actions .inside {
1067 padding: 0;
1068 }
1069
1070 #donation-details,
1071 #donation-log,
1072 #donation-actions {
1073 border-bottom: 1px solid #ccd0d4;
1074 }
1075
1076 #donation-details {
1077 dt {
1078 font-weight: bold;
1079 margin-bottom: 0.5em;
1080 }
1081
1082 dd {
1083 margin: 0 0 1em;
1084 padding-bottom: 1em;
1085 border-bottom: 1px solid #e5e5e5;
1086
1087 &:last-child {
1088 border-bottom: none;
1089 padding-bottom: 0;
1090 }
1091 }
1092 }
1093
1094 #donation-log {
1095 .inside {
1096 padding: 0;
1097 margin-top: 0;
1098 }
1099
1100 table {
1101 word-break: break-all;
1102 border: none;
1103 }
1104
1105 th,
1106 td {
1107 padding-left: 12px;
1108 padding-right: 12px;
1109 }
1110
1111 thead {
1112 th {
1113 background: #f8f8f8;
1114
1115 &:first-child {
1116 width: 200px;
1117 }
1118 }
1119 }
1120
1121 tbody {
1122 td {
1123 border-bottom: 1px solid #e5e5e5;
1124 }
1125
1126 tr:last-child {
1127 td {
1128 border-bottom: 0;
1129 }
1130 }
1131 }
1132 }
1133
1134 /* Donation Form */
1135 .post-type-donation.charitable-admin-donation-form {
1136 #postbox-container-2 {
1137 margin-bottom: 0;
1138 border: 1px solid #dedede;
1139 border-radius: 4px;
1140 background: #fff;
1141 }
1142
1143 .charitable-metabox-wrap {
1144 margin-bottom: 24px;
1145
1146 &.charitable-fieldset-wrap {
1147 margin-bottom: 0;
1148 }
1149 }
1150
1151 #donation-form {
1152 border: none;
1153 background: transparent;
1154 box-shadow: none;
1155
1156 .postbox-title {
1157 display: none;
1158 }
1159
1160 .inside {
1161 padding: 0;
1162 margin: 0;
1163
1164 > .charitable-form-fields {
1165 clear: both;
1166 padding: 20px;
1167 }
1168 }
1169
1170 .charitable-form-fields {
1171 > h3:first-of-type {
1172 margin-top: 0;
1173 }
1174
1175 > .charitable-metabox-wrap:not(.charitable-fieldset-wrap) {
1176 margin-bottom: 24px;
1177 }
1178 }
1179 }
1180
1181 #donation-form-meta {
1182 padding: 24px 12px 12px;
1183 }
1184 }
1185
1186 #charitable-campaign-donations {
1187 thead {
1188 th {
1189 background: #f5f5f5;
1190 }
1191 }
1192 }
1193
1194 #charitable-user-fields-wrap {
1195 width: 100%;
1196
1197 .charitable-overlay {
1198 display: none !important;
1199 }
1200
1201 &.loading-data {
1202 .charitable-overlay {
1203 display: block !important;
1204 text-align: center;
1205 }
1206
1207 > *:not(.charitable-overlay) {
1208 display: none;
1209 }
1210 }
1211
1212 #charitable-first-name-wrap,
1213 #charitable-last-name-wrap {
1214 width: 48%;
1215 }
1216
1217 #charitable-first-name-wrap {
1218 padding-right: 4%;
1219 }
1220
1221 #charitable-postcode-wrap {
1222 width: 26%;
1223 padding-right: 4%;
1224 }
1225
1226 #charitable-country-wrap {
1227 width: 70%;
1228 clear: right;
1229 }
1230 }
1231
1232 .charitable-settings-field {
1233 padding: 7px 10px;
1234 width: 300px;
1235 font-size: 16px;
1236 line-height: 1.5em;
1237
1238 &.short {
1239 width: 100px;
1240 }
1241
1242 &.wide {
1243 width: 100%;
1244 }
1245 }
1246
1247 .charitable-inline-notice {
1248 background: #fff;
1249 border: 1px solid #c3c4c7;
1250 border-left-width: 4px;
1251 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1252 margin: 5px 15px 15px 0;
1253 padding: 10px 12px;
1254 p:last-child {
1255 margin-bottom: 0 !important;
1256 }
1257 &.info {
1258 border-left-color: #00a0d2;
1259 }
1260 &.warning {
1261 border-left-color: #ffb900;
1262 }
1263
1264 }
1265
1266 input[type=number]=number].charitable-settings-field {
1267 height: auto;
1268 }
1269
1270 select.charitable-settings-field {
1271 width: auto;
1272 min-width: 300px;
1273 }
1274 input#charitable_settings_import_campaign,
1275 input#charitable_settings_import_donations {
1276 display: table;
1277 margin: 0 0 10px 0;
1278 width: 100%;
1279 }
1280 select#charitable_settings_import_donations,
1281 select#charitable_settings_export_campaign,
1282 select#charitable_settings_export_donations {
1283 padding: 0 24px 0 10px;
1284 min-height: 45px;
1285 display: table;
1286 margin: 0 0 10px 0;
1287 width: 100%;
1288 text-indent: 10px;
1289 }
1290
1291 .charitable-settings-object {
1292 max-width: 1000px;
1293 padding: 10px 20px;
1294 margin-bottom: 4px;
1295 border: 1px solid #e1e1e1;
1296 background-color: #fff;
1297 h4 {
1298 float: left;
1299 margin: 0;
1300 line-height: 28px;
1301 }
1302 span.actions {
1303 float: right;
1304 a {
1305 margin-left: 10px;
1306 }
1307 }
1308 }
1309
1310 .charitable-gateway {
1311 .default-gateway,
1312 .make-default-gateway {
1313 margin-left: 20px;
1314 font-size: 12px;
1315 line-height: 28px;
1316 }
1317 .default-gateway {
1318 color: #f89d35;
1319 }
1320 .make-default-gateway {
1321 color: #777;
1322 }
1323 }
1324
1325 .charitable-settings-notice {
1326 max-width: 860px;
1327 padding: 10px 20px;
1328 /* margin-top: 20px; */
1329 border: 1px solid #e1e1e1;
1330 background-color: #fef4e8;
1331 &.license-notice {
1332 margin-top: -10px;
1333 }
1334 }
1335
1336 .charitable-licensed-product {
1337 h4 {
1338 width: 230px;
1339 margin-right: 20px;
1340 line-height: 40px;
1341 }
1342 .charitable-settings-field {
1343 float: left;
1344 width: 100%;
1345 @media (min-width: 68.125em) {
1346 width: 312px;
1347 margin-right: 20px;
1348 }
1349 }
1350 .license-meta {
1351 font-size: 12px;
1352 line-height: 40px;
1353 }
1354 .license-active {
1355 float: left;
1356 }
1357 .valid-license {
1358 color: #f89d35;
1359 font-weight: bold;
1360 }
1361 .license-deactivation {
1362 float: left;
1363 margin: 6px 0;
1364 }
1365 .license-invalid {
1366 color: #f89d35;
1367 }
1368 .license-expiration-date {
1369 float: right;
1370 margin-left: 10px;
1371 }
1372 }
1373
1374 .charitable-help {
1375 display: block;
1376 margin-top: 4px;
1377 font-size: 13px;
1378 line-height: 21px;
1379 font-style: italic;
1380 color: #777;
1381 }
1382
1383 .form-table {
1384 .charitable-help {
1385 p {
1386 font-size: 13px;
1387 line-height: 21px;
1388 }
1389 }
1390 td.charitable-fullwidth {
1391 padding: 15px 0;
1392 }
1393 }
1394
1395 .charitable-shortcode-options {
1396 ul {
1397 list-style: disc;
1398 margin-left: 16px;
1399 font-style: normal;
1400 }
1401 li {
1402 margin-bottom: 2px;
1403 }
1404 }
1405
1406 @media (min-width: 48em) {
1407 .charitable_page_charitable-settings {
1408 .form-table {
1409 th {
1410 min-width: 250px;
1411 }
1412 }
1413 }
1414 }
1415 body.charitable_page_charitable-settings {
1416 div#charitable-settings {
1417 table.form-table {
1418 max-width: 1000px;
1419 }
1420 }
1421 }
1422 .charitable_page_charitable-settings {
1423 .form-table {
1424 th {
1425 label {
1426 font-size: 13px;
1427 }
1428 }
1429 td {
1430 select {
1431 max-width: 400px;
1432 }
1433 }
1434 }
1435 }
1436
1437 .charitable-radio-list {
1438 padding: 0;
1439 margin: 0;
1440 list-style: none;
1441 li {
1442 display: inline-block;
1443 margin-right: 20px;
1444 }
1445 }
1446
1447 .charitable-checkbox-list {
1448 width: auto;
1449 margin: 0;
1450 padding: 0;
1451 }
1452
1453 .charitable-notice {
1454 padding: 5px 10px;
1455 font-size: 14px;
1456 background-color: #fff;
1457 &.charitable-notice-error {
1458 border-left: 4px solid #dc3232;
1459 }
1460 }
1461 .charitable-admin-notice-five-star-rating {
1462 button.button:hover,
1463 a.button-link:hover {
1464 background-color: transparent;
1465 }
1466 p {
1467 margin-top: 0;
1468 margin-bottom: 0;
1469 }
1470
1471 // Hide steps 2 and 3 by default, only show step 1 initially
1472 &[data-step="2"]="2""],
1473 &[data-step="3"]="3""] {
1474 display: none;
1475 }
1476 }
1477 .edit-php.post-type-charitable {
1478 .tablenav {
1479 .actions {
1480 padding-right: 0;
1481 }
1482 #start_date,
1483 #end_date {
1484 width: 10.5em;
1485 }
1486 #post-query-submit {
1487 display: none;
1488 }
1489 #delete_all {
1490 margin-top: 3px;
1491 }
1492 .charitable-filter-button:before,
1493 .charitable-export-button:before {
1494 vertical-align: middle;
1495 margin-top: -2px;
1496 width: 16px;
1497 height: 16px;
1498 font-size: 16px;
1499 }
1500 a.button {
1501 display: inline-block;
1502 }
1503 }
1504 .tablenav.top {
1505 margin: 0 0 12px 0;
1506 select.campaign_id {
1507 float: none;
1508 vertical-align: top;
1509 }
1510 .actions {
1511 overflow: visible;
1512 .has-popup {
1513 position: relative;
1514 display: inline-block;
1515 cursor: pointer;
1516 -webkit-user-select: none;
1517 -moz-user-select: none;
1518 -ms-user-select: none;
1519 user-select: none;
1520 .popup {
1521 visibility: hidden;
1522 width: 260px;
1523 background-color: #999;
1524 color: #fff;
1525 text-align: center;
1526 border-radius: 6px;
1527 padding: 4px;
1528 position: absolute;
1529 z-index: 1;
1530 top: 125%;
1531 left: 50%;
1532 margin-left: -136px;
1533 input,
1534 label,
1535 select {
1536 width: 80%;
1537 margin-bottom: 1em;
1538 }
1539 .inner {
1540 background: white;
1541 padding: 1em 0;
1542 border-radius: 4px;
1543 }
1544 &::before {
1545 content: "";
1546 position: absolute;
1547 bottom: 100%;
1548 left: 50%;
1549 margin-left: -5px;
1550 border-width: 5px;
1551 border-style: solid;
1552 border-color: transparent transparent #999 transparent;
1553 }
1554 &.show {
1555 visibility: visible !important;
1556 -webkit-animation: fadeIn 1s;
1557 animation: fadeIn 1s;
1558 }
1559 }
1560 }
1561 .charitable-export-actions {
1562 margin-left: 8px;
1563 }
1564 }
1565 }
1566 .wp-list-table {
1567 .meta {
1568 display: block;
1569 color: #999;
1570 }
1571 .column-post_status {
1572 mark,
1573 .post-type-charitable #donation-summary mark,
1574 #donation-donor-history mark {
1575 padding: 2px 4px;
1576 margin: 0;
1577 text-align: center;
1578 white-space: nowrap;
1579 background: #999;
1580 color: #fff;
1581 border-radius: 2px;
1582 font-size: 10px;
1583 letter-spacing: 1px;
1584 text-transform: uppercase;
1585 font-weight: bold;
1586 }
1587 }
1588 }
1589 }
1590 form#posts-filter .actions.charitable-export-actions {
1591 margin-top: 3px;
1592 }
1593 .post-type-charitable {
1594 #donation-summary {
1595 mark {
1596 padding: 2px 4px 2px 6px;
1597 }
1598 }
1599 }
1600 .edit-php.post-type-charitable {
1601 .wp-list-table .column-post_status {
1602 mark.charitable-pending,
1603 .post-type-charitable #donation-summary mark.charitable-pending,
1604 #donation-donor-history mark.charitable-pending {
1605 background-color: #999;
1606 }
1607 mark.charitable-completed,
1608 .post-type-charitable #donation-summary mark.charitable-completed,
1609 #donation-donor-history mark.charitable-completed {
1610 background-color: #34d058;
1611 }
1612 mark.charitable-failed,
1613 .post-type-charitable #donation-summary mark.charitable-failed,
1614 #donation-donor-history mark.charitable-failed {
1615 background-color: #f7a129;
1616 }
1617 mark.charitable-cancelled,
1618 .post-type-charitable #donation-summary mark.charitable-cancelled,
1619 #donation-donor-history mark.charitable-cancelled {
1620 background-color: #ff0000;
1621 }
1622 mark.charitable-refunded,
1623 .post-type-charitable #donation-summary mark.charitable-refunded,
1624 #donation-donor-history mark.charitable-refunded {
1625 background-color: #3fb8f5;
1626 }
1627 }
1628 }
1629
1630 .edit-php.post-type-campaign {
1631 th.manage-column.column-ID,
1632 td.column-ID {
1633 width: 2.2em;
1634 padding: 11px 3px;
1635 }
1636 .column-status {
1637 mark {
1638 padding: 2px 4px;
1639 margin: 0;
1640 text-align: center;
1641 white-space: nowrap;
1642 background: #999;
1643 color: #fff;
1644 border-radius: 2px;
1645 font-size: 10px;
1646 letter-spacing: 1px;
1647 text-transform: uppercase;
1648 font-weight: bold;
1649 &.active {
1650 background-color: #23282d;
1651 }
1652 &.finished {
1653 background-color: #3fb8f5;
1654 }
1655 &.successful {
1656 background-color: #34d058;
1657 }
1658 &.unsuccessful {
1659 background-color: #ff0000;
1660 }
1661 }
1662 }
1663 }
1664
1665 #charitable_dashboard_donations {
1666 .hide-if-no-js {
1667 padding: 10px 0;
1668 text-align: center;
1669 }
1670 .inside {
1671 margin: 0;
1672 padding: 0;
1673 }
1674 .charitable-donation-statistics {
1675 *zoom: 1;
1676 margin-bottom: 20px;
1677 &:before,
1678 &:after {
1679 content: " ";
1680 display: table;
1681 }
1682 &:after {
1683 clear: both;
1684 }
1685 }
1686 .cell {
1687 box-sizing: border-box;
1688 float: left;
1689 width: 50%;
1690 padding: 23px 0 10px;
1691 border-right: 1px solid #e5e5e5;
1692 border-bottom: 1px solid #e5e5e5;
1693 text-align: center;
1694 .amount {
1695 color: #f89d35;
1696 font-size: 28px;
1697 font-weight: normal;
1698 padding-bottom: 0;
1699 }
1700 }
1701 .summary {
1702 margin-top: 0;
1703 color: #777;
1704 .time-period {
1705 font-weight: bold;
1706 color: #444;
1707 }
1708 }
1709 .recent-donations {
1710 margin: 0 11px;
1711 table {
1712 width: 100%;
1713 border-collapse: collapse;
1714 }
1715 caption {
1716 text-align: left;
1717 h3 {
1718 padding-left: 0;
1719 }
1720 }
1721 td {
1722 padding: 10px 0;
1723 border-top: 1px solid #e5e5e5;
1724 }
1725 tr:last-child {
1726 td {
1727 border-bottom: 1px solid #e5e5e5;
1728 }
1729 }
1730 .donation-total {
1731 text-align: right;
1732 font-weight: bold;
1733 }
1734 .donation-id {
1735 width: 80px;
1736 }
1737 }
1738 }
1739
1740 .charitable-admin-banner-top-of-page {
1741 text-align: center;
1742 .button-link {
1743 position: absolute;
1744 top: 48px;
1745 right: -1px;
1746 font-size: 20px;
1747 color: #fff;
1748 font-weight: bold;
1749 text-decoration: none;
1750 margin-left: 5px;
1751 padding: 6px 10px;
1752 }
1753 }
1754 @media screen and (min-width: 783px) {
1755 .charitable-admin-banner-top-of-page {
1756 padding: 10px 46px 10px 22px;
1757 font-size: 13px;
1758 line-height: 1.4;
1759 color: #fff;
1760 margin-left: -20px;
1761 padding: 9px 32px 9px 20px;
1762 background: #E89940;
1763 display: none;
1764 a {
1765 color: white;
1766 }
1767 [dir='rtl']='rtl'] & {
1768 margin-left: 0;
1769 margin-right: -20px;
1770 }
1771 }
1772 .charitable-license-expiring-banner.charitable-admin-banner-top-of-page {
1773 background: #e84040;
1774 }
1775 .charitable-license-expiring-banner.charitable-admin-banner-top-of-page a:hover {
1776 color: white !important;
1777 }
1778 }
1779 @media screen and (min-width: 601px) {
1780 .charitable-admin-banner-top-of-page .button-link {
1781 top: 0;
1782 }
1783 }
1784 @media screen and (min-width: 783px) {
1785 .charitable-admin-banner-top-of-page .button-link {
1786 right: 9px;
1787 }
1788 }
1789
1790 .charitable-notice.notice-five-star-review {
1791 z-index: 0; /* to make it appear below screen option tabs! */
1792 }
1793 .charitable-notice:first-of-type {
1794 margin-left: 3px;
1795 margin-right: 20px;
1796 margin-top: 10px;
1797 }
1798 .charitable-notice {
1799 margin-top: 10px;
1800 margin-left: 3px;
1801 margin-right: 20px;
1802 margin-bottom: 0;
1803 padding: 10px 10px;
1804 }
1805 .charitable-notice.updated,
1806 .charitable-notice.error {
1807 margin: 10px 20px 2px 3px;
1808 }
1809 form#posts-filter {
1810 table {
1811 tbody#the-list {
1812 tr.child {
1813 td {
1814 padding: 0;
1815 div.charitable-campaign-list-banner {
1816 justify-content: space-between;
1817 flex-direction: row;
1818 .notice-dismiss {
1819 }
1820 display: flex;
1821 flex: 0 0 100%;
1822 flex-direction: row;
1823 align-items: center;
1824 padding: 15px 30px;
1825 flex-wrap: nowrap;
1826 position: relative;
1827 > div {
1828 flex-grow: 1;
1829 display: flex;
1830 align-items: center;
1831 }
1832 .charitable-campaign-list-banner-icon {
1833 width: auto;
1834 height: 45px;
1835 margin: 0px 15px 0 0;
1836 img {
1837 height: 45px;
1838 }
1839 }
1840 .charitable-campaign-list-banner-text {
1841 p {
1842 font-size: 16px;
1843 margin-top: 0;
1844 margin-bottom: 0;
1845 }
1846 }
1847 .charitable-campaign-list-banner-button {
1848 display: flex;
1849 flex-direction: row;
1850 justify-content: end;
1851 min-width: 20%;
1852 }
1853 .button-link {
1854 background-color: #5AA152;
1855 color: #ffffff;
1856 padding: 10px 30px;
1857 position: relative;
1858 text-decoration: none;
1859 border-radius: 5px;
1860 text-shadow: none;
1861 font-weight: 600;
1862 font-family: "Inter";
1863 font-size: 13px;
1864 line-height: normal;
1865 color: #2271b1;
1866 cursor: pointer;
1867 display: table;
1868 text-align: center;
1869 float: right;
1870 &:hover {
1871 background-color: #3f7539;
1872 }
1873 }
1874 a.charitable-close {
1875 width: 18px;
1876 display: inline-block;
1877 height: 18px;
1878 margin-left: 20px;
1879 margin-right: 20px;
1880 img {
1881 width: 18px;
1882 height: 18px;
1883 }
1884 &:hover {
1885 opacity: 0.5;
1886 }
1887 }
1888 a.button-link,
1889 a.button-link:active,
1890 a.button-link:visited {
1891 color: white;
1892 }
1893 }
1894 }
1895 }
1896 }
1897 }
1898 }
1899
1900 /* popup ads */
1901
1902 body.wp-admin {
1903 .jconfirm.jconfirm-white .jconfirm-bg,
1904 .jconfirm.jconfirm-light .jconfirm-bg {
1905 opacity: 0.8;
1906 }
1907 }
1908
1909 body.post-type-campaign {
1910 .jconfirm {
1911 .jconfirm-cell {
1912 display: table-cell;
1913 }
1914 &.jconfirm-type-lite-pro-ad {
1915 background-color: white;
1916 color: #2B2E39;
1917 font-family: "Inter", sans-serif;
1918 }
1919 }
1920 }
1921 .charitable-lite-pro-popup {
1922 padding: 0 20px;
1923 display: flex;
1924 font-size: 16px;
1925 &-left {
1926 flex: 1;
1927 }
1928 &-right {
1929 flex: 1;
1930 }
1931 h1 {
1932 color: #3F414C;
1933 font-size: 24px;
1934 line-height: 33px;
1935 margin: 0 0 15px 0;
1936 font-weight: 700;
1937 }
1938 h2 {
1939 font-weight: 400;
1940 font-size: 14px;
1941 line-height: 21px;
1942 color: #5A5C65;
1943 margin: 0 0 30px 0;
1944 }
1945 ul {
1946 margin: 0 20px 25px 0;
1947 display: table;
1948 list-style-position: outside;
1949 font-size: 16px;
1950 }
1951 li {
1952 background-image: url("../images/icons/green_check_circle.png");
1953 background-repeat: no-repeat;
1954 font-size: 14px;
1955 font-weight: 500;
1956 line-height: 21px;
1957 color: #3F414C;
1958 padding-left: 25px;
1959 margin: 0 0 15px 0;
1960 padding-left: 30px;
1961 /* .charitable-lite-pro-popup li::marker {
1962 margin-top: 2px;
1963 } */
1964 p {
1965 margin: -2px 0 0 0;
1966 display: inline;
1967 padding: 0;
1968 }
1969 }
1970 .charitable-lite-pro-popup-button {
1971 padding: 16px 18px;
1972 background: #E89940;
1973 margin: 10px auto 0 auto;
1974 color: #fff;
1975 text-align: center;
1976 font-size: 16px;
1977 line-height: 24px;
1978 display: block;
1979 text-decoration: none;
1980 font-weight: 600;
1981 border-radius: 5px;
1982 }
1983 .charitable-lite-pro-popup-link {
1984 display: block;
1985 font-size: 14px;
1986 line-height: 18px;
1987 margin: 20px 0 0 0;
1988 font-weight: 400;
1989 color: #486DCB;
1990 &:hover {
1991 text-decoration: underline;
1992 }
1993 }
1994 a.charitable-lite-pro-popup-link {
1995 text-decoration: none;
1996 color: #3459C4 !important;
1997 }
1998 .charitable-lite-pro-popup-right {
1999 img {
2000 padding: 0 0 0 20px;
2001 margin-top: 30px;
2002 /* display: none; */
2003 }
2004 }
2005 }
2006 body.post-type-campaign {
2007 .jconfirm-box-container {
2008 .charitable-lite-pro-popup,
2009 .charitable-lite-pro-popup li,
2010 .charitable-lite-pro-popup h2,
2011 .charitable-lite-pro-popup h1,
2012 .charitable-lite-pro-popup a.charitable-lite-pro-popup-link {
2013 color: #2B2E39;
2014 }
2015 }
2016 }
2017 /* license overrides */
2018
2019 .charitable-licensed-product .license-deactivation {
2020 margin: 2px 0;
2021 }
2022
2023 /* should go up with the others - to do */
2024
2025 textarea.charitable-settings-field {
2026 width: 75%;
2027 font-size: 13px;
2028 line-height: 21px;
2029 }
2030
2031 .starburst {
2032 background: #347d39;
2033 width: 2.75em;
2034 height: 2.75em;
2035 text-align: center;
2036 color: #fff;
2037 font-weight: 800;
2038 display: flex;
2039 align-items: center;
2040 justify-content: center;
2041 position: absolute;
2042 top: 50%;
2043 margin-top: -1.25em;
2044 margin-left: -1.25em;
2045 span {
2046 width: 100%;
2047 height: 100%;
2048 background: inherit;
2049 transform: rotate(-45deg);
2050 display: flex;
2051 align-items: center;
2052 justify-content: center;
2053 &:before,
2054 &:after {
2055 content: "";
2056 position: absolute;
2057 top: 0;
2058 left: 0;
2059 width: 100%;
2060 height: 100%;
2061 background: inherit;
2062 z-index: -1;
2063 transform: rotate(30deg);
2064 }
2065 &:after {
2066 transform: rotate(30deg);
2067 }
2068 &:before {
2069 transform: rotate(-30deg);
2070 }
2071 }
2072 &:before,
2073 &:after {
2074 content: "";
2075 position: absolute;
2076 top: 0;
2077 left: 0;
2078 width: 100%;
2079 height: 100%;
2080 background: inherit;
2081 z-index: -1;
2082 transform: rotate(30deg);
2083 }
2084 &:after {
2085 transform: rotate(-30deg);
2086 }
2087 }
2088
2089 #wpcharitable-starburst-new {
2090 left: 5px;
2091 top: 0;
2092 }
2093
2094 /* campaign edit/create page */
2095
2096 #qt__charitable_campaign_description_toolbar {
2097 input.ed_button {
2098 padding: 0 10px;
2099 }
2100 }
2101 th.default_amount-col,
2102 td.default_amount-col {
2103 vertical-align: middle;
2104 max-width: 50px;
2105 width: 50px;
2106 }
2107
2108 /* create campaign popup */
2109
2110 #create-campaign-form {
2111 label {
2112 font-size: 16px;
2113 line-height: 21px;
2114 margin-bottom: 5px;
2115 margin-top: 15px;
2116 display: block;
2117 }
2118 p {
2119 margin: 5px 0;
2120 }
2121 small {
2122 font-size: 12px;
2123 line-height: 16px;
2124 }
2125 input[type="text"]="text""] {
2126 margin-bottom: 10px;
2127 width: 90%;
2128 &::placeholder {
2129 /* Chrome, Firefox, Opera, Safari 10.1+ */
2130 color: #ccc;
2131 opacity: 1; /* Firefox */
2132 }
2133 &:-ms-input-placeholder {
2134 /* Internet Explorer 10-11 */
2135 color: #ccc;
2136 }
2137 &::-ms-input-placeholder {
2138 /* Microsoft Edge */
2139 color: #ccc;
2140 }
2141 }
2142 }
2143
2144 /* admin menu - licrnse update 2022 */
2145
2146 div#charitable-settings {
2147 table.form-table {
2148 tbody {
2149 tr {
2150 &.section-heading {
2151 th {
2152 h4 {
2153 font-size: 20px;
2154 font-weight: 700;
2155 margin: 0 0 6px 0;
2156 }
2157 /* padding: 30px 0 5px 0; */
2158 }
2159 p {
2160 margin-bottom: 0;
2161 }
2162 &.dangerous-settings {
2163 th {
2164 h4 {
2165 color: red;
2166 }
2167 &:first-child {
2168 width: inherit;
2169 }
2170 }
2171 }
2172 }
2173 th {
2174 padding: 5px 0;
2175 h4 {
2176 font-size: 20px;
2177 font-weight: 700;
2178 margin: 10px 0 6px 0;
2179 line-height: 20px;
2180 }
2181 &[scope="row"]="row""] {
2182 h4 {
2183 font-weight: normal;
2184 font-size: inherit;
2185 }
2186 }
2187 }
2188 td {
2189 p {
2190 margin: 0 0 10px 0;
2191 }
2192 }
2193 &:first-child {
2194 th {
2195 &:first-child {
2196 width: auto;
2197 }
2198 &[scope="row"]="row""] {
2199 h4 {
2200 font-size: 20px;
2201 font-weight: 700;
2202 margin: 10px 0 6px 0;
2203 line-height: 20px;
2204 }
2205 }
2206 }
2207 }
2208 &.section-subheading {
2209 th {
2210 h4 {
2211 font-size: 20px;
2212 font-weight: 700;
2213 margin: 10px 0 6px 0;
2214 line-height: 20px;
2215 }
2216 }
2217 }
2218 }
2219 }
2220 tr {
2221 input[type="text"]="text""],
2222 input[type="email"]="email""],
2223 input[type="password"]="password""],
2224 /* div#charitable-settings .form-table tr input[type="number"], */
2225 select {
2226 background-color: #f9f9fa;
2227 color: #52545f;
2228 border-color: #e4e4e7;
2229 border-radius: 3px;
2230 box-shadow: none;
2231 display: inline-block;
2232 vertical-align: middle;
2233 padding: 7px 24px 7px 12px;
2234 margin: 0 10px 0 0;
2235 min-height: 35px;
2236 font-size: 13px;
2237 line-height: 29px;
2238 font-weight: 500;
2239 }
2240 &.general-settings {
2241 input[type="text"]="text""],
2242 input[type="password"]="password""],
2243 select {
2244 min-width: 400px;
2245 }
2246 }
2247 &.restrict-radio {
2248 ul.charitable-radio-list.charitable-settings-field {
2249 width: 50%;
2250 }
2251 ul.charitable-radio-list {
2252 li {
2253 display: block;
2254 font-size: 14px;
2255 }
2256 }
2257 }
2258 }
2259 }
2260 .green {
2261 color: green;
2262 }
2263 input#charitable-settings-upgrade-license-key:read-only {
2264 opacity: 0.4;
2265 }
2266 .license-message {
2267 &.license-valid-,
2268 &.license-valid-false {
2269 button.charitable-btn-deactivate {
2270 display: none;
2271 }
2272 }
2273 }
2274 /* attempt to get buttons more in line */
2275
2276 .charitable-btn {
2277 border: 1px;
2278 border-top-color: currentcolor;
2279 border-top-style: none;
2280 border-right-color: currentcolor;
2281 border-right-style: none;
2282 border-bottom-color: currentcolor;
2283 border-bottom-style: none;
2284 border-left-color: currentcolor;
2285 border-left-style: none;
2286 border-style: solid;
2287 border-radius: 3px;
2288 cursor: pointer;
2289 display: inline-block;
2290 margin: 0;
2291 margin-right: 0;
2292 text-decoration: none;
2293 text-align: center;
2294 vertical-align: middle;
2295 white-space: nowrap;
2296 box-shadow: none;
2297 border-radius: 7px;
2298 &-md {
2299 font-size: 13px;
2300 font-weight: 600;
2301 padding: 8px 12px;
2302 min-height: 39px;
2303 }
2304 &-orange {
2305 background-color: #e27730;
2306 border-color: #e27730;
2307 color: #fff;
2308 &:hover:not(:disabled) {
2309 background-color: darken(#e27730, 8%);
2310 border-color: darken(#e27730, 8%);
2311 color: #fff;
2312 }
2313 }
2314 &-green {
2315 background-color: #5aa152;
2316 border-color: #5aa152;
2317 color: #fff;
2318 &:hover:not(:disabled) {
2319 background-color: darken(#5aa152, 8%);
2320 border-color: darken(#5aa152, 8%);
2321 color: #fff;
2322 }
2323 }
2324 }
2325 p.submit .button.button-secondary {
2326 border-radius: 5px;
2327 font-family: "Inter", sans-serif;
2328 font-weight: 600;
2329 font-size: 14px;
2330 line-height: 14px;
2331 padding: 15px 20px;
2332 text-transform: capitalize;
2333 height: auto;
2334 }
2335 .charitable-setting-row {
2336 button {
2337 margin-right: 10px;
2338 }
2339 }
2340
2341 }
2342
2343
2344
2345 body.charitable-admin-settings div.jconfirm *,
2346 body.charitable-admin-settings div.jconfirm *::before,
2347 body.charitable-admin-settings div.jconfirm *::after {
2348 -webkit-box-sizing: border-box;
2349 -moz-box-sizing: border-box;
2350 box-sizing: border-box;
2351 }
2352
2353 body.charitable-admin-settings {
2354 div.jconfirm .jconfirm-box-container .jconfirm-box {
2355 display: grid;
2356 grid-template-columns: repeat(2, 1fr);
2357 justify-items: center;
2358 animation: none;
2359 background: #ffffff;
2360 border-radius: 6px;
2361 border-top-style: solid;
2362 border-top-width: 4px;
2363 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
2364 padding-top: 34px;
2365 max-width: 400px;
2366 }
2367
2368
2369 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-title-c,
2370 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane,
2371 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons {
2372 grid-column: 1 / -1;
2373 text-align: center;
2374 }
2375
2376 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-default {
2377 border-top-width: 0;
2378 padding-top: 25px;
2379 }
2380
2381 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-default .jconfirm-title-c {
2382 margin-bottom: 20px;
2383 }
2384
2385 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-default .jconfirm-title-c .jconfirm-icon-c {
2386 font-size: 44px;
2387 margin-bottom: -6px;
2388 }
2389
2390 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-default button.btn-confirm {
2391 background-color: #e27730;
2392 border-color: #e27730;
2393 }
2394
2395 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-default button.btn-confirm:hover {
2396 background-color: #cd6622;
2397 border-color: #cd6622;
2398 }
2399
2400 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-red {
2401 border-top-color: #d63638 !important;
2402 }
2403
2404 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-red .jconfirm-title-c .jconfirm-icon-c {
2405 color: #d63638 !important;
2406 }
2407
2408 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-red button.btn-confirm {
2409 background-color: #d63638;
2410 border-color: #d63638;
2411 }
2412
2413 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-red button.btn-confirm:hover {
2414 background-color: #b32d2e;
2415 border-color: #b32d2e;
2416 }
2417
2418 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-orange {
2419 border-top-color: #e27730 !important;
2420 }
2421
2422 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-orange .jconfirm-title-c .jconfirm-icon-c {
2423 color: #e27730 !important;
2424 }
2425
2426 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-orange button.btn-confirm {
2427 background-color: #e27730;
2428 border-color: #e27730;
2429 }
2430
2431 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-orange button.btn-confirm:hover {
2432 background-color: #cd6622;
2433 border-color: #cd6622;
2434 }
2435
2436 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-yellow {
2437 border-top-color: #ffb900 !important;
2438 }
2439
2440 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-yellow .jconfirm-title-c .jconfirm-icon-c {
2441 color: #ffb900 !important;
2442 }
2443
2444 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-yellow button.btn-confirm {
2445 background-color: #ffb900;
2446 border-color: #ffb900;
2447 }
2448
2449 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-yellow button.btn-confirm:hover {
2450 background-color: #ffaa00;
2451 border-color: #ffaa00;
2452 }
2453
2454 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-blue {
2455 border-top-color: #0399ed !important;
2456 }
2457
2458 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-blue .jconfirm-title-c .jconfirm-icon-c {
2459 color: #0399ed !important;
2460 }
2461
2462 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-blue button.btn-confirm {
2463 background-color: #0399ed;
2464 border-color: #0399ed;
2465 }
2466
2467 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-blue button.btn-confirm:hover {
2468 background-color: #036aab;
2469 border-color: #036aab;
2470 }
2471
2472 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-green {
2473 border-top-color: #00a32a !important;
2474 }
2475
2476 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-green .jconfirm-title-c .jconfirm-icon-c {
2477 color: #00a32a !important;
2478 }
2479
2480 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-green button.btn-confirm {
2481 background-color: #00a32a;
2482 border-color: #00a32a;
2483 }
2484
2485 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-green button.btn-confirm:hover {
2486 background-color: #008a20;
2487 border-color: #008a20;
2488 }
2489
2490 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-purple {
2491 border-top-color: #7a30e2 !important;
2492 }
2493
2494 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-purple .jconfirm-title-c .jconfirm-icon-c {
2495 color: #7a30e2 !important;
2496 }
2497
2498 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-purple button.btn-confirm {
2499 background-color: #7a30e2;
2500 border-color: #7a30e2;
2501 }
2502
2503 div.jconfirm .jconfirm-box-container .jconfirm-box.jconfirm-type-purple button.btn-confirm:hover {
2504 background-color: #5c24a9;
2505 border-color: #5c24a9;
2506 }
2507
2508 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-closeIcon {
2509 color: transparent;
2510 font-family: FontAwesome;
2511 height: 14px;
2512 opacity: 1;
2513 right: 10px;
2514 top: 10px;
2515 width: 14px;
2516 }
2517
2518 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-closeIcon:after {
2519 color: #bbbbbb;
2520 content: "\f00d";
2521 font-size: 16px;
2522 left: 0;
2523 position: absolute;
2524 top: 0;
2525 }
2526
2527 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-closeIcon:hover:after {
2528 color: #777777 !important;
2529 }
2530
2531 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-title-c {
2532 margin: 0 0 20px 0;
2533 padding: 0;
2534 font-weight: 600;
2535 }
2536
2537 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
2538 font-size: 47px;
2539 margin: 0;
2540 -ms-transform: none !important;
2541 transform: none !important;
2542 -webkit-transition: none !important;
2543 transition: none !important;
2544 }
2545
2546 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-title-c .jconfirm-icon-c + .jconfirm-title {
2547 margin-top: 20px;
2548 }
2549
2550 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-title-c .jconfirm-title {
2551 color: #444444;
2552 display: block;
2553 line-height: 30px;
2554 }
2555
2556 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane {
2557 display: block;
2558 margin-bottom: 20px;
2559 }
2560
2561 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content {
2562 color: #444444;
2563 font-size: 16px;
2564 line-height: 24px;
2565 margin-bottom: 0;
2566 overflow: inherit;
2567 }
2568
2569 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content.lite-upgrade p {
2570 color: #777777;
2571 font-size: 18px;
2572 padding: 0 20px;
2573 }
2574
2575 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content p {
2576 font-size: inherit;
2577 line-height: inherit;
2578 margin: 0 0 16px;
2579 }
2580
2581 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content p:last-of-type {
2582 margin: 0;
2583 }
2584
2585 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content p.large {
2586 font-size: 18px;
2587 }
2588
2589 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content p.small {
2590 font-size: 14px;
2591 }
2592
2593 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content input[type=text]=text],
2594 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content input[type=number]=number],
2595 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content input[type=email]=email],
2596 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content input[type=url]=url],
2597 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content input[type=password]=password],
2598 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content input[type=search]=search],
2599 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content input[type=tel]=tel],
2600 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content textarea,
2601 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-content-pane .jconfirm-content select {
2602 margin: 10px 2px;
2603 width: calc(100% - 4px);
2604 }
2605
2606 div.jconfirm .jconfirm-box-container .jconfirm-box .already-purchased {
2607 display: block;
2608 grid-row: 5;
2609 grid-column: 1 / -1;
2610 color: #bbbbbb;
2611 font-size: 14px;
2612 margin-top: 15px;
2613 text-decoration: underline;
2614 text-align: center;
2615 }
2616
2617 div.jconfirm .jconfirm-box-container .jconfirm-box .already-purchased:hover {
2618 color: #777777;
2619 text-decoration: underline;
2620 }
2621
2622 div.jconfirm .jconfirm-box-container .jconfirm-box .discount-note {
2623 grid-row: 4;
2624 grid-column: 1 / -1;
2625 margin: 25px 0 0 0;
2626 text-align: center;
2627 }
2628
2629 div.jconfirm .jconfirm-box-container .jconfirm-box .discount-note p {
2630 background-color: #fcf9e8;
2631 color: #777777;
2632 font-size: 16px;
2633 margin: 0 -30px;
2634 padding: 22px 52px 12px 52px;
2635 position: relative;
2636 }
2637
2638 div.jconfirm .jconfirm-box-container .jconfirm-box .discount-note p:after {
2639 top: -16px;
2640 background-color: #ffffff;
2641 border-radius: 50%;
2642 color: #00a32a;
2643 content: "\f058";
2644 display: inline-block;
2645 font: normal normal normal 14px FontAwesome;
2646 font-size: 26px;
2647 margin-right: -18px;
2648 padding: 5px 6px;
2649 position: absolute;
2650 right: 50%;
2651 text-rendering: auto;
2652 -webkit-font-smoothing: antialiased;
2653 -moz-osx-font-smoothing: grayscale;
2654 }
2655
2656 div.jconfirm .jconfirm-box-container .jconfirm-box .discount-note span {
2657 color: #00a32a;
2658 font-weight: 700;
2659 }
2660
2661 div.jconfirm .jconfirm-box-container .jconfirm-box .discount-note a {
2662 color: #777777;
2663 display: block;
2664 margin-top: 12px;
2665 }
2666
2667 div.jconfirm .jconfirm-box-container .jconfirm-box .feature-video {
2668 margin: 30px 0 0 0;
2669 }
2670
2671 div.jconfirm .jconfirm-box-container .jconfirm-box .pro-feature-video {
2672 margin: 15px 0 10px 0;
2673 }
2674
2675 div.jconfirm .jconfirm-box-container .jconfirm-box input[type=text]=text]:not(.choices__input) {
2676 display: block;
2677 width: 99%;
2678 border: 1px solid #d6d6d6;
2679 padding: 10px !important;
2680 box-shadow: none;
2681 margin: 10px 1px 1px 1px !important;
2682 line-height: 1 !important;
2683 outline: 0;
2684 }
2685
2686 div.jconfirm .jconfirm-box-container .jconfirm-box input[type=text]=text]:not(.choices__input):focus {
2687 border-color: #007cba;
2688 box-shadow: 0 0 0 1px #007cba;
2689 }
2690
2691 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons {
2692 margin-top: -10px;
2693 }
2694
2695 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button {
2696 min-width: 83px;
2697 background: #f8f8f8;
2698 border: 1px solid #cccccc;
2699 border-radius: 4px;
2700 color: #777777;
2701 font-size: 16px;
2702 font-weight: 600;
2703 line-height: 20px;
2704 outline: none;
2705 padding: 11px 17px;
2706 text-transform: none;
2707 margin: 10px;
2708 transition-property: all;
2709 transition-duration: 0.15s;
2710 transition-timing-function: ease-out;
2711 }
2712
2713 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button:hover {
2714 background: #eeeeee;
2715 border-color: #cccccc;
2716 }
2717
2718 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button[disabled]] {
2719 cursor: no-drop;
2720 pointer-events: none;
2721 opacity: .25;
2722 }
2723
2724 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn-confirm {
2725 color: #ffffff;
2726 }
2727
2728 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.hidden + button {
2729 margin-left: 0;
2730 margin-right: 0;
2731 }
2732
2733 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn-block {
2734 display: block;
2735 margin: 0 0 10px 0 !important;
2736 text-align: center;
2737 width: 100%;
2738 }
2739
2740 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button.btn-normal-case {
2741 text-transform: none !important;
2742 }
2743
2744 div.jconfirm .jconfirm-box-container .jconfirm-box .jconfirm-buttons button i {
2745 margin: 0 10px 0 0;
2746 }
2747
2748 div.jconfirm .jconfirm-box-container .jconfirm-box .error {
2749 color: #d63638;
2750 display: none;
2751 }
2752
2753 }
2754
2755 /* cta settings */
2756 .charitable-report-table-container-wrapper {
2757 position: relative;
2758 }
2759 .charitable-cta-lite-to-pro {
2760 max-width: 1000px;
2761 border: 1px solid #dadada;
2762 padding: 0 !important;
2763 background-color: #fff;
2764 background-image: url('../../images/lite-to-pro/cta.png' );
2765 background-size: 100%;
2766 background-repeat: no-repeat;
2767 background-position: 500px 0;
2768
2769 .charitable-cta-content {
2770 margin-top: 40px !important;
2771 display: flex;
2772 flex-wrap: wrap;
2773 flex-direction: row;
2774 width: 100%;
2775 justify-content: space-between;
2776 align-items: center;
2777
2778 gap: 50px;
2779
2780 // border-top: 20px solid #fff;
2781 // border-bottom: 20px solid #fff;
2782
2783 h5 {
2784 font-size: 20px;
2785 line-height: 24px;
2786 font-weight: 700;
2787 margin: 0px 0 10px 0;
2788 }
2789 > div {
2790 flex: 1.5;
2791 }
2792 > div:first-child {
2793 flex: 1.5;
2794 }
2795 .charitable-cta-content-left {
2796 padding: 0px 25px 0px 25px;
2797 .charitable-cta-list {
2798 margin: 20px 0 0 0 !important;
2799 ul {
2800 display: flex;
2801 margin-bottom: 20px !important;
2802 float: none !important;
2803 flex-direction: row;
2804 justify-content: space-between;
2805 align-items: center;
2806 flex-wrap: wrap;
2807 width: 100% !important;
2808 padding: 10px 0;
2809 gap: 10px;
2810 li {
2811 margin: 0 0 10px 0 !important;
2812 padding: 0 0 0 30px !important;
2813 color: #555;
2814 font-size: 13px;
2815 line-height: 14px;
2816 position: relative;
2817 width: calc(50% - 40px);
2818 &:before {
2819 content: "\2713" !important;
2820 position: absolute;
2821 width: 16px;
2822 height: 16px;
2823 background: transparent;
2824 border: 2px solid #218900;
2825 border-radius: 50%;
2826 display: inline-flex;
2827 align-items: center;
2828 justify-content: center;
2829 color: #218900;
2830 font-size: 10px;
2831 left: 0;
2832 top: 2px;
2833 }
2834 }
2835 }
2836 }
2837 a.button-primary {
2838 background-color: #218900;
2839 color: #fff;
2840 border: none;
2841 font-weight: 600;
2842 padding: 15px 20px !important;
2843 border-radius: 5px !important;
2844 line-height: normal !important;
2845 min-height: 50px !important;
2846 height: 50px !important;
2847 &:hover {
2848 background-color: #1a6d00;
2849 }
2850 }
2851 }
2852 .charitable-cta-featured-image {
2853 img {
2854 width: 100%;
2855 height: 120%;
2856 object-fit: cover;
2857 max-width: 100%;
2858 border: 1px solid #dadada;
2859 }
2860 display: flex;
2861 }
2862 .charitable-cta-button-container {
2863 display: flex;
2864 justify-content: start;
2865 align-items: center;
2866 flex-direction: row;
2867 gap: 20px;
2868 p {
2869 color: #555;
2870 }
2871 }
2872 }
2873 &.no-close-button {
2874 .charitable-cta-content {
2875 margin-top: 30px !important;
2876 margin-bottom: 20px !important;
2877 }
2878 }
2879 }
2880 body.charitable_page_charitable-reports {
2881 .charitable-cta-lite-to-pro {
2882 max-width: 100%;
2883 margin-left: auto;
2884 margin-right: auto;
2885 overflow: hidden;
2886 background-image: none !important;
2887 .charitable-cta-content {
2888 padding-bottom: 20px !important;
2889 .charitable-cta-content-left {
2890 ul {
2891 li:before {
2892 top: -1px !important;
2893 }
2894 }
2895 }
2896 .charitable-cta-featured-image {
2897 display: none !important;
2898 }
2899 }
2900 }
2901 }
2902 body.charitable_page_charitable-addons,
2903 body.charitable_page_charitable-dashboard {
2904 .charitable-cta-lite-to-pro {
2905 max-width: 1000px;
2906 overflow: hidden;
2907
2908 .charitable-cta-content {
2909 > div {
2910
2911 }
2912 justify-content: flex-start;
2913 .charitable-cta-content-left {
2914 margin-bottom: -10px !important;
2915 }
2916 .charitable-cta-featured-image {
2917 max-height: 400px;
2918 img {
2919 max-height: 100%;
2920 }
2921 }
2922 }
2923 }
2924 }
2925
2926 @media (max-width: 1100px) {
2927 .charitable-cta-lite-to-pro {
2928 background-image: none;
2929 .charitable-cta-content {
2930 flex-direction: column;
2931 }
2932 }
2933 }
2934
2935 #charitable-reports .reports-lite-cta {
2936 position: absolute !important;
2937 z-index: 9999999;
2938 top: 50%;
2939 left: 0;
2940 right: 0;
2941 transform: translateY(-50%);
2942 margin: 25px 25px 125px 25px !important;
2943 }
2944 #charitable-reports .dashboard-lite-cta {
2945 position: relative !important;
2946 margin: 0 !important;
2947 transform: none !important;
2948 }
2949 #charitable-reports {
2950 .reports-lite-cta {
2951 .list {
2952 margin: 0 0 16px 0;
2953 overflow: auto;
2954 max-width: 900px;
2955 }
2956 .green {
2957 color: #218900;
2958 font-weight: 600;
2959 }
2960 .fa-star {
2961 color: #ff982d;
2962 }
2963 }
2964 }
2965 #charitable-settings {
2966 .settings-lite-cta {
2967 ul {
2968 li {
2969 margin: 0;
2970 padding: 0 0 2px 16px;
2971 color: #555;
2972 font-size: 14px;
2973 position: relative;
2974 &:before {
2975 content: "+";
2976 position: absolute;
2977 top: -1px;
2978 left: 0;
2979 }
2980 }
2981 }
2982 .list {
2983 margin: 0 0 16px 0;
2984 overflow: auto;
2985 max-width: 900px;
2986 }
2987 .green {
2988 color: #218900;
2989 font-weight: 600;
2990 }
2991 .fa-star {
2992 color: #ff982d;
2993 }
2994 }
2995 .tablenav {
2996 .tablenav-pages {
2997 a,
2998 .tablenav-pages-navspan {
2999 min-width: 28px;
3000 height: auto;
3001 }
3002 }
3003 }
3004 }
3005 .charitable-admin-wrap {
3006 #charitable-settings {
3007 .notice {
3008 margin-left: 0 !important;
3009 margin-right: 0 !important;
3010 }
3011 }
3012 }
3013
3014
3015
3016 /* settings */
3017 select#charitable_settings_import_donations {
3018 margin-bottom: 10px;
3019 width: 100%;
3020 }
3021 .form-table {
3022 td {
3023 p.top-label {
3024 margin-bottom: 10px;
3025 }
3026 }
3027 }
3028
3029 th .badge,
3030 body.post-type-charitable .postbox h2 .badge {
3031 display: inline-block;
3032 padding: 0.25em 0.4em;
3033 font-size: 75%;
3034 font-weight: 700;
3035 line-height: 11px;
3036 text-align: center;
3037 white-space: nowrap;
3038 vertical-align: baseline;
3039 border-radius: 0.25rem;
3040 &.beta {
3041 color: #fff;
3042 background-color: #007bff;
3043 }
3044 }
3045
3046 /* admin tools */
3047
3048 .charitable-setting-dropdown-container,
3049 .charitable-setting-file-container {
3050 margin-bottom: 10px;
3051 margin-top: 5px;
3052 }
3053 form.form-contains-file.charitable-import-campaign-donations-form {
3054 margin-top: 5px;
3055 }
3056 form.form-contains-file {
3057 margin-top: 15px;
3058 input[type="file"]="file""].charitable-settings-field {
3059 font-size: 14px;
3060 }
3061 }
3062
3063 .charitable-setting-file-container {
3064 display: flex;
3065 align-items: center;
3066 justify-content: flex-start;
3067 max-width: 650px;
3068 margin-top: -5px;
3069
3070 input[type=file]=file] {
3071 padding: 4px;
3072 margin: -4px;
3073 position: relative;
3074 outline: none;
3075
3076 &::file-selector-button {
3077 border-radius: 4px;
3078 padding: 0 16px;
3079 height: 40px;
3080 cursor: pointer;
3081 background-color: white;
3082 border: 1px solid rgba(0, 0, 0, 0.16);
3083 box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
3084 margin-right: 16px;
3085 width: 132px;
3086 color: transparent;
3087
3088 &:hover {
3089 background-color: #f3f4f6;
3090 }
3091 &:active {
3092 background-color: #e5e7eb;
3093 }
3094 }
3095
3096 &::before {
3097 position: absolute;
3098 pointer-events: none;
3099 top: 11px;
3100 left: 16px;
3101 height: 20px;
3102 width: 20px;
3103 content: "";
3104 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
3105 }
3106
3107 &::after {
3108 position: absolute;
3109 pointer-events: none;
3110 top: 10px;
3111 left: 43px;
3112 color: #0964B0;
3113 content: "Upload File";
3114 }
3115
3116 &:focus-within::file-selector-button,
3117 &:focus::file-selector-button {
3118 outline: 2px solid #0964B0;
3119 outline-offset: 2px;
3120 }
3121 }
3122 }
3123
3124 @supports (-moz-appearance: none) {
3125 .charitable-setting-file-container input[type=file]=file]::file-selector-button {
3126 color: #0964B0;
3127 }
3128 }
3129
3130 /* donation history */
3131
3132 table.charitable-donor-history-table td p {
3133 margin: 0;
3134 }
3135
3136 body.charitable-admin-reports-dashboard #charitable-reports .reports-lite-cta,
3137 body.charitable-admin-settings #charitable-settings .settings-lite-cta {
3138 position: relative !important;
3139 top: 0;
3140 transform: none !important;
3141 margin-left: 0 !important;
3142 }
3143 #charitable-reports .reports-lite-cta .dismiss,
3144 #charitable-settings .settings-lite-cta .dismiss {
3145 position: absolute;
3146 top: 10px;
3147 right: 10px;
3148 color: #666;
3149 font-size: 16px;
3150 text-decoration: none;
3151 }
3152 #charitable-reports .reports-lite-cta h5,
3153 #charitable-settings .settings-lite-cta h5 {
3154 margin: 0 0 16px;
3155 font-size: 18px;
3156 font-weight: 600;
3157 line-height: 24px;
3158 }
3159 #charitable-reports .reports-lite-cta h6,
3160 #charitable-settings .settings-lite-cta h6 {
3161 font-weight: 700;
3162 font-size: 14px;
3163 margin: 0 0 16px;
3164 }
3165 #charitable-reports .reports-lite-cta p,
3166 #charitable-settings .settings-lite-cta p {
3167 color: #555;
3168 font-size: 14px;
3169 margin: 0 0 16px;
3170 }
3171 #charitable-reports .reports-lite-cta p:last-of-type,
3172 #charitable-settings .settings-lite-cta p:last-of-type {
3173 margin: 0;
3174 }
3175 #charitable-reports .reports-lite-cta p a,
3176 #charitable-settings .settings-lite-cta p a {
3177 color: #e27730;
3178 }
3179 #charitable-reports .reports-lite-cta p a:hover,
3180 #charitable-settings .settings-lite-cta p a:hover {
3181 color: #b85a1b;
3182 }
3183 #charitable-reports .reports-lite-cta ul,
3184 #charitable-settings .settings-lite-cta ul {
3185 margin: 0;
3186 padding: 0;
3187 width: 50%;
3188 float: left;
3189 }