PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.6.24
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.6.24
1.6.7 1.6.8 1.6.9 1.6.12 1.6.13 1.6.14 1.6.15 1.6.16 1.6.17 1.6.18 1.6.19 1.6.2 1.6.20 1.6.21 1.6.22 1.6.23 1.6.24 1.6.25 1.6.26 1.6.27 1.6.28 1.6.3 1.6.4 1.6.5 1.6.6 All 74 releases
weforms / assets / wpuf / css / wpuf-form-builder.css

wpuf-form-builder.css in weForms – Easy Drag & Drop Contact Form Builder For WordPress 1.6.24, at assets/wpuf/css/wpuf-form-builder.css

1,391 lines 35.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 [v-cloak] {
2 display: none;
3 }
4 .wpuf-pro-text-alert {
5 font-style: italic;
6 color: #cccccc;
7 }
8 .wpuf-pro-text-alert a {
9 text-decoration: none;
10 color: #aaa;
11 }
12 #wpuf-pro-content {
13 opacity: 0.7;
14 }
15 .clearfix:before,
16 .clearfix:after {
17 content: " ";
18 display: table;
19 }
20 .clearfix:after {
21 clear: both;
22 }
23 .pull-left {
24 float: left !important;
25 }
26 .pull-right {
27 float: right !important;
28 }
29 .text-center {
30 text-align: center;
31 }
32 .text-right {
33 text-align: right;
34 }
35 .margin-0 {
36 margin: 0;
37 }
38 .margin-bottom-10 {
39 margin-bottom: 10px;
40 }
41 .list-inline {
42 padding-left: 0;
43 list-style: none;
44 margin-left: -5px;
45 }
46 .list-inline > li {
47 display: inline-block;
48 padding-left: 5px;
49 padding-right: 5px;
50 }
51 .disabled {
52 pointer-events: none;
53 cursor: not-allowed;
54 opacity: 0.7;
55 }
56 .label-hr {
57 border-bottom: 1px solid #ccc;
58 display: block;
59 padding-bottom: 8px;
60 }
61 .slide-fade-enter-active {
62 -webkit-transition: all 0.6s;
63 -o-transition: all 0.6s;
64 transition: all 0.6s;
65 overflow: hidden;
66 }
67 .slide-fade-leave-active {
68 -webkit-transition: all 0.4s;
69 -o-transition: all 0.4s;
70 transition: all 0.4s;
71 overflow: hidden;
72 }
73 .slide-fade-enter,
74 .slide-fade-leave-active {
75 opacity: .3 !important;
76 max-height: 0 !important;
77 margin: 0 !important;
78 }
79 .sweet-alert {
80 border-radius: 0;
81 }
82 .sweet-alert h2 {
83 font-size: 26px;
84 line-height: 1.6;
85 }
86 .sweet-alert p {
87 font-size: 15px;
88 font-weight: 400;
89 color: #656565;
90 line-height: 1.7;
91 }
92 .sweet-alert p a {
93 text-decoration: none;
94 }
95 .sweet-alert button {
96 border-radius: 3px;
97 padding: 10px 20px;
98 min-width: 100px;
99 }
100 .loader,
101 .loader:after {
102 border-radius: 50%;
103 width: 25px;
104 height: 25px;
105 }
106 .loader {
107 display: inline-block;
108 position: relative;
109 text-indent: -9999em;
110 border-top: 3px solid rgba(0, 115, 170, 0.2);
111 border-right: 3px solid rgba(0, 115, 170, 0.2);
112 border-bottom: 3px solid rgba(0, 115, 170, 0.2);
113 border-left: 3px solid #0073aa;
114 -webkit-transform: translateZ(0);
115 -ms-transform: translateZ(0);
116 transform: translateZ(0);
117 -webkit-animation: wpuf_form_builder_loader 1.1s infinite linear;
118 animation: wpuf_form_builder_loader 1.1s infinite linear;
119 }
120 .button.button-ajax-working .loader {
121 display: inline-block;
122 width: 17px;
123 height: 17px;
124 top: 4px;
125 margin-right: 3px;
126 border-top: 1px solid #66c6e4;
127 border-right: 1px solid #66c6e4;
128 border-bottom: 1px solid #66c6e4;
129 border-left: 1px solid rgba(102, 198, 228, 0);
130 }
131 @-webkit-keyframes wpuf_form_builder_loader {
132 0% {
133 -webkit-transform: rotate(0deg);
134 transform: rotate(0deg);
135 }
136 100% {
137 -webkit-transform: rotate(360deg);
138 transform: rotate(360deg);
139 }
140 }
141 @keyframes wpuf_form_builder_loader {
142 0% {
143 -webkit-transform: rotate(0deg);
144 transform: rotate(0deg);
145 }
146 100% {
147 -webkit-transform: rotate(360deg);
148 transform: rotate(360deg);
149 }
150 }
151 #toast-container.toast-top-right {
152 top: 80px;
153 right: 18px;
154 }
155 #toast-container > div {
156 opacity: 1;
157 }
158 #toast-container > :hover {
159 opacity: .9;
160 }
161 .wp-core-ui .button-group.wpuf-flex-button-group {
162 position: relative;
163 z-index: 1;
164 display: flex;
165 flex-flow: row nowrap;
166 justify-content: flex-start;
167 align-content: center;
168 align-items: center;
169 }
170 .wp-core-ui .button-group.wpuf-flex-button-group .button {
171 flex-grow: 1;
172 flex-shrink: 1;
173 flex-basis: 0;
174 align-self: auto;
175 text-align: center;
176 }
177 .selectize-input {
178 padding: 6px 5px;
179 border: 1px solid #ddd;
180 }
181 .selectize-dropdown .active {
182 background-color: #0073aa;
183 color: #fff;
184 }
185 .selectize-element-group {
186 display: none;
187 }
188 .selectize-element-group + .selectize-control {
189 display: none;
190 }
191 .selectize-element-group.active + .selectize-control {
192 display: block;
193 margin-top: 10px;
194 }
195 .selectize-control.multi .selectize-input [data-value] {
196 text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
197 -webkit-border-radius: 3px;
198 -moz-border-radius: 3px;
199 border-radius: 3px;
200 background-color: rgba(0, 115, 170, 0.64);
201 background-image: -moz-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
202 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 115, 170, 0.4)), to(#0073aa));
203 background-image: -webkit-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
204 background-image: -o-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
205 background-image: linear-gradient(to bottom, rgba(0, 115, 170, 0.4), #0073aa);
206 background-repeat: repeat-x;
207 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#660073aa', endColorstr='#ff0073aa', GradientType=0);
208 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
209 box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
210 }
211 .selectize-control.multi .selectize-input [data-value].active {
212 background-color: rgba(0, 115, 170, 0.64);
213 background-image: -moz-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
214 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 115, 170, 0.4)), to(#0073aa));
215 background-image: -webkit-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
216 background-image: -o-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
217 background-image: linear-gradient(to bottom, rgba(0, 115, 170, 0.4), #0073aa);
218 background-repeat: repeat-x;
219 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#660073aa', endColorstr='#ff0073aa', GradientType=0);
220 }
221 .fa.fa-humanpresence {
222 width: 1em;
223 height: 1em;
224 background: no-repeat url('images/hp-shield.svg') left top;
225 background-size: cover;
226 }
227 #wpuf-form-builder {
228 width: calc(100% - 200px);
229 padding-top: 10px;
230 position: fixed;
231 top: 25px;
232 background: #f1f1f1;
233 }
234 #wpuf-form-builder * {
235 box-sizing: border-box;
236 }
237 #wpuf-form-builder > fieldset > .nav-tab-wrapper .nav-tab:focus {
238 outline: 0;
239 -webkit-box-shadow: none;
240 box-shadow: none;
241 }
242 #wpuf-form-builder > fieldset > .nav-tab-wrapper .button {
243 font-weight: 400;
244 }
245 #wpuf-form-builder > fieldset > .tab-contents {
246 border-bottom: 1px solid #cccccc;
247 }
248 #wpuf-form-builder > fieldset > .tab-contents > .group {
249 display: none;
250 }
251 #wpuf-form-builder > fieldset > .tab-contents > .group.active {
252 display: block;
253 }
254 #wpuf-form-builder > fieldset > .tab-contents > .group:not(#wpuf-form-builder-container):not(#wpuf-form-builder-settings) {
255 height: calc(100vh - 125px);
256 overflow-y: auto;
257 padding-top: 15px;
258 }
259 #wpuf-form-builder .wpuf-settings-nav-tab-wrapper {
260 width: 200px;
261 }
262 #wpuf-form-builder .wp-picker-holder * {
263 box-sizing: content-box;
264 }
265 #wpuf-form-builder .tab-content {
266 height: calc(100vh - 140px);
267 overflow-y: auto;
268 margin-top: 15px;
269 }
270 #wpuf-form-builder-settings {
271 position: relative;
272 margin-top: 15px;
273 min-height: 380px;
274 }
275 #wpuf-form-builder-settings .nav-tab-wrapper {
276 position: absolute;
277 top: 0;
278 left: 0;
279 width: 170px;
280 border-bottom: 0;
281 }
282 #wpuf-form-builder-settings .nav-tab-wrapper a {
283 width: calc(100% - -1px);
284 margin-left: 0;
285 margin-bottom: .5em;
286 border-right: 1px solid #cccccc;
287 border-bottom: 1px solid #cccccc;
288 font-weight: 400;
289 font-size: 13px;
290 }
291 #wpuf-form-builder-settings .nav-tab-wrapper a.nav-tab-active {
292 border-right-color: #f1f1f1;
293 }
294 #wpuf-form-builder-settings .nav-tab-wrapper a:focus {
295 outline: 0;
296 -webkit-box-shadow: none;
297 box-shadow: none;
298 }
299 #wpuf-form-builder-settings .tab-contents {
300 margin-left: 170px;
301 border-left: 1px solid #cccccc;
302 padding-left: 20px;
303 }
304 #wpuf-form-builder-settings .tab-contents > .group {
305 display: none;
306 height: calc(100vh - 140px);
307 overflow-y: auto;
308 }
309 #wpuf-form-builder-settings .tab-contents > .group.active {
310 display: block;
311 }
312 #wpuf-form-builder-settings .tab-contents .form-table {
313 margin-top: 0;
314 }
315 #wpuf-form-builder-payment {
316 position: relative;
317 margin-top: 15px;
318 min-height: 380px;
319 }
320 #wpuf-form-builder-payment .nav-tab-wrapper {
321 position: absolute;
322 top: 0;
323 left: 0;
324 width: 170px;
325 border-bottom: 0;
326 }
327 #wpuf-form-builder-payment .nav-tab-wrapper a {
328 width: calc(100% - -1px);
329 margin-left: 0;
330 margin-bottom: .5em;
331 border-right: 1px solid #cccccc;
332 border-bottom: 1px solid #cccccc;
333 font-weight: 400;
334 font-size: 13px;
335 }
336 #wpuf-form-builder-payment .nav-tab-wrapper a.nav-tab-active {
337 border-right-color: #f1f1f1;
338 }
339 #wpuf-form-builder-payment .nav-tab-wrapper a:focus {
340 outline: 0;
341 -webkit-box-shadow: none;
342 box-shadow: none;
343 }
344 #wpuf-form-builder-payment .tab-contents {
345 margin-left: 170px;
346 border-left: 1px solid #cccccc;
347 padding-left: 20px;
348 }
349 #wpuf-form-builder-payment .tab-contents > .group {
350 display: none;
351 height: calc(100vh - 140px);
352 overflow-y: auto;
353 }
354 #wpuf-form-builder-payment .tab-contents > .group.active {
355 display: block;
356 }
357 #wpuf-form-builder-payment .tab-contents .form-table {
358 margin-top: 0;
359 }
360 #wpuf-form-builder-container {
361 position: relative;
362 }
363 #wpuf-form-builder-container header {
364 height: 45px;
365 border-right: 1px solid #cccccc;
366 }
367 #wpuf-form-builder-container header .form-title {
368 cursor: pointer;
369 font-size: 1.3em;
370 font-weight: 600;
371 float: left;
372 margin-right: 10px;
373 margin-top: 10px;
374 line-height: 1.5;
375 max-width: 300px;
376 white-space: nowrap;
377 overflow: hidden;
378 text-overflow: ellipsis;
379 }
380 #wpuf-form-builder-container header .form-title:hover {
381 background-color: rgba(85, 85, 85, 0.2);
382 }
383 #wpuf-form-builder-container header .form-switcher-arrow {
384 cursor: pointer;
385 font-size: 24px;
386 margin-top: 10px;
387 line-height: 1;
388 width: 20px;
389 text-align: center;
390 }
391 #wpuf-form-builder-container header .form-switcher-arrow:hover {
392 background-color: rgba(85, 85, 85, 0.2);
393 }
394 #wpuf-form-builder-container header .form-id {
395 color: #fff;
396 background-color: #008ec2;
397 line-height: 170%;
398 padding: 0 8px;
399 border-radius: 2px;
400 font-size: 13px;
401 display: inline-block;
402 margin: 10px 0 0 15px;
403 cursor: pointer;
404 }
405
406 #wpuf-form-builder-container section {
407 overflow: auto;
408 }
409
410 #builder-form-fields section {
411 overflow: auto;
412 display: inline-block;
413 width: 100%;
414 }
415
416 #wpuf-form-builder-container section {
417 height: calc(100vh - 170px);
418 }
419 #wpuf-form-builder-container #builder-form-fields {
420 position: absolute;
421 top: 0;
422 right: 0;
423 width: 360px;
424 }
425 #wpuf-form-builder-container #builder-form-fields header ul {
426 margin: 0;
427 }
428 #wpuf-form-builder-container #builder-form-fields header ul li {
429 width: 50%;
430 text-align: center;
431 float: left;
432 line-height: 1;
433 margin: 0;
434 }
435 #wpuf-form-builder-container #builder-form-fields header ul li a {
436 text-decoration: none;
437 line-height: 44px;
438 display: block;
439 background-color: #e5e5e5;
440 color: #777;
441 border-bottom: 1px solid #cccccc;
442 -webkit-transition: background-color 0.4s;
443 -o-transition: background-color 0.4s;
444 transition: background-color 0.4s;
445 }
446 #wpuf-form-builder-container #builder-form-fields header ul li a:hover {
447 background-color: #f2f2f2;
448 }
449 #wpuf-form-builder-container #builder-form-fields header ul li a:focus {
450 outline: 0;
451 -webkit-box-shadow: none;
452 box-shadow: none;
453 }
454 #wpuf-form-builder-container #builder-form-fields header ul li.active a {
455 background-color: #fff;
456 color: #444;
457 border-bottom: 1px solid #fff;
458 }
459 #wpuf-form-builder-container #builder-form-fields header ul li:first-child {
460 border-right: 1px solid #cccccc;
461 }
462 #wpuf-form-builder-container #builder-form-fields section {
463 background-color: #fff;
464 border-right: 1px solid #cccccc;
465 }
466 #wpuf-form-builder-container #builder-form-fields section .wpuf-form-builder-panel {
467 padding: 10px;
468 }
469 #wpuf-form-builder-container #builder-stage {
470 margin-right: 360px;
471 }
472 #wpuf-form-builder-container #builder-stage section {
473 background-color: #6b6b6b;
474 padding: 30px;
475 }
476 #wpuf-form-builder-container #builder-stage section #form-preview {
477 background-color: #fff;
478 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
479 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
480 padding: 25px;
481 max-width: 800px;
482 margin: 0 auto;
483 }
484 #form-preview-stage .field-items {
485 position: relative;
486 background-color: #fff;
487 }
488 #form-preview-stage .field-items .control-buttons {
489 position: absolute;
490 top: 0;
491 left: 0;
492 z-index: 10;
493 display: none;
494 width: 100%;
495 height: 100%;
496 margin: 0;
497 text-align: center;
498 background: rgba(255, 185, 0, 0.08);
499 border: 1px dashed #ffb900;
500 }
501 #form-preview-stage .field-items .control-buttons p {
502 position: absolute;
503 top: 50%;
504 left: 50%;
505 margin: -14px 0 0 -61px;
506 line-height: 1;
507 color: #eee;
508 background-color: #23282d;
509 }
510 #form-preview-stage .field-items .control-buttons i {
511 cursor: pointer;
512 padding: 8px;
513 }
514 #form-preview-stage .field-items .control-buttons i.move {
515 cursor: move;
516 }
517 #form-preview-stage .field-items .control-buttons i:hover {
518 background-color: #0073aa;
519 }
520 #form-preview-stage .field-items:hover .control-buttons {
521 display: block;
522 }
523 #form-preview-stage .field-items.current-editing {
524 background-color: rgba(255, 185, 0, 0.15);
525 }
526 #form-preview-stage .field-items.current-editing.ui-sortable-helper {
527 background-color: #fff;
528 }
529 #form-preview-stage .field-items.ui-sortable-helper {
530 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
531 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
532 }
533 #form-preview-stage .form-preview-stage-dropzone {
534 background-color: rgba(255, 185, 0, 0.3) !important;
535 border: 1px solid #ffb900;
536 height: 50px;
537 }
538 #form-preview-stage .wpuf-submit + .button + .form-preview-stage-dropzone,
539 #form-preview-stage .field-items.empty-list-item + .form-preview-stage-dropzone {
540 display: none;
541 }
542 #form-preview-stage .field-items.empty-list-item {
543 padding: 24px;
544 margin: 0;
545 border: 1px dashed rgba(35, 40, 45, 0.5);
546 }
547 #form-preview-stage .form-preview-stage-dropzone + .field-items.empty-list-item {
548 display: none;
549 }
550 #form-preview-stage .hidden-field-list {
551 border-top: 1px dashed #cccccc;
552 }
553 #form-preview-stage .hidden-field-list h4 {
554 font-weight: 400;
555 font-size: 16px;
556 margin: 12px 0;
557 }
558 #form-preview-stage .hidden-field-list ul li {
559 background-color: #f1f1f1;
560 }
561 .panel-form-field-group {
562 margin-bottom: 15px;
563 }
564 .panel-form-field-group h3 {
565 margin: 0;
566 font-size: 15px;
567 border-bottom: 1px solid #eee;
568 padding-bottom: 10px;
569 cursor: pointer;
570 }
571 .panel-form-field-group h3 i {
572 float: right;
573 }
574 .panel-form-field-group .panel-form-field-buttons {
575 opacity: 1;
576 max-height: 100vh;
577 overflow: hidden;
578 margin: 15px 0 0;
579 }
580 .panel-form-field-group .button {
581 display: block;
582 width: 48%;
583 margin: 0 0 10px 0;
584 float: left;
585 text-align: left;
586 }
587 .panel-form-field-group .button:nth-child(odd) {
588 margin-right: 2%;
589 }
590 .panel-form-field-group .button.button-faded {
591 opacity: .5;
592 }
593 .button.ui-draggable-dragging {
594 margin: 0;
595 text-align: left;
596 }
597 .wpuf-form-builder-field-options .option-fields-section {
598 margin-bottom: 15px;
599 }
600 .wpuf-form-builder-field-options .section-title {
601 margin: 0;
602 font-size: 15px;
603 border-bottom: 1px solid #eee;
604 padding-bottom: 10px;
605 cursor: pointer;
606 }
607 .wpuf-form-builder-field-options .section-title i {
608 float: right;
609 }
610 .wpuf-form-builder-field-options .option-field-section-fields {
611 margin-top: 15px;
612 height: auto;
613 opacity: 1;
614 }
615 .wpuf-form-builder-field-options .panel-field-opt {
616 margin-bottom: 15px;
617 }
618 .wpuf-form-builder-field-options .panel-field-opt .field-helper-text {
619 color: rgba(35, 40, 45, 0.5);
620 margin-left: 6px;
621 }
622 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="text"],
623 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="range"],
624 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="number"] {
625 display: block;
626 width: 100%;
627 margin: 5px 0 0;
628 line-height: 1.75;
629 }
630 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > label {
631 display: block;
632 margin-bottom: 5px;
633 }
634 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > ul {
635 margin-top: 0;
636 margin-bottom: 0;
637 }
638 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-select select {
639 width: 100%;
640 height: 32px;
641 margin: 4px 0 0;
642 }
643 .wpuf-form-builder-field-options .panel-field-opt .chosen-select + .chosen-container {
644 margin-top: 10px;
645 }
646 .wpuf-form-builder-field-options .panel-field-opt .label-title-block {
647 display: block;
648 margin-bottom: 3px;
649 }
650 .option-field-option-chooser {
651 margin: 12px 0 0;
652 }
653 .option-field-option-chooser.margin-0 {
654 margin: 0;
655 }
656 .option-field-option-chooser .selector,
657 .option-field-option-chooser .sort-handler,
658 .option-field-option-chooser .label,
659 .option-field-option-chooser .value,
660 .option-field-option-chooser .action-buttons {
661 float: left;
662 }
663 .option-field-option-chooser .selector {
664 width: 25px;
665 }
666 .option-field-option-chooser .selector input {
667 margin-top: 14px;
668 }
669 .option-field-option-chooser .sort-handler {
670 width: 22px;
671 cursor: ns-resize;
672 }
673 .option-field-option-chooser .sort-handler i {
674 margin-top: 14px;
675 font-size: 15px;
676 }
677 .option-field-option-chooser .label {
678 width: 208px;
679 margin-right: 8px;
680 }
681 .option-field-option-chooser.show-value .label,
682 .option-field-option-chooser.show-value .value {
683 width: 100px;
684 margin-right: 8px;
685 }
686 .option-field-option-chooser .header .label,
687 .option-field-option-chooser .header .value {
688 color: #909090;
689 }
690 .option-field-option-chooser .action-buttons {
691 width: 36px;
692 }
693 .option-field-option-chooser .action-buttons i {
694 cursor: pointer;
695 font-size: 16px;
696 margin-top: 13px;
697 }
698 .option-field-option-chooser .plus-buttons {
699 padding: 5px;
700 font-size: 18px;
701 text-align: center;
702 cursor: pointer;
703 border: 1px solid #ccc;
704 width: 61%;
705 margin-left: 14%;
706 }
707 .panel-field-opt-repeater-columns .repeater-columns li > div {
708 float: left;
709 }
710 .panel-field-opt-repeater-columns .repeater-columns .sorter {
711 width: 30px;
712 }
713 .panel-field-opt-repeater-columns .repeater-columns .sorter i {
714 cursor: ns-resize;
715 font-size: 16px;
716 margin-top: 5px;
717 }
718 .panel-field-opt-repeater-columns .repeater-columns .input-container {
719 width: 195px;
720 margin-right: 10px;
721 }
722 .panel-field-opt-repeater-columns .repeater-columns .input-container input {
723 width: 100%;
724 }
725 .panel-field-opt-repeater-columns .repeater-columns .action-buttons {
726 width: 50px;
727 }
728 .panel-field-opt-repeater-columns .repeater-columns .action-buttons i {
729 cursor: pointer;
730 font-size: 16px;
731 padding: 0 3px;
732 margin-top: 4px;
733 }
734 .panel-field-opt-textarea textarea {
735 display: block;
736 width: 100%;
737 margin: 5px 0 0;
738 line-height: 1.75;
739 }
740 .panel-field-html-help-text pre {
741 max-width: 100%;
742 overflow-x: auto;
743 }
744 .panel-field-opt-select .opt-select-element {
745 display: block;
746 max-width: 100%;
747 }
748 ul.wpuf-form li .wpuf-text-editor .wp-editor-wrap {
749 border: 0;
750 }
751 .form-switcher-content {
752 position: absolute;
753 background-color: #f9f9f9;
754 min-width: 160px;
755 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
756 z-index: 9999;
757 margin: 0;
758 }
759 .form-switcher-content li {
760 margin: 0;
761 }
762 .form-switcher-content a {
763 color: black;
764 padding: 12px;
765 text-decoration: none;
766 display: block;
767 text-align: center;
768 }
769 .form-switcher-content a:hover {
770 color: #fff;
771 background-color: #008ec2;
772 }
773 .form-switcher-content a.active {
774 font-weight: bold;
775 color: #fff;
776 background-color: #008ec2;
777 }
778 .insert-photo-icon {
779 vertical-align: text-top;
780 color: #82878c;
781 font-size: 18px;
782 }
783 .password-strength-meter {
784 border-style: solid;
785 border-width: 1px;
786 float: left;
787 margin: 0;
788 padding: 3px 5px;
789 text-align: center;
790 width: 200px;
791 display: block;
792 background-color: #eee;
793 border-color: #ddd;
794 }
795 ul.wpuf-form li .wpuf-password-field {
796 width: 100%;
797 margin-bottom: 10px;
798 }
799 ul.wpuf-form li .wpuf-password-field:after {
800 clear: both;
801 content: "";
802 display: table;
803 }
804 .wpuf-recaptcha-placeholder {
805 width: 100%;
806 max-width: 304px;
807 }
808 .wpuf-merge-tag-wrap .merge-tag-link {
809 position: absolute;
810 right: 5px;
811 top: 30px;
812 color: #999;
813 text-decoration: none;
814 }
815 .wpuf-merge-tag-wrap .merge-tag-link:hover {
816 color: #555;
817 }
818 .wpuf-merge-tag-wrap .wpuf-merge-tags {
819 max-height: 110px;
820 overflow: hidden;
821 overflow-y: scroll;
822 border: 1px solid #e5e5e5;
823 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.04);
824 display: none;
825 position: absolute;
826 right: 0px;
827 top: 60px;
828 background: #fff;
829 z-index: 1000;
830 min-height: 150px;
831 }
832 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-head {
833 font-weight: bold;
834 background: #f0f0f0;
835 padding: 3px 10px;
836 }
837 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-section ul {
838 margin: 0;
839 padding: 5px 10px;
840 }
841 .wpuf-form-template-modal {
842 background: #fff;
843 position: fixed;
844 top: 5%;
845 bottom: 5%;
846 right: 10%;
847 left: 10%;
848 display: none;
849 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
850 z-index: 160000;
851 }
852 .wpuf-form-template-modal.show {
853 display: block;
854 }
855 .wpuf-form-template-modal * {
856 box-sizing: border-box;
857 }
858 .wpuf-form-template-modal a.close {
859 position: absolute;
860 top: 0;
861 right: 0;
862 font: 300 1.71429em "dashicons" !important;
863 color: #777;
864 content: '\f335';
865 display: inline-block;
866 padding: 10px 20px;
867 z-index: 5;
868 text-decoration: none;
869 height: 50px;
870 cursor: pointer;
871 border-left: 1px solid #ddd;
872 }
873 .wpuf-form-template-modal a.close:hover {
874 background: #eee;
875 opacity: 0.8;
876 text-decoration: none;
877 }
878 .wpuf-form-template-modal a.close:active {
879 background: #eee;
880 opacity: 0.4;
881 }
882 .wpuf-form-template-modal .modal-header {
883 position: absolute;
884 top: 0;
885 left: 0;
886 right: 0;
887 height: 50px;
888 z-index: 4;
889 border-bottom: 1px solid #ddd;
890 padding-left: 15px;
891 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
892 }
893 .wpuf-form-template-modal .modal-header h2 {
894 line-height: 50px;
895 text-align: left;
896 margin-top: 0;
897 color: #5d6d74;
898 font-size: 20px;
899 text-shadow: 0 1px 1px #fff;
900 }
901 .wpuf-form-template-modal .modal-header h2 small {
902 font-weight: normal;
903 font-size: 13px;
904 margin-left: 15px;
905 }
906 .wpuf-form-template-modal .content-container {
907 position: absolute;
908 top: 50px;
909 right: 0;
910 bottom: 50px;
911 left: 0;
912 overflow: auto;
913 padding: 2em 2em;
914 }
915 .wpuf-form-template-modal .content-container.no-footer {
916 bottom: 0;
917 }
918 .wpuf-form-template-modal .content {
919 margin: 0 auto;
920 max-width: 900px;
921 text-align: left;
922 }
923 .wpuf-form-template-modal .content ul {
924 width: 100%;
925 margin: 0;
926 padding: 0;
927 }
928 .wpuf-form-template-modal .content ul li {
929 text-align: center;
930 min-height: 280px;
931 width: 220px;
932 border: 0px;
933 box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
934 position: relative;
935 border-radius: 3px;
936 margin-bottom: 30px;
937 float: left;
938 margin-left: 30px;
939 }
940 .wpuf-form-template-modal .content ul li h3 {
941 margin-top: 0;
942 margin-bottom: 0;
943 border: 0px;
944 background: #1E87B6;
945 padding: 13px;
946 font-weight: normal;
947 font-size: 13px;
948 color: #fff;
949 border-radius: 3px 3px 0px 0px;
950 text-align: left;
951 }
952 .wpuf-form-template-modal .content ul li .title {
953 font-size: 17px;
954 margin: 0 0 10px 0;
955 line-height: 23px;
956 }
957 .wpuf-form-template-modal .content ul li.template-active img,
958 .wpuf-form-template-modal .content ul li.template-inactive img {
959 max-width: 100%;
960 max-height: 211px;
961 }
962 .wpuf-form-template-modal .content ul li .form-middle-text {
963 margin-top: 70px;
964 font-size: 15px;
965 }
966 .wpuf-form-template-modal .content ul li .form-middle-text span.dashicons {
967 font-size: 45px;
968 color: #ddd;
969 margin: 0 auto;
970 width: auto;
971 height: auto;
972 display: block;
973 }
974 .wpuf-form-template-modal .content ul li .form-create-overlay {
975 position: absolute;
976 display: none;
977 }
978 .wpuf-form-template-modal .content ul li .form-create-overlay a.button.button-primary {
979 width: 200px;
980 min-height: 30px;
981 padding: 0;
982 color: #fff;
983 }
984 .wpuf-form-template-modal .content ul li.on-progress:before {
985 content: "\f463";
986 display: inline-block;
987 font: normal 20px/1 'dashicons';
988 color: #f56e28;
989 -webkit-animation: rotation 2s infinite linear;
990 animation: rotation 2s infinite linear;
991 position: absolute;
992 top: 40%;
993 left: 45%;
994 }
995 .wpuf-form-template-modal .content ul li.on-progress a {
996 pointer-events: none;
997 opacity: 0.2;
998 }
999 .wpuf-form-template-modal .content ul li:hover {
1000 background: #fff;
1001 }
1002 .wpuf-form-template-modal .content ul li:hover .form-create-overlay {
1003 animation: weFormsFadeIn .25s;
1004 padding: 10px;
1005 text-align: center;
1006 display: flex;
1007 flex-direction: column;
1008 justify-content: center;
1009 background: rgba(0, 0, 0, 0.7);
1010 height: 100%;
1011 width: 100%;
1012 top: 0px;
1013 left: 0px;
1014 color: #fff;
1015 border-radius: 3px;
1016 }
1017 .wpuf-form-template-modal .content ul li a {
1018 text-decoration: none;
1019 color: #555;
1020 padding: 20px;
1021 display: block;
1022 min-height: 118px;
1023 }
1024 .wpuf-form-template-modal .content ul li .title {
1025 font-size: 17px;
1026 margin: 0 0 10px 0;
1027 line-height: 23px;
1028 }
1029 .wpuf-form-template-modal .content ul li .description {
1030 color: #fff;
1031 }
1032 .wpuf-form-template-modal .content ul li:nth-child(3n+1) {
1033 margin-left: 0;
1034 clear: both;
1035 }
1036 .wpuf-form-template-modal .content ul li.template-inactive .title,
1037 .wpuf-form-template-modal .content ul li.template-inactive .description {
1038 color: #ddd;
1039 }
1040 .wpuf-form-template-modal .content ul li.blank-form {
1041 text-align: center;
1042 }
1043 .wpuf-form-template-modal .content ul li.blank-form span {
1044 display: block;
1045 }
1046 .wpuf-form-template-modal .content ul li.blank-form span.dashicons {
1047 font-size: 45px;
1048 color: #ddd;
1049 margin: 0 auto;
1050 width: auto;
1051 height: auto;
1052 }
1053 .wpuf-form-template-modal footer {
1054 position: absolute;
1055 left: 0;
1056 bottom: 0;
1057 width: 100%;
1058 padding: 12px 20px;
1059 border-top: 1px solid #ddd;
1060 background: #fff;
1061 text-align: left;
1062 }
1063 .wpuf-form-template-modal-backdrop {
1064 position: fixed;
1065 z-index: 159999;
1066 top: 0;
1067 left: 0;
1068 right: 0;
1069 bottom: 0;
1070 min-height: 360px;
1071 background: #000;
1072 opacity: .7;
1073 display: none;
1074 }
1075 .wpuf-form-template-modal-backdrop.show {
1076 display: block;
1077 }
1078 /* Smartphones (portrait and landscape) ----------- */
1079 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
1080 .wpuf-form-template-modal .modal-header h2 small {
1081 display: none;
1082 }
1083 .wpuf-form-template-modal .content ul li {
1084 float: none;
1085 width: 100%;
1086 margin-left: 0;
1087 }
1088 }
1089 .wpuf-toggle-switch {
1090 cursor: pointer;
1091 text-indent: -9999px;
1092 width: 25px;
1093 height: 15px;
1094 background: #ccc;
1095 display: block;
1096 border-radius: 100px;
1097 position: relative;
1098 }
1099 .wpuf-toggle-switch:after {
1100 content: '';
1101 position: absolute;
1102 top: 2px;
1103 left: 2px;
1104 width: 12px;
1105 height: 12px;
1106 background: #fff;
1107 border-radius: 50%;
1108 transition: 0.3s;
1109 }
1110 .wpuf-toggle-switch.checked {
1111 background: #0085ba;
1112 }
1113 .wpuf-toggle-switch.checked:after {
1114 left: calc(90%);
1115 transform: translateX(-100%);
1116 }
1117 .wpuf-toggle-switch.big {
1118 width: 35px;
1119 height: 20px;
1120 }
1121 .wpuf-toggle-switch.big:after {
1122 top: 3px;
1123 left: 3px;
1124 width: 15px;
1125 height: 15px;
1126 }
1127 .wpuf-toggle-switch.big.checked:after {
1128 left: calc(95%);
1129 }
1130 .wpuf-integrations-wrap:before,
1131 .wpuf-integrations-wrap:after {
1132 content: " ";
1133 display: table;
1134 }
1135 .wpuf-integrations-wrap:after {
1136 clear: both;
1137 }
1138 .wpuf-integrations-wrap:before,
1139 .wpuf-integrations-wrap:after {
1140 content: " ";
1141 display: table;
1142 }
1143 .wpuf-integrations-wrap:after {
1144 clear: both;
1145 }
1146 .wpuf-integrations-wrap .wpuf-integration {
1147 margin-bottom: 15px;
1148 background-color: #fff;
1149 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1150 border: 1px solid #e5e5e5;
1151 }
1152 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header {
1153 padding: 0;
1154 position: relative;
1155 margin: 0 auto;
1156 border-bottom: 1px solid #eee;
1157 display: flex;
1158 flex-direction: row;
1159 }
1160 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-toggle {
1161 width: 65px;
1162 padding: 10px 10px 8px 14px;
1163 border-right: 1px solid #eee;
1164 margin-right: 10px;
1165 }
1166 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label {
1167 width: 100%;
1168 padding-top: 10px;
1169 font-weight: 500;
1170 font-size: 1.1em;
1171 }
1172 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label img.icon {
1173 height: 24px;
1174 width: auto;
1175 float: left;
1176 margin-top: -3px;
1177 margin-right: 5px;
1178 border: 1px solid #eee;
1179 border-radius: 50%;
1180 }
1181 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label .label-premium {
1182 font-weight: normal;
1183 font-size: 11px;
1184 background: #7cbb34;
1185 color: #fff;
1186 border-radius: 3px;
1187 padding: 3px 5px;
1188 margin-left: 5px;
1189 }
1190 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions {
1191 width: 44px;
1192 display: block;
1193 }
1194 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions button.toggle-area {
1195 border: none;
1196 border-left: 1px solid #eee;
1197 background-color: #fff;
1198 width: 100%;
1199 height: 100%;
1200 outline: none;
1201 }
1202 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1203 content: "\f140";
1204 content: "\f142";
1205 display: inline-block;
1206 font: normal 20px/1 dashicons;
1207 speak: none;
1208 -webkit-font-smoothing: antialiased;
1209 -moz-osx-font-smoothing: grayscale;
1210 text-decoration: none !important;
1211 }
1212 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-settings {
1213 display: none;
1214 }
1215 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1216 content: "\f140";
1217 }
1218 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings {
1219 padding: 15px;
1220 }
1221 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings p:first-child {
1222 margin-top: 0;
1223 }
1224 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row {
1225 margin-bottom: 10px;
1226 }
1227 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:before,
1228 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1229 content: " ";
1230 display: table;
1231 }
1232 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1233 clear: both;
1234 }
1235 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:before,
1236 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1237 content: " ";
1238 display: table;
1239 }
1240 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1241 clear: both;
1242 }
1243 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label {
1244 float: left;
1245 width: 160px;
1246 }
1247 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater {
1248 text-decoration: none;
1249 float: right;
1250 margin-right: 10px;
1251 }
1252 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater.updating .dashicons:before {
1253 display: inline-block;
1254 -webkit-animation: rotation 2s infinite linear;
1255 animation: rotation 2s infinite linear;
1256 }
1257 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field {
1258 float: left;
1259 width: 80%;
1260 position: relative;
1261 }
1262 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-int-field-small {
1263 max-width: 350px;
1264 position: relative;
1265 }
1266 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .merge-tag-link {
1267 top: 5px;
1268 }
1269 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .wpuf-merge-tags {
1270 top: 30px;
1271 }
1272 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset {
1273 border: 1px solid #eee;
1274 padding: 10px;
1275 margin-bottom: 10px;
1276 }
1277 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset legend {
1278 padding: 0 10px;
1279 }
1280 #wpuf-toggle-field-options,
1281 #wpuf-toggle-show-form {
1282 background: #008ec2;
1283 text-align: center;
1284 cursor: pointer;
1285 color: #fff;
1286 border-radius: 0;
1287 margin-left: 10px;
1288 margin-top: 10px;
1289 font-size: 14px;
1290 font-weight: 400;
1291 float: right;
1292 width: 100%;
1293 padding: 10px;
1294 display: none;
1295 }
1296 @media (min-width: 768px) and (max-width: 991px) {
1297 #wpuf-form-builder {
1298 width: 100% !important;
1299 right: 0;
1300 }
1301 #wpuf-form-builder > fieldset {
1302 margin-left: 36px;
1303 }
1304 #wpuf-form-builder #wpuf-form-builder-container #builder-stage {
1305 margin-right: 290px;
1306 }
1307 #wpuf-form-builder #wpuf-form-builder-container #builder-form-fields {
1308 width: 290px;
1309 }
1310 .panel-form-field-group .button {
1311 font-size: 11px;
1312 }
1313 }
1314 @media (max-width: 767px) {
1315 #wpuf-form-builder-container #builder-stage section {
1316 padding: 8px;
1317 }
1318 #wpuf-form-builder-container #builder-stage section #form-preview {
1319 padding: 5px;
1320 }
1321 #wpuf-form-builder {
1322 width: 100% !important;
1323 right: 0;
1324 }
1325 #wpuf-form-builder #wpuf-toggle-field-options {
1326 display: inline-block;
1327 }
1328 #wpuf-form-builder #wpuf-form-builder-container #builder-stage {
1329 width: 100%;
1330 margin-right: 0;
1331 }
1332 #wpuf-form-builder-container #builder-form-fields {
1333 width: 100%;
1334 display: none;
1335 }
1336 #wpuf-form-builder-container #builder-form-fields.show {
1337 display: block;
1338 }
1339 #wpuf-form-builder h2.nav-tab-wrapper .nav-tab {
1340 margin: 10px 6px 0 0;
1341 border-bottom: 1px solid #ccc;
1342 font-size: 10px;
1343 }
1344 #wpuf-form-builder h2.nav-tab-wrapper span.pull-right {
1345 margin-top: 10px;
1346 margin-left: 5px;
1347 }
1348 #wpuf-form-builder #wpuf-toggle-show-form.show {
1349 display: block;
1350 }
1351 #wpuf-form-builder #wpuf-toggle-field-options.hide {
1352 display: none;
1353 }
1354 #wpuf-form-builder-settings .nav-tab-wrapper {
1355 width: 120px;
1356 }
1357 #wpuf-form-builder-settings .tab-contents {
1358 margin-left: 120px;
1359 }
1360 #wpuf-form-builder-settings .form-table td select {
1361 height: 34px;
1362 }
1363 #wpuf-form-builder-settings input[type="checkbox"] {
1364 height: 18px;
1365 width: 18px;
1366 }
1367 #wpbody #wpuf-form-builder-settings input,
1368 #wpbody #wpuf-form-builder-settings select,
1369 #wpbody #wpuf-form-builder-settings .form-table td textarea,
1370 #wpuf-form-builder-settings .form-table td p,
1371 #wpuf-form-builder-settings .form-table,
1372 #wpuf-form-builder-settings .form-table td,
1373 #wpuf-form-builder-settings .form-table th,
1374 #wpuf-form-builder-settings .wp-picker-container .wp-color-result.button {
1375 font-size: 12px;
1376 }
1377 #wpuf-form-builder-settings input[type="checkbox"]:checked:before {
1378 margin: -6px -8px;
1379 }
1380 ul.wpuf-form li.country_list,
1381 ul.wpuf-form li.address_field {
1382 max-width: 200px;
1383 }
1384 .wpuf-form-template-modal .content ul li {
1385 margin-left: 0;
1386 }
1387 .wpuf-form-template-modal .modal-header h2 small {
1388 display: none;
1389 }
1390 }
1391