PluginProbe
User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor / 4.0.3
User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor v4.0.3
4.0.3 4.0.2 4.0.1 4.0.0 3.16.6 3.16.5 3.16.4 3.16.3 3.16.2 3.16.1 3.16.0 3.15.9 3.9.9 3.9.5 3.9.6 3.9.7 3.9.8 1.1.7 1.1.8 1.1.9 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 All 341 releases
← All changes | assets/css/style-front-end.css +786 -350 3.9.9 → 4.0.3 View file →
@@ -1,55 +1,77 @@
1 -/* Register & Edit Profile Forms*/
1 +/* Register & Edit Profile Forms */
2 2
3 3 /*--------------------------------------------------------------
4 4 >>> TABLE OF CONTENTS:
5 5 ----------------------------------------------------------------
6 -1.0 - Reset
7 -2.0 - Forms
8 -3.0 - Alignments
9 -4.0 - Errors & Notices
10 -5.0 - User Listing
11 -6.0 - Media Queries
6 + 1.0 - Reset
7 + 2.0 - Forms
8 + 3.0 - Alignments
9 + 4.0 - Errors & Notices
10 + 5.0 - User Listing
11 + 6.0 - Media Queries
12 + 7.0 - Password Strength
13 + 8.0 - Show/Hide Password
14 + 9.0 - Profile Builder Subscription Plans Field
15 +10.0 - Private Website
16 +11.0 - Map markers info
17 +12.0 - Elementor Visual Editor
18 +13.0 - Two-Factor Authentication
12 19 --------------------------------------------------------------*/
13 20
21 +
14 22 /*--------------------------------------------------------------
15 23 1.0 Reset
16 24 --------------------------------------------------------------*/
25 +
17 26 .wppb-user-forms,
18 -.wppb-user-forms *{
19 - -webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
20 - -moz-box-sizing: border-box !important; /* Firefox, other Gecko */
21 - box-sizing: border-box !important; /* Opera/IE 8+ */
27 +.wppb-user-forms * {
28 + -webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
29 + -moz-box-sizing: border-box !important; /* Firefox, other Gecko */
30 + box-sizing: border-box !important; /* Opera/IE 8+ */
22 31 }
23 32
33 +
24 34 /*--------------------------------------------------------------
25 35 2.0 Forms
26 36 --------------------------------------------------------------*/
37 +
38 +.wppb-user-forms .wppb-form-field {
39 + list-style: none;
40 +}
41 +
27 42 .wppb-user-forms input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="file"]):not([value="agree"]),
28 43 .wppb-user-forms select,
29 -.wppb-user-forms textarea{
30 - font-size: 100%; /* Corrects font size not being inherited in all browsers */
31 - margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
32 - vertical-align: baseline; /* Improves appearance and consistency in all browsers */
44 +.wppb-user-forms textarea {
45 + font-size: 100%; /* Corrects font size not being inherited in all browsers */
46 + margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
47 + vertical-align: baseline; /* Improves appearance and consistency in all browsers */
33 48 }
49 +
34 50 .wppb-user-forms input[type="checkbox"],
35 51 .wppb-user-forms input[type="radio"] {
36 - padding: 0; /* Addresses excess padding in IE8/9 */
52 + padding: 0; /* Addresses excess padding in IE8/9 */
37 53 }
54 +
38 55 .wppb-user-forms input[type="search"] {
39 - -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
40 - -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
41 - -moz-box-sizing: content-box;
42 - box-sizing: content-box;
56 + -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
57 + -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
58 + -moz-box-sizing: content-box;
59 + box-sizing: content-box;
43 60 }
44 -.wppb-user-forms input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
45 - -webkit-appearance: none;
61 +
62 +/* Corrects inner padding displayed oddly in S5, Chrome on OSX */
63 +.wppb-user-forms input[type="search"]::-webkit-search-decoration {
64 + -webkit-appearance: none;
46 65 }
66 +
67 +/* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
47 68 .wppb-user-forms button::-moz-focus-inner,
48 -.wppb-user-forms input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
49 - border: 0;
50 - padding: 0;
69 +.wppb-user-forms input::-moz-focus-inner {
70 + border: 0;
71 + padding: 0;
51 72 }
73 +
52 74 .wppb-user-forms input[type="text"],
53 75 .wppb-user-forms input[type="number"],
54 76 .wppb-user-forms input[type="email"],
55 77 .wppb-user-forms input[type="url"],
@@ -54,13 +76,14 @@
54 76 .wppb-user-forms input[type="email"],
55 77 .wppb-user-forms input[type="url"],
56 78 .wppb-user-forms input[type="password"],
57 79 .wppb-user-forms input[type="search"],
58 -.wppb-user-forms textarea{
59 - color: #666;
60 - border: 1px solid #ccc;
61 - border-radius: 3px;
80 +.wppb-user-forms textarea {
81 + color: #666;
82 + border: 1px solid #ccc;
83 + border-radius: 3px;
62 84 }
85 +
63 86 .wppb-user-forms input[type="text"]:focus,
64 87 .wppb-user-forms input[type="number"]:focus,
65 88 .wppb-user-forms input[type="email"]:focus,
66 89 .wppb-user-forms input[type="url"]:focus,
@@ -66,10 +89,11 @@
66 89 .wppb-user-forms input[type="url"]:focus,
67 90 .wppb-user-forms input[type="password"]:focus,
68 91 .wppb-user-forms input[type="search"]:focus,
69 92 .wppb-user-forms textarea:focus {
70 - color: #111;
93 + color: #111;
71 94 }
95 +
72 96 .wppb-user-forms input[type="text"],
73 97 .wppb-user-forms input[type="number"],
74 98 .wppb-user-forms input[type="email"],
75 99 .wppb-user-forms input[type="url"],
@@ -74,55 +98,70 @@
74 98 .wppb-user-forms input[type="email"],
75 99 .wppb-user-forms input[type="url"],
76 100 .wppb-user-forms input[type="password"],
77 101 .wppb-user-forms input[type="search"] {
78 - padding: 3px;
102 + padding: 3px;
79 103 }
104 +
80 105 .wppb-user-forms textarea {
81 - overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
82 - padding-left: 3px;
83 - vertical-align: top; /* Improves readability and alignment in all browsers */
84 - width: 100%;
106 + overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
107 + padding-left: 3px;
108 + vertical-align: top; /* Improves readability and alignment in all browsers */
109 + width: 100%;
85 110 }
86 -.wppb-user-forms .wppb-wysiwyg .wp-editor-wrap { /* properly align wysiwyg editor among form fields */
87 - float:left;
88 - width:69.9%;
111 +
112 +/* Properly align wysiwyg editor among form fields */
113 +.wppb-user-forms .wppb-wysiwyg .wp-editor-wrap {
114 + float: left;
115 + width: 69.9%;
89 116 }
90 -.wppb-user-forms .wppb-wysiwyg button:hover{ /* wysiwyg - overwrite the theme inherited background color on hover*/
117 +
118 +/* WYSIWYG - Overwrite the theme inherited background color on hover */
119 +.wppb-user-forms .wppb-wysiwyg button:hover {
91 120 background: none;
92 121 }
93 -.wppb-user-forms .wppb-wysiwyg div.mce-tinymce.mce-panel{ /*Display the borders for the TinyMCE editor - Visual tab*/
122 +
123 +/* Display the borders for the TinyMCE editor - Visual tab */
124 +.wppb-user-forms .wppb-wysiwyg div.mce-tinymce.mce-panel {
94 125 border: 1px solid #ccc !important;
95 126 color: #666 !important;
96 127 }
97 -.wppb-user-forms .wppb-wysiwyg div.mce-panel.mce-first{
128 +
129 +.wppb-user-forms .wppb-wysiwyg div.mce-panel.mce-first {
98 130 border-width: 0 0 1px 0 !important;
99 131 }
100 -.wppb-user-forms .wppb-wysiwyg div.mce-panel.mce-last{
132 +
133 +.wppb-user-forms .wppb-wysiwyg div.mce-panel.mce-last {
101 134 border-width: 1px 0 !important;
102 135 }
103 -.wppb-user-forms .wppb-wysiwyg .quicktags-toolbar { /*Display the borders for the TinyMCE editor - Text tab*/
136 +
137 +/* Display the borders for the TinyMCE editor - Text tab */
138 +.wppb-user-forms .wppb-wysiwyg .quicktags-toolbar {
104 139 border: 1px solid #dedede;
105 140 border-bottom: 0;
106 141 }
107 -#wp-link label input[type="text"] { /*Fix the looks of the Add Link window for TinyMCE editor*/
108 - padding: 0px;
142 +
143 +/* Fix the looks of the Add Link window for TinyMCE editor */
144 +#wp-link label input[type="text"] {
145 + padding: 0;
109 146 }
110 147
111 -#wppb-search-fields{
148 +#wppb-search-fields {
112 149 min-width: 250px;
113 - float:left;
114 - margin-right:20px;
150 + float: left;
151 + width: 100%;
115 152 }
116 153
117 -.wppb-user-forms .wppb-search-button{
118 - margin-right:10px;
119 - padding:7px 20px;
154 +.wppb-user-forms .wppb-search-button {
155 + padding: 7px 20px;
120 156 line-height: 24px;
121 157 }
122 158
123 -.wppb-search-users-wrap{
124 - margin-bottom: 20px;
159 +.wppb-search-users-wrap {
160 + display: flex;
161 + align-items: center;
162 + justify-content: flex-start;
163 + gap: 10px;
125 164 }
126 165
127 166 .wppb-user-forms .extra_field_heading {
128 167 margin-bottom: 0;
@@ -127,12 +166,10 @@
127 166 .wppb-user-forms .extra_field_heading {
128 167 margin-bottom: 0;
129 168 }
130 169
131 -.wppb-gdpr-delete-button .wppb-delete-account {
132 - width: 110px;
133 -}
134 -
170 +.wppb-user-forms .login-submit #wppb-submit:disabled,
171 +.wppb-user-forms .form-submit #wppb-recover-password-button:disabled,
135 172 .wppb-user-forms .form-submit #register:disabled,
136 173 .wppb-user-forms .form-submit #edit_profile:disabled {
137 174 background: #414141;
138 175 opacity: 0.3;
@@ -138,37 +175,88 @@
138 175 opacity: 0.3;
139 176 cursor: not-allowed;
140 177 }
141 178
179 +.wppb-userlisting-container form.wppb-search-users {
180 + margin-bottom: 20px;
181 +}
182 +
183 +.wppb-userlisting-container .wppb-ul-search {
184 + display: flex;
185 + align-items: center;
186 + justify-content: flex-start;
187 + gap: 10px;
188 +}
189 +
190 +.wppb-userlisting-container .wppb-ul-search form.wppb-search-users {
191 + flex-grow: 1;
192 +}
193 +
194 +.wppb-search-container {
195 + display: flex;
196 + flex-direction: row;
197 + align-items: center;
198 + justify-content: flex-start;
199 + flex-grow: 1;
200 + position: relative;
201 +}
202 +
203 +.wppb-search-container .wppb-clear-results {
204 + position: absolute;
205 + right: 10px;
206 + top: 50%;
207 + transform: translateY(-50%);
208 + text-decoration: none;
209 +}
210 +
211 +[id^="wppb-login-widget"] .wppb-user-login-form {
212 + max-width: 100% !important;
213 +}
214 +
215 +[id^="wppb-login-widget"] .login-username > *,
216 +[id^="wppb-login-widget"] .login-password > * {
217 + display: block;
218 + width: 100% !important;
219 +}
220 +
221 +
142 222 /*--------------------------------------------------------------
143 223 3.0 Alignments
144 224 --------------------------------------------------------------*/
145 -.wppb-user-forms ul{
146 - max-width:900px;
147 - list-style:none;
148 - margin-left:0;
149 - margin-right:0;
150 - padding-left:0;
151 - padding-right:0;
225 +
226 +.wppb-user-forms > ul {
227 + max-width: 900px;
228 + list-style: none;
229 + margin-left: 0;
230 + margin-right: 0;
231 + padding-left: 0;
232 + padding-right: 0;
152 233 }
153 234
154 -.wppb-user-forms ul li{
155 - list-style:none;
235 +#select_user_to_edit_form .wppb-form-field {
236 + max-width: 900px;
156 237 }
157 238
239 +.wppb-user-forms ul li {
240 + list-style: none;
241 + margin: 0 0 14px 0;
242 + padding: 0;
243 +}
244 +
158 245 #wppb-login-wrap p,
159 246 #select_user_to_edit_form p {
160 - overflow:hidden;
161 - margin:0;
162 - padding-bottom:14px;
247 + overflow: hidden;
248 + margin: 0 0 14px 0;
249 + padding: 0;
163 250 }
164 251
165 -.wppb-user-forms ul li{
166 - margin:0;
167 - padding-bottom:14px;
252 +.wppb-user-forms .wppb-recaptcha:not(.wppb-field-error, .wppb-recaptcha-v2) {
253 + margin: 0;
254 + padding: 0;
255 + height: 0;
168 256 }
169 257
170 -.wppb-user-forms ul li:after{
258 +.wppb-user-forms ul li:after {
171 259 content: "";
172 260 clear: both;
173 261 display: block;
174 262 }
@@ -181,87 +269,110 @@
181 269 padding-bottom: 14px;
182 270 }
183 271
184 272 .wppb-user-forms .wppb-form-field > ul {
185 - margin-left: 0;
273 + margin: 0;
274 + padding: 0;
186 275 }
187 276
188 -.wppb-form-field.wppb-default-password,
189 -.wppb-form-field.wppb-default-repeat-password,
190 -#wppb-login-wrap .login-password,
191 -#wppb-recover-password-container .wppb-form-field.passw1,
192 -#wppb-recover-password-container .wppb-form-field.passw2 {
277 +.wppb-form-field .wppb-password-field-container {
278 + display: block;
193 279 position: relative;
194 280 }
195 281
196 -.wppb-form-field label,
282 +.wppb-form-field .wppb-password-field-container input[type="password"], .wppb-form-field .wppb-password-field-container input[type="text"] {
283 + width: 100%;
284 +}
285 +
286 +.wppb-form-field:not(#select_user_to_edit_form .wppb-form-field, .wppb-checkbox-terms-and-conditions, .wppb-gdpr-checkbox, .wppb-subscription-plans) label:not(.wppb-checkboxes label, .wppb-radios label, .login-remember label, .wppb-epaa-switch),
287 +#pms-subscription-plans-discount label,
288 +.pms-invite-code-name-field label,
197 289 #wppb-login-wrap .login-username label,
198 290 #wppb-login-wrap .login-password label,
199 -#wppb-login-wrap .login-auth label{
200 - width:30%;
201 - float:left;
202 - min-height:1px;
291 +#wppb-login-wrap .login-auth label {
292 + width: 30%;
293 + float: left;
294 + min-height: 1px;
203 295 }
204 -.wppb-form-field input[type="text"], .wppb-form-field input[type="number"], .wppb-form-field input[type="email"], .wppb-form-field input[type="url"], .wppb-form-field input[type="password"], .wppb-form-field input[type="search"],
296 +
297 +.wppb-form-field input[type="text"],
298 +.wppb-form-field input[type="number"],
299 +.wppb-form-field input[type="email"],
300 +.wppb-form-field input[type="url"],
301 +.wppb-form-field input[type="search"],
205 302 .wppb-form-field select,
206 303 .wppb-form-field textarea,
304 +.wppb-form-field .wppb-password-field-container,
207 305 .wppb-checkboxes,
208 306 .wppb-radios,
209 307 #wppb-login-wrap .login-username input,
210 -#wppb-login-wrap .login-password input,
211 -#wppb-login-wrap .login-auth input{
212 - width:69.9%;
213 - float:left;
308 +#wppb-login-wrap .login-auth input {
309 + width: 69.9%;
310 + float: left;
214 311 }
215 312
313 +
314 +.wppb-form-field.wppb-select-multiple select {
315 + height: auto;
316 +}
317 +
318 +.wp-theme-oceanwp .wppb-form-field input[type="number"]{
319 + max-width: 100% !important;
320 +}
321 +
216 322 #wppb-login-wrap .login-remember {
217 - display: flex;
218 - align-items: center;
323 + display: flex;
324 + align-items: center;
219 325 }
220 326
221 327 #wppb-login-wrap .login-remember input {
222 - cursor: pointer;
328 + cursor: pointer;
223 329 }
224 330
225 331 #wppb-login-wrap .login-remember label {
226 - padding-left: 8px;
227 - margin-bottom: 0px;
228 - cursor: pointer;
332 + padding-left: 8px;
333 + margin-bottom: 0;
334 + cursor: pointer;
229 335 }
230 336
231 337 .wppb-form-field.wppb-timepicker select {
232 - width: auto;
338 + width: auto !important;
233 339 margin-right: 5px;
234 340 }
235 341
236 -.wppb-user-forms .wppb-wysiwyg .wp-editor-wrap .wp-editor-tabs *{
342 +.wppb-user-forms .wppb-wysiwyg .wp-editor-wrap .wp-editor-tabs * {
237 343 box-sizing: content-box !important;
238 344 }
239 345
346 + .wp-theme-oceanwp .woocommerce .wppb-user-forms .wppb-wysiwyg .wp-editor-wrap .wp-editor-tabs *{
347 + width: auto !important;
348 + padding: 3px 8px 4px !important;
349 + }
350 +
240 351 .wppb-user-forms .wp-editor-wrap input {
241 352 float: none;
242 353 width: auto;
243 354 }
244 355
245 -input#send_credentials_via_email{
246 - float:none;
247 - margin-right:10px
356 +input#send_credentials_via_email {
357 + float: none;
358 + margin-right: 10px;
248 359 }
249 360
250 -.wppb-send-credentials-checkbox label{
251 - width:auto;
361 +.wppb-send-credentials-checkbox label {
362 + width: auto;
252 363 }
253 364
254 -.wppb-form-field > span{
255 - display:block;
256 - clear:both;
257 - margin-left:30%;
258 - font-size:80%;
259 - font-style:italic;
365 +.wppb-form-field > span:not(.wppb-password-field-container) {
366 + display: block;
367 + clear: both;
368 + font-size: 80%;
369 + font-style: italic;
370 + word-break: break-word;
260 371 }
261 372
262 373 .wppb-form-field > span.custom_field_html {
263 - font-style: normal;
374 + font-style: normal;
264 375 font-size: 100%;
265 376 }
266 377
267 378 .wppb-form-field > span.select2-container {
@@ -266,15 +377,23 @@
266 377
267 378 .wppb-form-field > span.select2-container {
268 379 font-style: normal;
269 380 font-size: 100%;
270 - clear:none;
381 + clear: none;
271 382 }
272 383
273 -.wppb-repeater .wppb-select-cpt span.select2-container{
274 - width:auto !important;
384 +.wppb-form-field > span.select2-container .selection .select2-selection {
385 + height: 44px;
275 386 }
276 387
388 +.wppb-repeater .wppb-select-cpt span.select2-container {
389 + width: auto !important;
390 +}
391 +
392 +span.select2-container {
393 + z-index: 9999;
394 +}
395 +
277 396 .wppb-form-field.wppb-timepicker > span.wppb-timepicker-separator {
278 397 display: inline-block;
279 398 float: left;
280 399 clear: none;
@@ -283,40 +402,40 @@
283 402 font-size: 100%;
284 403 font-style: normal;
285 404 }
286 405
287 -.wppb_upload_button{
288 - display:inline-block;
406 +.wppb_upload_button {
407 + display: inline-block;
289 408 }
290 409
291 410 .wppb-user-forms .wppb-checkboxes li,
292 -.wppb-user-forms .wppb-radios li{
293 - display:inline-block;
294 - padding:0 20px 0 0;
411 +.wppb-user-forms .wppb-radios li {
412 + display: inline-block;
413 + padding: 0 20px 0 0;
295 414 }
296 415
297 -.wppb-user-forms .wppb-checkboxes li.wppb-hidden{
416 +.wppb-user-forms .wppb-checkboxes li.wppb-hidden {
298 417 padding: 0;
299 418 }
300 419
301 420 .wppb-form-field .wppb-checkboxes label,
302 -.wppb-form-field .wppb-radios label{
303 - float:none;
304 - min-width:0;
305 - padding-left:5px;
306 - width:auto;
307 - display:inline-block;
421 +.wppb-form-field .wppb-radios label {
422 + float: none;
423 + min-width: 0;
424 + padding-left: 5px;
425 + width: auto;
426 + display: inline-block;
308 427 }
309 428
310 429 .wppb-checkbox-terms-and-conditions input,
311 430 .wppb-checkboxes li input,
312 -.wppb-radios li input{
313 - min-width:0;
314 - float:none;
431 +.wppb-radios li input {
432 + min-width: 0;
433 + float: none;
315 434 }
316 435
317 436 .wppb-edit-user .wppb-checkbox-terms-and-conditions {
318 - display:none;
437 + display: none;
319 438 }
320 439
321 440 .wppb-form-field.wppb-heading span,
322 441 .wppb-default-about-yourself-heading span,
@@ -321,10 +440,10 @@
321 440 .wppb-form-field.wppb-heading span,
322 441 .wppb-default-about-yourself-heading span,
323 442 .wppb-default-contact-info-heading span,
324 443 .wppb-default-name-heading span,
325 -.wppb-checkbox-terms-and-conditions span{
326 - margin-left:0;
444 +.wppb-checkbox-terms-and-conditions span {
445 + margin-left: 0;
327 446 }
328 447
329 448 .wppb-checkbox-terms-and-conditions label {
330 449 width: 100%;
@@ -330,20 +449,21 @@
330 449 width: 100%;
331 450 }
332 451
333 452 .wppb-form-field.wppb-checkbox-terms-and-conditions input[type="checkbox"].custom_field_toa {
334 - float:none;
335 - margin-right:10px
453 + float: none;
454 + margin-right: 10px;
336 455 }
337 456
457 +.wppb-recaptcha-element {
458 + display: inline-block;
459 +}
338 460
339 -.wppb-recaptcha-element{
340 - display: inline-block;
341 -}
342 461 .wppb-recaptcha-element.wppb-invisible-recaptcha {
343 462 display: block !important;
344 463 }
345 -.wppb-recaptcha-element iframe{
464 +
465 +.wppb-recaptcha-element iframe {
346 466 margin-bottom: 0;
347 467 }
348 468
349 469 .wppb-form-field input.wppb-map-search-box {
@@ -356,36 +476,38 @@
356 476 border: 0;
357 477 border-radius: 1px;
358 478 padding: 0 10px;
359 479 box-shadow: 0 1px 1px 0 #c1c1c1;
360 - font-family: 'Roboto', sans-serif;
480 + font-family: "Roboto", sans-serif;
361 481 }
362 482
363 -.wppb-create-new-site{
483 +.wppb-create-new-site {
364 484 width: 100%;
365 485 }
366 -input#wppb_create_new_site_checkbox{
486 +
487 +input#wppb_create_new_site_checkbox {
367 488 width: auto;
368 489 margin-right: 10px;
369 490 float: none;
370 491 }
371 -label[for=wppb_create_new_site_checkbox]{
372 - width:100%;
492 +
493 +label[for="wppb_create_new_site_checkbox"] {
494 + width: 100%;
373 495 }
374 -label[for=blog-privacy]{
375 - width:100%;
496 +
497 +label[for="blog-privacy"] {
498 + width: 100%;
376 499 }
377 500
378 -
379 501 /* GDPR checkbox */
380 -.wppb-gdpr-checkbox.wppb-form-field label{
381 - width:100%;
382 - float:none;
502 +.wppb-gdpr-checkbox.wppb-form-field label {
503 + width: 100%;
504 + float: none;
383 505 }
384 506
385 -.wppb-gdpr-checkbox.wppb-form-field #user_consent_gdpr{
386 - float:none;
387 - margin:0 10px 0 0;
507 +.wppb-gdpr-checkbox.wppb-form-field #user_consent_gdpr {
508 + float: none;
509 + margin: 0 10px 0 0;
388 510 }
389 511
390 512
391 513 /*--------------------------------------------------------------
@@ -405,29 +527,44 @@
405 527 .wppb-error,
406 528 .wppb-warning {
407 529 box-sizing: border-box;
408 530 background: #ffebe8;
409 - border: 1px solid #C00;
531 + border: 1px solid #c00;
410 532 }
411 533
412 534 .wppb-error,
413 535 .wppb-warning,
414 536 .wppb-notice {
415 - color:#222222 !important;
537 + color: #222222 !important;
416 538 }
417 539
418 540 .wppb-error a,
419 -.wppb-warning a{
420 - color:#007acc !important;
541 +.wppb-warning a {
542 + color: #007acc !important;
421 543 }
422 544
423 -.admin-bar #wppb_form_general_message{
424 - padding-top:32px;
545 +.wppb-comment-captcha-error {
546 + clear: both !important;
547 + margin: 0 0 24px !important;
548 + padding: 12px 16px !important;
549 + line-height: 1.5 !important;
425 550 }
426 551
552 +.wppb-comment-captcha-error + .comment-notes,
553 +.wppb-comment-captcha-error + .logged-in-as {
554 + clear: both !important;
555 + display: block !important;
556 + margin-top: 0 !important;
557 + margin-bottom: 24px !important;
558 +}
559 +
560 +.admin-bar #wppb_form_general_message {
561 + padding-top: 32px;
562 +}
563 +
427 564 .wppb-error a:hover,
428 -.wppb-warning a:hover{
429 - color:#007acc !important;
565 +.wppb-warning a:hover {
566 + color: #007acc !important;
430 567 text-decoration: underline;
431 568 }
432 569
433 570 .wppb-notice {
@@ -435,15 +572,15 @@
435 572 background: #ccc;
436 573 border: 1px solid #666;
437 574 }
438 575
439 -.wppb-required{
576 +.wppb-required {
440 577 color: red;
441 578 }
442 579
443 580 .wppb-required,
444 -.wppb-checkbox-terms-and-conditions span.wppb-required{
445 - margin-left:5px;
581 +.wppb-checkbox-terms-and-conditions span.wppb-required {
582 + margin-left: 5px;
446 583 }
447 584
448 585 .wppb-success {
449 586 box-sizing: border-box;
@@ -452,11 +589,11 @@
452 589 }
453 590
454 591 .wppb-register-user .wppb-field-error,
455 592 .wppb-edit-user .wppb-field-error,
456 -#wppb-recover-password .wppb-field-error{
457 - background-color: #FFDFDF;
458 - border: 1px dotted #C89797;
593 +#wppb-recover-password .wppb-field-error {
594 + background-color: #ffdfdf;
595 + border: 1px dotted #c89797;
459 596 margin-bottom: 6px !important;
460 597 padding: 6px !important;
461 598 }
462 599
@@ -462,46 +599,68 @@
462 599
463 600 .wppb-field-error > input,
464 601 .wppb-field-error > select,
465 602 .wppb-field-error > textarea,
466 -.wppb-field-error > label{
603 +.wppb-field-error > label {
467 604 margin-bottom: 10px;
468 605 }
469 606
470 -.wppb-field-error img{
607 +.wppb-field-error img {
471 608 box-shadow: none;
472 - -webkit-box-shadow:none;
473 - border:none;
474 - border-radius:0px;
609 + -webkit-box-shadow: none;
610 + border: none;
611 + border-radius: 0px;
475 612 vertical-align: middle;
476 613 margin-top: -3px;
477 - padding-left:5px;
614 + padding-left: 5px;
478 615 width: auto;
479 616 height: auto;
480 617 }
481 618
482 -.wppb-form-field > span.wppb-form-error{
483 - margin-top:10px;
619 +.wppb-form-field > span.wppb-form-error {
620 + margin-top: 10px;
484 621 padding-top: 5px;
485 - border-top:1px dotted #c89797;
486 - font-size:100%;
622 + border-top: 1px dotted #c89797;
623 + font-size: 100%;
487 624 margin-left: 0;
488 625 }
489 626
627 +.wppb-password-group {
628 + display: flex;
629 + flex-direction: column;
630 + gap: 12px;
631 +}
632 +
633 +.wppb-edit-user .wppb-default-password.wppb-current-password-field-error {
634 + background-color: transparent;
635 + border: 0;
636 + padding: 0;
637 +}
638 +
639 +.wppb-edit-user .wppb-default-password .wppb-current-password-subfield-error {
640 + background-color: #ffdfdf;
641 + border: 1px dotted #c89797;
642 + padding: 6px;
643 + margin-bottom: 6px;
644 +}
645 +
490 646 /* Remove global Blog Details Field error */
491 -#wppb-register-user .wppb-default-blog-details.wppb-field-error{
647 +#wppb-register-user .wppb-default-blog-details.wppb-field-error {
492 648 background-color: transparent !important;
493 649 border: 0px !important;
494 650 }
495 -.wppb-default-blog-details > span.wppb-form-error{
496 - display:none;
651 +
652 +.wppb-default-blog-details > span.wppb-form-error {
653 + display: none;
497 654 }
655 +
498 656 .wppb-blog-details-heading span {
499 657 margin-left: 0;
500 658 }
501 659
502 -.wppb-honeypot {
503 - display: none;
660 +.wppb-1website-url {
661 + position: absolute;
662 + left: -99999px;
504 663 }
505 664
506 665
507 666 /*--------------------------------------------------------------
@@ -506,26 +665,32 @@
506 665
507 666 /*--------------------------------------------------------------
508 667 5.0 User Listing
509 668 --------------------------------------------------------------*/
510 -.wppb-table *{
511 - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
669 +
670 +.wppb-table * {
671 + -moz-box-sizing: border-box;
672 + -webkit-box-sizing: border-box;
673 + box-sizing: border-box;
512 674 }
513 -.wppb-table{
514 - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
675 +
676 +.wppb-table {
677 + -moz-box-sizing: border-box;
678 + -webkit-box-sizing: border-box;
679 + box-sizing: border-box;
515 680 border-spacing: 0.5rem;
516 681 border-collapse: collapse;
517 682 width: 100%;
518 683 }
519 684
520 -.wppb-table th{
685 +.wppb-table th {
521 686 background: #f4f4f4;
522 687 padding: 7px;
523 - border:1px solid #e1e1e1;
688 + border: 1px solid #e1e1e1;
524 689 text-align: left;
525 690 }
526 691
527 -.wppb-table thead tr:hover{
692 +.wppb-table thead tr:hover {
528 693 background: none;
529 694 }
530 695
531 696 .wppb-table .wppb-sorting .wppb-sorting-default {
@@ -531,30 +696,30 @@
531 696 .wppb-table .wppb-sorting .wppb-sorting-default {
532 697 display: inline-block;
533 698 width: 16px;
534 699 height: 16px;
535 - background: url('../images/sorting-default.png') no-repeat center center;
700 + background: url("../images/sorting-default.png") no-repeat center center;
536 701 vertical-align: middle;
537 702 }
538 703
539 704 .wppb-table .wppb-sorting .wppb-sorting-ascending {
540 - background-image: url('../images/sorting-ascending.png');
705 + background-image: url("../images/sorting-ascending.png");
541 706 }
542 707
543 708 .wppb-table .wppb-sorting .wppb-sorting-descending {
544 - background-image: url('../images/sorting-descending.png');
709 + background-image: url("../images/sorting-descending.png");
545 710 }
546 711
547 -.wppb-table tr:hover{
712 +.wppb-table tr:hover {
548 713 background: #f1fcff;
549 714 }
550 -.wppb-table td{
715 +.wppb-table td {
551 716 padding: 7px;
552 - border:1px solid #e1e1e1;
717 + border: 1px solid #e1e1e1;
553 718 }
554 719
555 720 .wppb-table .wppb-posts,
556 -.wppb-table .wppb-moreinfo{
721 +.wppb-table .wppb-moreinfo {
557 722 text-align: center;
558 723 }
559 724
560 725 .wppb-avatar img {
@@ -560,49 +725,49 @@
560 725 .wppb-avatar img {
561 726 max-width: none;
562 727 }
563 728
564 -ul.wppb-profile{
729 +ul.wppb-profile {
565 730 list-style-type: none;
566 - margin-left: 0;
567 - margin-right: 0;
568 - padding-left:0;
731 + margin-left: auto;
732 + margin-right: auto;
733 + padding-left: 0;
569 734 padding-right: 0;
570 735 }
571 736
572 -ul.wppb-profile li{
737 +ul.wppb-profile li {
573 738 margin-left: 0;
574 739 margin-right: 0;
575 740 overflow: hidden;
576 741 }
577 742
578 -ul.wppb-profile li label{
743 +ul.wppb-profile li label {
579 744 display: block;
580 - width:30%;
581 - float:left;
582 - min-height:1px;
745 + width: 30%;
746 + float: left;
747 + min-height: 1px;
583 748 font-weight: bold;
584 749 }
585 750
586 -ul.wppb-profile li span{
751 +ul.wppb-profile li span {
587 752 display: block;
588 - width:69.9%;
589 - float:left;
753 + width: 69.9%;
754 + float: left;
590 755 }
591 756
592 757 ul.wppb-profile li h3,
593 -ul.wppb-profile li h3:first-child{
594 - margin:20px 0;
595 - padding-top:20px;
596 - border-top:1px solid #d2d2d2;
758 +ul.wppb-profile li h3:first-child {
759 + margin: 20px 0;
760 + padding-top: 20px;
761 + border-top: 1px solid #d2d2d2;
597 762 }
598 763
599 -ul.wppb-faceted-list{
764 +ul.wppb-faceted-list {
600 765 list-style: none;
601 - margin:0 0 20px;
766 + margin: 0 0 20px;
602 767 }
603 768
604 -ul.wppb-faceted-list:after{
769 +ul.wppb-faceted-list:after {
605 770 visibility: hidden;
606 771 display: block;
607 772 font-size: 0;
608 773 content: " ";
@@ -609,39 +774,52 @@
609 774 clear: both;
610 775 height: 0;
611 776 }
612 777
613 -ul.wppb-faceted-list > li{
614 - float:left;
778 +ul.wppb-faceted-list > li {
779 + float: left;
615 780 margin-right: 15px;
616 781 max-width: 300px;
617 782 }
618 783
619 -ul.wppb-faceted-list > li:first-child{
620 - float:none;
621 - clear:both;
784 +ul.wppb-faceted-list > li:first-child {
785 + float: none;
786 + clear: both;
622 787 }
623 788
624 -.wppb-userlisting-container .wppb-faceted-list li h5{
625 - margin-top: 20px;
626 - margin-bottom: 5px;
789 +.wppb-userlisting-container .wppb-faceted-list li h5 {
790 + margin: 5px 0;
627 791 }
628 792
629 -ul.wppb-faceted-list label > *{
793 +.wppb-screen-reader-text {
794 + border: 0;
795 + clip: rect(1px, 1px, 1px, 1px);
796 + -webkit-clip-path: inset(50%);
797 + clip-path: inset(50%);
798 + height: 1px;
799 + margin: -1px;
800 + overflow: hidden;
801 + padding: 0;
802 + position: absolute;
803 + width: 1px;
804 + word-wrap: normal !important;
805 +}
806 +
807 +ul.wppb-faceted-list label > * {
630 808 vertical-align: middle;
631 809 }
632 810
633 -ul.wppb-faceted-list input[type="checkbox"]{
811 +ul.wppb-faceted-list input[type="checkbox"] {
634 812 margin-right: 5px;
635 813 }
636 814
637 -.wppb-userlisting-container.wppb-spinner{
638 - position:relative;
639 - opacity: 0.5
815 +.wppb-userlisting-container.wppb-spinner {
816 + position: relative;
817 + opacity: 0.5;
640 818 }
641 819
642 -.wppb-userlisting-container.wppb-spinner:after{
643 - content: '';
820 +.wppb-userlisting-container.wppb-spinner:after {
821 + content: "";
644 822 position: absolute;
645 823 top: 50%;
646 824 left: 50%;
647 825 margin-top: -16px;
@@ -648,31 +826,31 @@
648 826 margin-left: -16px;
649 827 display: block;
650 828 width: 32px;
651 829 height: 32px;
652 - /*background: url('../images/ajax-loader.gif') no-repeat center;*/
653 830 z-index: 1000;
654 831 }
655 832
656 -ul.wppb-faceted-list .hide-this{
657 - display:none;
833 +ul.wppb-faceted-list .hide-this {
834 + display: none;
658 835 }
659 836
660 -#wppb-remove-facets-container{
837 +#wppb-remove-facets-container {
661 838 list-style: none;
662 839 margin: 0;
663 840 }
664 841
665 -.wppb-remove-facet:before, .wppb-remove-all-facets:before {
842 +.wppb-remove-facet:before,
843 +.wppb-remove-all-facets:before {
666 844 content: "x";
667 845 display: inline-block;
668 - border-right: 1px dotted #D3CCC9;
669 - border-right: 1px dotted #6F6F6F;
846 + border-right: 1px dotted #d3ccc9;
847 + border-right: 1px dotted #6f6f6f;
670 848 padding-right: 5px;
671 849 margin-right: 5px;
672 850 }
673 851
674 -.wppb-userlisting-container .wppb-ul-range-values{
852 +.wppb-userlisting-container .wppb-ul-range-values {
675 853 padding: 5px 0;
676 854 }
677 855
678 856 .wppb-userlisting-container:after {
@@ -683,27 +861,27 @@
683 861 clear: both;
684 862 height: 0;
685 863 }
686 864
687 -.wppb-float-left{
688 - float:left;
865 +.wppb-float-left {
866 + float: left;
689 867 }
690 868
691 -.wppb-float-right{
692 - float:right;
869 +.wppb-float-right {
870 + float: right;
693 871 }
694 872
695 -.wppb-facet-float-left{
696 - float:left;
697 - max-width:300px;
873 +.wppb-facet-float-left {
874 + float: left;
875 + max-width: 300px;
698 876 }
699 877
700 -.wppb-facet-float-right{
701 - float:right;
702 - max-width:300px;
878 +.wppb-facet-float-right {
879 + float: right;
880 + max-width: 300px;
703 881 }
704 882
705 -li.wppb-facet-search{
883 +li.wppb-facet-search {
706 884 position: relative;
707 885 }
708 886
709 887 .wppb-facet-search-wrap label {
@@ -712,14 +890,14 @@
712 890 padding: 0 !important;
713 891 margin: 0 !important;
714 892 }
715 893
716 -.wppb-facet-search{
894 +.wppb-facet-search {
717 895 width: 75% !important;
718 896 margin-right: 5px !important;
719 897 }
720 898
721 -.wppb-facet-search .screen-reader-text{
899 +.wppb-facet-search .screen-reader-text {
722 900 display: none;
723 901 }
724 902
725 903 .wppb-facet-search,
@@ -728,18 +906,17 @@
728 906 display: inline-block !important;
729 907 vertical-align: middle;
730 908 }
731 909
732 -.wppb-search-submit{
910 +.wppb-search-submit {
733 911 display: inline-block;
734 912 width: 20%;
735 913 height: 100%;
736 - background: #4F5963;
914 + background: #4f5963;
737 915 position: absolute;
738 916 right: 0;
739 -
740 917 cursor: pointer;
741 - border: 1px solid #444D57;
918 + border: 1px solid #444d57;
742 919 border-radius: 3px;
743 920 padding: 0 !important;
744 921 margin: 0 !important;
745 922 }
@@ -745,17 +922,16 @@
745 922 }
746 923
747 924 .wppb-search-submit:hover {
748 925 background: #fff;
749 - color: #4F5963;
926 + color: #4f5963;
750 927 }
751 928
752 -.wppb-search-submit::before{
929 +.wppb-search-submit::before {
753 930 content: "\26B2";
754 931 display: inline-block;
755 932 color: #fff;
756 933 font-size: 120%;
757 -
758 934 -webkit-transform: rotate(-45deg);
759 935 -moz-transform: rotate(-45deg);
760 936 -o-transform: rotate(-45deg);
761 937 transform: rotate(-45deg);
@@ -760,20 +936,19 @@
760 936 -o-transform: rotate(-45deg);
761 937 transform: rotate(-45deg);
762 938 }
763 939
764 -.wppb-search-submit:hover::before{
765 - color: #4F5963;
940 +.wppb-search-submit:hover::before {
941 + color: #4f5963;
766 942 }
767 943
768 -@media screen and ( max-width: 720px ) {
769 -
944 +@media screen and (max-width: 720px) {
770 945 .wppb-table {
771 946 border: 0;
772 947 }
773 948
774 949 .wppb-table thead {
775 - display: none
950 + display: none;
776 951 }
777 952
778 953 .wppb-table tr {
779 954 display: block;
@@ -790,9 +965,9 @@
790 965 border-bottom: 1px solid #e1e1e1;
791 966 }
792 967
793 968 .wppb-table .wppb-posts,
794 - .wppb-table .wppb-moreinfo{
969 + .wppb-table .wppb-moreinfo {
795 970 text-align: right;
796 971 }
797 972
798 973 .wppb-table td:before {
@@ -800,14 +975,14 @@
800 975 float: left;
801 976 }
802 977
803 978 .wppb-table td:after {
804 - content: '';
979 + content: "";
805 980 display: block;
806 981 clear: both;
807 982 }
983 +}
808 984
809 -}
810 985
811 986 /*--------------------------------------------------------------
812 987 6.0 Media Queries
813 988 --------------------------------------------------------------*/
@@ -812,59 +987,60 @@
812 987 6.0 Media Queries
813 988 --------------------------------------------------------------*/
814 989
815 990 @media screen and (max-width: 500px) {
816 -
817 - .wppb-form-field label,
818 - #wppb-login-wrap .login-username label,
819 - #wppb-login-wrap .login-password label,
991 + .wppb-form-field:not(#select_user_to_edit_form .wppb-form-field, .wppb-checkbox-terms-and-conditions, .wppb-gdpr-checkbox, .wppb-subscription-plans) label:not(.wppb-checkboxes label, .wppb-radios label),
992 + #wppb-login-wrap .login-username label,
993 + #wppb-login-wrap .login-password label,
820 994 #wppb-login-wrap .login-auth label,
821 - ul.wppb-profile li label{
822 - width:100%;
823 - display:block;
824 - float:none;
825 - }
995 + ul.wppb-profile li label {
996 + width: 100% !important;
997 + display: block;
998 + float: none !important;
999 + }
826 1000
827 - .wppb-form-field input[type="text"], .wppb-form-field input[type="number"], .wppb-form-field input[type="email"], .wppb-form-field input[type="url"], .wppb-form-field input[type="password"], .wppb-form-field input[type="search"],
1001 + .wppb-form-field input[type="text"],
1002 + .wppb-form-field input[type="number"],
1003 + .wppb-form-field input[type="email"],
1004 + .wppb-form-field input[type="url"],
1005 + .wppb-form-field input[type="password"],
1006 + .wppb-form-field input[type="search"],
828 1007 .wppb-form-field select,
829 - .wppb-form-field textarea,
830 - .wppb-checkboxes,
831 - .wppb-radios,
832 - #wppb-login-wrap .login-username input,
833 - #wppb-login-wrap .login-password input,
1008 + .wppb-form-field textarea,
1009 + .wppb-form-field .wp-editor-wrap,
1010 + .wppb-form-field .wppb-password-field-container,
1011 + .wppb-checkboxes,
1012 + .wppb-radios,
1013 + #wppb-login-wrap .login-username input,
1014 + #wppb-login-wrap .login-password input,
834 1015 #wppb-login-wrap .login-auth input,
835 - ul.wppb-profile li span{
836 - width:100%;
837 - float:left;
838 - }
1016 + ul.wppb-profile li span {
1017 + width: 100% !important;
1018 + float: none !important;
1019 + }
839 1020
840 - .wppb-form-field > span{
841 - margin-left:0;
842 - }
1021 + .wppb-form-field > span {
1022 + margin-left: 0;
1023 + }
843 1024
844 - .wppb-checkboxes li label,
845 - .wppb-radios li label{
846 - display:inline;
847 - }
1025 + .wppb-checkboxes li label,
1026 + .wppb-radios li label {
1027 + display: inline;
1028 + }
848 1029
849 - .wppb-form-field .wppb-avatar-nofile,
850 - .wppb-form-field .wppb-avatar-file,
851 - .wppb-form-field .wppb-upload-nofile,
852 - .wppb-form-field .wppb-upload-file{
853 - margin-left:0;
854 - }
855 -
856 - .wppb-form-field.wppb-default-password button.wppb-toggle-pw,
857 - .wppb-form-field.wppb-default-repeat-password button.wppb-toggle-pw,
858 - #wppb-login-wrap .login-password button.wppb-toggle-pw {
859 - top: 6px!important;
1030 + .wppb-form-field .wppb-avatar-nofile,
1031 + .wppb-form-field .wppb-avatar-file,
1032 + .wppb-form-field .wppb-upload-nofile,
1033 + .wppb-form-field .wppb-upload-file {
1034 + margin-left: 0;
860 1035 }
1036 +}
861 1037
862 -}
863 1038
864 1039 /*--------------------------------------------------------------
865 1040 7.0 Password Strength
866 1041 --------------------------------------------------------------*/
1042 +
867 1043 #pass-strength-result {
868 1044 background-color: #eee;
869 1045 border: 1px solid #ddd;
870 1046 display: none;
@@ -872,30 +1048,36 @@
872 1048 margin: 13px 5px 5px 30%;
873 1049 padding: 3px 5px;
874 1050 text-align: center;
875 1051 width: 200px;
876 - height:28px;
1052 + height: 28px;
877 1053 }
1054 +
878 1055 #pass-strength-result.short {
879 1056 background-color: #ffa0a0;
880 1057 border-color: #f04040;
881 1058 }
1059 +
882 1060 #pass-strength-result.bad {
883 1061 background-color: #ffb78c;
884 1062 border-color: #ff853c;
885 1063 }
1064 +
886 1065 #pass-strength-result.good {
887 1066 background-color: #ffec8b;
888 1067 border-color: #fc0;
889 1068 }
1069 +
890 1070 #pass-strength-result.strong {
891 1071 background-color: #c3ff88;
892 1072 border-color: #8dff1c;
893 1073 }
894 1074
1075 +
895 1076 /*--------------------------------------------------------------
896 -7.0 Show/Hide Password
1077 +8.0 Show/Hide Password
897 1078 --------------------------------------------------------------*/
1079 +
898 1080 .wppb-form-field.wppb-default-password button.wppb-toggle-pw,
899 1081 .wppb-form-field.wppb-default-repeat-password button.wppb-toggle-pw,
900 1082 #wppb-login-wrap .login-password button.wppb-toggle-pw,
901 1083 #wppb-recover-password-container .wppb-form-field.passw1 .wppb-toggle-pw,
@@ -901,24 +1083,34 @@
901 1083 #wppb-recover-password-container .wppb-form-field.passw1 .wppb-toggle-pw,
902 1084 #wppb-recover-password-container .wppb-form-field.passw2 .wppb-toggle-pw {
903 1085 position: absolute;
904 1086 right: 4px;
905 - /* fields bottom padding / 2 */
906 - top: -7px;
1087 + top: 50%;
1088 + transform: translateY(-50%);
907 1089 background: transparent !important;
908 1090 background-color: transparent !important;
909 1091 border: 1px solid transparent;
910 1092 box-shadow: none;
911 - padding: 0;
912 - margin: 0;
913 - height: 100%;
914 - cursor: pointer;
1093 + padding: 0;
1094 + margin: 0;
1095 + cursor: pointer;
1096 + outline: none;
1097 + display: flex;
1098 + align-items: center;
1099 + justify-content: center;
1100 +}
915 1101
916 - display: flex;
917 - align-items: center;
918 - justify-content: center;
1102 +.wp-theme-oceanwp .wppb-form-field.wppb-default-password button.wppb-toggle-pw,
1103 +.wp-theme-oceanwp .wppb-form-field.wppb-default-repeat-password button.wppb-toggle-pw{
1104 + width: auto !important;
919 1105 }
920 1106
1107 +#wppb-loginform .login-password .show-password-input,
1108 +.woocommerce .wppb-default-repeat-password .show-password-input,
1109 +.woocommerce .wppb-default-password .show-password-input {
1110 + display: none !important;
1111 +}
1112 +
921 1113 .wppb-form-field.wppb-default-password button img,
922 1114 .wppb-form-field.wppb-default-repeat-password button img,
923 1115 #wppb-login-wrap .login-password button img,
924 1116 #wppb-recover-password-container .wppb-form-field.passw1 button img,
@@ -925,16 +1117,13 @@
925 1117 #wppb-recover-password-container .wppb-form-field.passw2 button img {
926 1118 width: 20px;
927 1119 }
928 1120
929 -/**************************************************/
930 -/* Profile Builder Subscription Plans Field
931 -/**************************************************/
932 -.wppb-form-field.wppb-subscription-plans label {
933 - width: 100%;
934 - float: none;
935 -}
936 1121
1122 +/*--------------------------------------------------------------
1123 +9.0 Profile Builder Subscription Plans Field
1124 +--------------------------------------------------------------*/
1125 +
937 1126 .wppb-form-field.wppb-subscription-plans input {
938 1127 display: inline-block;
939 1128 float: none;
940 1129 margin-right: 10px !important;
@@ -947,31 +1136,49 @@
947 1136 margin-left: 0;
948 1137 margin-bottom: 1.5em;
949 1138 }
950 1139
951 -/**************************************************/
952 -/* This is very weird: if in the css there is a rule on table of border-collapse:collapse; then on FFox and Edge the Media upload won't open
953 -/**************************************************/
954 -.wppb-user-forms table{
955 - border-collapse:separate;
1140 +/* This is very weird: if in the css there is a rule on table of border-collapse:collapse; then on FFox and Edge the Media upload won't open */
1141 +.wppb-user-forms table {
1142 + border-collapse: separate;
956 1143 }
957 1144
958 -/**************************************************/
959 -/* Private Website CSS
960 -/**************************************************/
961 -.wppb-private-website.wppb-private-website-hide-menus .main-navigation{
962 - display:none;
1145 +
1146 +/*--------------------------------------------------------------
1147 +10.0 Private Website
1148 +--------------------------------------------------------------*/
1149 +
1150 +.wppb-private-website.wppb-private-website-hide-menus .main-navigation {
1151 + display: none;
963 1152 }
964 1153
965 1154
966 -/* Map markers info */
967 -.marker-content-info {position: absolute; top: -400px; left: -400px; display: none;}
968 -.wppb-map-container .marker-content {min-width: 320px; max-width: 100%;}
969 -.wppb-map-container .marker-content .marker-info-avatar_or_gravatar {float: left; margin-right: 10px;}
1155 +/*--------------------------------------------------------------
1156 +11.0 Map markers info
1157 +--------------------------------------------------------------*/
970 1158
971 -/**************************************************/
972 -/* Elementor Visual Editor CSS
973 -/**************************************************/
1159 +.marker-content-info {
1160 + position: absolute;
1161 + top: -400px;
1162 + left: -400px;
1163 + display: none;
1164 +}
1165 +
1166 +.wppb-map-container .marker-content {
1167 + min-width: 320px;
1168 + max-width: 100%;
1169 +}
1170 +
1171 +.wppb-map-container .marker-content .marker-info-avatar_or_gravatar {
1172 + float: left;
1173 + margin-right: 10px;
1174 +}
1175 +
1176 +
1177 +/*--------------------------------------------------------------
1178 +12.0 Elementor Visual Editor
1179 +--------------------------------------------------------------*/
1180 +
974 1181 .elementor-edit-mode .wppb-map-container {
975 1182 width: 69.9%;
976 1183 float: left;
977 1184 border: 1px solid #ccc;
@@ -977,19 +1184,17 @@
977 1184 border: 1px solid #ccc;
978 1185 border-radius: 3px;
979 1186 }
980 1187
981 -/**************************************************/
982 -/* Two-Factor Authentication CSS
983 -/**************************************************/
1188 +
1189 +/*--------------------------------------------------------------
1190 +13.0 Two-Factor Authentication
1191 +--------------------------------------------------------------*/
1192 +
984 1193 #wppb_auth_secret_buttons,
985 1194 #wppb_auth_verify_buttons,
986 -#wppb_auth_QR_INFO {
1195 +#wppb_auth_backup_buttons {
987 1196 margin-left: 30%;
988 -}
989 -
990 -#wppb_auth_secret_buttons,
991 -#wppb_auth_verify_buttons {
992 1197 display: flex;
993 1198 justify-content: space-between;
994 1199 align-items: stretch;
995 1200 }
@@ -1016,33 +1221,264 @@
1016 1221 text-decoration: none;
1017 1222 }
1018 1223
1019 1224 #wppb_auth_newsecret.wppb_auth_new_button,
1020 -#wppb_auth_verify_button.wppb_auth_verify_button {
1225 +#wppb_auth_verify_button.wppb_auth_verify_button,
1226 +#wppb_auth_backup_button.wppb_auth_backup_button {
1021 1227 flex-grow: 1;
1022 1228 }
1023 1229
1024 1230 #wppb_show_qr.wppb_auth_qr_button,
1025 -#wppb_auth_verify_indicator.wppb_auth_verify_indicator {
1231 +#wppb_auth_verify_indicator.wppb_auth_verify_indicator,
1232 +#wppb_auth_backup_indicator.wppb_auth_backup_indicator {
1026 1233 flex-grow: 1;
1027 1234 }
1028 1235
1029 -#wppb_auth_verify_indicator {
1236 +#wppb_auth_verify_indicator,
1237 +#wppb_auth_backup_indicator {
1030 1238 pointer-events: none !important;
1031 1239 }
1240 +
1032 1241 #wppb_auth_verify_indicator.valid {
1033 1242 background-color: #c3ff88;
1034 1243 border-color: #8dff1c;
1035 1244 }
1245 +
1036 1246 #wppb_auth_verify_indicator.invalid {
1037 1247 background-color: #ffa0a0;
1038 1248 border-color: #f04040;
1039 1249 }
1040 1250
1251 +#wppb_auth_backup_indicator.low {
1252 + background-color: #ffeaa7;
1253 + border-color: #856404;
1254 +}
1255 +
1256 +#wppb_auth_backup_indicator.zero {
1257 + background-color: #ffa0a0;
1258 + border-color: #f04040;
1259 +}
1260 +
1261 +#wppb_auth_QR_INFO {
1262 + text-align: right;
1263 +}
1264 +
1041 1265 #wppb_auth_QR_INFO .wppb-description-delimiter {
1042 - font-size:80%;
1043 - font-style:italic;
1266 + font-size: 80%;
1267 + font-style: italic;
1044 1268 }
1045 1269
1046 -#wppb_auth_QRCODE {
1270 +/* Backup Codes Styling */
1271 +/*.wppb-backup-codes-section,*/
1272 +.wppb-backup-codes-admin-section {
1273 + margin-top: 20px;
1274 + padding: 15px;
1275 + border: 1px solid #ccc;
1276 + border-radius: 4px;
1277 + background-color: #f7f7f7;
1278 +}
1279 +
1280 +.wppb-backup-codes-section h4,
1281 +.wppb-backup-codes-admin-section h3,
1282 +.wppb-backup-codes-admin-section h4 {
1283 + margin-top: 0;
1284 + margin-bottom: 15px;
1285 + color: #555;
1286 +}
1287 +
1288 +.wppb-backup-codes-new,
1289 +.wppb-backup-codes-admin-new {
1290 + /*
1291 + background-color: #d1ecf1;
1292 + */
1293 + border: 1px solid #ccc/*#bee5eb*/;
1294 + /*
1295 + color: #0c5460;
1296 + */
1297 + padding: 15px;
1298 + border-radius: 4px;
1299 + margin-bottom: 15px;
1300 +}
1301 +
1302 +.wppb-backup-codes-new h4,
1303 +.wppb-backup-codes-new h5,
1304 +.wppb-backup-codes-admin-new h4 {
1305 + margin-top: 0;
1306 + margin-bottom: 10px;
1307 + color: #0c5460;
1308 +}
1309 +
1310 +.wppb-backup-codes-list,
1311 +.wppb-backup-codes-admin-list {
1312 + background-color: #fff;
1313 + border: 1px solid #ccc;
1314 + border-radius: 4px;
1315 + padding: 15px;
1316 + margin-bottom: 15px;
1317 + font-family: 'Courier New', monospace;
1318 + font-size: 14px;
1319 + line-height: 1.6;
1320 + max-height: 200px;
1321 + overflow-y: auto;
1322 +}
1323 +
1324 +.wppb-backup-code-item,
1325 +.wppb-backup-codes-admin-item {
1326 + margin-bottom: 5px;
1327 + padding: 5px;
1328 + background-color: #f8f9fa;
1329 + border-radius: 3px;
1330 + word-break: break-all;
1331 +}
1332 +
1333 +.wppb-backup-codes-actions {
1334 + margin-top: 15px;
1335 +}
1336 +
1337 +.wppb-backup-codes-actions .button {
1338 + background: none repeat scroll 0 0 #f7f7f7;
1339 + border: 1px solid #ccc !important;
1340 + color: #555;
1341 + cursor: pointer;
1342 + display: inline-block;
1343 + font-size: 12px;
1344 + line-height: 26px;
1345 + padding: 15px;
1346 + text-decoration: none;
1347 + white-space: nowrap;
1047 1348 text-align: center;
1349 + margin-right: 10px;
1350 + margin-bottom: 5px;
1351 +}
1352 +
1353 +.wppb-backup-codes-actions .button:hover {
1354 + background: none repeat scroll 0 0 #fafafa;
1355 + border: 1px solid #999 !important;
1356 + color: #222;
1357 + text-decoration: none;
1358 +}
1359 +
1360 +.wppb-2fa-forced-notice.wppb-error p{
1361 + margin: unset;
1362 +}
1363 +
1364 +/*--------------------------------------------------------------
1365 +International Telephone Input
1366 +--------------------------------------------------------------*/
1367 +.wppb-user-forms .iti .iti__search-input {
1368 + box-sizing: border-box !important;
1369 + width: 100% !important;
1370 + padding-left: 30px !important;
1371 + padding-right: 28px !important;
1372 +}
1373 +
1374 +/* PB Default: keep intl input aligned like the other text fields (next to label). */
1375 +.wppb-form-field.wppb-international-telephone-input .iti {
1376 + width: 69.9%;
1377 + max-width: 100%;
1378 + float: left;
1379 +}
1380 +
1381 +/* Form styles 1/2/3: keep intl input in the same stacked layout as text fields. */
1382 +#wppb-form-style-1-wrapper .wppb-form-field.wppb-international-telephone-input .iti,
1383 +#wppb-form-style-2-wrapper .wppb-form-field.wppb-international-telephone-input .iti,
1384 +#wppb-form-style-3-wrapper .wppb-form-field.wppb-international-telephone-input .iti {
1385 + width: 100%;
1386 + max-width: 100%;
1387 + display: block;
1388 +}
1389 +
1390 +/* Increase horizontal spacing used by the intl-tel-input internals. */
1391 +.wppb-user-forms .iti {
1392 + --iti-spacer-horizontal: 12px;
1393 +}
1394 +
1395 +/* Keep dropdown corners clean and clip item highlight backgrounds. */
1396 +.wppb-user-forms .iti--inline-dropdown .iti__dropdown-content {
1397 + border-radius: 6px;
1398 + overflow: hidden;
1399 +}
1400 +
1401 +/* Add vertical breathing room for the list container. */
1402 +.wppb-user-forms .iti .iti__country-list {
1403 + padding: 4px 0;
1404 + margin: 0;
1405 +}
1406 +
1407 +/* Add balanced horizontal padding for each country option row. */
1408 +.wppb-user-forms .iti .iti__country {
1409 + padding: 8px 12px;
1410 +}
1411 +
1412 +/* Ensure visible gap between flag and country label/dial code. */
1413 +.wppb-user-forms .iti .iti__country-list .iti__flag {
1414 + margin-right: 10px;
1415 +}
1416 +
1417 +/* Mirror flag spacing when page direction is right-to-left. */
1418 +[dir="rtl"] .wppb-user-forms .iti .iti__country-list .iti__flag {
1419 + margin-right: 0;
1420 + margin-left: 10px;
1421 +}
1422 +
1423 +/* Prevent theme/PMS button styles from affecting the intl-tel-input country selector. */
1424 +#wppb-form-style-1-wrapper .wppb-form-field.wppb-international-telephone-input .iti button.iti__selected-country,
1425 +#wppb-form-style-2-wrapper .wppb-form-field.wppb-international-telephone-input .iti button.iti__selected-country,
1426 +#wppb-form-style-3-wrapper .wppb-form-field.wppb-international-telephone-input .iti button.iti__selected-country {
1427 + width: auto !important;
1428 + min-width: 0 !important;
1429 + height: 100% !important;
1430 + min-height: 0 !important;
1431 + padding: 0 !important;
1432 + margin: 0 !important;
1433 + border: 0 !important;
1434 + background: none !important;
1435 + box-shadow: none !important;
1436 + color: inherit !important;
1437 +}
1438 +
1439 +/* Style 1/2 + placeholder labels:
1440 + move floating label text to the right so it doesn't overlap the country flag. */
1441 +#wppb-form-style-1-wrapper .wppb-form-field.wppb-international-telephone-input.label-inside > label:not(.wppb-epaa-switch):not(.wppb-field-visibility-settings label),
1442 +#wppb-form-style-2-wrapper .wppb-form-field.wppb-international-telephone-input.label-inside > label:not(.wppb-epaa-switch):not(.wppb-field-visibility-settings label) {
1443 + padding-left: 56px;
1444 +}
1445 +
1446 +/* Style 1 (Sublime) + placeholder labels:
1447 + Style 1's label-inside rule sets "padding: 15px 15px 0 15px !important" on inputs, which
1448 + overrides the inline left padding intl-tel-input adds to clear the country flag. Without a
1449 + matching override the typed number sits underneath the flag/dropdown. Reserve the same room
1450 + on the input as the floating label above (the :not() qualifiers keep specificity high enough
1451 + to win over the !important text-field rule). */
1452 +#wppb-form-style-1-wrapper .wppb-form-field.wppb-international-telephone-input.label-inside input.wppb-intl-tel-input:not([type='radio']):not([type='checkbox']):not([type='submit']) {
1453 + padding-left: 56px !important;
1454 +}
1455 +
1456 +.wppb-form-field .iti + .wppb-iti-error {
1457 + float: left !important;
1458 + width: 69.9% !important;
1459 + margin-left: 30%;
1460 + margin-top: 6px;
1461 + color: #c0392b !important;
1462 + font-size: 15px !important;
1463 + display: none;
1464 +}
1465 +
1466 +/* Default PB + placeholder labels (label-inside):
1467 + align JS intl error with the full-width input, not with the 30/70 layout. */
1468 +.wppb-form-field.wppb-international-telephone-input.label-inside .iti + .wppb-iti-error {
1469 + width: 100% !important;
1470 + margin-left: 0 !important;
1471 +}
1472 +
1473 +@media screen and (max-width: 500px) {
1474 + .wppb-form-field.wppb-international-telephone-input .iti {
1475 + float: none;
1476 + width: 100%;
1477 + }
1478 +
1479 + .wppb-form-field .iti + .wppb-iti-error {
1480 + float: none;
1481 + width: 100%;
1482 + margin-left: 0;
1483 + }
1048 1484 }