PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.6.12
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.6.12
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.12, at assets/wpuf/css/wpuf-form-builder.css

1,381 lines 34.9 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 #wpuf-form-builder-container section {
406 height: calc(100vh - 170px);
407 overflow-y: auto;
408 }
409 #wpuf-form-builder-container #builder-form-fields {
410 position: absolute;
411 top: 0;
412 right: 0;
413 width: 360px;
414 }
415 #wpuf-form-builder-container #builder-form-fields header ul {
416 margin: 0;
417 }
418 #wpuf-form-builder-container #builder-form-fields header ul li {
419 width: 50%;
420 text-align: center;
421 float: left;
422 line-height: 1;
423 margin: 0;
424 }
425 #wpuf-form-builder-container #builder-form-fields header ul li a {
426 text-decoration: none;
427 line-height: 44px;
428 display: block;
429 background-color: #e5e5e5;
430 color: #777;
431 border-bottom: 1px solid #cccccc;
432 -webkit-transition: background-color 0.4s;
433 -o-transition: background-color 0.4s;
434 transition: background-color 0.4s;
435 }
436 #wpuf-form-builder-container #builder-form-fields header ul li a:hover {
437 background-color: #f2f2f2;
438 }
439 #wpuf-form-builder-container #builder-form-fields header ul li a:focus {
440 outline: 0;
441 -webkit-box-shadow: none;
442 box-shadow: none;
443 }
444 #wpuf-form-builder-container #builder-form-fields header ul li.active a {
445 background-color: #fff;
446 color: #444;
447 border-bottom: 1px solid #fff;
448 }
449 #wpuf-form-builder-container #builder-form-fields header ul li:first-child {
450 border-right: 1px solid #cccccc;
451 }
452 #wpuf-form-builder-container #builder-form-fields section {
453 background-color: #fff;
454 border-right: 1px solid #cccccc;
455 }
456 #wpuf-form-builder-container #builder-form-fields section .wpuf-form-builder-panel {
457 padding: 10px;
458 }
459 #wpuf-form-builder-container #builder-stage {
460 margin-right: 360px;
461 }
462 #wpuf-form-builder-container #builder-stage section {
463 background-color: #6b6b6b;
464 padding: 30px;
465 }
466 #wpuf-form-builder-container #builder-stage section #form-preview {
467 background-color: #fff;
468 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
469 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
470 padding: 25px;
471 max-width: 800px;
472 margin: 0 auto;
473 }
474 #form-preview-stage .field-items {
475 position: relative;
476 background-color: #fff;
477 }
478 #form-preview-stage .field-items .control-buttons {
479 position: absolute;
480 top: 0;
481 left: 0;
482 z-index: 10;
483 display: none;
484 width: 100%;
485 height: 100%;
486 margin: 0;
487 text-align: center;
488 background: rgba(255, 185, 0, 0.08);
489 border: 1px dashed #ffb900;
490 }
491 #form-preview-stage .field-items .control-buttons p {
492 position: absolute;
493 top: 50%;
494 left: 50%;
495 margin: -14px 0 0 -61px;
496 line-height: 1;
497 color: #eee;
498 background-color: #23282d;
499 }
500 #form-preview-stage .field-items .control-buttons i {
501 cursor: pointer;
502 padding: 8px;
503 }
504 #form-preview-stage .field-items .control-buttons i.move {
505 cursor: move;
506 }
507 #form-preview-stage .field-items .control-buttons i:hover {
508 background-color: #0073aa;
509 }
510 #form-preview-stage .field-items:hover .control-buttons {
511 display: block;
512 }
513 #form-preview-stage .field-items.current-editing {
514 background-color: rgba(255, 185, 0, 0.15);
515 }
516 #form-preview-stage .field-items.current-editing.ui-sortable-helper {
517 background-color: #fff;
518 }
519 #form-preview-stage .field-items.ui-sortable-helper {
520 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
521 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
522 }
523 #form-preview-stage .form-preview-stage-dropzone {
524 background-color: rgba(255, 185, 0, 0.3) !important;
525 border: 1px solid #ffb900;
526 height: 50px;
527 }
528 #form-preview-stage .wpuf-submit + .button + .form-preview-stage-dropzone,
529 #form-preview-stage .field-items.empty-list-item + .form-preview-stage-dropzone {
530 display: none;
531 }
532 #form-preview-stage .field-items.empty-list-item {
533 padding: 24px;
534 margin: 0;
535 border: 1px dashed rgba(35, 40, 45, 0.5);
536 }
537 #form-preview-stage .form-preview-stage-dropzone + .field-items.empty-list-item {
538 display: none;
539 }
540 #form-preview-stage .hidden-field-list {
541 border-top: 1px dashed #cccccc;
542 }
543 #form-preview-stage .hidden-field-list h4 {
544 font-weight: 400;
545 font-size: 16px;
546 margin: 12px 0;
547 }
548 #form-preview-stage .hidden-field-list ul li {
549 background-color: #f1f1f1;
550 }
551 .panel-form-field-group {
552 margin-bottom: 15px;
553 }
554 .panel-form-field-group h3 {
555 margin: 0;
556 font-size: 15px;
557 border-bottom: 1px solid #eee;
558 padding-bottom: 10px;
559 cursor: pointer;
560 }
561 .panel-form-field-group h3 i {
562 float: right;
563 }
564 .panel-form-field-group .panel-form-field-buttons {
565 opacity: 1;
566 max-height: 100vh;
567 overflow: hidden;
568 margin: 15px 0 0;
569 }
570 .panel-form-field-group .button {
571 display: block;
572 width: 48%;
573 margin: 0 0 10px 0;
574 float: left;
575 text-align: left;
576 }
577 .panel-form-field-group .button:nth-child(odd) {
578 margin-right: 2%;
579 }
580 .panel-form-field-group .button.button-faded {
581 opacity: .5;
582 }
583 .button.ui-draggable-dragging {
584 margin: 0;
585 text-align: left;
586 }
587 .wpuf-form-builder-field-options .option-fields-section {
588 margin-bottom: 15px;
589 }
590 .wpuf-form-builder-field-options .section-title {
591 margin: 0;
592 font-size: 15px;
593 border-bottom: 1px solid #eee;
594 padding-bottom: 10px;
595 cursor: pointer;
596 }
597 .wpuf-form-builder-field-options .section-title i {
598 float: right;
599 }
600 .wpuf-form-builder-field-options .option-field-section-fields {
601 margin-top: 15px;
602 height: auto;
603 opacity: 1;
604 }
605 .wpuf-form-builder-field-options .panel-field-opt {
606 margin-bottom: 15px;
607 }
608 .wpuf-form-builder-field-options .panel-field-opt .field-helper-text {
609 color: rgba(35, 40, 45, 0.5);
610 margin-left: 6px;
611 }
612 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="text"],
613 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="range"],
614 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="number"] {
615 display: block;
616 width: 100%;
617 margin: 5px 0 0;
618 line-height: 1.75;
619 }
620 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > label {
621 display: block;
622 margin-bottom: 5px;
623 }
624 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > ul {
625 margin-top: 0;
626 margin-bottom: 0;
627 }
628 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-select select {
629 width: 100%;
630 height: 32px;
631 margin: 4px 0 0;
632 }
633 .wpuf-form-builder-field-options .panel-field-opt .chosen-select + .chosen-container {
634 margin-top: 10px;
635 }
636 .wpuf-form-builder-field-options .panel-field-opt .label-title-block {
637 display: block;
638 margin-bottom: 3px;
639 }
640 .option-field-option-chooser {
641 margin: 12px 0 0;
642 }
643 .option-field-option-chooser.margin-0 {
644 margin: 0;
645 }
646 .option-field-option-chooser .selector,
647 .option-field-option-chooser .sort-handler,
648 .option-field-option-chooser .label,
649 .option-field-option-chooser .value,
650 .option-field-option-chooser .action-buttons {
651 float: left;
652 }
653 .option-field-option-chooser .selector {
654 width: 25px;
655 }
656 .option-field-option-chooser .selector input {
657 margin-top: 14px;
658 }
659 .option-field-option-chooser .sort-handler {
660 width: 22px;
661 cursor: ns-resize;
662 }
663 .option-field-option-chooser .sort-handler i {
664 margin-top: 14px;
665 font-size: 15px;
666 }
667 .option-field-option-chooser .label {
668 width: 208px;
669 margin-right: 8px;
670 }
671 .option-field-option-chooser.show-value .label,
672 .option-field-option-chooser.show-value .value {
673 width: 100px;
674 margin-right: 8px;
675 }
676 .option-field-option-chooser .header .label,
677 .option-field-option-chooser .header .value {
678 color: #909090;
679 }
680 .option-field-option-chooser .action-buttons {
681 width: 36px;
682 }
683 .option-field-option-chooser .action-buttons i {
684 cursor: pointer;
685 font-size: 16px;
686 margin-top: 13px;
687 }
688 .option-field-option-chooser .plus-buttons {
689 padding: 5px;
690 font-size: 18px;
691 text-align: center;
692 cursor: pointer;
693 border: 1px solid #ccc;
694 width: 61%;
695 margin-left: 14%;
696 }
697 .panel-field-opt-repeater-columns .repeater-columns li > div {
698 float: left;
699 }
700 .panel-field-opt-repeater-columns .repeater-columns .sorter {
701 width: 30px;
702 }
703 .panel-field-opt-repeater-columns .repeater-columns .sorter i {
704 cursor: ns-resize;
705 font-size: 16px;
706 margin-top: 5px;
707 }
708 .panel-field-opt-repeater-columns .repeater-columns .input-container {
709 width: 195px;
710 margin-right: 10px;
711 }
712 .panel-field-opt-repeater-columns .repeater-columns .input-container input {
713 width: 100%;
714 }
715 .panel-field-opt-repeater-columns .repeater-columns .action-buttons {
716 width: 50px;
717 }
718 .panel-field-opt-repeater-columns .repeater-columns .action-buttons i {
719 cursor: pointer;
720 font-size: 16px;
721 padding: 0 3px;
722 margin-top: 4px;
723 }
724 .panel-field-opt-textarea textarea {
725 display: block;
726 width: 100%;
727 margin: 5px 0 0;
728 line-height: 1.75;
729 }
730 .panel-field-html-help-text pre {
731 max-width: 100%;
732 overflow-x: auto;
733 }
734 .panel-field-opt-select .opt-select-element {
735 display: block;
736 max-width: 100%;
737 }
738 ul.wpuf-form li .wpuf-text-editor .wp-editor-wrap {
739 border: 0;
740 }
741 .form-switcher-content {
742 position: absolute;
743 background-color: #f9f9f9;
744 min-width: 160px;
745 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
746 z-index: 9999;
747 margin: 0;
748 }
749 .form-switcher-content li {
750 margin: 0;
751 }
752 .form-switcher-content a {
753 color: black;
754 padding: 12px;
755 text-decoration: none;
756 display: block;
757 text-align: center;
758 }
759 .form-switcher-content a:hover {
760 color: #fff;
761 background-color: #008ec2;
762 }
763 .form-switcher-content a.active {
764 font-weight: bold;
765 color: #fff;
766 background-color: #008ec2;
767 }
768 .insert-photo-icon {
769 vertical-align: text-top;
770 color: #82878c;
771 font-size: 18px;
772 }
773 .password-strength-meter {
774 border-style: solid;
775 border-width: 1px;
776 float: left;
777 margin: 0;
778 padding: 3px 5px;
779 text-align: center;
780 width: 200px;
781 display: block;
782 background-color: #eee;
783 border-color: #ddd;
784 }
785 ul.wpuf-form li .wpuf-password-field {
786 width: 100%;
787 margin-bottom: 10px;
788 }
789 ul.wpuf-form li .wpuf-password-field:after {
790 clear: both;
791 content: "";
792 display: table;
793 }
794 .wpuf-recaptcha-placeholder {
795 width: 100%;
796 max-width: 304px;
797 }
798 .wpuf-merge-tag-wrap .merge-tag-link {
799 position: absolute;
800 right: 5px;
801 top: 30px;
802 color: #999;
803 text-decoration: none;
804 }
805 .wpuf-merge-tag-wrap .merge-tag-link:hover {
806 color: #555;
807 }
808 .wpuf-merge-tag-wrap .wpuf-merge-tags {
809 max-height: 110px;
810 overflow: hidden;
811 overflow-y: scroll;
812 border: 1px solid #e5e5e5;
813 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.04);
814 display: none;
815 position: absolute;
816 right: 0px;
817 top: 60px;
818 background: #fff;
819 z-index: 1000;
820 min-height: 150px;
821 }
822 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-head {
823 font-weight: bold;
824 background: #f0f0f0;
825 padding: 3px 10px;
826 }
827 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-section ul {
828 margin: 0;
829 padding: 5px 10px;
830 }
831 .wpuf-form-template-modal {
832 background: #fff;
833 position: fixed;
834 top: 5%;
835 bottom: 5%;
836 right: 10%;
837 left: 10%;
838 display: none;
839 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
840 z-index: 160000;
841 }
842 .wpuf-form-template-modal.show {
843 display: block;
844 }
845 .wpuf-form-template-modal * {
846 box-sizing: border-box;
847 }
848 .wpuf-form-template-modal a.close {
849 position: absolute;
850 top: 0;
851 right: 0;
852 font: 300 1.71429em "dashicons" !important;
853 color: #777;
854 content: '\f335';
855 display: inline-block;
856 padding: 10px 20px;
857 z-index: 5;
858 text-decoration: none;
859 height: 50px;
860 cursor: pointer;
861 border-left: 1px solid #ddd;
862 }
863 .wpuf-form-template-modal a.close:hover {
864 background: #eee;
865 opacity: 0.8;
866 text-decoration: none;
867 }
868 .wpuf-form-template-modal a.close:active {
869 background: #eee;
870 opacity: 0.4;
871 }
872 .wpuf-form-template-modal .modal-header {
873 position: absolute;
874 top: 0;
875 left: 0;
876 right: 0;
877 height: 50px;
878 z-index: 4;
879 border-bottom: 1px solid #ddd;
880 padding-left: 15px;
881 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
882 }
883 .wpuf-form-template-modal .modal-header h2 {
884 line-height: 50px;
885 text-align: left;
886 margin-top: 0;
887 color: #5d6d74;
888 font-size: 20px;
889 text-shadow: 0 1px 1px #fff;
890 }
891 .wpuf-form-template-modal .modal-header h2 small {
892 font-weight: normal;
893 font-size: 13px;
894 margin-left: 15px;
895 }
896 .wpuf-form-template-modal .content-container {
897 position: absolute;
898 top: 50px;
899 right: 0;
900 bottom: 50px;
901 left: 0;
902 overflow: auto;
903 padding: 2em 2em;
904 }
905 .wpuf-form-template-modal .content-container.no-footer {
906 bottom: 0;
907 }
908 .wpuf-form-template-modal .content {
909 margin: 0 auto;
910 max-width: 900px;
911 text-align: left;
912 }
913 .wpuf-form-template-modal .content ul {
914 width: 100%;
915 margin: 0;
916 padding: 0;
917 }
918 .wpuf-form-template-modal .content ul li {
919 text-align: center;
920 min-height: 280px;
921 width: 220px;
922 border: 0px;
923 box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
924 position: relative;
925 border-radius: 3px;
926 margin-bottom: 30px;
927 float: left;
928 margin-left: 30px;
929 }
930 .wpuf-form-template-modal .content ul li h3 {
931 margin-top: 0;
932 margin-bottom: 0;
933 border: 0px;
934 background: #1E87B6;
935 padding: 13px;
936 font-weight: normal;
937 font-size: 13px;
938 color: #fff;
939 border-radius: 3px 3px 0px 0px;
940 text-align: left;
941 }
942 .wpuf-form-template-modal .content ul li .title {
943 font-size: 17px;
944 margin: 0 0 10px 0;
945 line-height: 23px;
946 }
947 .wpuf-form-template-modal .content ul li.template-active img,
948 .wpuf-form-template-modal .content ul li.template-inactive img {
949 max-width: 100%;
950 max-height: 211px;
951 }
952 .wpuf-form-template-modal .content ul li .form-middle-text {
953 margin-top: 70px;
954 font-size: 15px;
955 }
956 .wpuf-form-template-modal .content ul li .form-middle-text span.dashicons {
957 font-size: 45px;
958 color: #ddd;
959 margin: 0 auto;
960 width: auto;
961 height: auto;
962 display: block;
963 }
964 .wpuf-form-template-modal .content ul li .form-create-overlay {
965 position: absolute;
966 display: none;
967 }
968 .wpuf-form-template-modal .content ul li .form-create-overlay a.button.button-primary {
969 width: 200px;
970 min-height: 30px;
971 padding: 0;
972 color: #fff;
973 }
974 .wpuf-form-template-modal .content ul li.on-progress:before {
975 content: "\f463";
976 display: inline-block;
977 font: normal 20px/1 'dashicons';
978 color: #f56e28;
979 -webkit-animation: rotation 2s infinite linear;
980 animation: rotation 2s infinite linear;
981 position: absolute;
982 top: 40%;
983 left: 45%;
984 }
985 .wpuf-form-template-modal .content ul li.on-progress a {
986 pointer-events: none;
987 opacity: 0.2;
988 }
989 .wpuf-form-template-modal .content ul li:hover {
990 background: #fff;
991 }
992 .wpuf-form-template-modal .content ul li:hover .form-create-overlay {
993 animation: weFormsFadeIn .25s;
994 padding: 10px;
995 text-align: center;
996 display: flex;
997 flex-direction: column;
998 justify-content: center;
999 background: rgba(0, 0, 0, 0.7);
1000 height: 100%;
1001 width: 100%;
1002 top: 0px;
1003 left: 0px;
1004 color: #fff;
1005 border-radius: 3px;
1006 }
1007 .wpuf-form-template-modal .content ul li a {
1008 text-decoration: none;
1009 color: #555;
1010 padding: 20px;
1011 display: block;
1012 min-height: 118px;
1013 }
1014 .wpuf-form-template-modal .content ul li .title {
1015 font-size: 17px;
1016 margin: 0 0 10px 0;
1017 line-height: 23px;
1018 }
1019 .wpuf-form-template-modal .content ul li .description {
1020 color: #fff;
1021 }
1022 .wpuf-form-template-modal .content ul li:nth-child(3n+1) {
1023 margin-left: 0;
1024 clear: both;
1025 }
1026 .wpuf-form-template-modal .content ul li.template-inactive .title,
1027 .wpuf-form-template-modal .content ul li.template-inactive .description {
1028 color: #ddd;
1029 }
1030 .wpuf-form-template-modal .content ul li.blank-form {
1031 text-align: center;
1032 }
1033 .wpuf-form-template-modal .content ul li.blank-form span {
1034 display: block;
1035 }
1036 .wpuf-form-template-modal .content ul li.blank-form span.dashicons {
1037 font-size: 45px;
1038 color: #ddd;
1039 margin: 0 auto;
1040 width: auto;
1041 height: auto;
1042 }
1043 .wpuf-form-template-modal footer {
1044 position: absolute;
1045 left: 0;
1046 bottom: 0;
1047 width: 100%;
1048 padding: 12px 20px;
1049 border-top: 1px solid #ddd;
1050 background: #fff;
1051 text-align: left;
1052 }
1053 .wpuf-form-template-modal-backdrop {
1054 position: fixed;
1055 z-index: 159999;
1056 top: 0;
1057 left: 0;
1058 right: 0;
1059 bottom: 0;
1060 min-height: 360px;
1061 background: #000;
1062 opacity: .7;
1063 display: none;
1064 }
1065 .wpuf-form-template-modal-backdrop.show {
1066 display: block;
1067 }
1068 /* Smartphones (portrait and landscape) ----------- */
1069 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
1070 .wpuf-form-template-modal .modal-header h2 small {
1071 display: none;
1072 }
1073 .wpuf-form-template-modal .content ul li {
1074 float: none;
1075 width: 100%;
1076 margin-left: 0;
1077 }
1078 }
1079 .wpuf-toggle-switch {
1080 cursor: pointer;
1081 text-indent: -9999px;
1082 width: 25px;
1083 height: 15px;
1084 background: #ccc;
1085 display: block;
1086 border-radius: 100px;
1087 position: relative;
1088 }
1089 .wpuf-toggle-switch:after {
1090 content: '';
1091 position: absolute;
1092 top: 2px;
1093 left: 2px;
1094 width: 12px;
1095 height: 12px;
1096 background: #fff;
1097 border-radius: 50%;
1098 transition: 0.3s;
1099 }
1100 .wpuf-toggle-switch.checked {
1101 background: #0085ba;
1102 }
1103 .wpuf-toggle-switch.checked:after {
1104 left: calc(90%);
1105 transform: translateX(-100%);
1106 }
1107 .wpuf-toggle-switch.big {
1108 width: 35px;
1109 height: 20px;
1110 }
1111 .wpuf-toggle-switch.big:after {
1112 top: 3px;
1113 left: 3px;
1114 width: 15px;
1115 height: 15px;
1116 }
1117 .wpuf-toggle-switch.big.checked:after {
1118 left: calc(95%);
1119 }
1120 .wpuf-integrations-wrap:before,
1121 .wpuf-integrations-wrap:after {
1122 content: " ";
1123 display: table;
1124 }
1125 .wpuf-integrations-wrap:after {
1126 clear: both;
1127 }
1128 .wpuf-integrations-wrap:before,
1129 .wpuf-integrations-wrap:after {
1130 content: " ";
1131 display: table;
1132 }
1133 .wpuf-integrations-wrap:after {
1134 clear: both;
1135 }
1136 .wpuf-integrations-wrap .wpuf-integration {
1137 margin-bottom: 15px;
1138 background-color: #fff;
1139 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1140 border: 1px solid #e5e5e5;
1141 }
1142 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header {
1143 padding: 0;
1144 position: relative;
1145 margin: 0 auto;
1146 border-bottom: 1px solid #eee;
1147 display: flex;
1148 flex-direction: row;
1149 }
1150 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-toggle {
1151 width: 65px;
1152 padding: 10px 10px 8px 14px;
1153 border-right: 1px solid #eee;
1154 margin-right: 10px;
1155 }
1156 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label {
1157 width: 100%;
1158 padding-top: 10px;
1159 font-weight: 500;
1160 font-size: 1.1em;
1161 }
1162 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label img.icon {
1163 height: 24px;
1164 width: auto;
1165 float: left;
1166 margin-top: -3px;
1167 margin-right: 5px;
1168 border: 1px solid #eee;
1169 border-radius: 50%;
1170 }
1171 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label .label-premium {
1172 font-weight: normal;
1173 font-size: 11px;
1174 background: #7cbb34;
1175 color: #fff;
1176 border-radius: 3px;
1177 padding: 3px 5px;
1178 margin-left: 5px;
1179 }
1180 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions {
1181 width: 44px;
1182 display: block;
1183 }
1184 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions button.toggle-area {
1185 border: none;
1186 border-left: 1px solid #eee;
1187 background-color: #fff;
1188 width: 100%;
1189 height: 100%;
1190 outline: none;
1191 }
1192 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1193 content: "\f140";
1194 content: "\f142";
1195 display: inline-block;
1196 font: normal 20px/1 dashicons;
1197 speak: none;
1198 -webkit-font-smoothing: antialiased;
1199 -moz-osx-font-smoothing: grayscale;
1200 text-decoration: none !important;
1201 }
1202 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-settings {
1203 display: none;
1204 }
1205 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1206 content: "\f140";
1207 }
1208 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings {
1209 padding: 15px;
1210 }
1211 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings p:first-child {
1212 margin-top: 0;
1213 }
1214 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row {
1215 margin-bottom: 10px;
1216 }
1217 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:before,
1218 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1219 content: " ";
1220 display: table;
1221 }
1222 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1223 clear: both;
1224 }
1225 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:before,
1226 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1227 content: " ";
1228 display: table;
1229 }
1230 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1231 clear: both;
1232 }
1233 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label {
1234 float: left;
1235 width: 160px;
1236 }
1237 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater {
1238 text-decoration: none;
1239 float: right;
1240 margin-right: 10px;
1241 }
1242 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater.updating .dashicons:before {
1243 display: inline-block;
1244 -webkit-animation: rotation 2s infinite linear;
1245 animation: rotation 2s infinite linear;
1246 }
1247 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field {
1248 float: left;
1249 width: 80%;
1250 position: relative;
1251 }
1252 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-int-field-small {
1253 max-width: 350px;
1254 position: relative;
1255 }
1256 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .merge-tag-link {
1257 top: 5px;
1258 }
1259 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .wpuf-merge-tags {
1260 top: 30px;
1261 }
1262 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset {
1263 border: 1px solid #eee;
1264 padding: 10px;
1265 margin-bottom: 10px;
1266 }
1267 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset legend {
1268 padding: 0 10px;
1269 }
1270 #wpuf-toggle-field-options,
1271 #wpuf-toggle-show-form {
1272 background: #008ec2;
1273 text-align: center;
1274 cursor: pointer;
1275 color: #fff;
1276 border-radius: 0;
1277 margin-left: 10px;
1278 margin-top: 10px;
1279 font-size: 14px;
1280 font-weight: 400;
1281 float: right;
1282 width: 100%;
1283 padding: 10px;
1284 display: none;
1285 }
1286 @media (min-width: 768px) and (max-width: 991px) {
1287 #wpuf-form-builder {
1288 width: 100% !important;
1289 right: 0;
1290 }
1291 #wpuf-form-builder > fieldset {
1292 margin-left: 36px;
1293 }
1294 #wpuf-form-builder #wpuf-form-builder-container #builder-stage {
1295 margin-right: 290px;
1296 }
1297 #wpuf-form-builder #wpuf-form-builder-container #builder-form-fields {
1298 width: 290px;
1299 }
1300 .panel-form-field-group .button {
1301 font-size: 11px;
1302 }
1303 }
1304 @media (max-width: 767px) {
1305 #wpuf-form-builder-container #builder-stage section {
1306 padding: 8px;
1307 }
1308 #wpuf-form-builder-container #builder-stage section #form-preview {
1309 padding: 5px;
1310 }
1311 #wpuf-form-builder {
1312 width: 100% !important;
1313 right: 0;
1314 }
1315 #wpuf-form-builder #wpuf-toggle-field-options {
1316 display: inline-block;
1317 }
1318 #wpuf-form-builder #wpuf-form-builder-container #builder-stage {
1319 width: 100%;
1320 margin-right: 0;
1321 }
1322 #wpuf-form-builder-container #builder-form-fields {
1323 width: 100%;
1324 display: none;
1325 }
1326 #wpuf-form-builder-container #builder-form-fields.show {
1327 display: block;
1328 }
1329 #wpuf-form-builder h2.nav-tab-wrapper .nav-tab {
1330 margin: 10px 6px 0 0;
1331 border-bottom: 1px solid #ccc;
1332 font-size: 10px;
1333 }
1334 #wpuf-form-builder h2.nav-tab-wrapper span.pull-right {
1335 margin-top: 10px;
1336 margin-left: 5px;
1337 }
1338 #wpuf-form-builder #wpuf-toggle-show-form.show {
1339 display: block;
1340 }
1341 #wpuf-form-builder #wpuf-toggle-field-options.hide {
1342 display: none;
1343 }
1344 #wpuf-form-builder-settings .nav-tab-wrapper {
1345 width: 120px;
1346 }
1347 #wpuf-form-builder-settings .tab-contents {
1348 margin-left: 120px;
1349 }
1350 #wpuf-form-builder-settings .form-table td select {
1351 height: 34px;
1352 }
1353 #wpuf-form-builder-settings input[type="checkbox"] {
1354 height: 18px;
1355 width: 18px;
1356 }
1357 #wpbody #wpuf-form-builder-settings input,
1358 #wpbody #wpuf-form-builder-settings select,
1359 #wpbody #wpuf-form-builder-settings .form-table td textarea,
1360 #wpuf-form-builder-settings .form-table td p,
1361 #wpuf-form-builder-settings .form-table,
1362 #wpuf-form-builder-settings .form-table td,
1363 #wpuf-form-builder-settings .form-table th,
1364 #wpuf-form-builder-settings .wp-picker-container .wp-color-result.button {
1365 font-size: 12px;
1366 }
1367 #wpuf-form-builder-settings input[type="checkbox"]:checked:before {
1368 margin: -6px -8px;
1369 }
1370 ul.wpuf-form li.country_list,
1371 ul.wpuf-form li.address_field {
1372 max-width: 200px;
1373 }
1374 .wpuf-form-template-modal .content ul li {
1375 margin-left: 0;
1376 }
1377 .wpuf-form-template-modal .modal-header h2 small {
1378 display: none;
1379 }
1380 }
1381