PluginProbe
Mailchimp List Subscribe Form / 1.6.1
Mailchimp List Subscribe Form v1.6.1
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.6.1, at assets/css/admin.css

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