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

1,262 lines 30.6 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: 40px;
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 #wpuf-form-builder {
222 width: calc(100% - 200px);
223 padding-top: 10px;
224 position: fixed;
225 top: 25px;
226 background: #f1f1f1;
227 }
228 #wpuf-form-builder * {
229 box-sizing: border-box;
230 }
231 #wpuf-form-builder > fieldset > .nav-tab-wrapper .nav-tab:focus {
232 outline: 0;
233 -webkit-box-shadow: none;
234 box-shadow: none;
235 }
236 #wpuf-form-builder > fieldset > .nav-tab-wrapper .button {
237 font-weight: 400;
238 }
239 #wpuf-form-builder > fieldset > .tab-contents {
240 border-bottom: 1px solid #cccccc;
241 }
242 #wpuf-form-builder > fieldset > .tab-contents > .group {
243 display: none;
244 }
245 #wpuf-form-builder > fieldset > .tab-contents > .group.active {
246 display: block;
247 }
248 #wpuf-form-builder > fieldset > .tab-contents > .group:not(#wpuf-form-builder-container):not(#wpuf-form-builder-settings) {
249 height: calc(100vh - 125px);
250 overflow-y: auto;
251 padding-top: 15px;
252 }
253 #wpuf-form-builder .wpuf-settings-nav-tab-wrapper {
254 width: 200px;
255 }
256 #wpuf-form-builder .wp-picker-holder * {
257 box-sizing: content-box;
258 }
259 #wpuf-form-builder .tab-content {
260 height: calc(100vh - 140px);
261 overflow-y: auto;
262 margin-top: 15px;
263 }
264 #wpuf-form-builder-settings {
265 position: relative;
266 margin-top: 15px;
267 min-height: 380px;
268 }
269 #wpuf-form-builder-settings .nav-tab-wrapper {
270 position: absolute;
271 top: 0;
272 left: 0;
273 width: 170px;
274 border-bottom: 0;
275 }
276 #wpuf-form-builder-settings .nav-tab-wrapper a {
277 width: calc(100% - -1px);
278 margin-left: 0;
279 margin-bottom: .5em;
280 border-right: 1px solid #cccccc;
281 border-bottom: 1px solid #cccccc;
282 font-weight: 400;
283 font-size: 13px;
284 }
285 #wpuf-form-builder-settings .nav-tab-wrapper a.nav-tab-active {
286 border-right-color: #f1f1f1;
287 }
288 #wpuf-form-builder-settings .nav-tab-wrapper a:focus {
289 outline: 0;
290 -webkit-box-shadow: none;
291 box-shadow: none;
292 }
293 #wpuf-form-builder-settings .tab-contents {
294 margin-left: 170px;
295 border-left: 1px solid #cccccc;
296 padding-left: 20px;
297 }
298 #wpuf-form-builder-settings .tab-contents > .group {
299 display: none;
300 height: calc(100vh - 140px);
301 overflow-y: auto;
302 }
303 #wpuf-form-builder-settings .tab-contents > .group.active {
304 display: block;
305 }
306 #wpuf-form-builder-settings .tab-contents .form-table {
307 margin-top: 0;
308 }
309 #wpuf-form-builder-payment {
310 position: relative;
311 margin-top: 15px;
312 min-height: 380px;
313 }
314 #wpuf-form-builder-payment .nav-tab-wrapper {
315 position: absolute;
316 top: 0;
317 left: 0;
318 width: 170px;
319 border-bottom: 0;
320 }
321 #wpuf-form-builder-payment .nav-tab-wrapper a {
322 width: calc(100% - -1px);
323 margin-left: 0;
324 margin-bottom: .5em;
325 border-right: 1px solid #cccccc;
326 border-bottom: 1px solid #cccccc;
327 font-weight: 400;
328 font-size: 13px;
329 }
330 #wpuf-form-builder-payment .nav-tab-wrapper a.nav-tab-active {
331 border-right-color: #f1f1f1;
332 }
333 #wpuf-form-builder-payment .nav-tab-wrapper a:focus {
334 outline: 0;
335 -webkit-box-shadow: none;
336 box-shadow: none;
337 }
338 #wpuf-form-builder-payment .tab-contents {
339 margin-left: 170px;
340 border-left: 1px solid #cccccc;
341 padding-left: 20px;
342 }
343 #wpuf-form-builder-payment .tab-contents > .group {
344 display: none;
345 height: calc(100vh - 140px);
346 overflow-y: auto;
347 }
348 #wpuf-form-builder-payment .tab-contents > .group.active {
349 display: block;
350 }
351 #wpuf-form-builder-payment .tab-contents .form-table {
352 margin-top: 0;
353 }
354 #wpuf-form-builder-container {
355 position: relative;
356 }
357 #wpuf-form-builder-container header {
358 height: 45px;
359 border-right: 1px solid #cccccc;
360 }
361 #wpuf-form-builder-container header .form-title {
362 cursor: pointer;
363 font-size: 1.3em;
364 font-weight: 600;
365 float: left;
366 margin-right: 10px;
367 margin-top: 10px;
368 line-height: 1.5;
369 max-width: 300px;
370 white-space: nowrap;
371 overflow: hidden;
372 text-overflow: ellipsis;
373 }
374 #wpuf-form-builder-container header .form-title:hover {
375 background-color: rgba(85, 85, 85, 0.2);
376 }
377 #wpuf-form-builder-container header .form-switcher-arrow {
378 cursor: pointer;
379 font-size: 24px;
380 margin-top: 10px;
381 line-height: 1;
382 width: 20px;
383 text-align: center;
384 }
385 #wpuf-form-builder-container header .form-switcher-arrow:hover {
386 background-color: rgba(85, 85, 85, 0.2);
387 }
388 #wpuf-form-builder-container header .form-id {
389 color: #fff;
390 background-color: #008ec2;
391 line-height: 170%;
392 padding: 0 8px;
393 border-radius: 2px;
394 font-size: 13px;
395 display: inline-block;
396 margin: 10px 0 0 15px;
397 cursor: pointer;
398 }
399 #wpuf-form-builder-container section {
400 height: calc(100vh - 170px);
401 overflow-y: auto;
402 }
403 #wpuf-form-builder-container #builder-form-fields {
404 position: absolute;
405 top: 0;
406 right: 0;
407 width: 360px;
408 }
409 #wpuf-form-builder-container #builder-form-fields header ul {
410 margin: 0;
411 }
412 #wpuf-form-builder-container #builder-form-fields header ul li {
413 width: 50%;
414 text-align: center;
415 float: left;
416 line-height: 1;
417 margin: 0;
418 }
419 #wpuf-form-builder-container #builder-form-fields header ul li a {
420 text-decoration: none;
421 line-height: 44px;
422 display: block;
423 background-color: #e5e5e5;
424 color: #777;
425 border-bottom: 1px solid #cccccc;
426 -webkit-transition: background-color 0.4s;
427 -o-transition: background-color 0.4s;
428 transition: background-color 0.4s;
429 }
430 #wpuf-form-builder-container #builder-form-fields header ul li a:hover {
431 background-color: #f2f2f2;
432 }
433 #wpuf-form-builder-container #builder-form-fields header ul li a:focus {
434 outline: 0;
435 -webkit-box-shadow: none;
436 box-shadow: none;
437 }
438 #wpuf-form-builder-container #builder-form-fields header ul li.active a {
439 background-color: #fff;
440 color: #444;
441 border-bottom: 1px solid #fff;
442 }
443 #wpuf-form-builder-container #builder-form-fields header ul li:first-child {
444 border-right: 1px solid #cccccc;
445 }
446 #wpuf-form-builder-container #builder-form-fields section {
447 background-color: #fff;
448 border-right: 1px solid #cccccc;
449 }
450 #wpuf-form-builder-container #builder-form-fields section .wpuf-form-builder-panel {
451 padding: 10px;
452 }
453 #wpuf-form-builder-container #builder-stage {
454 margin-right: 360px;
455 }
456 #wpuf-form-builder-container #builder-stage section {
457 background-color: #6b6b6b;
458 padding: 30px;
459 }
460 #wpuf-form-builder-container #builder-stage section #form-preview {
461 background-color: #fff;
462 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
463 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
464 padding: 25px;
465 max-width: 800px;
466 margin: 0 auto;
467 }
468 #form-preview-stage .field-items {
469 position: relative;
470 background-color: #fff;
471 }
472 #form-preview-stage .field-items .control-buttons {
473 position: absolute;
474 top: 0;
475 left: 0;
476 z-index: 10;
477 display: none;
478 width: 100%;
479 height: 100%;
480 margin: 0;
481 text-align: center;
482 background: rgba(255, 185, 0, 0.08);
483 border: 1px dashed #ffb900;
484 }
485 #form-preview-stage .field-items .control-buttons p {
486 position: absolute;
487 top: 50%;
488 left: 50%;
489 margin: -14px 0 0 -61px;
490 line-height: 1;
491 color: #eee;
492 background-color: #23282d;
493 }
494 #form-preview-stage .field-items .control-buttons i {
495 cursor: pointer;
496 padding: 8px;
497 }
498 #form-preview-stage .field-items .control-buttons i.move {
499 cursor: move;
500 }
501 #form-preview-stage .field-items .control-buttons i:hover {
502 background-color: #0073aa;
503 }
504 #form-preview-stage .field-items:hover .control-buttons {
505 display: block;
506 }
507 #form-preview-stage .field-items.current-editing {
508 background-color: rgba(255, 185, 0, 0.15);
509 }
510 #form-preview-stage .field-items.current-editing.ui-sortable-helper {
511 background-color: #fff;
512 }
513 #form-preview-stage .field-items.ui-sortable-helper {
514 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
515 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
516 }
517 #form-preview-stage .form-preview-stage-dropzone {
518 background-color: rgba(255, 185, 0, 0.3) !important;
519 border: 1px solid #ffb900;
520 height: 50px;
521 }
522 #form-preview-stage .wpuf-submit + .button + .form-preview-stage-dropzone,
523 #form-preview-stage .field-items.empty-list-item + .form-preview-stage-dropzone {
524 display: none;
525 }
526 #form-preview-stage .field-items.empty-list-item {
527 padding: 24px;
528 margin: 0;
529 border: 1px dashed rgba(35, 40, 45, 0.5);
530 }
531 #form-preview-stage .form-preview-stage-dropzone + .field-items.empty-list-item {
532 display: none;
533 }
534 #form-preview-stage .hidden-field-list {
535 border-top: 1px dashed #cccccc;
536 }
537 #form-preview-stage .hidden-field-list h4 {
538 font-weight: 400;
539 font-size: 16px;
540 margin: 12px 0;
541 }
542 #form-preview-stage .hidden-field-list ul li {
543 background-color: #f1f1f1;
544 }
545 .panel-form-field-group {
546 margin-bottom: 15px;
547 }
548 .panel-form-field-group h3 {
549 margin: 0;
550 font-size: 15px;
551 border-bottom: 1px solid #eee;
552 padding-bottom: 10px;
553 cursor: pointer;
554 }
555 .panel-form-field-group h3 i {
556 float: right;
557 }
558 .panel-form-field-group .panel-form-field-buttons {
559 opacity: 1;
560 max-height: 100vh;
561 overflow: hidden;
562 margin: 15px 0 0;
563 }
564 .panel-form-field-group .button {
565 display: block;
566 width: 48%;
567 margin: 0 0 10px 0;
568 float: left;
569 text-align: left;
570 }
571 .panel-form-field-group .button:nth-child(odd) {
572 margin-right: 2%;
573 }
574 .panel-form-field-group .button.button-faded {
575 opacity: .5;
576 }
577 .button.ui-draggable-dragging {
578 margin: 0;
579 text-align: left;
580 }
581 .wpuf-form-builder-field-options .option-fields-section {
582 margin-bottom: 15px;
583 }
584 .wpuf-form-builder-field-options .section-title {
585 margin: 0;
586 font-size: 15px;
587 border-bottom: 1px solid #eee;
588 padding-bottom: 10px;
589 cursor: pointer;
590 }
591 .wpuf-form-builder-field-options .section-title i {
592 float: right;
593 }
594 .wpuf-form-builder-field-options .option-field-section-fields {
595 margin-top: 15px;
596 max-height: 150vh;
597 opacity: 1;
598 }
599 .wpuf-form-builder-field-options .panel-field-opt {
600 margin-bottom: 15px;
601 }
602 .wpuf-form-builder-field-options .panel-field-opt .field-helper-text {
603 color: rgba(35, 40, 45, 0.5);
604 margin-left: 6px;
605 }
606 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="text"],
607 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="number"] {
608 display: block;
609 width: 100%;
610 margin: 5px 0 0;
611 line-height: 1.75;
612 }
613 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > label {
614 display: block;
615 margin-bottom: 5px;
616 }
617 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > ul {
618 margin-top: 0;
619 margin-bottom: 0;
620 }
621 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-select select {
622 width: 100%;
623 height: 32px;
624 margin: 4px 0 0;
625 }
626 .wpuf-form-builder-field-options .panel-field-opt .chosen-select + .chosen-container {
627 margin-top: 10px;
628 }
629 .wpuf-form-builder-field-options .panel-field-opt .label-title-block {
630 display: block;
631 margin-bottom: 3px;
632 }
633 .option-field-option-chooser {
634 margin: 12px 0 0;
635 }
636 .option-field-option-chooser.margin-0 {
637 margin: 0;
638 }
639 .option-field-option-chooser .selector,
640 .option-field-option-chooser .sort-handler,
641 .option-field-option-chooser .label,
642 .option-field-option-chooser .value,
643 .option-field-option-chooser .action-buttons {
644 float: left;
645 }
646 .option-field-option-chooser .selector {
647 width: 25px;
648 }
649 .option-field-option-chooser .selector input {
650 margin-top: 14px;
651 }
652 .option-field-option-chooser .sort-handler {
653 width: 22px;
654 cursor: ns-resize;
655 }
656 .option-field-option-chooser .sort-handler i {
657 margin-top: 14px;
658 font-size: 15px;
659 }
660 .option-field-option-chooser .label {
661 width: 208px;
662 margin-right: 8px;
663 }
664 .option-field-option-chooser.show-value .label,
665 .option-field-option-chooser.show-value .value {
666 width: 100px;
667 margin-right: 8px;
668 }
669 .option-field-option-chooser .header .label,
670 .option-field-option-chooser .header .value {
671 color: #909090;
672 }
673 .option-field-option-chooser .action-buttons {
674 width: 36px;
675 }
676 .option-field-option-chooser .action-buttons i {
677 cursor: pointer;
678 font-size: 16px;
679 margin-top: 13px;
680 }
681 .option-field-option-chooser .plus-buttons {
682 padding: 5px;
683 font-size: 18px;
684 text-align: center;
685 cursor: pointer;
686 border: 1px solid #ccc;
687 width: 61%;
688 margin-left: 14%;
689 }
690 .panel-field-opt-repeater-columns .repeater-columns li > div {
691 float: left;
692 }
693 .panel-field-opt-repeater-columns .repeater-columns .sorter {
694 width: 30px;
695 }
696 .panel-field-opt-repeater-columns .repeater-columns .sorter i {
697 cursor: ns-resize;
698 font-size: 16px;
699 margin-top: 5px;
700 }
701 .panel-field-opt-repeater-columns .repeater-columns .input-container {
702 width: 195px;
703 margin-right: 10px;
704 }
705 .panel-field-opt-repeater-columns .repeater-columns .input-container input {
706 width: 100%;
707 }
708 .panel-field-opt-repeater-columns .repeater-columns .action-buttons {
709 width: 50px;
710 }
711 .panel-field-opt-repeater-columns .repeater-columns .action-buttons i {
712 cursor: pointer;
713 font-size: 16px;
714 padding: 0 3px;
715 margin-top: 4px;
716 }
717 .panel-field-opt-textarea textarea {
718 display: block;
719 width: 100%;
720 margin: 5px 0 0;
721 line-height: 1.75;
722 }
723 .panel-field-html-help-text pre {
724 max-width: 100%;
725 overflow-x: auto;
726 }
727 .panel-field-opt-select .opt-select-element {
728 display: block;
729 max-width: 100%;
730 }
731 ul.wpuf-form li .wpuf-text-editor .wp-editor-wrap {
732 border: 0;
733 }
734 .form-switcher-content {
735 position: absolute;
736 background-color: #f9f9f9;
737 min-width: 160px;
738 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
739 z-index: 9999;
740 margin: 0;
741 }
742 .form-switcher-content li {
743 margin: 0;
744 }
745 .form-switcher-content a {
746 color: black;
747 padding: 12px;
748 text-decoration: none;
749 display: block;
750 text-align: center;
751 }
752 .form-switcher-content a:hover {
753 color: #fff;
754 background-color: #008ec2;
755 }
756 .form-switcher-content a.active {
757 font-weight: bold;
758 color: #fff;
759 background-color: #008ec2;
760 }
761 .insert-photo-icon {
762 vertical-align: text-top;
763 color: #82878c;
764 font-size: 18px;
765 }
766 .password-strength-meter {
767 border-style: solid;
768 border-width: 1px;
769 float: left;
770 margin: 0;
771 padding: 3px 5px;
772 text-align: center;
773 width: 200px;
774 display: block;
775 background-color: #eee;
776 border-color: #ddd;
777 }
778 ul.wpuf-form li .wpuf-password-field {
779 width: 100%;
780 margin-bottom: 10px;
781 }
782 ul.wpuf-form li .wpuf-password-field:after {
783 clear: both;
784 content: "";
785 display: table;
786 }
787 .wpuf-recaptcha-placeholder {
788 width: 304px;
789 }
790 .wpuf-merge-tag-wrap .merge-tag-link {
791 position: absolute;
792 right: 5px;
793 top: 30px;
794 color: #999;
795 text-decoration: none;
796 }
797 .wpuf-merge-tag-wrap .merge-tag-link:hover {
798 color: #555;
799 }
800 .wpuf-merge-tag-wrap .wpuf-merge-tags {
801 max-height: 110px;
802 overflow: hidden;
803 overflow-y: scroll;
804 border: 1px solid #e5e5e5;
805 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.04);
806 display: none;
807 position: absolute;
808 right: 0px;
809 top: 60px;
810 background: #fff;
811 z-index: 1000;
812 min-height: 150px;
813 }
814 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-head {
815 font-weight: bold;
816 background: #f0f0f0;
817 padding: 3px 10px;
818 }
819 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-section ul {
820 margin: 0;
821 padding: 5px 10px;
822 }
823 .wpuf-form-template-modal {
824 background: #fff;
825 position: fixed;
826 top: 5%;
827 bottom: 5%;
828 right: 10%;
829 left: 10%;
830 display: none;
831 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
832 z-index: 160000;
833 }
834 .wpuf-form-template-modal.show {
835 display: block;
836 }
837 .wpuf-form-template-modal * {
838 box-sizing: border-box;
839 }
840 .wpuf-form-template-modal a.close {
841 position: absolute;
842 top: 0;
843 right: 0;
844 font: 300 1.71429em "dashicons" !important;
845 color: #777;
846 content: '\f335';
847 display: inline-block;
848 padding: 10px 20px;
849 z-index: 5;
850 text-decoration: none;
851 height: 50px;
852 cursor: pointer;
853 border-left: 1px solid #ddd;
854 }
855 .wpuf-form-template-modal a.close:hover {
856 background: #eee;
857 opacity: 0.8;
858 text-decoration: none;
859 }
860 .wpuf-form-template-modal a.close:active {
861 background: #eee;
862 opacity: 0.4;
863 }
864 .wpuf-form-template-modal .modal-header {
865 position: absolute;
866 top: 0;
867 left: 0;
868 right: 0;
869 height: 50px;
870 z-index: 4;
871 border-bottom: 1px solid #ddd;
872 padding-left: 15px;
873 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
874 }
875 .wpuf-form-template-modal .modal-header h2 {
876 line-height: 50px;
877 text-align: left;
878 margin-top: 0;
879 color: #5d6d74;
880 font-size: 20px;
881 text-shadow: 0 1px 1px #fff;
882 }
883 .wpuf-form-template-modal .modal-header h2 small {
884 font-weight: normal;
885 font-size: 13px;
886 margin-left: 15px;
887 }
888 .wpuf-form-template-modal .content-container {
889 position: absolute;
890 top: 50px;
891 right: 0;
892 bottom: 50px;
893 left: 0;
894 overflow: auto;
895 padding: 2em 2em;
896 }
897 .wpuf-form-template-modal .content-container.no-footer {
898 bottom: 0;
899 }
900 .wpuf-form-template-modal .content {
901 margin: 0 auto;
902 max-width: 900px;
903 text-align: left;
904 }
905 .wpuf-form-template-modal .content ul {
906 width: 100%;
907 margin: 0;
908 padding: 0;
909 }
910 .wpuf-form-template-modal .content ul li {
911 text-align: center;
912 min-height: 280px;
913 width: 220px;
914 border: 0px;
915 box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
916 position: relative;
917 border-radius: 3px;
918 margin-bottom: 30px;
919 float: left;
920 margin-left: 30px;
921 }
922 .wpuf-form-template-modal .content ul li h3 {
923 margin-top: 0;
924 margin-bottom: 0;
925 border: 0px;
926 background: #1E87B6;
927 padding: 13px;
928 font-weight: normal;
929 font-size: 13px;
930 color: #fff;
931 border-radius: 3px 3px 0px 0px;
932 text-align: left;
933 }
934 .wpuf-form-template-modal .content ul li .title {
935 font-size: 17px;
936 margin: 0 0 10px 0;
937 line-height: 23px;
938 }
939 .wpuf-form-template-modal .content ul li.template-active img,
940 .wpuf-form-template-modal .content ul li.template-inactive img {
941 max-width: 100%;
942 max-height: 211px;
943 }
944 .wpuf-form-template-modal .content ul li .form-middle-text {
945 margin-top: 70px;
946 font-size: 15px;
947 }
948 .wpuf-form-template-modal .content ul li .form-middle-text span.dashicons {
949 font-size: 45px;
950 color: #ddd;
951 margin: 0 auto;
952 width: auto;
953 height: auto;
954 display: block;
955 }
956 .wpuf-form-template-modal .content ul li .form-create-overlay {
957 position: absolute;
958 display: none;
959 }
960 .wpuf-form-template-modal .content ul li .form-create-overlay a.button.button-primary {
961 width: 200px;
962 min-height: 30px;
963 padding: 0;
964 color: #fff;
965 }
966 .wpuf-form-template-modal .content ul li.on-progress:before {
967 content: "\f463";
968 display: inline-block;
969 font: normal 20px/1 'dashicons';
970 color: #f56e28;
971 -webkit-animation: rotation 2s infinite linear;
972 animation: rotation 2s infinite linear;
973 position: absolute;
974 top: 40%;
975 left: 45%;
976 }
977 .wpuf-form-template-modal .content ul li.on-progress a {
978 pointer-events: none;
979 opacity: 0.2;
980 }
981 .wpuf-form-template-modal .content ul li:hover {
982 background: #fff;
983 }
984 .wpuf-form-template-modal .content ul li:hover .form-create-overlay {
985 animation: weFormsFadeIn .25s;
986 padding: 10px;
987 text-align: center;
988 display: flex;
989 flex-direction: column;
990 justify-content: center;
991 background: rgba(0, 0, 0, 0.7);
992 height: 100%;
993 width: 100%;
994 top: 0px;
995 left: 0px;
996 color: #fff;
997 border-radius: 3px;
998 }
999 .wpuf-form-template-modal .content ul li a {
1000 text-decoration: none;
1001 color: #555;
1002 padding: 20px;
1003 display: block;
1004 min-height: 118px;
1005 }
1006 .wpuf-form-template-modal .content ul li .title {
1007 font-size: 17px;
1008 margin: 0 0 10px 0;
1009 line-height: 23px;
1010 }
1011 .wpuf-form-template-modal .content ul li .description {
1012 color: #fff;
1013 }
1014 .wpuf-form-template-modal .content ul li:nth-child(3n+1) {
1015 margin-left: 0;
1016 clear: both;
1017 }
1018 .wpuf-form-template-modal .content ul li.template-inactive .title,
1019 .wpuf-form-template-modal .content ul li.template-inactive .description {
1020 color: #ddd;
1021 }
1022 .wpuf-form-template-modal .content ul li.blank-form {
1023 text-align: center;
1024 }
1025 .wpuf-form-template-modal .content ul li.blank-form span {
1026 display: block;
1027 }
1028 .wpuf-form-template-modal .content ul li.blank-form span.dashicons {
1029 font-size: 45px;
1030 color: #ddd;
1031 margin: 0 auto;
1032 width: auto;
1033 height: auto;
1034 }
1035 .wpuf-form-template-modal footer {
1036 position: absolute;
1037 left: 0;
1038 bottom: 0;
1039 width: 100%;
1040 padding: 12px 20px;
1041 border-top: 1px solid #ddd;
1042 background: #fff;
1043 text-align: left;
1044 }
1045 .wpuf-form-template-modal-backdrop {
1046 position: fixed;
1047 z-index: 159999;
1048 top: 0;
1049 left: 0;
1050 right: 0;
1051 bottom: 0;
1052 min-height: 360px;
1053 background: #000;
1054 opacity: .7;
1055 display: none;
1056 }
1057 .wpuf-form-template-modal-backdrop.show {
1058 display: block;
1059 }
1060 /* Smartphones (portrait and landscape) ----------- */
1061 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
1062 .wpuf-form-template-modal .modal-header h2 small {
1063 display: none;
1064 }
1065 .wpuf-form-template-modal .content ul li {
1066 float: none;
1067 width: 100%;
1068 margin-left: 0;
1069 }
1070 }
1071 .wpuf-toggle-switch {
1072 cursor: pointer;
1073 text-indent: -9999px;
1074 width: 25px;
1075 height: 15px;
1076 background: #ccc;
1077 display: block;
1078 border-radius: 100px;
1079 position: relative;
1080 }
1081 .wpuf-toggle-switch:after {
1082 content: '';
1083 position: absolute;
1084 top: 2px;
1085 left: 2px;
1086 width: 12px;
1087 height: 12px;
1088 background: #fff;
1089 border-radius: 50%;
1090 transition: 0.3s;
1091 }
1092 .wpuf-toggle-switch.checked {
1093 background: #0085ba;
1094 }
1095 .wpuf-toggle-switch.checked:after {
1096 left: calc(90%);
1097 transform: translateX(-100%);
1098 }
1099 .wpuf-toggle-switch.big {
1100 width: 35px;
1101 height: 20px;
1102 }
1103 .wpuf-toggle-switch.big:after {
1104 top: 3px;
1105 left: 3px;
1106 width: 15px;
1107 height: 15px;
1108 }
1109 .wpuf-toggle-switch.big.checked:after {
1110 left: calc(95%);
1111 }
1112 .wpuf-integrations-wrap:before,
1113 .wpuf-integrations-wrap:after {
1114 content: " ";
1115 display: table;
1116 }
1117 .wpuf-integrations-wrap:after {
1118 clear: both;
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 .wpuf-integration {
1129 margin-bottom: 15px;
1130 background-color: #fff;
1131 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1132 border: 1px solid #e5e5e5;
1133 }
1134 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header {
1135 padding: 0;
1136 position: relative;
1137 margin: 0 auto;
1138 border-bottom: 1px solid #eee;
1139 display: flex;
1140 flex-direction: row;
1141 }
1142 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-toggle {
1143 width: 65px;
1144 padding: 10px 10px 8px 14px;
1145 border-right: 1px solid #eee;
1146 margin-right: 10px;
1147 }
1148 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label {
1149 width: 100%;
1150 padding-top: 10px;
1151 font-weight: 500;
1152 font-size: 1.1em;
1153 }
1154 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label img.icon {
1155 height: 24px;
1156 width: auto;
1157 float: left;
1158 margin-top: -3px;
1159 margin-right: 5px;
1160 border: 1px solid #eee;
1161 border-radius: 50%;
1162 }
1163 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label .label-premium {
1164 font-weight: normal;
1165 font-size: 11px;
1166 background: #7cbb34;
1167 color: #fff;
1168 border-radius: 3px;
1169 padding: 3px 5px;
1170 margin-left: 5px;
1171 }
1172 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions {
1173 width: 44px;
1174 display: block;
1175 }
1176 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions button.toggle-area {
1177 border: none;
1178 border-left: 1px solid #eee;
1179 background-color: #fff;
1180 width: 100%;
1181 height: 100%;
1182 outline: none;
1183 }
1184 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1185 content: "\f140";
1186 content: "\f142";
1187 display: inline-block;
1188 font: normal 20px/1 dashicons;
1189 speak: none;
1190 -webkit-font-smoothing: antialiased;
1191 -moz-osx-font-smoothing: grayscale;
1192 text-decoration: none !important;
1193 }
1194 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-settings {
1195 display: none;
1196 }
1197 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1198 content: "\f140";
1199 }
1200 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings {
1201 padding: 15px;
1202 }
1203 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings p:first-child {
1204 margin-top: 0;
1205 }
1206 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row {
1207 margin-bottom: 10px;
1208 }
1209 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:before,
1210 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1211 content: " ";
1212 display: table;
1213 }
1214 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1215 clear: both;
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 .wpuf-int-field-label {
1226 float: left;
1227 width: 160px;
1228 }
1229 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater {
1230 text-decoration: none;
1231 float: right;
1232 margin-right: 10px;
1233 }
1234 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater.updating .dashicons:before {
1235 display: inline-block;
1236 -webkit-animation: rotation 2s infinite linear;
1237 animation: rotation 2s infinite linear;
1238 }
1239 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field {
1240 float: left;
1241 width: 80%;
1242 position: relative;
1243 }
1244 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-int-field-small {
1245 max-width: 350px;
1246 position: relative;
1247 }
1248 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .merge-tag-link {
1249 top: 5px;
1250 }
1251 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .wpuf-merge-tags {
1252 top: 30px;
1253 }
1254 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset {
1255 border: 1px solid #eee;
1256 padding: 10px;
1257 margin-bottom: 10px;
1258 }
1259 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset legend {
1260 padding: 0 10px;
1261 }
1262