PluginProbe
User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor / 3.9.9
User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor v3.9.9
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
profile-builder / assets / css / style-front-end.css

style-front-end.css in User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor 3.9.9, at assets/css/style-front-end.css

1,048 lines 23.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Register & Edit Profile Forms*/
2
3 /*--------------------------------------------------------------
4 >>> TABLE OF CONTENTS:
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
12 --------------------------------------------------------------*/
13
14 /*--------------------------------------------------------------
15 1.0 Reset
16 --------------------------------------------------------------*/
17 .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+ */
22 }
23
24 /*--------------------------------------------------------------
25 2.0 Forms
26 --------------------------------------------------------------*/
27 .wppb-user-forms input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="file"]):not([value="agree"]),
28 .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 */
33 }
34 .wppb-user-forms input[type="checkbox"],
35 .wppb-user-forms input[type="radio"] {
36 padding: 0; /* Addresses excess padding in IE8/9 */
37 }
38 .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;
43 }
44 .wppb-user-forms input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
45 -webkit-appearance: none;
46 }
47 .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;
51 }
52 .wppb-user-forms input[type="text"],
53 .wppb-user-forms input[type="number"],
54 .wppb-user-forms input[type="email"],
55 .wppb-user-forms input[type="url"],
56 .wppb-user-forms input[type="password"],
57 .wppb-user-forms input[type="search"],
58 .wppb-user-forms textarea{
59 color: #666;
60 border: 1px solid #ccc;
61 border-radius: 3px;
62 }
63 .wppb-user-forms input[type="text"]:focus,
64 .wppb-user-forms input[type="number"]:focus,
65 .wppb-user-forms input[type="email"]:focus,
66 .wppb-user-forms input[type="url"]:focus,
67 .wppb-user-forms input[type="password"]:focus,
68 .wppb-user-forms input[type="search"]:focus,
69 .wppb-user-forms textarea:focus {
70 color: #111;
71 }
72 .wppb-user-forms input[type="text"],
73 .wppb-user-forms input[type="number"],
74 .wppb-user-forms input[type="email"],
75 .wppb-user-forms input[type="url"],
76 .wppb-user-forms input[type="password"],
77 .wppb-user-forms input[type="search"] {
78 padding: 3px;
79 }
80 .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%;
85 }
86 .wppb-user-forms .wppb-wysiwyg .wp-editor-wrap { /* properly align wysiwyg editor among form fields */
87 float:left;
88 width:69.9%;
89 }
90 .wppb-user-forms .wppb-wysiwyg button:hover{ /* wysiwyg - overwrite the theme inherited background color on hover*/
91 background: none;
92 }
93 .wppb-user-forms .wppb-wysiwyg div.mce-tinymce.mce-panel{ /*Display the borders for the TinyMCE editor - Visual tab*/
94 border: 1px solid #ccc !important;
95 color: #666 !important;
96 }
97 .wppb-user-forms .wppb-wysiwyg div.mce-panel.mce-first{
98 border-width: 0 0 1px 0 !important;
99 }
100 .wppb-user-forms .wppb-wysiwyg div.mce-panel.mce-last{
101 border-width: 1px 0 !important;
102 }
103 .wppb-user-forms .wppb-wysiwyg .quicktags-toolbar { /*Display the borders for the TinyMCE editor - Text tab*/
104 border: 1px solid #dedede;
105 border-bottom: 0;
106 }
107 #wp-link label input[type="text"] { /*Fix the looks of the Add Link window for TinyMCE editor*/
108 padding: 0px;
109 }
110
111 #wppb-search-fields{
112 min-width: 250px;
113 float:left;
114 margin-right:20px;
115 }
116
117 .wppb-user-forms .wppb-search-button{
118 margin-right:10px;
119 padding:7px 20px;
120 line-height: 24px;
121 }
122
123 .wppb-search-users-wrap{
124 margin-bottom: 20px;
125 }
126
127 .wppb-user-forms .extra_field_heading {
128 margin-bottom: 0;
129 }
130
131 .wppb-gdpr-delete-button .wppb-delete-account {
132 width: 110px;
133 }
134
135 .wppb-user-forms .form-submit #register:disabled,
136 .wppb-user-forms .form-submit #edit_profile:disabled {
137 background: #414141;
138 opacity: 0.3;
139 cursor: not-allowed;
140 }
141
142 /*--------------------------------------------------------------
143 3.0 Alignments
144 --------------------------------------------------------------*/
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;
152 }
153
154 .wppb-user-forms ul li{
155 list-style:none;
156 }
157
158 #wppb-login-wrap p,
159 #select_user_to_edit_form p {
160 overflow:hidden;
161 margin:0;
162 padding-bottom:14px;
163 }
164
165 .wppb-user-forms ul li{
166 margin:0;
167 padding-bottom:14px;
168 }
169
170 .wppb-user-forms ul li:after{
171 content: "";
172 clear: both;
173 display: block;
174 }
175
176 .wppb-user-forms .wppb-input-hidden {
177 padding-bottom: 0;
178 }
179
180 .wppb-user-forms.wppb-user-role-administrator .wppb-input-hidden {
181 padding-bottom: 14px;
182 }
183
184 .wppb-user-forms .wppb-form-field > ul {
185 margin-left: 0;
186 }
187
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 {
193 position: relative;
194 }
195
196 .wppb-form-field label,
197 #wppb-login-wrap .login-username label,
198 #wppb-login-wrap .login-password label,
199 #wppb-login-wrap .login-auth label{
200 width:30%;
201 float:left;
202 min-height:1px;
203 }
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"],
205 .wppb-form-field select,
206 .wppb-form-field textarea,
207 .wppb-checkboxes,
208 .wppb-radios,
209 #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;
214 }
215
216 #wppb-login-wrap .login-remember {
217 display: flex;
218 align-items: center;
219 }
220
221 #wppb-login-wrap .login-remember input {
222 cursor: pointer;
223 }
224
225 #wppb-login-wrap .login-remember label {
226 padding-left: 8px;
227 margin-bottom: 0px;
228 cursor: pointer;
229 }
230
231 .wppb-form-field.wppb-timepicker select {
232 width: auto;
233 margin-right: 5px;
234 }
235
236 .wppb-user-forms .wppb-wysiwyg .wp-editor-wrap .wp-editor-tabs *{
237 box-sizing: content-box !important;
238 }
239
240 .wppb-user-forms .wp-editor-wrap input {
241 float: none;
242 width: auto;
243 }
244
245 input#send_credentials_via_email{
246 float:none;
247 margin-right:10px
248 }
249
250 .wppb-send-credentials-checkbox label{
251 width:auto;
252 }
253
254 .wppb-form-field > span{
255 display:block;
256 clear:both;
257 margin-left:30%;
258 font-size:80%;
259 font-style:italic;
260 }
261
262 .wppb-form-field > span.custom_field_html {
263 font-style: normal;
264 font-size: 100%;
265 }
266
267 .wppb-form-field > span.select2-container {
268 font-style: normal;
269 font-size: 100%;
270 clear:none;
271 }
272
273 .wppb-repeater .wppb-select-cpt span.select2-container{
274 width:auto !important;
275 }
276
277 .wppb-form-field.wppb-timepicker > span.wppb-timepicker-separator {
278 display: inline-block;
279 float: left;
280 clear: none;
281 margin-left: 0;
282 margin-right: 5px;
283 font-size: 100%;
284 font-style: normal;
285 }
286
287 .wppb_upload_button{
288 display:inline-block;
289 }
290
291 .wppb-user-forms .wppb-checkboxes li,
292 .wppb-user-forms .wppb-radios li{
293 display:inline-block;
294 padding:0 20px 0 0;
295 }
296
297 .wppb-user-forms .wppb-checkboxes li.wppb-hidden{
298 padding: 0;
299 }
300
301 .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;
308 }
309
310 .wppb-checkbox-terms-and-conditions input,
311 .wppb-checkboxes li input,
312 .wppb-radios li input{
313 min-width:0;
314 float:none;
315 }
316
317 .wppb-edit-user .wppb-checkbox-terms-and-conditions {
318 display:none;
319 }
320
321 .wppb-form-field.wppb-heading span,
322 .wppb-default-about-yourself-heading span,
323 .wppb-default-contact-info-heading span,
324 .wppb-default-name-heading span,
325 .wppb-checkbox-terms-and-conditions span{
326 margin-left:0;
327 }
328
329 .wppb-checkbox-terms-and-conditions label {
330 width: 100%;
331 }
332
333 .wppb-form-field.wppb-checkbox-terms-and-conditions input[type="checkbox"].custom_field_toa {
334 float:none;
335 margin-right:10px
336 }
337
338
339 .wppb-recaptcha-element{
340 display: inline-block;
341 }
342 .wppb-recaptcha-element.wppb-invisible-recaptcha {
343 display: block !important;
344 }
345 .wppb-recaptcha-element iframe{
346 margin-bottom: 0;
347 }
348
349 .wppb-form-field input.wppb-map-search-box {
350 position: absolute;
351 top: 10px !important;
352 height: 34px;
353 width: 50%;
354 min-width: 250px;
355 background: #fff;
356 border: 0;
357 border-radius: 1px;
358 padding: 0 10px;
359 box-shadow: 0 1px 1px 0 #c1c1c1;
360 font-family: 'Roboto', sans-serif;
361 }
362
363 .wppb-create-new-site{
364 width: 100%;
365 }
366 input#wppb_create_new_site_checkbox{
367 width: auto;
368 margin-right: 10px;
369 float: none;
370 }
371 label[for=wppb_create_new_site_checkbox]{
372 width:100%;
373 }
374 label[for=blog-privacy]{
375 width:100%;
376 }
377
378
379 /* GDPR checkbox */
380 .wppb-gdpr-checkbox.wppb-form-field label{
381 width:100%;
382 float:none;
383 }
384
385 .wppb-gdpr-checkbox.wppb-form-field #user_consent_gdpr{
386 float:none;
387 margin:0 10px 0 0;
388 }
389
390
391 /*--------------------------------------------------------------
392 4.0 Errors & Notices
393 --------------------------------------------------------------*/
394
395 .wppb-error,
396 .wppb-warning,
397 .wppb-notice,
398 .wppb-success {
399 padding: 6px 9px;
400 margin: 0 auto 25px;
401 display: block;
402 width: 100%;
403 }
404
405 .wppb-error,
406 .wppb-warning {
407 box-sizing: border-box;
408 background: #ffebe8;
409 border: 1px solid #C00;
410 }
411
412 .wppb-error,
413 .wppb-warning,
414 .wppb-notice {
415 color:#222222 !important;
416 }
417
418 .wppb-error a,
419 .wppb-warning a{
420 color:#007acc !important;
421 }
422
423 .admin-bar #wppb_form_general_message{
424 padding-top:32px;
425 }
426
427 .wppb-error a:hover,
428 .wppb-warning a:hover{
429 color:#007acc !important;
430 text-decoration: underline;
431 }
432
433 .wppb-notice {
434 box-sizing: border-box;
435 background: #ccc;
436 border: 1px solid #666;
437 }
438
439 .wppb-required{
440 color: red;
441 }
442
443 .wppb-required,
444 .wppb-checkbox-terms-and-conditions span.wppb-required{
445 margin-left:5px;
446 }
447
448 .wppb-success {
449 box-sizing: border-box;
450 background: #e7f7d3;
451 border: 1px solid #6c3;
452 }
453
454 .wppb-register-user .wppb-field-error,
455 .wppb-edit-user .wppb-field-error,
456 #wppb-recover-password .wppb-field-error{
457 background-color: #FFDFDF;
458 border: 1px dotted #C89797;
459 margin-bottom: 6px !important;
460 padding: 6px !important;
461 }
462
463 .wppb-field-error > input,
464 .wppb-field-error > select,
465 .wppb-field-error > textarea,
466 .wppb-field-error > label{
467 margin-bottom: 10px;
468 }
469
470 .wppb-field-error img{
471 box-shadow: none;
472 -webkit-box-shadow:none;
473 border:none;
474 border-radius:0px;
475 vertical-align: middle;
476 margin-top: -3px;
477 padding-left:5px;
478 width: auto;
479 height: auto;
480 }
481
482 .wppb-form-field > span.wppb-form-error{
483 margin-top:10px;
484 padding-top: 5px;
485 border-top:1px dotted #c89797;
486 font-size:100%;
487 margin-left: 0;
488 }
489
490 /* Remove global Blog Details Field error */
491 #wppb-register-user .wppb-default-blog-details.wppb-field-error{
492 background-color: transparent !important;
493 border: 0px !important;
494 }
495 .wppb-default-blog-details > span.wppb-form-error{
496 display:none;
497 }
498 .wppb-blog-details-heading span {
499 margin-left: 0;
500 }
501
502 .wppb-honeypot {
503 display: none;
504 }
505
506
507 /*--------------------------------------------------------------
508 5.0 User Listing
509 --------------------------------------------------------------*/
510 .wppb-table *{
511 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
512 }
513 .wppb-table{
514 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
515 border-spacing: 0.5rem;
516 border-collapse: collapse;
517 width: 100%;
518 }
519
520 .wppb-table th{
521 background: #f4f4f4;
522 padding: 7px;
523 border:1px solid #e1e1e1;
524 text-align: left;
525 }
526
527 .wppb-table thead tr:hover{
528 background: none;
529 }
530
531 .wppb-table .wppb-sorting .wppb-sorting-default {
532 display: inline-block;
533 width: 16px;
534 height: 16px;
535 background: url('../images/sorting-default.png') no-repeat center center;
536 vertical-align: middle;
537 }
538
539 .wppb-table .wppb-sorting .wppb-sorting-ascending {
540 background-image: url('../images/sorting-ascending.png');
541 }
542
543 .wppb-table .wppb-sorting .wppb-sorting-descending {
544 background-image: url('../images/sorting-descending.png');
545 }
546
547 .wppb-table tr:hover{
548 background: #f1fcff;
549 }
550 .wppb-table td{
551 padding: 7px;
552 border:1px solid #e1e1e1;
553 }
554
555 .wppb-table .wppb-posts,
556 .wppb-table .wppb-moreinfo{
557 text-align: center;
558 }
559
560 .wppb-avatar img {
561 max-width: none;
562 }
563
564 ul.wppb-profile{
565 list-style-type: none;
566 margin-left: 0;
567 margin-right: 0;
568 padding-left:0;
569 padding-right: 0;
570 }
571
572 ul.wppb-profile li{
573 margin-left: 0;
574 margin-right: 0;
575 overflow: hidden;
576 }
577
578 ul.wppb-profile li label{
579 display: block;
580 width:30%;
581 float:left;
582 min-height:1px;
583 font-weight: bold;
584 }
585
586 ul.wppb-profile li span{
587 display: block;
588 width:69.9%;
589 float:left;
590 }
591
592 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;
597 }
598
599 ul.wppb-faceted-list{
600 list-style: none;
601 margin:0 0 20px;
602 }
603
604 ul.wppb-faceted-list:after{
605 visibility: hidden;
606 display: block;
607 font-size: 0;
608 content: " ";
609 clear: both;
610 height: 0;
611 }
612
613 ul.wppb-faceted-list > li{
614 float:left;
615 margin-right: 15px;
616 max-width: 300px;
617 }
618
619 ul.wppb-faceted-list > li:first-child{
620 float:none;
621 clear:both;
622 }
623
624 .wppb-userlisting-container .wppb-faceted-list li h5{
625 margin-top: 20px;
626 margin-bottom: 5px;
627 }
628
629 ul.wppb-faceted-list label > *{
630 vertical-align: middle;
631 }
632
633 ul.wppb-faceted-list input[type="checkbox"]{
634 margin-right: 5px;
635 }
636
637 .wppb-userlisting-container.wppb-spinner{
638 position:relative;
639 opacity: 0.5
640 }
641
642 .wppb-userlisting-container.wppb-spinner:after{
643 content: '';
644 position: absolute;
645 top: 50%;
646 left: 50%;
647 margin-top: -16px;
648 margin-left: -16px;
649 display: block;
650 width: 32px;
651 height: 32px;
652 /*background: url('../images/ajax-loader.gif') no-repeat center;*/
653 z-index: 1000;
654 }
655
656 ul.wppb-faceted-list .hide-this{
657 display:none;
658 }
659
660 #wppb-remove-facets-container{
661 list-style: none;
662 margin: 0;
663 }
664
665 .wppb-remove-facet:before, .wppb-remove-all-facets:before {
666 content: "x";
667 display: inline-block;
668 border-right: 1px dotted #D3CCC9;
669 border-right: 1px dotted #6F6F6F;
670 padding-right: 5px;
671 margin-right: 5px;
672 }
673
674 .wppb-userlisting-container .wppb-ul-range-values{
675 padding: 5px 0;
676 }
677
678 .wppb-userlisting-container:after {
679 visibility: hidden;
680 display: block;
681 font-size: 0;
682 content: " ";
683 clear: both;
684 height: 0;
685 }
686
687 .wppb-float-left{
688 float:left;
689 }
690
691 .wppb-float-right{
692 float:right;
693 }
694
695 .wppb-facet-float-left{
696 float:left;
697 max-width:300px;
698 }
699
700 .wppb-facet-float-right{
701 float:right;
702 max-width:300px;
703 }
704
705 li.wppb-facet-search{
706 position: relative;
707 }
708
709 .wppb-facet-search-wrap label {
710 display: inline-block;
711 position: relative;
712 padding: 0 !important;
713 margin: 0 !important;
714 }
715
716 .wppb-facet-search{
717 width: 75% !important;
718 margin-right: 5px !important;
719 }
720
721 .wppb-facet-search .screen-reader-text{
722 display: none;
723 }
724
725 .wppb-facet-search,
726 .wppb-search-submit {
727 box-sizing: border-box;
728 display: inline-block !important;
729 vertical-align: middle;
730 }
731
732 .wppb-search-submit{
733 display: inline-block;
734 width: 20%;
735 height: 100%;
736 background: #4F5963;
737 position: absolute;
738 right: 0;
739
740 cursor: pointer;
741 border: 1px solid #444D57;
742 border-radius: 3px;
743 padding: 0 !important;
744 margin: 0 !important;
745 }
746
747 .wppb-search-submit:hover {
748 background: #fff;
749 color: #4F5963;
750 }
751
752 .wppb-search-submit::before{
753 content: "\26B2";
754 display: inline-block;
755 color: #fff;
756 font-size: 120%;
757
758 -webkit-transform: rotate(-45deg);
759 -moz-transform: rotate(-45deg);
760 -o-transform: rotate(-45deg);
761 transform: rotate(-45deg);
762 }
763
764 .wppb-search-submit:hover::before{
765 color: #4F5963;
766 }
767
768 @media screen and ( max-width: 720px ) {
769
770 .wppb-table {
771 border: 0;
772 }
773
774 .wppb-table thead {
775 display: none
776 }
777
778 .wppb-table tr {
779 display: block;
780 margin-bottom: 30px;
781 }
782
783 .wppb-table td {
784 display: block;
785 text-align: right;
786 border-bottom: 0;
787 }
788
789 .wppb-table td:last-of-type {
790 border-bottom: 1px solid #e1e1e1;
791 }
792
793 .wppb-table .wppb-posts,
794 .wppb-table .wppb-moreinfo{
795 text-align: right;
796 }
797
798 .wppb-table td:before {
799 content: attr(data-label);
800 float: left;
801 }
802
803 .wppb-table td:after {
804 content: '';
805 display: block;
806 clear: both;
807 }
808
809 }
810
811 /*--------------------------------------------------------------
812 6.0 Media Queries
813 --------------------------------------------------------------*/
814
815 @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,
820 #wppb-login-wrap .login-auth label,
821 ul.wppb-profile li label{
822 width:100%;
823 display:block;
824 float:none;
825 }
826
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"],
828 .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,
834 #wppb-login-wrap .login-auth input,
835 ul.wppb-profile li span{
836 width:100%;
837 float:left;
838 }
839
840 .wppb-form-field > span{
841 margin-left:0;
842 }
843
844 .wppb-checkboxes li label,
845 .wppb-radios li label{
846 display:inline;
847 }
848
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;
860 }
861
862 }
863
864 /*--------------------------------------------------------------
865 7.0 Password Strength
866 --------------------------------------------------------------*/
867 #pass-strength-result {
868 background-color: #eee;
869 border: 1px solid #ddd;
870 display: none;
871 float: left;
872 margin: 13px 5px 5px 30%;
873 padding: 3px 5px;
874 text-align: center;
875 width: 200px;
876 height:28px;
877 }
878 #pass-strength-result.short {
879 background-color: #ffa0a0;
880 border-color: #f04040;
881 }
882 #pass-strength-result.bad {
883 background-color: #ffb78c;
884 border-color: #ff853c;
885 }
886 #pass-strength-result.good {
887 background-color: #ffec8b;
888 border-color: #fc0;
889 }
890 #pass-strength-result.strong {
891 background-color: #c3ff88;
892 border-color: #8dff1c;
893 }
894
895 /*--------------------------------------------------------------
896 7.0 Show/Hide Password
897 --------------------------------------------------------------*/
898 .wppb-form-field.wppb-default-password button.wppb-toggle-pw,
899 .wppb-form-field.wppb-default-repeat-password button.wppb-toggle-pw,
900 #wppb-login-wrap .login-password button.wppb-toggle-pw,
901 #wppb-recover-password-container .wppb-form-field.passw1 .wppb-toggle-pw,
902 #wppb-recover-password-container .wppb-form-field.passw2 .wppb-toggle-pw {
903 position: absolute;
904 right: 4px;
905 /* fields bottom padding / 2 */
906 top: -7px;
907 background: transparent !important;
908 background-color: transparent !important;
909 border: 1px solid transparent;
910 box-shadow: none;
911 padding: 0;
912 margin: 0;
913 height: 100%;
914 cursor: pointer;
915
916 display: flex;
917 align-items: center;
918 justify-content: center;
919 }
920
921 .wppb-form-field.wppb-default-password button img,
922 .wppb-form-field.wppb-default-repeat-password button img,
923 #wppb-login-wrap .login-password button img,
924 #wppb-recover-password-container .wppb-form-field.passw1 button img,
925 #wppb-recover-password-container .wppb-form-field.passw2 button img {
926 width: 20px;
927 }
928
929 /**************************************************/
930 /* Profile Builder Subscription Plans Field
931 /**************************************************/
932 .wppb-form-field.wppb-subscription-plans label {
933 width: 100%;
934 float: none;
935 }
936
937 .wppb-form-field.wppb-subscription-plans input {
938 display: inline-block;
939 float: none;
940 margin-right: 10px !important;
941 }
942
943 .wppb-form-field.wppb-subscription-plans span.description {
944 display: block;
945 font-size: 100%;
946 font-style: italic;
947 margin-left: 0;
948 margin-bottom: 1.5em;
949 }
950
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;
956 }
957
958 /**************************************************/
959 /* Private Website CSS
960 /**************************************************/
961 .wppb-private-website.wppb-private-website-hide-menus .main-navigation{
962 display:none;
963 }
964
965
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;}
970
971 /**************************************************/
972 /* Elementor Visual Editor CSS
973 /**************************************************/
974 .elementor-edit-mode .wppb-map-container {
975 width: 69.9%;
976 float: left;
977 border: 1px solid #ccc;
978 border-radius: 3px;
979 }
980
981 /**************************************************/
982 /* Two-Factor Authentication CSS
983 /**************************************************/
984 #wppb_auth_secret_buttons,
985 #wppb_auth_verify_buttons,
986 #wppb_auth_QR_INFO {
987 margin-left: 30%;
988 }
989
990 #wppb_auth_secret_buttons,
991 #wppb_auth_verify_buttons {
992 display: flex;
993 justify-content: space-between;
994 align-items: stretch;
995 }
996
997 .wppb_auth_button {
998 background: none repeat scroll 0 0 #f7f7f7;
999 border: 1px solid #ccc !important;
1000 color: #555;
1001 cursor: pointer;
1002 display: inline-block;
1003 font-size: 12px;
1004 line-height: 26px;
1005 padding: 15px;
1006 text-decoration: none;
1007 white-space: nowrap;
1008 text-align: center;
1009 width: 30%;
1010 }
1011
1012 .wppb_auth_button:hover {
1013 background: none repeat scroll 0 0 #fafafa;
1014 border: 1px solid #999 !important;
1015 color: #222;
1016 text-decoration: none;
1017 }
1018
1019 #wppb_auth_newsecret.wppb_auth_new_button,
1020 #wppb_auth_verify_button.wppb_auth_verify_button {
1021 flex-grow: 1;
1022 }
1023
1024 #wppb_show_qr.wppb_auth_qr_button,
1025 #wppb_auth_verify_indicator.wppb_auth_verify_indicator {
1026 flex-grow: 1;
1027 }
1028
1029 #wppb_auth_verify_indicator {
1030 pointer-events: none !important;
1031 }
1032 #wppb_auth_verify_indicator.valid {
1033 background-color: #c3ff88;
1034 border-color: #8dff1c;
1035 }
1036 #wppb_auth_verify_indicator.invalid {
1037 background-color: #ffa0a0;
1038 border-color: #f04040;
1039 }
1040
1041 #wppb_auth_QR_INFO .wppb-description-delimiter {
1042 font-size:80%;
1043 font-style:italic;
1044 }
1045
1046 #wppb_auth_QRCODE {
1047 text-align: center;
1048 }