PluginProbe
Members – Membership & User Role Editor Plugin / 3.2.24
Members – Membership & User Role Editor Plugin v3.2.24
3.2.25 3.2.26 3.2.24 3.2.23 3.2.22 3.2.21 trunk 0.1 0.1.1 0.2 0.2.1 0.2.2 0.2.3 0.2.4 0.2.5 1.0.0 1.0.1 1.0.2 1.1.0 1.1.1 1.1.2 1.1.3 2.0.0 2.0.1 2.0.2 All 66 releases
members / css / admin.css

admin.css in Members – Membership & User Role Editor Plugin 3.2.24, at css/admin.css

1,571 lines 31.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .members-cp-document-panel .description {
2 margin-top: 0;
3 }
4
5 .members-cp-document-panel .components-checkbox-control {
6 margin-bottom: 8px;
7 }
8
9 .members-cp-document-panel .members-cp-memberpress-upsell {
10 margin-top: 16px;
11 padding: 20px;
12 text-align: center;
13 }
14
15 .members-cp-error-message-control {
16 margin-top: 12px;
17 }
18
19 .members-cp-error-message {
20 min-height: 120px;
21 padding: 8px 12px;
22 border: 1px solid #949494;
23 border-radius: 2px;
24 background: #fff;
25 }
26
27 .members-cp-error-message:focus-visible {
28 border-color: var( --wp-admin-theme-color, #3858e9 );
29 box-shadow: 0 0 0 1px var( --wp-admin-theme-color, #3858e9 );
30 outline: 2px solid transparent;
31 }
32
33 #members-cp h2.hndle {
34 border-bottom: none !important;
35 justify-content: flex-start;
36 }
37
38 #members-cp h2.hndle:before {
39 content: url("data:image/svg+xml,%3Csvg width='15px' aria-hidden='true' focusable='false' data-prefix='fas' data-icon='users-cog' class='svg-inline--fa fa-users-cog fa-w-20' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z'%3E%3C/path%3E%3C/svg%3E");
40 margin-right: 5px;
41 }
42
43 .members-upgrade-header {
44 text-align: center;
45 padding: 5px;
46 }
47
48 .members-upgrade-header a {
49 color: #F59431;
50 }
51
52 .memberpress-paid-memberships {
53 background-color: #f5f5f5;
54 padding: 50px 10px;
55 text-align: center;
56 }
57
58 .memberpress-paid-memberships a {
59 background-color: #0E4598;
60 display: inline-block;
61 padding: 10px 20px;
62 border-radius: 300px;
63 color: #fff;
64 text-decoration: none;
65 margin-top: 20px;
66 }
67
68 .members-tab-title svg,
69 .members-tab-title[aria-selected="false"] svg {
70 fill: #0073aa;
71 }
72
73 .members-tab-title[aria-selected="true"] svg {
74 fill: #555;
75 }
76
77 #wpcontent #members-admin-header {
78 margin-left: -20px;
79 padding: 0 28px 0 22px;
80 background-color: #0b1220;
81 background-image:
82 radial-gradient(circle at 12% 35%, rgba(14,69,152,0.45), transparent 55%),
83 radial-gradient(circle at 90% 85%, rgba(245,148,49,0.14), transparent 60%);
84 background-repeat: no-repeat;
85 min-height: 56px;
86 position: relative;
87 display: flex;
88 align-items: center;
89 justify-content: space-between;
90 }
91
92 #wpcontent #members-admin-header img.members-logo {
93 height: 42px;
94 display: block;
95 }
96
97 #wpcontent #members-admin-header .members-by-mp {
98 display: flex;
99 align-items: center;
100 gap: 12px;
101 margin-left: auto;
102 text-decoration: none;
103 box-shadow: none;
104 transition: opacity 0.15s ease;
105 }
106
107 #wpcontent #members-admin-header .members-by-mp:hover,
108 #wpcontent #members-admin-header .members-by-mp:focus {
109 opacity: 0.75;
110 text-decoration: none;
111 box-shadow: none;
112 }
113
114 #wpcontent #members-admin-header .members-by-label {
115 color: #94a3b8;
116 font-size: 12px;
117 font-weight: 500;
118 }
119
120 #wpcontent #members-admin-header img.members-mp-logo {
121 height: 18px;
122 display: block;
123 }
124
125 /* Notifications inbox button — hosted in the admin header on every Members page. */
126 #wpcontent #members-admin-header #membersAdminHeaderNotifications {
127 position: relative;
128 display: inline-flex;
129 align-items: center;
130 justify-content: center;
131 width: 36px;
132 height: 36px;
133 padding: 0;
134 margin: 0 0 0 18px;
135 background: rgba(255, 255, 255, 0.06);
136 border: 1px solid rgba(255, 255, 255, 0.12);
137 border-radius: 8px;
138 color: #fff;
139 cursor: pointer;
140 box-shadow: none;
141 transition: background 0.15s ease, border-color 0.15s ease;
142 line-height: 1;
143 vertical-align: middle;
144 min-height: 0;
145 text-decoration: none;
146 }
147
148 #wpcontent #members-admin-header #membersAdminHeaderNotifications:hover,
149 #wpcontent #members-admin-header #membersAdminHeaderNotifications:focus {
150 background: rgba(255, 255, 255, 0.12);
151 border-color: rgba(255, 255, 255, 0.24);
152 color: #fff;
153 box-shadow: none;
154 outline: none;
155 }
156
157 #wpcontent #members-admin-header #membersAdminHeaderNotifications svg {
158 width: 16px;
159 height: auto;
160 display: block;
161 }
162
163 #wpcontent #members-admin-header #membersAdminHeaderNotifications svg path {
164 fill: #e2e8f0;
165 }
166
167 #wpcontent #members-admin-header #membersAdminHeaderNotifications .members-notifications-count {
168 position: absolute;
169 top: -4px;
170 right: -4px;
171 min-width: 16px;
172 height: 16px;
173 padding: 0 4px;
174 border-radius: 999px;
175 background: #F59431;
176 color: #0b1220;
177 font-size: 10px;
178 font-weight: 700;
179 line-height: 16px;
180 text-align: center;
181 border: 1.5px solid #0b1220;
182 box-sizing: content-box;
183 }
184
185 .members-upgrade-header #close-members-upgrade-header {
186 position: absolute;
187 right: 20px;
188 top: 3px;
189 }
190
191 .members-upgrade-header #close-members-upgrade-header:hover {
192 cursor: pointer;
193 }
194
195 /* ====== Members Settings Screen. ====== */
196
197 .memberpress-welcome-panel.welcome-panel {
198 margin-top: 20px;
199 padding: 20px 28px;
200 background: #fff;
201 border-radius: 10px;
202 min-height: 0;
203 }
204
205 .memberpress-welcome-panel.welcome-panel .welcome-panel-content {
206 min-height: 0;
207 height: auto;
208 }
209
210 /* ============================================================
211 About Us — editorial redesign
212 Scoped entirely under .members-about to avoid WP admin bleed.
213 ============================================================ */
214
215 .members-about {
216 --ink: #0f172a;
217 --ink-soft: #334155;
218 --ink-muted: #64748b;
219 --mp-blue: #0E4598;
220 --mp-teal: #3582AE;
221 --mp-orange: #F59431;
222 --rule: #e5e7eb;
223 --paper: #fbfaf7;
224 --paper-soft: #f3efe6;
225 --paper-line: #e8e3d5;
226 --display-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
227 --sans-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
228 }
229
230 /* Full-bleed paper background — override the default admin gray */
231 body.members_page_members-about #wpbody-content,
232 body.toplevel_page_members-about #wpbody-content,
233 body.admin_page_members-about #wpbody-content {
234 background: var(--paper);
235 }
236
237 .members-about.wrap {
238 max-width: 1120px;
239 margin: 0 auto;
240 padding: 48px 24px 80px;
241 color: var(--ink);
242 font-family: var(--sans-font);
243 }
244
245 /* === Hero ================================================== */
246 .members-about__hero {
247 display: grid;
248 grid-template-columns: minmax(0, 1fr) 200px;
249 grid-template-areas:
250 "head mark"
251 "body mark";
252 gap: 32px 56px;
253 align-items: start;
254 padding-bottom: 64px;
255 border-bottom: 1px solid var(--paper-line);
256 }
257
258 .members-about__hero-head { grid-area: head; }
259 .members-about__body { grid-area: body; }
260 .members-about__mark { grid-area: mark; align-self: start; }
261
262 .members-about__eyebrow {
263 display: inline-block;
264 font-family: var(--sans-font);
265 font-size: 12px;
266 font-weight: 600;
267 letter-spacing: 0.18em;
268 text-transform: uppercase;
269 color: var(--ink-muted);
270 padding-bottom: 18px;
271 }
272
273 .members-about__title {
274 font-family: var(--display-font);
275 font-weight: 900;
276 font-size: clamp(40px, 5.5vw, 64px);
277 line-height: 1;
278 letter-spacing: -0.035em;
279 color: var(--ink);
280 margin: 0;
281 }
282
283 .members-about__title em {
284 font-style: normal;
285 font-weight: 900;
286 color: var(--mp-blue);
287 }
288
289 .members-about__title-dot {
290 color: var(--mp-blue);
291 font-style: normal;
292 font-weight: 900;
293 }
294
295 .members-about__body {
296 max-width: 60ch;
297 font-size: 15.5px;
298 line-height: 1.62;
299 color: var(--ink-soft);
300 }
301
302 .members-about__body p {
303 margin: 0 0 14px;
304 }
305
306 .members-about__body p:last-child {
307 margin-bottom: 0;
308 }
309
310 .members-about__lead {
311 font-family: var(--sans-font);
312 font-weight: 500;
313 font-size: 17px;
314 line-height: 1.5;
315 color: var(--ink);
316 margin-bottom: 24px !important;
317 padding-left: 18px;
318 border-left: 2px solid var(--mp-blue);
319 }
320
321 .members-about__body a,
322 .members-about__lead a {
323 color: var(--mp-blue);
324 text-decoration: none;
325 background-image: linear-gradient(currentColor, currentColor);
326 background-size: 100% 1px;
327 background-position: 0 100%;
328 background-repeat: no-repeat;
329 padding-bottom: 1px;
330 transition: color 0.2s ease, background-size 0.2s ease;
331 }
332
333 .members-about__body a:hover,
334 .members-about__lead a:hover {
335 color: var(--mp-orange);
336 }
337
338 .members-about__body em,
339 .members-about__lead em {
340 font-style: normal;
341 font-weight: 700;
342 color: var(--mp-blue);
343 }
344
345 /* MP stacked logo — treated as a confident visual mark */
346 .members-about__mark {
347 padding: 24px;
348 background: #fff;
349 border: 1px solid var(--paper-line);
350 border-radius: 4px;
351 box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
352 transition: transform 0.25s ease, box-shadow 0.25s ease;
353 }
354
355 .members-about__mark:hover {
356 transform: translateY(-2px);
357 box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
358 }
359
360 .members-about__mark a {
361 display: block;
362 box-shadow: none !important;
363 text-decoration: none;
364 }
365
366 .members-about__mark img {
367 display: block;
368 width: 100%;
369 height: auto;
370 max-width: 160px;
371 margin: 0 auto;
372 }
373
374 /* === Products =============================================== */
375 .members-about__products {
376 padding-top: 56px;
377 }
378
379 .members-about__products-head {
380 margin-bottom: 28px;
381 text-align: center;
382 }
383
384 .members-about__products-head h3 {
385 font-family: var(--display-font);
386 font-weight: 700;
387 font-size: 15px;
388 letter-spacing: 0.16em;
389 text-transform: uppercase;
390 color: var(--ink-muted);
391 margin: 0;
392 }
393
394 .members-about__grid {
395 display: grid;
396 grid-template-columns: repeat(3, minmax(0, 1fr));
397 gap: 20px;
398 }
399
400 .members-about__card {
401 display: flex;
402 flex-direction: column;
403 padding: 24px;
404 background: #fff;
405 border: 1px solid var(--paper-line);
406 border-radius: 6px;
407 transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
408 }
409
410 .members-about__card:hover {
411 transform: translateY(-3px);
412 box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
413 border-color: rgba(14, 69, 152, 0.2);
414 }
415
416 .members-about__card-head {
417 display: flex;
418 align-items: center;
419 gap: 14px;
420 margin-bottom: 14px;
421 }
422
423 .members-about__card-icon {
424 flex: 0 0 44px;
425 width: 44px;
426 height: 44px;
427 display: inline-flex;
428 align-items: center;
429 justify-content: center;
430 background: var(--paper-soft);
431 border-radius: 10px;
432 overflow: hidden;
433 }
434
435 .members-about__card-icon img {
436 display: block;
437 max-width: 32px;
438 max-height: 32px;
439 width: auto;
440 height: auto;
441 }
442
443 .members-about__card-title {
444 margin: 0;
445 font-family: var(--display-font);
446 font-weight: 700;
447 font-size: 17px;
448 line-height: 1.2;
449 letter-spacing: -0.01em;
450 color: var(--ink);
451 }
452
453 .members-about__card-title a {
454 color: inherit;
455 text-decoration: none;
456 box-shadow: none;
457 }
458
459 .members-about__card-title a:hover {
460 color: var(--mp-blue);
461 }
462
463 .members-about__card-desc {
464 flex: 1;
465 margin: 0 0 24px;
466 font-size: 14px;
467 line-height: 1.55;
468 color: var(--ink-soft);
469 }
470
471 .members-about__card-foot {
472 display: flex;
473 align-items: center;
474 justify-content: space-between;
475 gap: 16px;
476 padding-top: 16px;
477 border-top: 1px solid var(--paper-line);
478 }
479
480 .members-about__status {
481 display: inline-flex;
482 align-items: center;
483 gap: 8px;
484 font-size: 12px;
485 font-weight: 600;
486 letter-spacing: 0.06em;
487 text-transform: uppercase;
488 color: var(--ink-muted);
489 }
490
491 .members-about__status::before {
492 content: "";
493 width: 7px;
494 height: 7px;
495 border-radius: 50%;
496 background: currentColor;
497 }
498
499 .members-about__status.is-active { color: #10b981; }
500 .members-about__status.is-inactive { color: var(--mp-orange); }
501 .members-about__status.is-missing { color: var(--ink-muted); }
502
503 .members-about__cta {
504 display: inline-flex;
505 align-items: center;
506 gap: 8px;
507 padding: 8px 14px;
508 font-size: 13px;
509 font-weight: 600;
510 letter-spacing: 0.01em;
511 border-radius: 4px;
512 text-decoration: none;
513 border: 1px solid transparent;
514 transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
515 box-shadow: none;
516 }
517
518 .members-about__cta:focus,
519 .members-about__cta:focus-visible {
520 outline: 2px solid var(--mp-blue);
521 outline-offset: 2px;
522 box-shadow: none;
523 }
524
525 .members-about__cta.is-primary {
526 background: var(--mp-blue);
527 color: #fff;
528 }
529
530 .members-about__cta.is-primary:hover {
531 background: #093374;
532 color: #fff;
533 transform: translateY(-1px);
534 }
535
536 .members-about__cta.is-secondary {
537 background: transparent;
538 color: var(--ink);
539 border-color: var(--rule);
540 }
541
542 .members-about__cta.is-secondary:hover {
543 border-color: var(--ink);
544 background: #fff;
545 color: var(--ink);
546 }
547
548 .members-about__cta svg {
549 transition: transform 0.2s ease;
550 }
551
552 .members-about__cta:hover svg {
553 transform: translate(1px, -1px);
554 }
555
556 /* === Responsive ============================================= */
557 @media (max-width: 900px) {
558 .members-about__hero {
559 grid-template-columns: 1fr;
560 grid-template-areas:
561 "head"
562 "body"
563 "mark";
564 gap: 24px;
565 }
566 .members-about__mark { max-width: 160px; }
567 .members-about__grid { grid-template-columns: 1fr; }
568 }
569
570 .memberpress-welcome-panel.welcome-panel:before {
571 background: none;
572 }
573
574 .memberpress-welcome-panel.welcome-panel .about-description {
575 margin: 20px 0;
576 }
577
578 .memberpress-welcome-panel.welcome-panel-content {
579 margin: 0;
580 }
581
582 .memberpress-welcome-panel.welcome-panel-content .mp-logo-wrap>a {
583 display: block;
584 }
585
586 @media screen and (min-width: 870px) {
587
588 .members_page_members-settings .members-short-p {
589 max-width: 612px;
590 margin-left: auto;
591 margin-right: auto;
592 }
593
594 .members_page_members-settings .welcome-panel-content {
595 text-align: center;
596 }
597 }
598
599 .members_page_members-settings .welcome-panel .button.button-hero {
600 margin-left: auto;
601 margin-right: auto;
602 }
603
604 .members_page_members-settings .members-svg-wrap {
605 display: inline-block;
606 margin: 0 auto 20px;
607 }
608
609 @media screen and (max-width: 870px) {
610 .members_page_members-settings .welcome-panel {
611 padding: 20px;
612 }
613
614 .members_page_members-settings .members-svg-wrap {
615 float: left;
616 margin-right: 28px;
617 }
618
619 .admin_page_members-settings.rtl .members-svg-wrap {
620 float: right;
621 margin-right: 0;
622 margin-left: 28px;
623 }
624 }
625
626 .members_page_members-settings .members-svg-link {
627 display: table-cell;
628 text-align: center;
629 width: 128px;
630 height: 128px;
631 background: #363b3f;
632 color: #fff;
633 padding: 24px 16px 16px;
634 border-radius: 50%;
635 box-sizing: border-box;
636 border: 4px solid #ffffff;
637 box-shadow: 0 0 0 4px #363b3f;
638 }
639
640 .members_page_members-settings .members-svg-link svg {
641 max-width: 84px;
642 max-height: 64px;
643 width: auto;
644 height: auto;
645 }
646
647 .members-addons {
648 display: grid;
649 grid-template-columns: 1fr 1fr;
650 grid-row-gap: 20px;
651 grid-column-gap: 20px;
652 }
653
654 .members-addons .plugin-card {
655 margin: 0;
656 }
657
658 .members-addons .plugin-card-top {
659 width: 100%;
660 }
661
662 .members-addon {
663 width: 100%;
664 position: relative;
665 float: none;
666 display: flex;
667 align-items: center;
668 }
669
670 .members-addon .desc {
671 margin-bottom: 80px;
672 }
673
674 .addon-activate {
675 text-align: center;
676 border: 1px solid #ddd;
677 border-radius: 3px;
678 padding: 5px 10px 10px;
679 display: inline-block;
680 width: 100px;
681 position: absolute;
682 right: 20px;
683 bottom: 20px;
684 }
685
686 .activate-toggle:hover {
687 cursor: pointer;
688 }
689
690 .activate-toggle svg {
691 max-width: 20px;
692 position: relative;
693 top: 5px;
694 }
695
696 .activate-toggle svg {
697 transform: rotate(180deg);
698 }
699
700 .activate-toggle svg.active {
701 transform: rotate(0);
702 }
703
704 .activate-toggle svg path {
705 fill: #cccccc;
706 }
707
708 .activate-toggle svg.active path {
709 fill: #8CBD5A;
710 }
711
712 .activate-toggle.processing {
713 cursor: not-allowed;
714 pointer-events: none;
715 opacity: 0.5;
716 }
717
718 .activate-toggle .action-label {
719 display: inline-block;
720 width: 50px;
721 text-align: left;
722 }
723
724 .mepr_dummy_txns {
725 filter: blur(3px);
726 position: absolute;
727 top: 0;
728 left: 0;
729 width: 100%;
730 z-index: 5;
731 pointer-events: none;
732 }
733
734 .mepr_dummy_txns::after {
735 background-color: rgba(0, 0, 0, .2);
736 position: absolute;
737 top: 0;
738 left: 0;
739 width: 100%;
740 height: 100%;
741 z-index: 6;
742 }
743
744 .mepr-upgrade-table {
745 position: relative;
746 }
747
748 .mepr-upgrade-table .mepr-upgrade {
749 position: relative;
750 top: 100px;
751 z-index: 10;
752 background: rgba(0, 0, 0, .2);
753 width: 100%;
754 height: 100%;
755 max-width: 600px;
756 margin: 0 auto;
757 box-shadow: 0 0 30px #ccc;
758 }
759
760 .mepr-upgrade-content {
761 background-color: #fff;
762 padding: 20px;
763 text-align: center;
764 }
765
766 .mepr-upgrade-content h2 {
767 font-size: 24px;
768 }
769
770 .mepr-upgrade-content h4 {
771 font-size: 18px;
772 }
773
774 .mepr-upgrade-content .features {
775 display: grid;
776 grid-template-columns: 1fr 1fr;
777 grid-column-gap: 30px;
778 grid-row-gap: 10px;
779 align-items: center;
780 justify-content: center;
781 text-align: left;
782 padding: 10px;
783 }
784
785 .features li:before {
786 content: "\f147";
787 font-family: dashicons;
788 color: green;
789 font-size: 20px;
790 position: relative;
791 top: 4px;
792 margin-right: 10px;
793 }
794
795 .mepr-upgrade-cta {
796 text-align: center;
797 background-color: #f2f2f2;
798 padding: 20px;
799 }
800
801 .mepr-upgrade-cta .mepr-cta-button {
802 display: block;
803 max-width: 300px;
804 margin: 0 auto 20px;
805 background-color: #FD9C27;
806 color: #fff;
807 padding: 15px;
808 font-size: 18px;
809 font-weight: bold;
810 text-decoration: none;
811 border-radius: 300px;
812 }
813
814 .members-plugin-card.plugin-card:nth-child(even) {
815 margin-right: inherit;
816 }
817
818 .members-plugin-card.plugin-card:nth-child(odd) {
819 clear: none;
820 margin-left: inherit;
821 }
822
823 .members-plugin-card.plugin-card .plugin-card-top {
824 min-height: 0;
825 padding: 30px 20px;
826 }
827
828 .members-plugin-card.plugin-card .plugin-icon {
829 top: 30px;
830 }
831
832 .members-plugin-card.plugin-card .plugin-card-bottom .column-status {
833 font-weight: bold;
834 }
835
836 .members-plugin-card.plugin-card .plugin-card-bottom .column-status .active {
837 color: #8CBD5A;
838 }
839
840 .members-plugin-card.plugin-card .plugin-card-bottom .column-status .inactive {
841 color: red;
842 }
843
844 .members-plugin-card.plugin-card .plugin-icon {
845 width: 64px;
846 height: auto;
847 }
848
849 .plugin-icon-small {
850 width: 32px;
851 height: auto;
852 }
853
854 .members-plugin-card.plugin-card .name,
855 .members-plugin-card.plugin-card .desc {
856 margin-right: 0;
857 margin-left: 84px;
858 }
859
860 .members-addons .plugin-card .name,
861 .members-addons .plugin-card .desc p {
862 margin-right: 0;
863 }
864
865 @media screen and (max-width: 1100px) {
866 .members-addons {
867 display: flex;
868 flex-direction: column;
869 }
870 }
871
872 @media screen and (max-width: 600px) {
873 .members_page_members-settings .members-svg-link {
874 width: 64px;
875 height: 64px;
876 }
877
878 .members_page_members-settings .members-svg-link svg {
879 position: absolute;
880 top: 14px;
881 left: 15px;
882 max-width: 30px;
883 max-height: 30px;
884 }
885
886 .members_page_members-settings .plugin-card-members-edd-integration .members-svg-link svg,
887 .members_page_members-settings .plugin-card-members-acf-integration .members-svg-link svg,
888 .members_page_members-settings .plugin-card-members-givewp-integration .members-svg-link svg,
889 .members_page_members-settings .plugin-card-members-meta-box-integration .members-svg-link svg,
890 .members_page_members-settings .plugin-card-members-woocommerce-integration .members-svg-link svg {
891 top: 10px;
892 left: 8px;
893 max-width: 40px;
894 max-height: 40px;
895 }
896
897 .members_page_members-settings .plugin-card-members-block-permissions .members-svg-link svg,
898 .members_page_members-settings .plugin-card-members-role-hierarchy .members-svg-link svg {
899 left: 14px
900 }
901
902 .members-addons .plugin-card .desc>p,
903 .members-addons .plugin-card .name {
904 margin-left: 84px;
905 }
906 }
907
908 .memberpress-about .welcome-panel-column-container {
909 display: flex;
910 align-items: center;
911 gap: 40px;
912 padding: 0;
913 margin: 0;
914 }
915
916 .memberpress-about .mp-desc p {
917 font-size: 13px;
918 line-height: 1.6;
919 color: #334155;
920 margin: 0 0 12px;
921 }
922
923 .memberpress-about .mp-desc p:first-child {
924 font-size: 15px;
925 font-weight: 600;
926 color: #0f172a;
927 margin-top: 0;
928 margin-bottom: 14px;
929 }
930
931 .memberpress-about .mp-desc p:last-child {
932 margin-bottom: 0;
933 }
934
935 .memberpress-about .mp-logo-wrap {
936 flex: 0 0 auto;
937 }
938
939 .memberpress-about .mp-logo {
940 display: block;
941 max-width: 220px;
942 height: auto;
943 margin: 0;
944 }
945
946 .members-about-addons {
947 display: grid;
948 grid-template-columns: repeat(3, minmax(0, 1fr));
949 grid-column-gap: 20px;
950 }
951
952 .members-about-addons .members-plugin-card {
953 margin: 0;
954 width: 100%;
955 }
956
957 .members-about-addons .members-plugin-card .plugin-icon {
958 position: static;
959 width: auto;
960 height: 28px;
961 max-width: 40px;
962 object-fit: contain;
963 flex: 0 0 auto;
964 display: block;
965 }
966
967 .members-about-addons .members-plugin-card .name,
968 .members-about-addons .members-plugin-card .desc {
969 margin-left: 0;
970 }
971
972 .members-about-addons .members-plugin-card .plugin-card-top {
973 padding: 20px;
974 }
975
976 .members-about-addons .members-plugin-card .name h3 {
977 margin: 0 0 10px;
978 min-height: 0;
979 height: auto;
980 display: flex;
981 align-items: center;
982 gap: 10px;
983 line-height: 1.2;
984 }
985
986 .members-about-addons .members-plugin-card .name h3 a {
987 text-decoration: none;
988 line-height: 1.2;
989 }
990
991 .members-about-addons .members-plugin-card .plugin-card-bottom {
992 display: flex;
993 align-items: center;
994 justify-content: space-between;
995 }
996
997 @media only screen and (max-width: 1099px) {
998 .members-about-addons {
999 grid-template-columns: 1fr;
1000 grid-row-gap: 20px;
1001 }
1002 }
1003
1004 @media screen and (min-width: 1100px) and (max-width: 1600px) {
1005 .members-about-addons .members-plugin-card {
1006 float: none;
1007 width: auto;
1008 display: flex;
1009 flex-direction: column;
1010 justify-content: space-between;
1011 }
1012
1013 .members-plugin-card.plugin-card .desc {
1014 margin-left: 0;
1015 margin-top: 50px;
1016 }
1017
1018 .members-plugin-card.plugin-card .desc p {
1019 margin-left: 0;
1020 margin-right: 0;
1021 }
1022
1023 .members-plugin-card.plugin-card .plugin-card-bottom .column-status {
1024 float: none;
1025 }
1026
1027 .members-plugin-card.plugin-card .plugin-card-bottom .column-updated {
1028 float: none;
1029 width: auto;
1030 }
1031 }
1032
1033 @media screen and (max-width: 1200px) {
1034 .welcome-panel .welcome-panel-column-container {
1035 flex-direction: column-reverse;
1036 gap: 0;
1037 padding: 0;
1038 }
1039
1040 .memberpress-about .mp-logo {
1041 margin: 0 0 20px;
1042 }
1043 }
1044
1045 .members-plugin-card.plugin-card .desc p {
1046 margin-left: 0;
1047 margin-right: 0;
1048 }
1049
1050 /* ====== Manage Roles Screen. ====== */
1051
1052 @media only screen and (min-width: 783px) {
1053
1054 .members_page_roles .column-users,
1055 .members_page_roles .column-granted_caps,
1056 .members_page_roles .column-denied_caps {
1057 width: 100px;
1058 text-align: center;
1059 }
1060 }
1061
1062 /* ====== Edit/New Role Screen. ====== */
1063
1064 /* === Role and Role Name === */
1065
1066 .members-title-div #titlewrap input {
1067 padding: 0 8px;
1068 font-size: 1.7em;
1069 line-height: normal;
1070 height: 1.7em;
1071 width: 100%;
1072 outline: none;
1073 margin: 0 0 3px;
1074 background-color: #fff;
1075 }
1076
1077 .members-title-div input[name="role"] {
1078 font-size: 13px;
1079 height: 22px;
1080 margin: 0;
1081 width: 16em;
1082 }
1083
1084 /* === Edit Capabilities Tabs === */
1085
1086 /* Wrapper box */
1087
1088 #tabcapsdiv {
1089 margin-top: 1em;
1090 }
1091
1092 #tabcapsdiv>.hndle {
1093 padding: 10px;
1094 border-bottom: 1px solid #eee;
1095 }
1096
1097 #tabcapsdiv .inside,
1098 #members-cp .inside {
1099 margin: 0;
1100 padding: 0;
1101 }
1102
1103 /* Capability filter (search) input above the tabs. */
1104
1105 .members-cap-filter {
1106 display: flex;
1107 align-items: center;
1108 gap: 12px;
1109 padding: 10px 12px;
1110 background: #fff;
1111 border-bottom: 1px solid #e5e5e5;
1112 }
1113
1114 .members-cap-filter .members-cap-filter-input {
1115 flex: 1 1 auto;
1116 width: 100%;
1117 height: 32px;
1118 line-height: 1;
1119 padding: 0 10px;
1120 box-sizing: border-box;
1121 }
1122
1123 .members-cap-filter .members-cap-filter-count {
1124 color: #666;
1125 font-size: 12px;
1126 font-style: italic;
1127 }
1128
1129 .members-cap-filter-empty td {
1130 padding: 16px 12px;
1131 color: #666;
1132 font-style: italic;
1133 text-align: center;
1134 }
1135
1136 .members-cap-filter-empty {
1137 background: transparent;
1138 }
1139
1140 /* Tabs wrapper. */
1141
1142 .members-cap-tabs,
1143 .members-tabs {
1144 overflow: hidden;
1145 background: #fff;
1146 background: linear-gradient(90deg, #fafafa 0%, #fafafa 20%, #fff 20%, #fff 100%);
1147 }
1148
1149 @media only screen and (max-width: 782px) {
1150
1151 .members-cap-tabs,
1152 .members-tabs {
1153 background: linear-gradient(90deg, #fafafa 0%, #fafafa 48px, #fff 48px, #fff 100%);
1154 }
1155 }
1156
1157 /* Tab nav. */
1158
1159 .members-cap-tabs .members-tab-nav,
1160 .members-tabs .members-tab-nav {
1161 position: relative;
1162 float: left;
1163 list-style: none;
1164 width: 20%;
1165 line-height: 1em;
1166 margin: 0 0 -1px 0;
1167 padding: 0;
1168 background-color: #fafafa;
1169 border-right: 1px solid #eee;
1170 box-sizing: border-box;
1171 }
1172
1173 .members-cap-tabs .members-tab-nav li,
1174 .members-tabs .members-tab-nav li {
1175 display: block;
1176 position: relative;
1177 margin: 0;
1178 padding: 0;
1179 line-height: 20px;
1180 }
1181
1182 .members-cap-tabs .members-tab-nav li a,
1183 .members-tabs .members-tab-nav li a {
1184 display: block;
1185 margin: 0;
1186 padding: 10px;
1187 line-height: 20px !important;
1188 text-decoration: none;
1189 border-bottom: 1px solid #eee;
1190 box-shadow: none;
1191 }
1192
1193 .members-cap-tabs .members-tab-nav li a .dashicons,
1194 .members-tabs .members-tab-nav li a .dashicons {
1195 line-height: 20px;
1196 margin-right: 3px;
1197 }
1198
1199 .members-cap-tabs .members-tab-nav li[aria-selected="true"] a,
1200 .members-tabs .members-tab-nav li[aria-selected="true"] a {
1201 position: relative;
1202 font-weight: bold;
1203 color: #555;
1204 background-color: #e0e0e0;
1205 }
1206
1207 @media only screen and (max-width: 782px) {
1208
1209 .members-cap-tabs .members-tab-nav,
1210 .members-tabs .members-tab-nav {
1211 width: 48px;
1212 }
1213
1214 .members-cap-tabs .members-tab-nav li a .dashicons,
1215 .members-tabs .members-tab-nav li a .dashicons {
1216 width: 24px;
1217 height: 24px;
1218 font-size: 24px;
1219 line-height: 24px;
1220 }
1221
1222 .members-tab-nav li .dashicons::before,
1223 .members-tab-nav li .dashicons::before {
1224 width: 24px;
1225 height: 24px;
1226 }
1227
1228 .members-tab-nav li .label {
1229 overflow: hidden;
1230 position: absolute;
1231 top: -1000em;
1232 left: -1000em;
1233 width: 1px;
1234 height: 1px;
1235 }
1236 }
1237
1238 /* Tab content wrapper */
1239
1240 .members-cap-tabs .members-tab-wrap,
1241 .members-tabs .members-tab-wrap {
1242 float: left;
1243 width: 80%;
1244 margin-left: -1px;
1245 }
1246
1247 @media only screen and (max-width: 782px) {
1248
1249 .members-cap-tabs .members-tab-wrap,
1250 .members-tabs .members-tab-wrap {
1251 width: calc(100% - 48px);
1252 }
1253 }
1254
1255 #members-cp .members-tab-content {
1256 padding: 10px;
1257 border-left: 1px solid #e5e5e5;
1258 }
1259
1260 .members-roles-select th,
1261 .members-roles-select td {
1262 width: 190px;
1263 overflow: hidden;
1264 }
1265
1266 .members-roles-select .check-all-th {
1267 text-align: center;
1268 }
1269
1270 .members-roles-select .check-all-th label {
1271 padding-left: 5px;
1272 }
1273
1274 /* === Manager when in the side meta box. === */
1275
1276 @media only screen and (min-width: 850px) {
1277
1278 #side-sortables .members-tabs {
1279 background: #fff;
1280 }
1281
1282 #side-sortables .members-tabs .members-tab-wrap {
1283 width: 100%;
1284 }
1285
1286 #side-sortables .members-tabs .members-tab-nav {
1287 display: table;
1288 width: 100%;
1289 }
1290
1291 #side-sortables .members-tabs .members-tab-nav li {
1292 display: table-cell;
1293 text-align: center;
1294 border-right: 1px solid #eee;
1295 }
1296
1297 #side-sortables .members-tabs .members-tab-nav li:last-of-type {
1298 border-right: none;
1299 }
1300
1301 #side-sortables .members-tabs .members-tab-nav li a {
1302 padding: 10px 0;
1303 }
1304
1305 #side-sortables .members-tabs .members-tab-nav .dashicons {
1306 width: 24px;
1307 height: 24px;
1308 font-size: 24px;
1309 line-height: 24px;
1310 }
1311
1312 #side-sortables .members-tabs .members-tab-nav .dashicons::before {
1313 width: 24px;
1314 height: 24px;
1315 }
1316
1317 #side-sortables .members-tabs .members-tab-nav .label {
1318 overflow: hidden;
1319 position: absolute;
1320 top: -1000em;
1321 left: -1000em;
1322 width: 1px;
1323 height: 1px;
1324 }
1325 }
1326
1327
1328 .members-tabs .members-tabs-label {
1329 display: block !important;
1330 font-weight: bold;
1331 display: inline-block;
1332 margin-bottom: 4px;
1333 }
1334
1335 .members-tabs .butterbean-control-checkbox .members-tabs-label {
1336 display: inline !important;
1337 }
1338
1339 .members-tabs .members-tabs-description {
1340 display: block;
1341 font-style: italic;
1342 margin-top: 4px;
1343 }
1344
1345 .members-tabs .members-tabs-label+.members-tabs-description {
1346 margin-top: 0;
1347 margin-bottom: 4px;
1348 }
1349
1350 /* Tab tables. */
1351
1352 #tabcapsdiv table {
1353 border-right: none;
1354 border-top: none;
1355 border-bottom: none;
1356 }
1357
1358 /* Tabs table columns. */
1359
1360 #tabcapsdiv table td,
1361 #tabcapsdiv table th {
1362 padding: 10px;
1363 padding-bottom: 10px;
1364 border-bottom: 1px solid #eee;
1365 font-size: 13px;
1366 line-height: 20px;
1367 }
1368
1369 #tabcapsdiv table td {
1370 padding: 9px;
1371 }
1372
1373 #tabcapsdiv tbody tr:last-of-type td {
1374 border-bottom: none;
1375 }
1376
1377 #tabcapsdiv tfoot th {
1378 border-color: #eee;
1379 }
1380
1381 @media only screen and (max-width: 782px) {
1382
1383 #tabcapsdiv table td,
1384 #tabcapsdiv table th {
1385 line-height: 24px;
1386 }
1387 }
1388
1389 /* Grant/Deny columns. */
1390
1391 .members-roles-select .column-grant,
1392 .members-roles-select .column-deny {
1393 width: 70px !important;
1394 text-align: left;
1395 display: table-cell !important;
1396 clear: none !important;
1397 }
1398
1399 .members-roles-select thead th,
1400 .members-roles-select tfoot th {
1401 padding: 9px !important;
1402 }
1403
1404 .members-roles-select .column-grant input,
1405 .members-roles-select .column-deny input {
1406 margin: 0 5px 0 0;
1407 vertical-align: middle;
1408 }
1409
1410 .members-roles-select tbody tr.members-cap-row-alt {
1411 background: #f2f2f2;
1412 }
1413
1414 /* Cap grant/deny button. */
1415
1416 .members-cap-tabs button {
1417 display: inline;
1418 margin: -4px;
1419 line-height: inherit;
1420 padding: 4px 8px;
1421 border: 1px solid transparent;
1422 background: transparent;
1423 border-radius: 0;
1424 outline: none;
1425
1426 -webkit-transition: all 0.25s ease-out;
1427 -moz-transition: all 0.25s ease-out;
1428 -o-transition: all 0.25s ease-out;
1429 transition: all 0.25s ease-out;
1430 }
1431
1432 .members-cap-tabs button:hover,
1433 .members-cap-tabs button:focus {
1434 border-color: #eee;
1435 background: #fafafa;
1436 cursor: pointer;
1437 }
1438
1439 .members-cap-tabs button:active {
1440 color: #0073aa;
1441 border-color: #0073aa;
1442 }
1443
1444 .members-cap-tabs button+.dashicons {
1445 display: none;
1446 margin-top: 1px;
1447 margin-bottom: -1px;
1448 line-height: inherit;
1449 }
1450
1451 .members-cap-tabs button:hover+.dashicons,
1452 .members-cap-tabs button:focus+.dashicons {
1453 display: inline-block;
1454 }
1455
1456
1457 /* New cap highlight */
1458
1459 .members-tab-content .members-highlight {
1460 background-color: rgba(0, 115, 170, 0.05);
1461 }
1462
1463 .members-tab-content tbody {
1464 -webkit-transition: all 2s ease-in-out;
1465 -moz-transition: all 2s ease-in-out;
1466 -o-transition: all 2s ease-in-out;
1467 transition: all 2s ease-in-out;
1468 }
1469
1470 /* ====== Edit Post ====== */
1471
1472 /* Role checkboxes in the Content Permissions meta box. */
1473
1474 .members-cp-role-list-wrap {
1475 overflow: auto;
1476 min-height: 42px;
1477 max-height: 200px;
1478 padding: 0 0.9em;
1479 border: solid 1px rgb(223, 223, 223);
1480 background-color: rgb(253, 253, 253);
1481 }
1482
1483 /* Promotional Footer */
1484
1485 #wpbody-content {
1486 padding-bottom: 200px;
1487 }
1488
1489 .members-footer-promotion {
1490 text-align: center;
1491 font-weight: 400;
1492 font-size: 13px;
1493 line-height: 16px;
1494 color: #787c82;
1495 padding: 20px 0 30px 0;
1496 margin-bottom: 20px;
1497 }
1498
1499 .members-footer-promotion p {
1500 font-weight: 600;
1501 }
1502
1503 .members-footer-promotion-links,
1504 .members-footer-promotion-social {
1505 display: flex;
1506 justify-content: center;
1507 align-items: center;
1508 }
1509
1510 .members-footer-promotion-links {
1511 margin: 9px 0 0;
1512 }
1513
1514 .members-footer-promotion-links span {
1515 color: #c3c4c7;
1516 padding: 0 7px;
1517 }
1518
1519 .members-footer-promotion-social {
1520 margin: 10px 0 0 0;
1521 gap: 10px;
1522 }
1523
1524 .members-footer-promotion-social li {
1525 margin-bottom: 0;
1526 }
1527
1528 .members-footer-promotion-social a {
1529 display: block;
1530 height: 16px;
1531 }
1532
1533 .members_page_members-settings.rtl {
1534
1535 .addon-activate {
1536 left: 20px;
1537 right: unset;
1538 }
1539
1540 .members-addons .plugin-card {
1541 .name,
1542 .desc p {
1543 margin-left: 0;
1544 margin-right: 148px;
1545 }
1546 }
1547 }
1548 /* Reset Roles Button Styles */
1549 .button.button-warning {
1550 background: #dc3232;
1551 border-color: #dc3232;
1552 color: #fff;
1553 }
1554
1555 .button.button-warning:hover,
1556 .button.button-warning:focus {
1557 background: #c92424;
1558 border-color: #c92424;
1559 color: #fff;
1560 }
1561
1562 .members-reset-spinner {
1563 float: none;
1564 margin-top: 0;
1565 vertical-align: middle;
1566 }
1567
1568 /* Import / Export */
1569 .members-import-status { font-weight: 600; }
1570 .members-import-status--exists { color: #d63638; }
1571 .members-import-status--new { color: #00a32a; }