Diff: STRATO-apps/wordpress_03/app/wp-content/plugins/paid-memberships-pro/css/frontend/variation_1.css
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
/**
2
+
* The primary style variation for Paid Memberships Pro.
3
+
*
4
+
* These styles can be unset on the Memberships > Settings > Design admin screen.
5
+
*/
6
+
7
+
:root {
8
+
--pmpro--color--white: #fff;
9
+
--pmpro--box-shadow: 2px 2px 7px rgba( 0, 0, 0, 0.07 );
10
+
}
11
+
12
+
/**
13
+
* Main Container
14
+
*/
15
+
.pmpro {
16
+
color: var(--pmpro--color--contrast);
17
+
18
+
/**
19
+
* Sections
20
+
*/
21
+
.pmpro_section {
22
+
margin: calc( var(--pmpro--base--spacing--large) * 2 ) 0;
23
+
}
24
+
25
+
.pmpro_section:first-of-type {
26
+
margin-top: 0;
27
+
}
28
+
29
+
.pmpro_section_title {
30
+
font-weight: 700;
31
+
margin: 0;
32
+
padding: 0;
33
+
}
34
+
35
+
/**
36
+
* Cards
37
+
*/
38
+
.pmpro_card {
39
+
background-color: var(--pmpro--color--base);
40
+
border: 1px solid var(--pmpro--color--border--variation);
41
+
border-radius: var(--pmpro--base--border-radius);
42
+
box-shadow: var(--pmpro--box-shadow);
43
+
display: flex;
44
+
flex-direction: column;
45
+
margin: var(--pmpro--base--spacing--medium) 0;
46
+
overflow: hidden;
47
+
}
48
+
49
+
.pmpro_card_title {
50
+
color: var(--pmpro--color--contrast);
51
+
font-weight: 700;
52
+
margin: 0;
53
+
padding: var(--pmpro--base--spacing--large) var(--pmpro--base--spacing--large) 0;
54
+
}
55
+
56
+
.pmpro_card_content {
57
+
padding: var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--large) var(--pmpro--base--spacing--large);
58
+
59
+
p:not(.pmpro_form_hint) {
60
+
margin: var(--pmpro--base--spacing--small) 0;
61
+
padding: 0;
62
+
}
63
+
64
+
p:last-of-type {
65
+
margin-bottom: 0;
66
+
}
67
+
68
+
}
69
+
70
+
.pmpro_card_actions {
71
+
background-color: rgba( 0, 0, 0, 0.04 );
72
+
border-bottom: 1px solid var(--pmpro--color--border--variation);
73
+
padding: var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--large);
74
+
}
75
+
76
+
.pmpro_card_content + .pmpro_card_actions {
77
+
border-top: 1px solid var(--pmpro--color--border--variation);
78
+
border-bottom: none;
79
+
}
80
+
81
+
.pmpro_card_actions button {
82
+
83
+
}
84
+
85
+
.pmpro_card_action_separator {
86
+
margin: 0 calc( var(--pmpro--base--spacing--small) / 2 );
87
+
opacity: 0.25;
88
+
}
89
+
90
+
/**
91
+
* Heading Styles
92
+
*/
93
+
.pmpro_heading-with-avatar {
94
+
align-items: center;
95
+
display: flex;
96
+
font-weight: 700;
97
+
gap: var(--pmpro--base--spacing--small);
98
+
}
99
+
100
+
/**
101
+
* Contextual Messages
102
+
*/
103
+
.pmpro_message {
104
+
box-shadow: var(--pmpro--box-shadow);
105
+
}
106
+
107
+
/**
108
+
* Buttons
109
+
*/
110
+
.pmpro_btn {
111
+
background-color: var(--pmpro--color--accent);
112
+
border: 1px solid var(--pmpro--color--accent);
113
+
border-radius: var(--pmpro--base--border-radius);
114
+
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
115
+
box-sizing: border-box;
116
+
color: var(--pmpro--color--base);
117
+
cursor: pointer;
118
+
display: inline-block;
119
+
font-size: 16px;
120
+
font-weight: 700;
121
+
letter-spacing: normal;
122
+
line-height: 1.5;
123
+
min-height: 40px;
124
+
outline: 0;
125
+
padding: var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--medium);
126
+
text-align: center;
127
+
text-decoration: none;
128
+
text-rendering: geometricprecision;
129
+
text-transform: none;
130
+
user-select: none;
131
+
-webkit-user-select: none;
132
+
touch-action: manipulation;
133
+
vertical-align: middle;
134
+
transition: background-color 0.2s, color 0.2s;
135
+
}
136
+
137
+
.pmpro_btn:hover,
138
+
.pmpro_btn:focus {
139
+
background-color: var(--pmpro--color--accent--variation);
140
+
background-position: 0 0;
141
+
border-color: var(--pmpro--color--accent--variation);
142
+
color: var(--pmpro--color--base);
143
+
}
144
+
145
+
.pmpro_btn:active {
146
+
opacity: .7;
147
+
}
148
+
149
+
.pmpro_btn-outline {
150
+
background-color: transparent;
151
+
color: var(--pmpro--color--accent);
152
+
}
153
+
154
+
.pmpro_btn-outline:hover,
155
+
.pmpro_btn-outline:focus {
156
+
background-color: transparent;
157
+
border-color: var(--pmpro--color--accent--variation);
158
+
color: var(--pmpro--color--accent--variation);
159
+
}
160
+
161
+
.pmpro_btn-delete {
162
+
background-color: var(--pmpro--color--error-text);
163
+
border-color: var(--pmpro--color--error-text);
164
+
}
165
+
166
+
.pmpro_btn-delete:hover,
167
+
.pmpro_btn-delete:focus {
168
+
background-color: var(--pmpro--color--error-link);
169
+
border-color: var(--pmpro--color--error-link);
170
+
}
171
+
172
+
.pmpro_btn-cancel {
173
+
background-color: transparent;
174
+
border-color: var(--pmpro--color--border);
175
+
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
176
+
color: var(--pmpro--color--contrast);
177
+
}
178
+
179
+
.pmpro_btn-cancel:hover,
180
+
.pmpro_btn-cancel:focus {
181
+
background-color: var(--pmpro--color--border--variation);
182
+
border-color: var(--pmpro--color--border);
183
+
color: var(--pmpro--color--contrast);
184
+
}
185
+
186
+
.pmpro_btn-plain,
187
+
.pmpro_btn-plain:hover,
188
+
.pmpro_btn-plain:focus,
189
+
.pmpro_btn-plain:active {
190
+
background: 0 0;
191
+
border: 1px solid transparent;
192
+
box-shadow: none;
193
+
cursor: pointer;
194
+
font-size: 14px;
195
+
margin: 0;
196
+
padding: 0;
197
+
}
198
+
199
+
.pmpro_btn-print {
200
+
align-items: center;
201
+
color: var(--pmpro--color--accent);
202
+
display: inline-flex;
203
+
gap: calc( var(--pmpro--base--spacing--small) / 2 );
204
+
justify-content: space-between;
205
+
text-decoration: underline;
206
+
}
207
+
208
+
.pmpro_btn-print:hover {
209
+
color: var(--pmpro--color--accent--variation);
210
+
}
211
+
212
+
/**
213
+
* Form Styles
214
+
*/
215
+
.pmpro_form {
216
+
margin: 0;
217
+
}
218
+
219
+
.pmpro_section:has(.pmpro_form) .pmpro_card_content {
220
+
padding-top: var(--pmpro--base--spacing--large);
221
+
}
222
+
223
+
.pmpro_section:has(.pmpro_form) .pmpro_card_title + .pmpro_card_content {
224
+
padding-top: var(--pmpro--base--spacing--small);
225
+
}
226
+
227
+
.pmpro_form_fieldset {
228
+
border: 0;
229
+
margin: 0;
230
+
padding: 0;
231
+
}
232
+
233
+
.pmpro_form_legend {
234
+
border: none;
235
+
margin: 0 0 var(--pmpro--base--spacing--medium);
236
+
padding: 0;
237
+
}
238
+
239
+
.pmpro_form_heading {
240
+
font-weight: 700;
241
+
margin: var(--pmpro--base--spacing--large) 0 0;
242
+
padding: 0;
243
+
}
244
+
245
+
.pmpro_card_content .pmpro_form_heading {
246
+
margin-top: 0;
247
+
}
248
+
249
+
.pmpro_form_fields {
250
+
display: flex;
251
+
flex-direction: column;
252
+
gap: var(--pmpro--base--spacing--medium);
253
+
}
254
+
255
+
.pmpro_form_fields-inline {
256
+
align-items: center;
257
+
display: flex;
258
+
flex-direction: row;
259
+
gap: calc( var(--pmpro--base--spacing--small) / 2 );
260
+
}
261
+
262
+
.pmpro_form_field {
263
+
display: flex;
264
+
flex-direction: column;
265
+
gap: calc( var(--pmpro--base--spacing--small) / 2 );
266
+
}
267
+
268
+
.pmpro_form_label {
269
+
margin: 0;
270
+
padding: 0;
271
+
}
272
+
273
+
.pmpro_form_label:not(.pmpro_form_label-inline) {
274
+
display: block;
275
+
font-weight: 500;
276
+
}
277
+
278
+
.pmpro_form_input {
279
+
background-color: var(--pmpro--color--base);
280
+
border: 1px solid var(--pmpro--color--border);
281
+
border-radius: var(--pmpro--base--border-radius);
282
+
box-shadow: none;
283
+
box-sizing: border-box;
284
+
color: var(--pmpro--color--contrast);
285
+
font-size: 16px;
286
+
height: auto;
287
+
line-height: 1.5;
288
+
margin: 0;
289
+
min-height: auto;
290
+
outline: none;
291
+
padding: var(--pmpro--base--spacing--small);
292
+
}
293
+
294
+
.pmpro_form_input-textarea {
295
+
font-family: inherit;
296
+
width: 100%;
297
+
}
298
+
299
+
.pmpro_form_input-select {
300
+
-webkit-appearance: none;
301
+
-moz-appearance: none;
302
+
appearance: none;
303
+
background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
304
+
background-position: right var(--pmpro--base--spacing--small) center;
305
+
background-repeat: no-repeat;
306
+
background-size: 16px 16px;
307
+
padding-right: calc(var(--pmpro--base--spacing--small) + 20px);
308
+
}
309
+
310
+
.pmpro_form_input-text:focus,
311
+
.pmpro_form_input-email:focus,
312
+
.pmpro_form_input-url:focus,
313
+
.pmpro_form_input-password:focus,
314
+
.pmpro_form_input-search:focus,
315
+
.pmpro_form_input-select:focus,
316
+
.pmpro_form_input-checkbox:focus,
317
+
.pmpro_form_input-radio:focus,
318
+
.pmpro_form_input-multiselect:focus,
319
+
.pmpro_form_input-number:focus,
320
+
.pmpro_form_input-file:focus,
321
+
.pmpro_form_input-date:focus,
322
+
.pmpro_form_input-textarea:focus {
323
+
background-color: var(--pmpro--color--base);
324
+
border-color: #80BDFF;
325
+
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
326
+
outline: none;
327
+
word-break: initial;
328
+
}
329
+
330
+
.pmpro_form_hint {
331
+
display: block;
332
+
font-size: 14px;
333
+
margin: 0;
334
+
opacity: 0.75;
335
+
padding: 0;
336
+
}
337
+
338
+
.pmpro_form_field-checkbox {
339
+
340
+
.pmpro_form_label {
341
+
align-items: first baseline;
342
+
display: flex;
343
+
flex-direction: row;
344
+
gap: calc( var(--pmpro--base--spacing--small) / 2 );
345
+
}
346
+
347
+
}
348
+
349
+
.pmpro_form_field-radio-item {
350
+
align-items: baseline;
351
+
flex-direction: row;
352
+
flex-wrap: nowrap;
353
+
354
+
.pmpro_form_hint {
355
+
flex: 0 0 100%;
356
+
}
357
+
}
358
+
359
+
.pmpro_form_field-radio-item:not(:last-of-type) {
360
+
margin-bottom: calc( var(--pmpro--base--spacing--small) / 2 );
361
+
}
362
+
363
+
.pmpro_form_field-checkbox-grouped {
364
+
365
+
.pmpro_form_field-checkbox-grouped-item {
366
+
align-items: first baseline;
367
+
display: flex;
368
+
flex-direction: row;
369
+
gap: calc( var(--pmpro--base--spacing--small) / 2 );
370
+
}
371
+
372
+
}
373
+
374
+
.pmpro_form_input-multiselect {
375
+
border-top-right-radius: 0;
376
+
border-bottom-right-radius: 0;
377
+
}
378
+
379
+
.pmpro_form_field-file {
380
+
381
+
.pmpro_form_input-file {
382
+
border: 3px dashed var(--pmpro--color--border--variation);
383
+
border-radius: var(--pmpro--base--border-radius);
384
+
padding: var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--medium);
385
+
width: 100%;
386
+
}
387
+
388
+
.pmpro_btn {
389
+
padding: 0 var(--pmpro--base--spacing--small);
390
+
}
391
+
}
392
+
393
+
/* Special Fields */
394
+
.pmpro_form_field-password-toggle {
395
+
align-items: center;
396
+
display: flex;
397
+
font-weight: 500;
398
+
justify-content: space-between;
399
+
margin: 0;
400
+
padding: 0;
401
+
}
402
+
403
+
.pmpro_form_field-password-toggle button,
404
+
.pmpro_form_field-password-toggle button:hover,
405
+
.pmpro_form_field-password-toggle button:focus,
406
+
.pmpro_form_field-password-toggle button:active {
407
+
align-items: center;
408
+
background: transparent;
409
+
border: none;
410
+
box-shadow: none;
411
+
box-sizing: border-box;
412
+
color: var(--pmpro--color--accent);
413
+
display: flex;
414
+
flex-direction: row;
415
+
font-size: 16px;
416
+
gap: calc( var(--pmpro--base--spacing--small) / 2 );
417
+
line-height: 1;
418
+
margin: 0;
419
+
min-height: 1px;
420
+
padding: 0;
421
+
}
422
+
423
+
.pmpro_form_field-password-toggle button:focus,
424
+
.pmpro_form_field-password-toggle button:active {
425
+
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
426
+
color: var(--pmpro--color--accent--variation);
427
+
outline: none;
428
+
}
429
+
430
+
.pmpro_form_field-password-toggle .pmpro_icon-eye {
431
+
display: block;
432
+
height: 20px;
433
+
width: 20px;
434
+
}
435
+
436
+
.pmpro_form_field-password-toggle button:focus .pmpro_icon-eye svg,
437
+
.pmpro_form_field-password-toggle button:active .pmpro_icon-eye svg {
438
+
stroke: var(--pmpro--color--accent--variation);
439
+
}
440
+
441
+
.pmpro_form_field-select2 {
442
+
display: block;
443
+
}
444
+
445
+
.pmpro_form_field-select2 .pmpro_form_label {
446
+
margin-bottom: calc( var(--pmpro--base--spacing--small) / 2 );
447
+
}
448
+
449
+
.pmpro_form_field-select2 .pmpro_form_hint {
450
+
margin-top: calc( var(--pmpro--base--spacing--small) / 2 );
451
+
}
452
+
453
+
.pmpro_payment-expiration #ExpirationMonth,
454
+
.pmpro_payment-expiration #ExpirationYear {
455
+
flex-grow: 1;
456
+
}
457
+
458
+
.pmpro_payment-discount-code #pmpro_discount_code {
459
+
flex-grow: 1;
460
+
}
461
+
462
+
#other_discount_code_fields {
463
+
margin-bottom: var(--pmpro--base--spacing--small);
464
+
}
465
+
466
+
#pmpro_tos_fields {
467
+
margin: var(--pmpro--base--spacing--medium) 0;
468
+
}
469
+
470
+
#pmpro_tos_fields #pmpro_license {
471
+
border-top-right-radius: 0;
472
+
border-bottom-right-radius: 0;
473
+
}
474
+
475
+
.pmpro_form_submit {
476
+
align-items: center;
477
+
display: flex;
478
+
flex-direction: row;
479
+
flex-wrap: wrap;
480
+
gap: var(--pmpro--base--spacing--medium);
481
+
margin-top: var(--pmpro--base--spacing--medium);
482
+
}
483
+
484
+
.pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#AccountNumber,
485
+
.pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#Expiry,
486
+
.pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#CVV,
487
+
.pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#AccountNumber,
488
+
.pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#Expiry,
489
+
.pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#CVV {
490
+
background-color: var(--pmpro--color--white);
491
+
border-radius: var(--pmpro--base--border-radius);
492
+
padding: calc( var(--pmpro--base--spacing--small) + 3px );
493
+
}
494
+
495
+
[id^="pmpro_paypal"] .pmpro_btn-submit-checkout-paypal {
496
+
align-items: center;
497
+
background-color: #ffc439;
498
+
border-color: #ffc439;
499
+
color: #000;
500
+
display: flex;
501
+
flex-direction: row;
502
+
gap: calc( var(--pmpro--base--spacing--small) / 2 );
503
+
justify-content: center;
504
+
}
505
+
506
+
[id^="pmpro_paypal"] .pmpro_btn-submit-checkout-paypal:hover {
507
+
background-color: #ffb60a;
508
+
border-color: #ffb60a;
509
+
}
510
+
511
+
/* Login Form (WordPress default and our lost/reset password forms) */
512
+
#loginform {
513
+
margin-bottom: 0;
514
+
}
515
+
516
+
#loginform input[type="submit"] {
517
+
width: 100%;
518
+
}
519
+
520
+
.pmpro_section:has(#loginform) .pmpro_card_content:not(.widget .pmpro_section:has(#loginform) .pmpro_card_content) {
521
+
padding-top: var(--pmpro--base--spacing--large);
522
+
}
523
+
524
+
.pmpro_section #loginform .login-username,
525
+
.pmpro_section #loginform .login-password,
526
+
.pmpro_section #loginform .login-remember {
527
+
display: flex;
528
+
flex-direction: column;
529
+
gap: calc( var(--pmpro--base--spacing--small) / 2 );
530
+
margin: 0 0 var(--pmpro--base--spacing--medium);
531
+
padding: 0;
532
+
}
533
+
534
+
.pmpro_section #loginform label:not(.pmpro_section #loginform .login-remember label) {
535
+
align-items: center;
536
+
display: flex;
537
+
font-weight: 500;
538
+
justify-content: space-between;
539
+
margin: 0;
540
+
padding: 0;
541
+
}
542
+
543
+
.pmpro_section #loginform .input {
544
+
background-color: var(--pmpro--color--base);
545
+
border: 1px solid var(--pmpro--color--border);
546
+
border-radius: var(--pmpro--base--border-radius);
547
+
box-shadow: none;
548
+
box-sizing: border-box;
549
+
color: var(--pmpro--color--contrast);
550
+
font-size: 16px;
551
+
line-height: 1.5;
552
+
margin: 0;
553
+
min-height: auto;
554
+
outline: none;
555
+
padding: var(--pmpro--base--spacing--small);
556
+
}
557
+
558
+
.pmpro_section #loginform .input:focus {
559
+
background-color: var(--pmpro--color--base);
560
+
border-color: #80BDFF;
561
+
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
562
+
outline: none;
563
+
word-break: initial;
564
+
}
565
+
566
+
.pmpro_section #loginform .login-remember {
567
+
align-items: baseline;
568
+
flex-direction: row;
569
+
flex-wrap: wrap;
570
+
}
571
+
572
+
.pmpro_section #loginform .login-submit {
573
+
margin: var(--pmpro--base--spacing--medium) 0 0;
574
+
}
575
+
576
+
.pmpro_section #loginform .login-submit .button {
577
+
background-color: var(--pmpro--color--accent);
578
+
border: 1px solid var(--pmpro--color--accent);
579
+
border-radius: var(--pmpro--base--border-radius);
580
+
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
581
+
box-sizing: border-box;
582
+
color: var(--pmpro--color--base);
583
+
cursor: pointer;
584
+
display: inline-block;
585
+
font-size: 16px;
586
+
font-weight: 700;
587
+
letter-spacing: normal;
588
+
line-height: 1.5;
589
+
min-height: 40px;
590
+
outline: 0;
591
+
padding: var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--medium);
592
+
text-align: center;
593
+
text-decoration: none;
594
+
text-rendering: geometricprecision;
595
+
text-transform: none;
596
+
user-select: none;
597
+
-webkit-user-select: none;
598
+
touch-action: manipulation;
599
+
vertical-align: middle;
600
+
transition: background-color 0.2s, color 0.2s;
601
+
}
602
+
603
+
.pmpro_section #loginform .login-submit .button:hover,
604
+
.pmpro_section #loginform .login-submit .button:focus {
605
+
background-color: initial;
606
+
background-position: 0 0;
607
+
border-color: var(--pmpro--color--accent);
608
+
color: var(--pmpro--color--accent);
609
+
}
610
+
611
+
.pmpro_section #loginform .login-submit .button:active {
612
+
opacity: .7;
613
+
}
614
+
615
+
/* Move password toggle before field visually but structurally after */
616
+
#pmpro_user_fields .pmpro_form_field-password:has(.pmpro_form_field-password-toggle),
617
+
.pmpro_section #loginform .login-password {
618
+
align-items: center;
619
+
display: grid;
620
+
grid-template-areas:
621
+
"label toggle"
622
+
"input input";
623
+
grid-template-columns: 1fr auto;
624
+
}
625
+
626
+
#pmpro_user_fields .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) label,
627
+
.pmpro_section #loginform .login-password label {
628
+
grid-area: label;
629
+
}
630
+
631
+
#pmpro_user_fields .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) input,
632
+
.pmpro_section #loginform .login-password input {
633
+
grid-area: input;
634
+
}
635
+
636
+
#pmpro_user_fields .pmpro_form_field-password .pmpro_form_field-password-toggle,
637
+
.pmpro_section #loginform .login-password .pmpro_form_field-password-toggle {
638
+
grid-area: toggle;
639
+
justify-self: end;
640
+
}
641
+
642
+
#resetpassform .pmpro_cols-2 {
643
+
container: resetpassform / inline-size;
644
+
}
645
+
646
+
@container resetpassform (max-width: 620px) {
647
+
#resetpassform .pmpro_cols-2 {
648
+
flex-direction: column;
649
+
}
650
+
651
+
#resetpassform .pmpro_cols-2 > * {
652
+
width: 100%;
653
+
}
654
+
}
655
+
656
+
/* Data Filters */
657
+
.pmpro_data_filters {
658
+
659
+
.pmpro_form_input {
660
+
padding: calc( var(--pmpro--base--spacing--small) / 2 );
661
+
}
662
+
663
+
.pmpro_form_input-select {
664
+
padding-right: calc(var(--pmpro--base--spacing--small) + 20px);
665
+
}
666
+
667
+
.pmpro_btn {
668
+
min-height: auto;
669
+
padding: calc( var(--pmpro--base--spacing--small) / 2 ) var(--pmpro--base--spacing--medium);
670
+
}
671
+
}
672
+
673
+
/**
674
+
* List Styles
675
+
*/
676
+
.pmpro_list.pmpro_cols-3 {
677
+
678
+
.pmpro_list_item {
679
+
margin-bottom: 0;
680
+
}
681
+
682
+
li:not(.pmpro_list_item) {
683
+
border-top: 1px solid var(--pmpro--color--border--variation);
684
+
padding-top: var(--pmpro--base--spacing--medium);
685
+
grid-column: span 3;
686
+
}
687
+
}
688
+
689
+
.pmpro_list_item_label {
690
+
font-weight: 700;
691
+
}
692
+
693
+
.pmpro_list-with-labels {
694
+
695
+
.pmpro_list_item_label {
696
+
display: block;
697
+
font-weight: 400;
698
+
opacity: 0.75;
699
+
}
700
+
701
+
.pmpro_list_item_value {
702
+
font-weight: 700;
703
+
}
704
+
705
+
}
706
+
707
+
/**
708
+
* Tables and Table Elements
709
+
*/
710
+
.pmpro_table {
711
+
background-color: var(--pmpro--color--base);
712
+
border: none;
713
+
text-align: left;
714
+
715
+
thead th {
716
+
background-color: var(--pmpro--color--base);
717
+
border: none;
718
+
padding: var(--pmpro--base--spacing--small);
719
+
vertical-align: text-bottom;
720
+
}
721
+
722
+
tbody th,
723
+
tbody td,
724
+
tfoot td {
725
+
background-color: var(--pmpro--color--base);
726
+
border-color: var(--pmpro--color--border--variation);
727
+
border-width: 1px 0 0 0;
728
+
border-style: solid;
729
+
font-weight: normal;
730
+
padding: var(--pmpro--base--spacing--small);
731
+
vertical-align: middle;
732
+
}
733
+
734
+
}
735
+
736
+
/**
737
+
* Membership Account
738
+
*/
739
+
#pmpro_account-membership-none {
740
+
741
+
.pmpro_card_content {
742
+
padding-top: var(--pmpro--base--spacing--large);
743
+
744
+
p {
745
+
margin: 0;
746
+
}
747
+
748
+
}
749
+
750
+
}
751
+
752
+
#pmpro_account-membership {
753
+
754
+
.pmpro_account-membership-message {
755
+
border-top: 1px solid var(--pmpro--color--border--variation);
756
+
margin-top: var(--pmpro--base--spacing--large);
757
+
padding-top: var(--pmpro--base--spacing--large);
758
+
759
+
> *:first-child {
760
+
margin-top: 0;
761
+
padding-top: 0;
762
+
}
763
+
}
764
+
765
+
}
766
+
767
+
#pmpro_account-links {
768
+
769
+
.pmpro_card_content {
770
+
padding-top: var(--pmpro--base--spacing--large);
771
+
772
+
.pmpro_list {
773
+
margin-bottom: 0;
774
+
}
775
+
776
+
}
777
+
778
+
}
779
+
780
+
/**
781
+
* Membership Levels
782
+
*/
783
+
.pmpro_levels_table {
784
+
table-layout: fixed;
785
+
}
786
+
787
+
.pmpro_level td p:first-of-type {
788
+
margin-top: 0;
789
+
}
790
+
791
+
.pmpro_level .pmpro_btn {
792
+
display: block;
793
+
text-decoration: none;
794
+
}
795
+
796
+
/**
797
+
* Membership Billing
798
+
*/
799
+
[id^="pmpro_billing-"] .pmpro_card .pmpro_card {
800
+
background-color: transparent;
801
+
border: none;
802
+
border-radius: unset;
803
+
box-shadow: none;
804
+
margin: 0;
805
+
806
+
.pmpro_card_content {
807
+
padding: 0;
808
+
}
809
+
}
810
+
811
+
/**
812
+
* Membership Orders
813
+
*/
814
+
.pmpro_table_orders .pmpro_tag {
815
+
display: block;
816
+
}
817
+
818
+
#pmpro_order_single {
819
+
820
+
.pmpro_card_actions {
821
+
text-align: right;
822
+
}
823
+
824
+
h2 {
825
+
align-items: center;
826
+
display: flex;
827
+
flex-wrap: wrap;
828
+
gap: var(--pmpro--base--spacing--small);
829
+
justify-content: space-between;
830
+
}
831
+
832
+
.pmpro_list-with-labels {
833
+
834
+
.pmpro_list_item_label {
835
+
font-weight: 700;
836
+
opacity: 1;
837
+
}
838
+
839
+
}
840
+
841
+
.pmpro_table {
842
+
843
+
thead th {
844
+
white-space: nowrap;
845
+
}
846
+
847
+
thead th:not(th:first-of-type),
848
+
tbody td,
849
+
tfoot td {
850
+
text-align: right;
851
+
}
852
+
853
+
tfoot tr:last-of-type td {
854
+
font-weight: 700;
855
+
}
856
+
857
+
}
858
+
859
+
}
860
+
861
+
.pmpro_price_part-total {
862
+
border-top: 1px solid var(--pmpro--color--border--variation);
863
+
margin-top: var(--pmpro--base--spacing--small);
864
+
padding-top: var(--pmpro--base--spacing--small);
865
+
}
866
+
867
+
/**
868
+
* Logged In Member Widget
869
+
*/
870
+
.pmpro_logged_in_welcome_wrap .menu {
871
+
display: flex;
872
+
flex-direction: column;
873
+
list-style: none;
874
+
margin: 0;
875
+
padding: 0;
876
+
}
877
+
878
+
.pmpro_logged_in_welcome_wrap .menu-item {
879
+
display: block;
880
+
margin: 0 0 calc( var(--pmpro--base--spacing--small) / 2 );
881
+
}
882
+
883
+
/**
884
+
* Protected Content Messages
885
+
*/
886
+
.pmpro_content_message .pmpro_card_title {
887
+
align-items: center;
888
+
display: flex;
889
+
gap: var(--pmpro--base--spacing--small);
890
+
}
891
+
892
+
.pmpro_content_message:has(.pmpro_card_title) .pmpro_card_content {
893
+
padding-top: 0;
894
+
}
895
+
896
+
.pmpro_content_message .pmpro_card_content h2 {
897
+
margin: 0;
898
+
padding: 0;
899
+
}
900
+
901
+
.pmpro_content_message .pmpro_card_content p {
902
+
margin: var(--pmpro--base--spacing--medium) 0;
903
+
padding: 0;
904
+
}
905
+
906
+
.pmpro_content_message .pmpro_card_content p:last-of-type {
907
+
margin-bottom: 0;
908
+
}
909
+
910
+
.pmpro_content_message .pmpro_card_content .pmpro_btn {
911
+
text-decoration: none;
912
+
}
913
+
914
+
.pmpro_content_message .pmpro_card_actions {
915
+
padding-right: var(--pmpro--base--spacing--large);
916
+
padding-left: var(--pmpro--base--spacing--large);
917
+
}
918
+
919
+
/**
920
+
* Pagination
921
+
*/
922
+
.pmpro_pagination {
923
+
align-items: center;
924
+
display: flex;
925
+
gap: var(--pmpro--base--spacing--small);
926
+
justify-content: center;
927
+
margin: var(--pmpro--base--spacing--medium) 0;
928
+
929
+
a {
930
+
background-color: var(--pmpro--color--base);
931
+
border: 1px solid var(--pmpro--color--border--variation);
932
+
border-radius: var(--pmpro--base--border-radius);
933
+
color: var(--pmpro--color--contrast);
934
+
padding: 2px var(--pmpro--base--spacing--small);
935
+
text-decoration: none;
936
+
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
937
+
938
+
&:hover {
939
+
background-color: var(--pmpro--color--accent--variation);
940
+
border-color: var(--pmpro--color--accent--variation);
941
+
color: var(--pmpro--color--base);
942
+
}
943
+
}
944
+
945
+
span {
946
+
background-color: var(--pmpro--color--base);
947
+
border: 1px solid var(--pmpro--color--border--variation);
948
+
border-radius: var(--pmpro--base--border-radius);
949
+
color: var(--pmpro--color--contrast);
950
+
padding: 2px var(--pmpro--base--spacing--small);
951
+
}
952
+
953
+
.pmpro_pagination-current {
954
+
background-color: var(--pmpro--color--accent);
955
+
color: var(--pmpro--color--base);
956
+
cursor: default;
957
+
font-weight: 700;
958
+
}
959
+
960
+
.pmpro_pagination-disabled {
961
+
background-color: var(--pmpro--color--base--variation);
962
+
border-color: var(--pmpro--color--border--variation);
963
+
color: var(--pmpro--color--contrast--variation);
964
+
cursor: not-allowed;
965
+
opacity: 0.7;
966
+
}
967
+
968
+
.pmpro_pagination-dots {
969
+
background: none;
970
+
border: none;
971
+
color: var(--pmpro--color--contrast--variation);
972
+
padding: 0;
973
+
}
974
+
975
+
.pmpro_pagination-previous {
976
+
margin-right: 0;
977
+
}
978
+
979
+
.pmpro_pagination-next {
980
+
margin-left: 0;
981
+
}
982
+
983
+
}
984
+
985
+
/**
986
+
* Misc
987
+
*/
988
+
.avatar {
989
+
border: 1px solid var(--pmpro--color--border--variation);
990
+
border-radius: 50%;
991
+
box-shadow: var(--pmpro--box-shadow);
992
+
margin: 0;
993
+
padding: 0;
994
+
}
995
+
996
+
.pmpro_cols-2,
997
+
.pmpro_cols-3 {
998
+
display: flex;
999
+
flex-direction: row;
1000
+
flex-wrap: wrap;
1001
+
gap: var(--pmpro--base--spacing--medium);
1002
+
}
1003
+
1004
+
.pmpro_cols-2 > * {
1005
+
width: calc( 50% - calc( var(--pmpro--base--spacing--medium) / 2 ) );
1006
+
}
1007
+
1008
+
.pmpro_cols-3 > * {
1009
+
width: calc( 33.333333% - calc( var(--pmpro--base--spacing--medium) * 2 / 3 ) );
1010
+
}
1011
+
1012
+
.pmpro_font-x-large {
1013
+
font-size: 32px;
1014
+
line-height: 1.4;
1015
+
}
1016
+
1017
+
.pmpro_font-large {
1018
+
font-size: 24px;
1019
+
line-height: 1.5;
1020
+
}
1021
+
1022
+
.pmpro_font-medium {
1023
+
font-size: 16px;
1024
+
line-height: 1.6;
1025
+
}
1026
+
1027
+
.pmpro_font-small {
1028
+
font-size: 14px;
1029
+
line-height: 1.5;
1030
+
}
1031
+
1032
+
.pmpro_tag-discount-code {
1033
+
border-style: dashed;
1034
+
}
1035
+
1036
+
.pmpro_divider {
1037
+
background-color: var(--pmpro--color--border--variation);
1038
+
height: 1px;
1039
+
margin: var(--pmpro--base--spacing--medium) 0;
1040
+
}
1041
+
1042
+
.pmpro_form .pmpro_divider {
1043
+
margin-top: var(--pmpro--base--spacing--large);
1044
+
}
1045
+
1046
+
}
1047
+
1048
+
/**
1049
+
* RTL Styles
1050
+
*/
1051
+
.rtl {
1052
+
1053
+
.pmpro_form_field-password-toggle {
1054
+
padding: 0 0 0 var(--pmpro--base--spacing--small);
1055
+
}
1056
+
1057
+
}
1058
+
1059
+
/**
1060
+
* Print Styles
1061
+
*/
1062
+
@media print {
1063
+
.pmpro {
1064
+
font-size: 12pt;
1065
+
1066
+
.pmpro_section {
1067
+
margin: var(--pmpro--base--spacing--medium) 0;
1068
+
}
1069
+
1070
+
.pmpro_card_title {
1071
+
padding: var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--small) 0;
1072
+
}
1073
+
1074
+
.pmpro_card_content {
1075
+
padding: var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--small) var(--pmpro--base--spacing--small);
1076
+
}
1077
+
1078
+
.pmpro_section:has(.pmpro_form) .pmpro_card_content {
1079
+
padding-top: var(--pmpro--base--spacing--small);
1080
+
}
1081
+
1082
+
.pmpro_font-x-large {
1083
+
font-size: 18pt;
1084
+
}
1085
+
1086
+
.pmpro_font-large {
1087
+
font-size: 14pt;
1088
+
}
1089
+
1090
+
.pmpro_font-medium {
1091
+
font-size: 14pt;
1092
+
}
1093
+
1094
+
}
1095
+
}
1096
+
1097
+
/**
1098
+
* Print Styles
1099
+
*/
1100
+
@media print {
1101
+
.pmpro {
1102
+
.pmpro_card {
1103
+
background-color: transparent;
1104
+
border: none;
1105
+
box-shadow: none;
1106
+
}
1107
+
.pmpro_card_title,
1108
+
.pmpro_card_content,
1109
+
.pmpro_section:has(.pmpro_form) .pmpro_card_title + .pmpro_card_content {
1110
+
padding: 0;
1111
+
}
1112
+
.pmpro_form_legend {
1113
+
margin-bottom: 0;
1114
+
}
1115
+
}
1116
+
}
1117
+
1118
+
/**
1119
+
* Responsive Styles
1120
+
*/
1121
+
@media screen and (max-width: 767px) {
1122
+
.pmpro {
1123
+
1124
+
.pmpro_table {
1125
+
1126
+
tbody tr th:first-child,
1127
+
tbody tr td:first-child {
1128
+
border-top-width: 4px;
1129
+
padding-top: var(--pmpro--base--spacing--large);
1130
+
}
1131
+
1132
+
tbody tr th:last-child,
1133
+
tbody tr td:last-child {
1134
+
padding-bottom: var(--pmpro--base--spacing--large);
1135
+
}
1136
+
1137
+
tbody tr:first-child th:first-child,
1138
+
tbody tr:first-child td:first-child {
1139
+
border-top: none;
1140
+
}
1141
+
}
1142
+
1143
+
#pmpro_order_single {
1144
+
1145
+
.pmpro_table {
1146
+
1147
+
thead th:not(th:first-of-type),
1148
+
tbody td,
1149
+
tfoot td {
1150
+
text-align: left;
1151
+
}
1152
+
1153
+
tbody tr:first-child th {
1154
+
display: block;
1155
+
}
1156
+
1157
+
tbody tr:first-child th:before {
1158
+
display: none;
1159
+
}
1160
+
1161
+
tfoot td:first-of-type {
1162
+
display: none;
1163
+
}
1164
+
}
1165
+
1166
+
}
1167
+
1168
+
.pmpro_table_cancel {
1169
+
border-bottom: 1px solid var(--pmpro--color--border--variation);
1170
+
}
1171
+
1172
+
.pmpro_table_cancel tbody tr td {
1173
+
border-width: 0;
1174
+
padding-top: 0;
1175
+
}
1176
+
1177
+
.pmpro_cols-2,
1178
+
.pmpro_cols-3 {
1179
+
display: flex;
1180
+
flex-direction: column;
1181
+
gap: var(--pmpro--base--spacing--medium);
1182
+
}
1183
+
1184
+
.pmpro_cols-2 > *,
1185
+
.pmpro_cols-3 > * {
1186
+
width: auto;
1187
+
}
1188
+
1189
+
#pmpro_user_fields .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) {
1190
+
width: 100%;
1191
+
}
1192
+
1193
+
}
1194
+
1195
+
}