PluginProbe
Mailchimp List Subscribe Form / 1.9.0
Mailchimp List Subscribe Form v1.9.0
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
mailchimp / assets / css / admin.css

admin.css in Mailchimp List Subscribe Form 1.9.0, at assets/css/admin.css

895 lines 17.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Import fonts */
2 @import url('../fonts/Means/fonts.css');
3 @import url('../fonts/graphik/fonts.css');
4
5 :root {
6 --mailchimp-color-text: #241c15;
7 --mailchimp-color-white: #fff;
8 --mailchimp-color-border: #ffe01b;
9 --mailchimp-color-header-bg: #fbeeca;
10 --mailchimp-color-link: #007c89;
11 --mailchimp-color-text-light: #373737;
12 --mailchimp-color-text-lightest: #5d5c5d;
13 --mailchimp-max-width: 56.25rem; /* 900 pixels */
14 }
15
16 .error_msg,
17 .success_msg,
18 .notes_msg,
19 table.mc-user,
20 .mc-list-row,
21 .mc-list-note,
22 .mc-section,
23 .mailchimp-sf-nav-tab-wrapper {
24 max-width: 900px;
25 width: 100%;
26 }
27
28 /* Header */
29 .mailchimp-header {
30 align-items: center;
31 background-color: var(--mailchimp-color-white);
32 border-top: 2px solid var(--mailchimp-color-border);
33 box-sizing: border-box;
34 display: flex;
35 gap: 1rem;
36 justify-content: space-between;
37 max-width: var(--mailchimp-max-width);
38 padding: 0.75rem 1rem;
39 }
40
41 /* Sections */
42 table.mc-widefat, .mailchimp-sf-user-sync-page table.form-table {
43 background: var(--mailchimp-color-white);
44 border: 2px solid var(--mailchimp-color-header-bg) !important;
45 border-radius: 6px;
46 margin: 2.75rem 0 2.25rem;
47 }
48
49 .mailchimp-sf-user-sync-page table.form-table {
50 border-collapse: separate;
51 border-spacing: 0px;
52 }
53
54 .mailchimp-sf-user-sync-page table.form-table tr:first-child,
55 table.mc-widefat tr:first-child {
56 background: var(--mailchimp-color-header-bg);
57 }
58
59 .mailchimp-sf-user-sync-page table.form-table tr:first-child th,
60 table.mc-widefat tr:first-child th {
61 color: var(--mailchimp-color-text);
62 font-weight: 500;
63 }
64
65 /* Buttons */
66 #wpbody .button-secondary {
67 border-color: var(--mailchimp-color-link);
68 color: var(--mailchimp-color-link);
69 }
70
71 .error_msg {
72 --mailchimp-error-bg: #fadbd5;
73 --mailchimp-error-border: #db3a1b;
74 background: var(--mailchimp-error-bg);
75 border: 1px solid var(--mailchimp-error-border);
76 border-radius: 6px;
77 box-sizing: border-box;
78 color: var(--mailchimp-color-text);
79 font-size: 0.75rem;
80 line-height: 1;
81 margin: 12px 0;
82 padding: 9px;
83 }
84
85 .success_msg,
86 .notes_msg {
87 background: var(--mailchimp-color-header-bg);
88 border-radius: 6px;
89 box-sizing: border-box;
90 color: var(--mailchimp-color-text-light);
91 font-size: 0.75rem;
92 line-height: 1;
93 margin: 12px 0;
94 padding: 9px;
95 }
96
97 /* User */
98 table.mc-user {
99 margin-top: 19px;
100 }
101
102 table.mc-user tr {
103 border: 1px solid var(--mailchimp-color-link);
104 border-radius: 38px;
105 float: right;
106 padding: 0px 11px;
107 }
108
109 .mc-user td:first-of-type {
110 font-weight: 400 !important;
111 padding-right: 1rem;
112 }
113
114 .mc-user td:last-of-type {
115 min-width: 75px;
116 }
117
118 .mc-user h3 {
119 font-weight: 400;
120 text-indent: 9px;
121 }
122
123 /* List Selection */
124 .mc-list-row {
125 margin-bottom: 12px;
126 }
127
128 .mc-list-row td:first-of-type {
129 min-width: 200px;
130 padding: 12px 12px 12px 0;
131 }
132
133 .mc-list-row td:last-of-type {
134 padding: 12px 12px 12px 0;
135 width: 80px;
136 }
137
138 .mc-list-note {
139 border-bottom: 2px solid var(--mailchimp-color-text);
140 color: var(--mailchimp-color-text-lightest);
141 font-size: 0.8125rem;
142 font-weight: 400;
143 margin-bottom: 8px;
144 margin-top: 7px;
145 padding: 0 0 18px;
146 }
147
148 table.mc-list-select {
149 margin-bottom: -40px;
150 }
151
152 /* Headings */
153 .mailchimp-header h1 {
154 font-weight: 600;
155 margin: 0.75em 0;
156 padding: 0;
157 }
158
159 .mailchimp-header h1,
160 .mc-h2,
161 .mc-h3,
162 .mc-p {
163 color: var(--mailchimp-color-text);
164 }
165
166 .mc-h2 {
167 font-size: 1.625rem;
168 margin-bottom: 0;
169 font-weight: 400;
170 }
171
172 .mc-h3 {
173 border-bottom: 2px solid var(--mailchimp-color-text);
174 font-size: 1.125rem;
175 margin-bottom: 12px;
176 margin-top: 36px;
177 padding-bottom: 12px;
178 }
179
180 .mc-p {
181 font-size: 1rem;
182 font-weight: 400;
183 margin-bottom: 0;
184 }
185
186 .mc-p a {
187 color: var(--mailchimp-color-link);
188 font-weight: 400;
189 }
190
191 /* Table */
192 .mailchimp-sf-user-sync-page table.form-table td,
193 .mailchimp-sf-user-sync-page table.form-table th,
194 table.mc-widefat td,
195 table.mc-widefat th {
196 padding: 18px;
197 text-align: left;
198 text-shadow: none;
199 }
200
201 .mailchimp-sf-user-sync-page table.form-table .last-row td,
202 .mailchimp-sf-user-sync-page table.form-table .last-row th,
203 table.mc-widefat .last-row td,
204 table.mc-widefat .last-row th {
205 border-bottom: none !important;
206 }
207
208 table.mc-widefat th {
209 color: var(--mailchimp-color-text-light) !important;
210 font-weight: 500;
211 width: 130px;
212 }
213
214 .mailchimp-sf-user-sync-page table.form-table th {
215 color: var(--mailchimp-color-text-light);
216 font-weight: 500;
217 }
218
219 table.mc-widefat td label {
220 display: block;
221 font-size: 0.75rem;
222 font-style: normal;
223 margin-top: -17px;
224 padding-left: 24px;
225 }
226
227 table.mc-widefat td {
228 color: var(--mailchimp-color-text-lightest) !important;
229 font-size: 0.75rem;
230 line-height: 1.125 !important;
231 }
232
233 .mailchimp-sf-user-sync-page table.form-table td input,
234 table.mc-widefat td input {
235 display: inline-block;
236 font-style: normal;
237 }
238
239 table.mc-widefat.mc-api {
240 border-radius: 6px;
241 margin-bottom: 19px;
242 margin-top: 19px;
243 }
244
245 table.mc-widefat.mc-api td,
246 table.mc-widefat.mc-api th {
247 border-bottom: none !important;
248 }
249
250 table.mc-widefat.mc-api tr:first-child {
251 background: var(--mailchimp-color-header-bg) !important;
252 }
253
254 a.mc-api-key {
255 color: var(--mailchimp-color-white);
256 display: block;
257 margin-top: 3px;
258 }
259
260 a.mc-api-key:hover {
261 color: var(--mailchimp-color-white);
262 text-decoration: underline;
263 }
264
265 .mc-api-submit {
266 margin-bottom: 19px;
267 }
268
269 .mc-submit {
270 clear: both;
271 float: right;
272 }
273
274 th.mailchimp-connect {
275 width: 100% !important;
276 }
277
278 #mc-message {
279 margin-top: 26px;
280 }
281
282 /**
283 * Navigation
284 */
285 .mailchimp-sf-nav-tab-wrapper {
286 margin-top: 1em;
287 }
288
289 .mailchimp-sf-nav-tab-wrapper a.nav-tab {
290 border: 0px;
291 background: transparent;
292 color: #000;
293 margin-left: 0;
294 font-weight: 500;
295 padding: 5px 12px;
296 }
297
298 .mailchimp-sf-nav-tab-wrapper a.nav-tab:hover {
299 color: var(--mailchimp-color-link);
300 }
301
302 .mailchimp-sf-nav-tab-wrapper a.nav-tab.nav-tab-active {
303 border-bottom: 2px solid var(--mailchimp-color-link);
304 color: var(--mailchimp-color-link);
305 }
306
307 /**
308 * Mailchimp OAuth CSS
309 */
310 .mailchimp-sf-oauth-error {
311 color: #a73205;
312 margin-bottom: 0px;
313 font-size: 14px;
314 font-weight: 500;
315 }
316
317 .mailchimp-sf-oauth-connect-wrapper {
318 display: flex;
319 gap: 16px;
320 }
321
322 #mailchimp-sf-settings-page {
323 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
324 }
325
326 #mailchimp-sf-settings-page .flex {
327 display:flex;
328 }
329
330 #mailchimp-sf-settings-page .gap-x-6 {
331 column-gap: 32px;
332 }
333
334 #mailchimp-sf-settings-page .gap-x-2 {
335 column-gap: 8px;
336 }
337
338 #mailchimp-sf-settings-page .justify-between {
339 justify-content: space-between;
340 }
341
342 #mailchimp-sf-settings-page .items-center {
343 align-items: center;
344 }
345
346 #mailchimp-sf-settings-page .opacity-25 {
347 opacity: 0.25;
348 }
349
350 #mailchimp-sf-settings-page .opacity-75 {
351 opacity: 0.75;
352 }
353
354 #mailchimp-sf-settings-page .mailchimp-sf-loading {
355 animation: spin 1s linear infinite;
356 }
357
358 #mailchimp-sf-settings-page .mailchimp-sf-loading svg {
359 display: block;
360 }
361
362 #mailchimp-sf-settings-page .wizard-steps {
363 color: rgba(36, 28, 21);
364 font-size: 13px;
365 line-height: 18px;
366 margin-top: 4px;
367 }
368
369 #mailchimp-sf-settings-page .wizard-steps .deselected {
370 color: rgba(36, 28, 21, 0.3);
371 }
372
373 #mailchimp-sf-settings-page .wizard-steps .current {
374 color: rgba(36, 28, 21);
375 border-bottom: 2px solid rgb(0, 124, 137);
376 }
377
378 #mailchimp-sf-settings-page .wizard-steps .chevron {
379 margin: 0 5px;
380 }
381
382 #mailchimp-sf-settings-page .wizard-steps .chevron svg {
383 display: block;
384 }
385
386 @keyframes spin {
387 from {
388 transform: rotate(0deg);
389 }
390 to {
391 transform: rotate(360deg);
392 }
393 }
394
395 .mailchimp-sf-header {
396 padding: 14px 12px;
397 background: #fff;
398 border-top: 4px solid var(--mailchimp-color-border);
399 border-bottom: 1px solid rgba(36, 28, 21, 0.15);
400 column-gap: 34px;
401 margin-left: -20px;
402 }
403
404 .mailchimp-sf-header h3 {
405 font-family: "Means Web", serif;
406 margin-bottom: 0px;
407 margin-top: 0px;
408 font-weight: 400;
409 font-size: 20px;
410 line-height: 1.2em;
411 }
412
413 .mailchimp-sf-header .logo {
414 margin: 2px 0px;
415 }
416
417 .mailchimp-sf-header .mailchimp-sf-create-account-plus {
418 margin: 0px 10px;
419 font-family: "Means Web", serif;
420 font-size: 44px;
421 color: #8C8C8C;
422 font-weight: 300;
423 }
424
425 body.admin_page_mailchimp_sf_create_account,
426 body.toplevel_page_mailchimp_sf_options {
427 background-color: #F6F6F4;
428 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
429 }
430
431 body.admin_page_mailchimp_sf_create_account a,
432 body.toplevel_page_mailchimp_sf_options a {
433 color: var(--mailchimp-color-link);
434 }
435
436 body.admin_page_mailchimp_sf_create_account a:hover,
437 body.toplevel_page_mailchimp_sf_options a:hover {
438 color: #006570;
439 }
440
441 body.admin_page_mailchimp_sf_create_account #footer-upgrade,
442 body.toplevel_page_mailchimp_sf_options #footer-upgrade {
443 display: none;
444 }
445
446 .mailchimp-sf-create-account__body-inner {
447 max-width: 600px;
448 margin: 0 auto;
449 padding: 70px 12px 120px 12px;
450 }
451
452 .mailchimp-sf-content-box-wrapper {
453 width: 100%;
454 max-width: 504px;
455 margin: 0 auto;
456 padding-top: 48px;
457 padding-bottom: 120px;
458 }
459
460 .mailchimp-sf-content-box {
461 background-color: #ffffff;
462 border-radius: 12px;
463 border: 1px solid rgba(36, 28, 21, 0.15);
464 padding: 52px 64px;
465 }
466
467 #mailchimp-sf-settings-page .email-opener {
468 font-size: 16px;
469 line-height: 24px;
470 font-weight: 500;
471 text-decoration: underline;
472 }
473
474 #mailchimp-sf-settings-page .h4 {
475 font-size: 16px;
476 margin: 0;
477 margin-bottom: 32px;
478 font-weight: 400;
479 }
480
481 #mailchimp-sf-settings-page .mailchimp-sf-email {
482 font-weight: 500;
483 }
484
485 #mailchimp-sf-settings-page .title {
486 font-family: "Means Web", serif;
487 font-size: 32px;
488 font-weight: 400;
489 line-height: 1.25em;
490 margin-bottom: 32px;
491 }
492
493 #mailchimp-sf-settings-page .mailchimp-sf-content-box .title {
494 margin-bottom: 16px;
495 }
496
497 #mailchimp-sf-settings-page .subtitle {
498 font-family: "Means Web", serif;
499 font-size: 20px;
500 line-height: 1.2em;
501 font-weight: 400;
502 padding-left: 0;
503 margin-bottom: 16px;
504 color: #000;
505 }
506
507 .mailchimp-sf-create-account-step {
508 padding: 4px 0px 10px 0px;
509 }
510
511 #mailchimp-sf-business-address {
512 margin-top: 36px;
513 }
514
515 .button.mailchimp-sf-button {
516 all: unset;
517 box-sizing: border-box;
518 display: inline-flex;
519 align-items: center;
520 gap: 10px;
521 padding: 12px 32px;
522 position: relative;
523 background-color: var(--mailchimp-color-link);
524 border-radius: 38px;
525 font-weight: 500;
526 color: #ffffff;
527 font-size: 13px;
528 text-align: center;
529 letter-spacing: 0;
530 line-height: 20px;
531 white-space: nowrap;
532 cursor: pointer;
533 }
534
535 .button.mailchimp-sf-button.button-secondary {
536 color: var(--mailchimp-color-link);
537 background-color: #fff;
538 border: 1px solid var(--mailchimp-color-link);
539 }
540
541 .button.mailchimp-sf-button:hover,
542 .button.mailchimp-sf-button:focus,
543 .button.mailchimp-sf-button:active {
544 color: #ffffff;
545 background-color: #006570;
546 text-decoration: none;
547 }
548
549 .button.mailchimp-sf-button:focus {
550 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #006570;
551 }
552
553 .button.mailchimp-sf-button.button-secondary:hover,
554 .button.mailchimp-sf-button.button-secondary:focus,
555 .button.mailchimp-sf-button.button-secondary:active,
556 .button.mailchimp-sf-button.button-secondary.small:hover,
557 .button.mailchimp-sf-button.button-secondary.small:focus,
558 .button.mailchimp-sf-button.button-secondary.small:active {
559 color: var(--mailchimp-color-link);
560 background-color: #f6f7f7;
561 }
562
563 .button.mailchimp-sf-button[disabled] {
564 cursor: not-allowed;
565 }
566
567 .button.mailchimp-sf-button.small,
568 .button.mailchimp-sf-button.user-sync-settings-submit {
569 padding: 8px 16px;
570 line-height: 14px;
571 float: right;
572 clear: both;
573 }
574
575 .migrate-to-oauth-wrapper {
576 margin: 1em 0;
577 }
578
579 .migrate-to-oauth-wrapper .button.mailchimp-sf-button {
580 padding: 9px 16px;
581 line-height: 14px;
582 }
583
584 .migrate-to-oauth-wrapper button.button.mailchimp-sf-button:disabled {
585 padding: 6px 16px;
586 }
587
588 .migrate-to-oauth-wrapper button.button.mailchimp-sf-button svg {
589 width: 20px;
590 height: 20px;
591 }
592
593 .button.mailchimp-sf-button.button-secondary.small {
594 background-color: transparent;
595 }
596
597 .mailchimp-sf-create-account__body .mailchimp-sf-confirm-email a {
598 color: var(--mailchimp-color-link);
599 }
600
601 .mailchimp-sf-create-account__body .terms a {
602 color: var(--mailchimp-color-link);
603 font-weight: 500;
604 text-decoration: none;
605 }
606
607 .mailchimp-sf-create-account__body .terms p {
608 font-size: 16px;
609 line-height: 1.25em;
610 font-weight: 400;
611 color: var(--mailchimp-color-text);
612 }
613
614 .mailchimp-sf-create-account__body .terms p:last-child {
615 margin-bottom: 32px;
616 }
617
618 .mailchimp-sf-create-account__body .terms a:hover {
619 text-decoration: underline;
620 }
621
622 .mailchimp-sf-form-wrapper fieldset{
623 background: transparent;
624 width: 100%;
625 }
626
627 .mailchimp-sf-form-wrapper span.optional,
628 .mailchimp-sf-form-wrapper p.help-text {
629 font-size: 16px;
630 line-height: 1.5em;
631 font-weight: 400;
632 color: rgba(36, 28, 21, 0.65);
633 margin-bottom: 0px;
634 }
635
636 .mailchimp-sf-form-wrapper label {
637 display: block;
638 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
639 font-size: 16px;
640 font-weight: 500;
641 line-height: 1.5em;
642 width: 100%;
643 color: var(--mailchimp-color-text);
644 margin-bottom: 8px;
645 }
646
647 .mailchimp-sf-form-wrapper .box.box-half {
648 float: left;
649 clear: none;
650 width: 50%;
651 }
652
653 .mailchimp-sf-form-wrapper .form-row {
654 display: flex;
655 column-gap: 16px;
656 }
657
658 .mailchimp-sf-form-wrapper .form-row:not(:last-child) {
659 margin-bottom: 16px;
660 }
661
662 .mailchimp-sf-form-wrapper .form-row .box {
663 width: 100%;
664 }
665
666 .mailchimp-sf-form-wrapper .form-row .box-half {
667 width: calc(50% - 8px);
668 }
669
670 .mailchimp-sf-form-wrapper fieldset input[type="text"],
671 .mailchimp-sf-form-wrapper fieldset input[type="password"],
672 .mailchimp-sf-form-wrapper fieldset input[type="email"],
673 .mailchimp-sf-form-wrapper fieldset textarea {
674 box-sizing: border-box;
675 height: 44px;
676 border: 1px solid rgba(36, 28, 21, 0.65);
677 border-radius: 4px;
678 padding: 10px 16px;
679 width: 100%;
680 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
681 font-size: 16px;
682 color: #000;
683 line-height: 1.5em;
684 font-weight: 400;
685 }
686
687 .mailchimp-sf-form-wrapper fieldset input[type="text"]:focus,
688 .mailchimp-sf-form-wrapper fieldset input[type="password"]:focus,
689 .mailchimp-sf-form-wrapper fieldset input[type="email"]:focus,
690 .mailchimp-sf-form-wrapper fieldset textarea:focus {
691 border-color: var(--mailchimp-color-link);
692 box-shadow: inset 0 0 0 1px var(--mailchimp-color-link);
693 }
694
695 .mailchimp-sf-form-wrapper .mailchimp-select-wrapper select {
696 font-size: 16px;
697 line-height: 1.5em;
698 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
699 font-weight: 400;
700 -webkit-appearance: none;
701 box-shadow: none;
702 outline: none;
703 width: 100% !important;
704 max-width: 100%;
705 border: 1px solid rgba(36, 28, 21, 0.65);
706 color: #000;
707 padding: 10px 14px;
708 -webkit-border-radius: 4px;
709 -moz-border-radius: 4px;
710 border-radius: 4px;
711 background-color: white;
712 height: 44px;
713 background-size: auto;
714 }
715
716 .mailchimp-sf-form-wrapper .mailchimp-select-wrapper select option{
717 outline: none;
718 }
719
720 .mailchimp-sf-form-wrapper fieldset select:focus {
721 outline: none;
722 }
723
724
725 .mailchimp-sf-form-wrapper .box.form-error label,
726 .mailchimp-sf-form-wrapper .box.form-error {
727 color: #a73205;
728 }
729 .mailchimp-sf-form-wrapper .box.form-error p.error-field {
730 margin-bottom: 0px;
731 font-size: 14px;
732 font-weight: 500;
733 }
734
735 .mailchimp-sf-form-wrapper .box.form-error input,
736 .mailchimp-sf-form-wrapper .box.form-error select {
737 border-color: #a73205;
738 box-shadow: inset 0 0 0 1px #a73205;
739 }
740
741 .mailchimp-sf-form-wrapper .error-field:empty, #mailchimp-sf-settings-page p.error-message:empty {
742 display: none !important;
743 }
744
745 .mailchimp-sf-confirm-email .email-opener-wrapper {
746 margin-bottom: 120px;
747 }
748
749 .mailchimp-sf-confirm-email .mailchimp-sf-confirm-email-footer p{
750 font-size: 16px;
751 font-weight: 500;
752 line-height: 24px;
753 color: var(--mailchimp-color-text);
754 }
755
756 #mailchimp-sf-popup-blocked-modal {
757 padding: 10px 28px;
758 }
759
760 #mailchimp-sf-popup-blocked-modal p {
761 font-size: 16px;
762 font-weight: 400;
763 line-height: 24px;
764 color: var(--mailchimp-color-text);
765 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
766 }
767
768 .mailchimp-sf-ui-dialog {
769 border-radius: 12px;
770 border: 1px solid rgba(36, 28, 21, 0.15);
771 }
772
773 .mailchimp-sf-ui-dialog-titlebar {
774 font-family: "Means Web", serif;
775 font-weight: 500;
776 padding: 10px 28px;
777 font-size: 24px;
778 height: auto;
779 }
780
781 @media screen and (max-width: 782px) {
782 .mailchimp-sf-header {
783 margin-left: -10px;
784 }
785 }
786
787 @media screen and (max-width: 480px) {
788 .mailchimp-sf-form-wrapper .form-row {
789 flex-flow: column;
790 row-gap: 16px;
791 }
792
793 .mailchimp-sf-form-wrapper .form-row .box.box-half {
794 width: 100%;
795 }
796
797 .mailchimp-sf-header {
798 column-gap: 16px;
799 }
800 }
801
802 .mailchimp-sf-user-sync-page {
803 max-width: 900px;
804 }
805
806 .mailchimp-sf-user-sync-page .subscribe_status_label {
807 font-weight: 500;
808 }
809
810 .mailchimp-sf-user-sync-page p.description_small {
811 font-size: 0.9em;
812 margin-bottom: 10px;
813 }
814
815 .mailchimp-sf-user-sync-status {
816 margin: 15px 0;
817 padding: 10px;
818 background: #fff;
819 border: 1px solid #ccd0d4;
820 border-radius: 4px;
821 }
822 .mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
823 display: flex;
824 align-items: center;
825 flex-direction: row;
826 }
827 .mailchimp-sf-user-sync-status .sync-status-text {
828 font-size: 14px;
829 line-height: 1.4;
830 }
831
832 .button.mailchimp-cancel-user-sync-button {
833 margin-left: auto;
834 }
835
836 @media screen and (max-width: 480px) {
837 .mailchimp-sf-user-sync-status .mailchimp-sf-sync-progress {
838 flex-direction: column;
839 align-items: flex-start;
840 }
841
842 .button.mailchimp-cancel-user-sync-button {
843 margin-left: 0px;
844 margin-top: 10px;
845 }
846 }
847
848 .mailchimp-sf-user-sync-errors {
849 margin-top: 2rem;
850 }
851
852 .mailchimp-sf-user-sync-errors-header {
853 display: flex;
854 justify-content: space-between;
855 align-items: center;
856 }
857
858 .mailchimp-sf-user-sync-error-action {
859 min-width: 120px;
860 text-align: right;
861 }
862
863 .mailchimp-sf-start-user-sync-wrapper {
864 width: 100%;
865 margin-top: 2em;
866 background-color: #ffffff;
867 border: 1px solid #ccd0d4;
868 border-radius: 6px;
869 }
870
871 .mailchimp-sf-start-user-sync-box {
872 display: flex;
873 justify-content: space-between;
874 align-items: center;
875 padding: 1rem;
876 }
877
878 .mailchimp-sf-start-user-sync-box h2 {
879 margin: 0;
880 }
881
882 .mailchimp-sf-start-user-sync-box p {
883 margin-top: 0.5rem;
884 }
885
886 .mailchimp-sf-start-user-sync-box .mailchimp-sf-button {
887 float: none;
888 margin-right: 8px;
889 }
890
891 .mailchimp-sf-start-user-sync-box a {
892 text-decoration: none;
893 }
894
895