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

734 lines 14.3 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 .button.mailchimp-sf-button.button-secondary.small {
527 background-color: transparent;
528 }
529
530 .mailchimp-sf-create-account__body .mailchimp-sf-confirm-email a {
531 color: var(--mailchimp-color-link);
532 }
533
534 .mailchimp-sf-create-account__body .terms a {
535 color: var(--mailchimp-color-link);
536 font-weight: 500;
537 text-decoration: none;
538 }
539
540 .mailchimp-sf-create-account__body .terms p {
541 font-size: 16px;
542 line-height: 1.25em;
543 font-weight: 400;
544 color: var(--mailchimp-color-text);
545 }
546
547 .mailchimp-sf-create-account__body .terms p:last-child {
548 margin-bottom: 32px;
549 }
550
551 .mailchimp-sf-create-account__body .terms a:hover {
552 text-decoration: underline;
553 }
554
555 .mailchimp-sf-form-wrapper fieldset{
556 background: transparent;
557 width: 100%;
558 }
559
560 .mailchimp-sf-form-wrapper span.optional,
561 .mailchimp-sf-form-wrapper p.help-text {
562 font-size: 16px;
563 line-height: 1.5em;
564 font-weight: 400;
565 color: rgba(36, 28, 21, 0.65);
566 margin-bottom: 0px;
567 }
568
569 .mailchimp-sf-form-wrapper label {
570 display: block;
571 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
572 font-size: 16px;
573 font-weight: 500;
574 line-height: 1.5em;
575 width: 100%;
576 color: var(--mailchimp-color-text);
577 margin-bottom: 8px;
578 }
579
580 .mailchimp-sf-form-wrapper .box.box-half {
581 float: left;
582 clear: none;
583 width: 50%;
584 }
585
586 .mailchimp-sf-form-wrapper .form-row {
587 display: flex;
588 column-gap: 16px;
589 }
590
591 .mailchimp-sf-form-wrapper .form-row:not(:last-child) {
592 margin-bottom: 16px;
593 }
594
595 .mailchimp-sf-form-wrapper .form-row .box {
596 width: 100%;
597 }
598
599 .mailchimp-sf-form-wrapper .form-row .box-half {
600 width: calc(50% - 8px);
601 }
602
603 .mailchimp-sf-form-wrapper fieldset input[type="text"],
604 .mailchimp-sf-form-wrapper fieldset input[type="password"],
605 .mailchimp-sf-form-wrapper fieldset input[type="email"],
606 .mailchimp-sf-form-wrapper fieldset textarea {
607 box-sizing: border-box;
608 height: 44px;
609 border: 1px solid rgba(36, 28, 21, 0.65);
610 border-radius: 4px;
611 padding: 10px 16px;
612 width: 100%;
613 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
614 font-size: 16px;
615 color: #000;
616 line-height: 1.5em;
617 font-weight: 400;
618 }
619
620 .mailchimp-sf-form-wrapper fieldset input[type="text"]:focus,
621 .mailchimp-sf-form-wrapper fieldset input[type="password"]:focus,
622 .mailchimp-sf-form-wrapper fieldset input[type="email"]:focus,
623 .mailchimp-sf-form-wrapper fieldset textarea:focus {
624 border-color: var(--mailchimp-color-link);
625 box-shadow: inset 0 0 0 1px var(--mailchimp-color-link);
626 }
627
628 .mailchimp-sf-form-wrapper .mailchimp-select-wrapper select {
629 font-size: 16px;
630 line-height: 1.5em;
631 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
632 font-weight: 400;
633 -webkit-appearance: none;
634 box-shadow: none;
635 outline: none;
636 width: 100% !important;
637 max-width: 100%;
638 border: 1px solid rgba(36, 28, 21, 0.65);
639 color: #000;
640 padding: 10px 14px;
641 -webkit-border-radius: 4px;
642 -moz-border-radius: 4px;
643 border-radius: 4px;
644 background-color: white;
645 height: 44px;
646 background-size: auto;
647 }
648
649 .mailchimp-sf-form-wrapper .mailchimp-select-wrapper select option{
650 outline: none;
651 }
652
653 .mailchimp-sf-form-wrapper fieldset select:focus {
654 outline: none;
655 }
656
657
658 .mailchimp-sf-form-wrapper .box.form-error label,
659 .mailchimp-sf-form-wrapper .box.form-error {
660 color: #a73205;
661 }
662 .mailchimp-sf-form-wrapper .box.form-error p.error-field {
663 margin-bottom: 0px;
664 font-size: 14px;
665 font-weight: 500;
666 }
667
668 .mailchimp-sf-form-wrapper .box.form-error input,
669 .mailchimp-sf-form-wrapper .box.form-error select {
670 border-color: #a73205;
671 box-shadow: inset 0 0 0 1px #a73205;
672 }
673
674 .mailchimp-sf-form-wrapper .error-field:empty, #mailchimp-sf-settings-page p.error-message:empty {
675 display: none !important;
676 }
677
678 .mailchimp-sf-confirm-email .email-opener-wrapper {
679 margin-bottom: 120px;
680 }
681
682 .mailchimp-sf-confirm-email .mailchimp-sf-confirm-email-footer p{
683 font-size: 16px;
684 font-weight: 500;
685 line-height: 24px;
686 color: var(--mailchimp-color-text);
687 }
688
689 #mailchimp-sf-popup-blocked-modal {
690 padding: 10px 28px;
691 }
692
693 #mailchimp-sf-popup-blocked-modal p {
694 font-size: 16px;
695 font-weight: 400;
696 line-height: 24px;
697 color: var(--mailchimp-color-text);
698 font-family: 'Graphik Mailchimp Web', ui-sans-serif, system-ui, sans-serif;
699 }
700
701 .mailchimp-sf-ui-dialog {
702 border-radius: 12px;
703 border: 1px solid rgba(36, 28, 21, 0.15);
704 }
705
706 .mailchimp-sf-ui-dialog-titlebar {
707 font-family: "Means Web", serif;
708 font-weight: 500;
709 padding: 10px 28px;
710 font-size: 24px;
711 height: auto;
712 }
713
714 @media screen and (max-width: 782px) {
715 .mailchimp-sf-header {
716 margin-left: -10px;
717 }
718 }
719
720 @media screen and (max-width: 480px) {
721 .mailchimp-sf-form-wrapper .form-row {
722 flex-flow: column;
723 row-gap: 16px;
724 }
725
726 .mailchimp-sf-form-wrapper .form-row .box.box-half {
727 width: 100%;
728 }
729
730 .mailchimp-sf-header {
731 column-gap: 16px;
732 }
733 }
734