PluginProbe
Mailchimp List Subscribe Form / trunk
Mailchimp List Subscribe Form vtrunk
1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.5 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.5.8 1.5.9 1.6.0 1.6.1 All 55 releases
← All changes | assets/css/admin.css +1027 -66 1.6.0trunk View file →
@@ -2,15 +2,18 @@
2 2 @import url('../fonts/Means/fonts.css');
3 3 @import url('../fonts/graphik/fonts.css');
4 4
5 5 :root {
6 - --mailchimp-color-text: #241c15;
6 + --mailchimp-color-text: #21262a;
7 + --mailchimp-color-text-gray: #757575;
7 8 --mailchimp-color-white: #fff;
8 9 --mailchimp-color-border: #ffe01b;
9 10 --mailchimp-color-header-bg: #fbeeca;
10 - --mailchimp-color-link: #007c89;
11 + --mailchimp-color-link: #017e89;
12 + --mailchimp-color-link-hover: #006771;
11 13 --mailchimp-color-text-light: #373737;
12 14 --mailchimp-color-text-lightest: #5d5c5d;
15 + --mailchimp-border-color: #D3D0C8;
13 16 --mailchimp-max-width: 56.25rem; /* 900 pixels */
14 17 }
15 18
16 19 .error_msg,
@@ -18,9 +21,10 @@
18 21 .notes_msg,
19 22 table.mc-user,
20 23 .mc-list-row,
21 24 .mc-list-note,
22 -.mc-section {
25 +.mc-section,
26 +.mailchimp-sf-nav-tab-wrapper {
23 27 max-width: 900px;
24 28 width: 100%;
25 29 }
26 30
@@ -44,17 +48,8 @@
44 48 border-radius: 6px;
45 49 margin: 2.75rem 0 2.25rem;
46 50 }
47 51
48 -table.mc-widefat tr:first-child {
49 - background: var(--mailchimp-color-header-bg);
50 -}
51 -
52 -table.mc-widefat tr:first-child th {
53 - color: var(--mailchimp-color-text);
54 - font-weight: 500;
55 -}
56 -
57 52 /* Buttons */
58 53 #wpbody .button-secondary {
59 54 border-color: var(--mailchimp-color-link);
60 55 color: var(--mailchimp-color-link);
@@ -232,8 +227,38 @@
232 227 table.mc-widefat.mc-api tr:first-child {
233 228 background: var(--mailchimp-color-header-bg) !important;
234 229 }
235 230
231 +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table {
232 + table-layout: fixed;
233 +}
234 +
235 +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr th:first-child,
236 +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table trtd:first-child {
237 + width: 48px;
238 +}
239 +
240 +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr th:last-child,
241 +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr td:last-child {
242 + width: 120px;
243 +}
244 +
245 +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr th {
246 + margin: 0px;
247 + padding: 12px;
248 + border-radius: 0px;
249 +}
250 +
251 +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr td {
252 + font-size: 14px;
253 + padding: 12px;
254 + word-wrap: break-word;
255 +}
256 +
257 +.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table tr td strong {
258 + word-wrap: break-word;
259 +}
260 +
236 261 a.mc-api-key {
237 262 color: var(--mailchimp-color-white);
238 263 display: block;
239 264 margin-top: 3px;
@@ -261,8 +286,33 @@
261 286 margin-top: 26px;
262 287 }
263 288
264 289 /**
290 + * Navigation
291 + */
292 +.mailchimp-sf-nav-tab-wrapper {
293 + margin-top: 1em;
294 +}
295 +
296 +.mailchimp-sf-nav-tab-wrapper a.nav-tab {
297 + border: 0px;
298 + background: transparent;
299 + color: #000;
300 + margin-left: 0;
301 + font-weight: 500;
302 + padding: 5px 12px;
303 +}
304 +
305 +.mailchimp-sf-nav-tab-wrapper a.nav-tab:hover {
306 + color: var(--mailchimp-color-link);
307 +}
308 +
309 +.mailchimp-sf-nav-tab-wrapper a.nav-tab.nav-tab-active {
310 + border-bottom: 2px solid var(--mailchimp-color-link);
311 + color: var(--mailchimp-color-link);
312 +}
313 +
314 +/**
265 315 * Mailchimp OAuth CSS
266 316 */
267 317 .mailchimp-sf-oauth-error {
268 318 color: #a73205;
@@ -280,9 +330,9 @@
280 330 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
281 331 }
282 332
283 333 #mailchimp-sf-settings-page .flex {
284 - display:flex;
334 + display:flex;
285 335 }
286 336
287 337 #mailchimp-sf-settings-page .gap-x-6 {
288 338 column-gap: 32px;
@@ -292,13 +342,13 @@
292 342 column-gap: 8px;
293 343 }
294 344
295 345 #mailchimp-sf-settings-page .justify-between {
296 - justify-content: space-between;
346 + justify-content: space-between;
297 347 }
298 348
299 349 #mailchimp-sf-settings-page .items-center {
300 - align-items: center;
350 + align-items: center;
301 351 }
302 352
303 353 #mailchimp-sf-settings-page .opacity-25 {
304 354 opacity: 0.25;
@@ -317,11 +367,10 @@
317 367 }
318 368
319 369 #mailchimp-sf-settings-page .wizard-steps {
320 370 color: rgba(36, 28, 21);
321 - font-size: 13px;
322 - line-height: 18px;
323 - margin-top: 4px;
371 + font-size: 14px;
372 + line-height: 18px;
324 373 }
325 374
326 375 #mailchimp-sf-settings-page .wizard-steps .deselected {
327 376 color: rgba(36, 28, 21, 0.3);
@@ -349,40 +398,62 @@
349 398 }
350 399 }
351 400
352 401 .mailchimp-sf-header {
353 - padding: 14px 12px;
402 + padding: 14px 36px;
354 403 background: #fff;
355 404 border-top: 4px solid var(--mailchimp-color-border);
356 - border-bottom: 1px solid rgba(36, 28, 21, 0.15);
405 + border-bottom: 1px solid var(--mailchimp-border-color);
357 406 column-gap: 34px;
358 407 margin-left: -20px;
359 408 }
360 409
361 -.mailchimp-sf-header h3 {
410 +.toplevel_page_mailchimp_sf_options .mailchimp-sf-header {
411 + column-gap: unset;
412 +}
413 +
414 +.mailchimp-sf-header h3,
415 +.mailchimp-sf-user-sync-settings-field-label {
362 416 font-family: "Means Web", serif;
363 417 margin-bottom: 0px;
364 418 margin-top: 0px;
365 - font-weight: 400;
419 + font-weight: 300;
366 420 font-size: 20px;
367 421 line-height: 1.2em;
422 + letter-spacing: -0.72px;
368 423 }
369 424
425 +.mailchimp-sf-user-sync-settings-field-label {
426 + margin-bottom: 24px;
427 + line-height: 1.25em;
428 +}
429 +
430 +.mailchimp-user-sync-subscriber-status .mailchimp-sf-user-sync-settings-field-label,
431 +.mailchimp-user-sync-user-roles .mailchimp-sf-user-sync-settings-field-label,
432 +.mailchimp-user-sync-user-sync-errors .mailchimp-sf-user-sync-settings-field-label {
433 + border-bottom: 1px solid var(--mailchimp-border-color);
434 + padding-bottom: 20px;
435 +}
436 +
370 437 .mailchimp-sf-header .logo {
371 - margin: 2px 0px;
438 + margin: 6px 0px;
372 439 }
373 440
374 441 .mailchimp-sf-header .mailchimp-sf-create-account-plus {
375 442 margin: 0px 10px;
376 - font-family: "Means Web", serif;
377 - font-size: 44px;
378 - color: #8C8C8C;
379 - font-weight: 300;
443 + font-family: "Means Web", serif;
444 + font-size: 44px;
445 + color: #8C8C8C;
446 + font-weight: 300;
380 447 }
381 448
382 -body.admin_page_mailchimp_sf_create_account,
449 +body.admin_page_mailchimp_sf_create_account {
450 + background-color: #F6F6F4;
451 + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
452 +}
453 +
383 454 body.toplevel_page_mailchimp_sf_options {
384 - background-color: #F6F6F4;
455 + background-color: #fff;
385 456 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
386 457 }
387 458
388 459 body.admin_page_mailchimp_sf_create_account a,
@@ -389,8 +460,13 @@
389 460 body.toplevel_page_mailchimp_sf_options a {
390 461 color: var(--mailchimp-color-link);
391 462 }
392 463
464 +body.admin_page_mailchimp_sf_create_account a:hover,
465 +body.toplevel_page_mailchimp_sf_options a:hover {
466 + color: var(--mailchimp-color-link-hover);
467 +}
468 +
393 469 body.admin_page_mailchimp_sf_create_account #footer-upgrade,
394 470 body.toplevel_page_mailchimp_sf_options #footer-upgrade {
395 471 display: none;
396 472 }
@@ -410,18 +486,18 @@
410 486 }
411 487
412 488 .mailchimp-sf-content-box {
413 489 background-color: #ffffff;
414 - border-radius: 12px;
415 - border: 1px solid rgba(36, 28, 21, 0.15);
416 - padding: 52px 64px;
490 + border-radius: 12px;
491 + border: 1px solid rgba(36, 28, 21, 0.15);
492 + padding: 52px 64px;
417 493 }
418 494
419 495 #mailchimp-sf-settings-page .email-opener {
420 496 font-size: 16px;
421 - line-height: 24px;
422 - font-weight: 500;
423 - text-decoration: underline;
497 + line-height: 24px;
498 + font-weight: 500;
499 + text-decoration: underline;
424 500 }
425 501
426 502 #mailchimp-sf-settings-page .h4 {
427 503 font-size: 16px;
@@ -463,32 +539,12 @@
463 539 #mailchimp-sf-business-address {
464 540 margin-top: 36px;
465 541 }
466 542
467 -.button.mailchimp-sf-button {
468 - all: unset;
469 - box-sizing: border-box;
470 - display: inline-flex;
471 - align-items: center;
472 - gap: 10px;
473 - padding: 12px 32px;
474 - position: relative;
475 - background-color: var(--mailchimp-color-link);
476 - border-radius: 38px;
477 - font-weight: 500;
478 - color: #ffffff;
479 - font-size: 13px;
480 - text-align: center;
481 - letter-spacing: 0;
482 - line-height: 20px;
483 - white-space: nowrap;
484 - cursor: pointer;
485 -}
486 -
487 543 .button.mailchimp-sf-button.button-secondary {
488 544 color: var(--mailchimp-color-link);
489 - background-color: #fff;
490 - border: 1px solid var(--mailchimp-color-link);
545 + background-color: #fff;
546 + border: 1px solid var(--mailchimp-color-link);
491 547 }
492 548
493 549 .button.mailchimp-sf-button:hover,
494 550 .button.mailchimp-sf-button:focus,
@@ -493,14 +549,14 @@
493 549 .button.mailchimp-sf-button:hover,
494 550 .button.mailchimp-sf-button:focus,
495 551 .button.mailchimp-sf-button:active {
496 552 color: #ffffff;
497 - background-color: #006570;
553 + background-color: var(--mailchimp-color-link-hover);
498 554 text-decoration: none;
499 555 }
500 556
501 557 .button.mailchimp-sf-button:focus {
502 - box-shadow: 0 0 0 1px #fff, 0 0 0 3px #006570;
558 + box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--mailchimp-color-link-hover);
503 559 }
504 560
505 561 .button.mailchimp-sf-button.button-secondary:hover,
506 562 .button.mailchimp-sf-button.button-secondary:focus,
@@ -515,9 +571,10 @@
515 571 .button.mailchimp-sf-button[disabled] {
516 572 cursor: not-allowed;
517 573 }
518 574
519 -.button.mailchimp-sf-button.small {
575 +.button.mailchimp-sf-button.small,
576 +.button.mailchimp-sf-button.user-sync-settings-submit {
520 577 padding: 8px 16px;
521 578 line-height: 14px;
522 579 float: right;
523 580 clear: both;
@@ -522,8 +579,26 @@
522 579 float: right;
523 580 clear: both;
524 581 }
525 582
583 +.migrate-to-oauth-wrapper {
584 + margin: 1em 0;
585 +}
586 +
587 +.migrate-to-oauth-wrapper .button.mailchimp-sf-button {
588 + padding: 9px 16px;
589 + line-height: 14px;
590 +}
591 +
592 +.migrate-to-oauth-wrapper button.button.mailchimp-sf-button:disabled {
593 + padding: 6px 16px;
594 +}
595 +
596 +.migrate-to-oauth-wrapper button.button.mailchimp-sf-button svg {
597 + width: 20px;
598 + height: 20px;
599 +}
600 +
526 601 .button.mailchimp-sf-button.button-secondary.small {
527 602 background-color: transparent;
528 603 }
529 604
@@ -533,9 +608,9 @@
533 608
534 609 .mailchimp-sf-create-account__body .terms a {
535 610 color: var(--mailchimp-color-link);
536 611 font-weight: 500;
537 - text-decoration: none;
612 + text-decoration: none;
538 613 }
539 614
540 615 .mailchimp-sf-create-account__body .terms p {
541 616 font-size: 16px;
@@ -544,9 +619,9 @@
544 619 color: var(--mailchimp-color-text);
545 620 }
546 621
547 622 .mailchimp-sf-create-account__body .terms p:last-child {
548 - margin-bottom: 32px;
623 + margin-bottom: 32px;
549 624 }
550 625
551 626 .mailchimp-sf-create-account__body .terms a:hover {
552 627 text-decoration: underline;
@@ -611,11 +686,11 @@
611 686 padding: 10px 16px;
612 687 width: 100%;
613 688 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
614 689 font-size: 16px;
615 - color: #000;
616 - line-height: 1.5em;
617 - font-weight: 400;
690 + color: #000;
691 + line-height: 1.5em;
692 + font-weight: 400;
618 693 }
619 694
620 695 .mailchimp-sf-form-wrapper fieldset input[type="text"]:focus,
621 696 .mailchimp-sf-form-wrapper fieldset input[type="password"]:focus,
@@ -711,9 +786,11 @@
711 786 height: auto;
712 787 }
713 788
714 789 @media screen and (max-width: 782px) {
715 - .mailchimp-sf-header {
790 + .mailchimp-sf-header,
791 + .mailchimp-sf-settings-page-hero-wrapper,
792 + .mailchimp-sf-settings-page-header-wrapper {
716 793 margin-left: -10px;
717 794 }
718 795 }
719 796
@@ -728,6 +805,890 @@
728 805 }
729 806
730 807 .mailchimp-sf-header {
731 808 column-gap: 16px;
809 + }
810 +}
811 +
812 +.mailchimp-sf-user-sync-page {
813 + max-width: 900px;
814 +}
815 +
816 +.mailchimp-sf-user-sync-page .subscribe_status_label {
817 + font-weight: 500;
818 +}
819 +
820 +.mailchimp-sf-user-sync-page p.description_small {
821 + font-size: 0.9em;
822 + margin-bottom: 10px;
823 +}
824 +
825 +.mailchimp-sf-user-sync-status {
826 + margin: 15px 0;
827 + padding: 10px;
828 + background: #fff;
829 + border: 1px solid #ccd0d4;
830 + border-radius: 4px;
831 +}
832 +.mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
833 + display: flex;
834 + align-items: center;
835 + flex-direction: row;
836 +}
837 +.mailchimp-sf-user-sync-status .sync-status-text {
838 + font-size: 14px;
839 + line-height: 1.4;
840 +}
841 +
842 +a.mailchimp-sf-button.mailchimp-cancel-user-sync-button {
843 + margin-left: auto;
844 + color: var(--mailchimp-color-text);
845 +}
846 +
847 +a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
848 + color: var(--mailchimp-color-text);
849 +}
850 +
851 +@media screen and (max-width: 480px) {
852 + .mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
853 + flex-direction: column;
854 + align-items: flex-start;
855 + }
856 +
857 + .mailchimp-cancel-user-sync-button {
858 + margin-left: 0px;
859 + margin-top: 10px;
860 + }
861 +}
862 +
863 +.mailchimp-sf-user-sync-errors {
864 + margin-top: 2rem;
865 +}
866 +
867 +.mailchimp-sf-user-sync-errors-footer {
868 + display: block;
869 + margin: 1em 0;
870 + text-align: right;
871 +}
872 +
873 +.mailchimp-sf-user-sync-error-action {
874 + min-width: 120px;
875 + text-align: right;
876 + display: flex;
877 + align-items: center;
878 +}
879 +
880 +.mailchimp-sf-start-user-sync-wrapper {
881 + width: 100%;
882 + margin-top: 2em;
883 + background-color: #ffffff;
884 + border: 1px solid #ccd0d4;
885 + border-radius: 6px;
886 +}
887 +
888 +.mailchimp-sf-start-user-sync-box {
889 + display: flex;
890 + justify-content: space-between;
891 + align-items: center;
892 + padding: 1rem;
893 +}
894 +
895 +.mailchimp-sf-start-user-sync-box h2 {
896 + margin: 0;
897 +}
898 +
899 +.mailchimp-sf-start-user-sync-box p {
900 + margin-top: 0.5rem;
901 +}
902 +
903 +.mailchimp-sf-start-user-sync-box .mailchimp-sf-button {
904 + float: none;
905 + margin-right: 8px;
906 +}
907 +
908 +.mailchimp-sf-start-user-sync-box a {
909 + text-decoration: none;
910 +}
911 +
912 +#mailchimp-sf-settings-page .user-profile-wrapper {
913 + display: flex;
914 + flex-direction: row;
915 + justify-content: flex-end;
916 + align-items: center;
917 + padding: 0px;
918 + gap: 24px;
919 + margin-left: auto;
920 +}
921 +
922 +#mailchimp-sf-settings-page .user-profile-wrapper form {
923 + margin: 0px;
924 +}
925 +
926 +#mailchimp-sf-settings-page .user-profile {
927 + display: flex;
928 + flex-direction: row;
929 + align-items: center;
930 + padding: 0px;
931 + gap: 8px;
932 +}
933 +
934 +#mailchimp-sf-settings-page .user-profile-avatar {
935 + height: 40px;
936 + line-height: 1;
937 +}
938 +
939 +#mailchimp-sf-settings-page .user-profile-avatar img {
940 + width: 40px;
941 + height: 40px;
942 + border-radius: 50%;
943 + border: 1px solid var(--mailchimp-border-color);
944 + box-sizing: border-box;
945 +}
946 +
947 +#mailchimp-sf-settings-page .user-profile-details {
948 + display: flex;
949 + flex-direction: column;
950 + justify-content: center;
951 + align-items: flex-start;
952 + padding: 0px;
953 + gap: 2px;
954 +}
955 +
956 +#mailchimp-sf-settings-page .user-profile-details .user-profile-name {
957 + font-size: 16px;
958 + font-weight: 500;
959 + line-height: 18px;
960 + color: var(--mailchimp-color-text);
961 +}
962 +
963 +#mailchimp-sf-settings-page .user-profile-details .user-profile-email {
964 + font-size: 14px;
965 + font-weight: 400;
966 + line-height: 16px;
967 + color: var(--mailchimp-color-text);
968 +}
969 +
970 +/* Settings Page Hero */
971 +.mailchimp-sf-settings-page-hero-wrapper,
972 +.mailchimp-sf-settings-page-header-wrapper {
973 + margin-left: -20px;
974 + background-color: #fff;
975 + border-bottom: 1px solid rgba(36, 28, 21, 0.15);
976 +}
977 +
978 +#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero,
979 +#mailchimp-sf-settings-page .mailchimp-sf-settings-page-header {
980 + display: flex;
981 + flex-direction: row;
982 + align-items: center;
983 + justify-content: space-between;
984 + max-width: 1200px;
985 + margin: 0 auto;
986 + padding: 32px 40px;
987 + gap: 32px;
988 +}
989 +
990 +.mailchimp-sf-settings-page-hero-title-wrapper,
991 +.mailchimp-sf-settings-page-header-title-wrapper,
992 +.mailchimp-sf-settings-page-hero-content-wrapper {
993 + flex: 1;
994 +}
995 +
996 +.mailchimp-sf-settings-page-hero-title,
997 +.mailchimp-sf-settings-page-header-title {
998 + font-family: "Means Web", serif;
999 + font-size: 36px;
1000 + line-height: 1.1em;
1001 + margin-bottom: 24px;
1002 + margin-top: 0px;
1003 + font-weight: 300;
1004 + letter-spacing: -0.72px;
1005 +}
1006 +
1007 +.mailchimp-sf-settings-page-header-title {
1008 + margin-bottom: 0px;
1009 +}
1010 +
1011 +.mailchimp-sf-settings-page-hero-description,
1012 +.mailchimp-sf-settings-list-note {
1013 + font-size: 16px;
1014 + font-weight: 500;
1015 + line-height: 18px;
1016 + color: var(--mailchimp-color-text);
1017 +}
1018 +
1019 +.mailchimp-sf-settings-list-note {
1020 + margin-top: 0px;
1021 + margin-bottom: 8px;
1022 +}
1023 +
1024 +.mailchimp-sf-settings-page-hero-content h3 {
1025 + font-family: "Means Web", serif;
1026 + font-size: 20px;
1027 + line-height: 1.25em;
1028 + font-weight: 300;
1029 + letter-spacing: -0.72px;
1030 +}
1031 +
1032 +.mailchimp-sf-settings-page-hero-content p,
1033 +.mailchimp-sf-settings-list-description {
1034 + font-weight: 400;
1035 + line-height: 1.35em;
1036 + color: var(--mailchimp-color-text);
1037 +}
1038 +
1039 +.mailchimp-sf-settings-list-description {
1040 + font-size: 14px;
1041 + margin-top: 0px;
1042 + color: var(--mailchimp-color-text-gray);
1043 +}
1044 +
1045 +.mailchimp-sf-settings-page-hero-content-wrapper {
1046 + display: flex;
1047 + flex-direction: row;
1048 + justify-content: center;
1049 + align-items: center;
1050 + padding: 0px 24px;
1051 + gap: 24px;
1052 + background: #EEEEEA;
1053 + border-radius: 8px;
1054 + box-sizing: border-box;
1055 +}
1056 +
1057 +.mailchimp-sf-settings-page-hero-content,
1058 +.mailchimp-sf-settings-page-hero-content-image {
1059 + flex: 1;
1060 +}
1061 +
1062 +.mailchimp-sf-settings-page-hero-content-image {
1063 + line-height: 0;
1064 + margin-top: 24px;
1065 + align-self: end;
1066 +}
1067 +
1068 +.mailchimp-sf-settings-page-hero-content-image img {
1069 + width: 100%;
1070 + height: auto;
1071 +}
1072 +
1073 +/* Settings List Select */
1074 +.mailchimp-sf-settings-list-select-wrapper {
1075 + display: flex;
1076 + flex-direction: row;
1077 + align-items: center;
1078 + gap: 8px;
1079 + margin-bottom: 16px;
1080 +}
1081 +
1082 +/* Buttons */
1083 +.mailchimp-sf-button,
1084 +.button.mailchimp-sf-button {
1085 + all: unset;
1086 + box-sizing: border-box;
1087 + display: inline-flex;
1088 + align-items: center;
1089 + gap: 10px;
1090 + padding: 0 18px;
1091 + position: relative;
1092 + background-color: #f0f4f6;
1093 + border-radius: 6px;
1094 + font-weight: 400;
1095 + color: var(--mailchimp-color-text);
1096 + font-size: 16px;
1097 + line-height: 16px;
1098 + text-align: center;
1099 + letter-spacing: 0;
1100 + white-space: nowrap;
1101 + cursor: pointer;
1102 + text-align: center;
1103 + vertical-align: middle;
1104 + -ms-transition: all 0.2s;
1105 + transition: all 0.2s;
1106 + height: 40px;
1107 + border: 1px solid transparent;
1108 + white-space: nowrap;
1109 + justify-content: center;
1110 +}
1111 +
1112 +.mailchimp-sf-button:hover, .mailchimp-sf-button:active {
1113 + background-color: #d5dee3
1114 +}
1115 +
1116 +.mailchimp-sf-button:focus {
1117 + background-color: #d5dee3;
1118 + outline: 2px solid var(--mailchimp-color-link);
1119 +}
1120 +
1121 +.mailchimp-sf-button[disabled] {
1122 + pointer-events: none;
1123 + opacity: .4;
1124 +}
1125 +
1126 +.mailchimp-sf-button.button-primary,
1127 +.mailchimp-sf-button.btn-primary {
1128 + background-color: var(--mailchimp-color-link);
1129 + border-color: var(--mailchimp-color-link);
1130 + color: #fff;
1131 +}
1132 +
1133 +body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.button-primary:hover,
1134 +body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover {
1135 + color: #fff;
1136 +}
1137 +
1138 +.mailchimp-sf-button.button-primary:hover,
1139 +.mailchimp-sf-button.button-primary:active,
1140 +.mailchimp-sf-button.btn-primary:hover,
1141 +.mailchimp-sf-button.btn-primary:active {
1142 + background-color: var(--mailchimp-color-link-hover);
1143 +}
1144 +
1145 +.mailchimp-sf-button.button-primary:focus,
1146 +.mailchimp-sf-button.btn-primary:focus {
1147 + background-color: var(--mailchimp-color-link-hover);
1148 + border-color: var(--mailchimp-color-link-hover);
1149 + outline: 2px solid var(--mailchimp-color-link-hover);
1150 + box-shadow: none;
1151 +}
1152 +
1153 +.mailchimp-sf-button.btn-small {
1154 + font-size: 14px;
1155 + height: 36px;
1156 +}
1157 +
1158 +.mailchimp-sf-section-footer {
1159 + text-align: right;
1160 +}
1161 +
1162 +.mailchimp-sf-section-footer p.submit {
1163 + margin: 0px;
1164 + padding: 0px;
1165 + text-align: right;
1166 +}
1167 +
1168 +.mailchimp-sf-section-footer .mailchimp-sf-button {
1169 + margin: 16px 0px;
1170 +}
1171 +
1172 +/* Settings Page */
1173 +.mailchimp-sf-settings-page,
1174 +.mailchimp-sf-analytics-page {
1175 + max-width: 1200px;
1176 + margin: 0 auto;
1177 + padding: 32px 20px;
1178 +}
1179 +
1180 +.mailchimp-sf-analytics-page {
1181 + padding: 22px 20px 32px 20px;
1182 +}
1183 +
1184 +.mailchimp-sf-settings-list-wrapper {
1185 + margin-bottom: 20px;
1186 +}
1187 +
1188 +/* Main Settings */
1189 +.mailchimp-sf-main-settings-wrapper {
1190 + display: flex;
1191 + flex-direction: row;
1192 + align-items: center;
1193 + justify-content: space-between;
1194 +}
1195 +
1196 +.mailchimp-sf-main-setings-wrapper,
1197 +.mailchimp-sf-user-sync-page-wrapper {
1198 + display: flex;
1199 + flex-direction: row;
1200 + align-items: flex-start;
1201 + justify-content: space-between;
1202 + gap: 16px;
1203 +}
1204 +
1205 +.mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings,
1206 +.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page {
1207 + flex: 3;
1208 +}
1209 +
1210 +.mailchimp-sf-main-setings-wrapper .mailchimp-sf-settings-form-previewer,
1211 +.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column {
1212 + flex: 1;
1213 + width: 100%;
1214 +}
1215 +
1216 +.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column {
1217 + min-width: 250px;
1218 +}
1219 +
1220 +.mailchimp-sf-main-settings,
1221 +.mailchimp-sf-user-sync-page {
1222 + max-width: 800px;
1223 +}
1224 +
1225 +table.widefat.mailchimp-sf-settings-table {
1226 + margin-top: 16px;
1227 + width: 100%;
1228 + border-radius: 8px;
1229 + border: 1px solid var(--mailchimp-border-color);
1230 +}
1231 +
1232 +.mailchimp-sf-settings-table thead tr th {
1233 + background-color: var(--mailchimp-color-header-bg);
1234 + padding: 24px;
1235 + border-top-left-radius: 8px;
1236 + border-top-right-radius: 8px;
1237 +}
1238 +
1239 +.mailchimp-sf-settings-form-previewer .mailchimp-sf-settings-table thead tr th {
1240 + background-color: #EEEEEA;
1241 +}
1242 +
1243 +.mailchimp-sf-settings-table thead tr th h2 {
1244 + color: var(--mailchimp-color-text);
1245 + font-family: "Means Web", serif;
1246 + font-weight: 300;
1247 + letter-spacing: -0.72px;
1248 + font-size: 24px;
1249 + line-height: 1.25em;
1250 + margin: 0;
1251 +}
1252 +
1253 +.mailchimp-sf-settings-table tbody tr th {
1254 + padding: 24px 0px 0px 24px;
1255 +}
1256 +
1257 +.mailchimp-sf-settings-table tr th.mailchimp-sf-option-header {
1258 + width: 145px;
1259 +}
1260 +
1261 +.mailchimp-sf-settings-table tbody tr:last-child th {
1262 + padding-bottom: 24px;
1263 +}
1264 +
1265 +.mailchimp-sf-settings-table tbody tr td {
1266 + padding: 24px 24px 0px 24px;
1267 +}
1268 +
1269 +.mailchimp-sf-settings-table tbody tr:last-child td {
1270 + padding-bottom: 24px;
1271 +}
1272 +
1273 +.mailchimp-sf-settings-table tbody tr th,
1274 +.mailchimp-sf-settings-table tbody tr th label {
1275 + font-weight: 500;
1276 + font-size: 16px;
1277 + line-height: 18px;
1278 + color: var(--mailchimp-color-text);
1279 + word-wrap: normal;
1280 +}
1281 +
1282 +.mailchimp-sf-settings-table tbody tr td p.description {
1283 + font-size: 12px;
1284 + font-weight: 400;
1285 + line-height: 1.35em;
1286 + color: var(--mailchimp-color-text-gray);
1287 + margin: 0px;
1288 +}
1289 +
1290 +.mailchimp-sf-settings-table tbody tr td,
1291 +p.mailchimp-sf-settings-table-description {
1292 + font-size: 16px;
1293 + font-weight: 400;
1294 + line-height: 1.35em;
1295 + color: var(--mailchimp-color-text);
1296 + word-wrap: normal;
1297 +}
1298 +
1299 +.mailchimp-sf-settings-table tbody tr td strong {
1300 + word-wrap: normal;
1301 +}
1302 +
1303 +p.mailchimp-sf-settings-table-description {
1304 + padding: 0px;
1305 + margin: 0px;
1306 + margin-top: 12px;
1307 +}
1308 +
1309 +table.widefat.mailchimp-sf-settings-table ul {
1310 + margin: 0px;
1311 + padding: 0px;
1312 +}
1313 +
1314 +.mailchimp-sf-user-sync-settings-fields {
1315 + display: flex;
1316 + flex-direction: column;
1317 + gap: 24px;
1318 +}
1319 +
1320 +/* Input fields */
1321 +#mailchimp-sf-settings-page select {
1322 + font-size: 14px;
1323 + padding: 8px 32px 8px 10px;
1324 + height: 40px;
1325 + background-color: #fff;
1326 + border-radius: 6px;
1327 + border: 1px solid #c3ced5;
1328 + color: var(--mailchimp-color-text);
1329 + line-height: 1.2em;
1330 + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
1331 + font-weight: 400;
1332 + transition: all 0.2s;
1333 + min-width: 200px;
1334 +}
1335 +
1336 +#mailchimp-sf-settings-page select:hover {
1337 + background-color: #f8fafb;
1338 + border-color: #3c4348;
1339 +}
1340 +
1341 +#mailchimp-sf-settings-page select:focus {
1342 + background-color: #fff;
1343 + border-color: var(--mailchimp-color-link);
1344 + -webkit-box-shadow: none;
1345 + box-shadow: none;
1346 + outline-offset: -2px;
1347 + outline: 2px solid var(--mailchimp-color-link);
1348 +}
1349 +
1350 +#mailchimp-sf-settings-page input[type="text"],
1351 +#mailchimp-sf-settings-page input[type="tel"] {
1352 + font-size: 16px;
1353 + padding: 10px 12px;
1354 + height: 40px;
1355 + background-color: #fff;
1356 + border-radius: 4px;
1357 + border: 1px solid var(--mailchimp-border-color);
1358 + color: var(--mailchimp-color-text);
1359 + line-height: 1.35em;
1360 + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
1361 + font-weight: 400;
1362 + transition: all 0.2s;
1363 +}
1364 +
1365 +#mailchimp-sf-settings-page input[type="text"]:hover,
1366 +#mailchimp-sf-settings-page input[type="tel"]:hover {
1367 + background-color: #f8fafb;
1368 + border-color: #3c4348;
1369 + outline: none;
1370 +}
1371 +
1372 +#mailchimp-sf-settings-page input[type="text"]:focus,
1373 +#mailchimp-sf-settings-page input[type="tel"]:focus {
1374 + outline-offset: -2px;
1375 + outline: 2px solid var(--mailchimp-color-link);
1376 +}
1377 +
1378 +#mailchimp-sf-settings-page textarea {
1379 + font-size: 16px;
1380 + padding: 10px 12px;
1381 + background-color: #fff;
1382 + border-radius: 4px;
1383 + border: 1px solid var(--mailchimp-border-color);
1384 + color: var(--mailchimp-color-text);
1385 + line-height: 1.35em;
1386 + font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
1387 + font-weight: 400;
1388 + transition: all 0.2s;
1389 + min-width: 200px;
1390 +}
1391 +
1392 +#mailchimp-sf-settings-page textarea:hover {
1393 + background-color: #f8fafb;
1394 + border-color: #3c4348;
1395 + outline: none;
1396 +}
1397 +
1398 +#mailchimp-sf-settings-page textarea:focus {
1399 + outline-offset: -2px;
1400 + outline: 2px solid var(--mailchimp-color-link);
1401 +}
1402 +
1403 +.mailchimp-sf-ch-wrapper {
1404 + display: inline-block;
1405 + margin: 0.5rem;
1406 +}
1407 +
1408 +input[type=checkbox].mailchimp-sf-checkbox {
1409 + appearance: none;
1410 + width: 24px;
1411 + height: 24px;
1412 + border: 1px solid var(--mailchimp-border-color);
1413 + border-radius: 6px;
1414 + cursor: pointer;
1415 + position: relative;
1416 + transition: all 0.2s;
1417 + box-shadow: none;
1418 + margin: 0px;
1419 +}
1420 +
1421 +input[type=checkbox].mailchimp-sf-checkbox:focus {
1422 + outline: 2px solid var(--mailchimp-color-link);
1423 +}
1424 +
1425 +input[type=checkbox].mailchimp-sf-checkbox:checked {
1426 + background-color: var(--mailchimp-color-link);
1427 + border-color: var(--mailchimp-color-link);
1428 +}
1429 +
1430 +input[type=checkbox].mailchimp-sf-checkbox:checked::before {
1431 + content: "";
1432 + width: auto;
1433 + height: auto;
1434 +}
1435 +
1436 +input[type=checkbox].mailchimp-sf-checkbox:checked:after {
1437 + content: "";
1438 + width: 12px;
1439 + height: 5px;
1440 + border-radius: 0.5px;
1441 + transform: rotate(-45deg);
1442 + border-left: 2px solid #fff;
1443 + border-bottom: 2px solid #fff;
1444 + margin: 6px 4px;
1445 + display: block;
1446 +}
1447 +
1448 +input[type=checkbox].mailchimp-sf-checkbox[disabled] {
1449 + opacity: 0.3;
1450 + cursor: not-allowed;
1451 +}
1452 +
1453 +input[type=radio].mailchimp-sf-radio {
1454 + appearance: none;
1455 + width: 28px;
1456 + height: 28px;
1457 + border: 1px solid var(--mailchimp-border-color);
1458 + border-radius: 50%;
1459 + cursor: pointer;
1460 + position: relative;
1461 + box-shadow: none;
1462 +}
1463 +
1464 +input[type=radio].mailchimp-sf-radio:checked {
1465 + border: 2px solid var(--mailchimp-color-link);
1466 + background-color: #fff;
1467 +}
1468 +
1469 +input[type=radio].mailchimp-sf-radio:checked:before {
1470 + display: none;
1471 +}
1472 +
1473 +input[type=radio].mailchimp-sf-radio:checked:after {
1474 + content: "";
1475 + display: block;
1476 + width: 16px;
1477 + height: 16px;
1478 + background-color: var(--mailchimp-color-link);
1479 + border-radius: 50%;
1480 + margin: 4px;
1481 +}
1482 +
1483 +.widefat td p.radio-description {
1484 + font-size: 16px;
1485 + font-weight: 400;
1486 + line-height: 1.35em;
1487 + color: var(--mailchimp-color-text-gray);
1488 + margin-top: 8px;
1489 + margin-left: 36px;
1490 + margin-bottom: 24px;
1491 +}
1492 +
1493 +.mailchimp-sf-user-sync-user-roles {
1494 + display: flex;
1495 + flex-wrap: wrap;
1496 + gap: 24px;
1497 +}
1498 +
1499 +.mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{
1500 + flex: 1 1 45%;
1501 +}
1502 +
1503 +span.mailchimp-sf-last-sync-time {
1504 + vertical-align: middle;
1505 + margin-left: 12px;
1506 + color: var(--mailchimp-color-text-gray);
1507 +}
1508 +
1509 +.mailchimp-sf-toggle-switch {
1510 + position: relative;
1511 + display: inline-block;
1512 + width: 40px;
1513 + height: 24px;
1514 + min-width: 40px;
1515 +}
1516 +
1517 +.mailchimp-sf-toggle-switch input[type="checkbox"] {
1518 + opacity: 0;
1519 + width: 0;
1520 + height: 0;
1521 +}
1522 +
1523 +.mailchimp-sf-toggle-slider {
1524 + position: absolute;
1525 + cursor: pointer;
1526 + top: 0;
1527 + left: 0;
1528 + right: 0;
1529 + bottom: 0;
1530 + background-color: var(--mailchimp-border-color);
1531 + transition: .4s;
1532 + border-radius: 24px;
1533 +}
1534 +
1535 +.mailchimp-sf-toggle-slider:before {
1536 + position: absolute;
1537 + content: "";
1538 + height: 20px;
1539 + width: 20px;
1540 + left: 2px;
1541 + bottom: 2px;
1542 + background-color: white;
1543 + transition: .4s;
1544 + border-radius: 50%;
1545 +}
1546 +
1547 +input:checked + .mailchimp-sf-toggle-slider {
1548 + background-color: var(--mailchimp-color-link);
1549 +}
1550 +
1551 +input:checked + .mailchimp-sf-toggle-slider:before {
1552 + transform: translateX(16px);
1553 +}
1554 +
1555 +#mailchimp-sf-settings-page .input-checkbox-wrapper {
1556 + display: flex;
1557 + flex-direction: row;
1558 + align-items: center;
1559 + gap: 8px;
1560 +}
1561 +
1562 +#mailchimp-sf-settings-page .input-checkbox-wrapper label {
1563 + font-size: 14px;
1564 + font-weight: 400;
1565 + line-height: 1.35em;
1566 + color: var(--mailchimp-color-text-gray);
1567 + margin: 0px;
1568 +}
1569 +
1570 +#mailchimp-sf-settings-page .mailchimp-sf-user-sync-settings-fields .input-checkbox-wrapper label {
1571 + font-size: 16px;
1572 +}
1573 +
1574 +.mailchimp-sf-settings-table tbody tr td.mailchimp-sf-note {
1575 + font-size: 12px;
1576 + font-weight: 400;
1577 + line-height: 1.35em;
1578 + color: var(--mailchimp-color-text-gray);
1579 + margin: 0px;
1580 +}
1581 +
1582 +.mailchimp-sf-form-preview-content {
1583 + position: relative;
1584 +}
1585 +
1586 +.toplevel_page_mailchimp_sf_options .notice {
1587 + display: none;
1588 +}
1589 +
1590 +.toplevel_page_mailchimp_sf_options .mailchimp-sf-settings-page .notice {
1591 + display: block;
1592 +}
1593 +
1594 +@media screen and (max-width: 992px) {
1595 + .mailchimp-sf-main-setings-wrapper,
1596 + .mailchimp-sf-user-sync-page-wrapper {
1597 + flex-direction: column;
1598 + }
1599 +
1600 + .mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings,
1601 + .mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page {
1602 + flex: 1;
1603 + }
1604 +}
1605 +
1606 +@media screen and (max-width: 782px) {
1607 + #mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero,
1608 + #mailchimp-sf-settings-page .mailchimp-sf-settings-page-header {
1609 + flex-direction: column;
1610 + padding: 32px 20px 32px 30px;
1611 + }
1612 +
1613 + .mailchimp-sf-settings-page,
1614 + .mailchimp-sf-analytics-page {
1615 + padding: 32px 10px;
1616 + }
1617 +
1618 + .mailchimp-sf-header {
1619 + padding: 14px 20px;
1620 + }
1621 +}
1622 +
1623 +@media screen and (max-width: 480px) {
1624 + .mailchimp-sf-header {
1625 + flex-direction: column;
1626 + gap: 8px;
1627 + }
1628 +
1629 + .mailchimp-sf-settings-list-select-wrapper {
1630 + flex-direction: column;
1631 + align-items: flex-start;
1632 + }
1633 +
1634 + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select,
1635 + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select,
1636 + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button,
1637 + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select-button input {
1638 + width: 100%;
1639 + }
1640 +
1641 + .mailchimp-sf-settings-list-select-wrapper .mailchimp-sf-settings-list-select select {
1642 + max-width: 100%;
1643 + }
1644 +
1645 + #mailchimp-sf-settings-page .user-profile-wrapper {
1646 + margin: 0 auto;
1647 + gap: 12px;
1648 + }
1649 +
1650 + .mailchimp-sf-user-sync-user-roles .input-checkbox-wrapper{
1651 + flex: 1 1 100%;
1652 + }
1653 +
1654 + .mailchimp-sf-user-sync-error-action {
1655 + flex-direction: column;
1656 + min-width: 0;
1657 + }
1658 +
1659 + #mailchimp-sf-settings-page .mailchimp-sf-list-settings .input-checkbox-wrapper {
1660 + flex-direction: column;
1661 + align-items: flex-start;
1662 + }
1663 +
1664 + .mailchimp-sf-settings-table tbody tr th {
1665 + padding-left: 16px;
1666 + }
1667 +
1668 + .mailchimp-sf-settings-table tbody tr td {
1669 + padding: 24px 16px 0px 16px;
1670 + }
1671 +
1672 + .mailchimp-sf-settings-table tr th.mailchimp-sf-option-header {
1673 + width: auto;
1674 + }
1675 +
1676 + span.mailchimp-sf-last-sync-time {
1677 + display: block;
1678 + margin-left: 0px;
1679 + margin-top: 12px;
1680 + }
1681 +
1682 + .mailchimp-sf-user-sync-page table.widefat.mailchimp-sf-settings-table {
1683 + table-layout: fixed;
1684 + }
1685 +
1686 + .mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table {
1687 + table-layout: auto;
1688 + }
1689 +
1690 + .mailchimp-sf-user-sync-errors {
1691 + width: 100%;
1692 + overflow-x: scroll;
732 1693 }
733 1694 }