PluginProbe
Smart Forms – when you need more than just a contact form / trunk
Smart Forms – when you need more than just a contact form vtrunk
trunk 0.5 0.5.5 0.6 0.7 0.8 0.8.5 0.9.1
smart-forms / css / mainStyle.css

mainStyle.css in Smart Forms – when you need more than just a contact form trunk, at css/mainStyle.css

714 lines 13.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1
2
3 #rednaoSmartForms hr {
4 margin-right: 5px;
5 margin-top: 1px;
6 margin-bottom: 1px;
7 }
8
9 #rednaoSmartForms h2 {
10 margion-top: 0px;
11 margin-bottom: 0px;
12 }
13
14 #rednaoSmartForms .category {
15 margin-top: 10px;
16 margin-left:50px;
17
18 }
19
20 #rednaoSmartForms .description {
21 }
22
23 #rednaoSmartForms input {
24
25 }
26
27
28
29 #rednaoSmartForms .treeDiv{
30 cursor: hand;
31 cursor: pointer;
32 }
33
34
35 #rednaoSmartForms .treeButton{
36
37 display:inline;
38
39 }
40
41 #rednaoSmartForms .treeDiv h2{
42
43 display:inline;
44 font-family: verdana;
45
46
47
48 }
49
50 #rednaoSmartForms .description{
51 color:#A0A0A0;
52 font-family: helvetica;
53 font-size: smaller;
54 font-style: italic;
55 }
56
57
58 .rednaoformbuilder .tempForm,.tutorialDraggedelement .tempForm {
59 padding: 8px 4px !important;
60 border: 1px dotted #ccc !important;
61 position: absolute !important; background: white !important;
62 box-shadow: 0 0 30px #999 !important;
63 -webkit-transition:
64 -webkit-transform .1s ease-out !important;
65 overflow: hidden !important;
66 width:570px !important;
67 z-index: 99999 !important;
68 }
69
70
71 .SmartFormsElementSelected{
72 position:relative;
73 }
74
75
76 .smartFormsActionMenu{
77 position: absolute;
78 right:1px;
79 top:1px;
80
81 }
82 .smartFormsActionMenu img{
83 width:20px;
84 height:20px;
85 margin-right: 5px;
86 cursor: hand;
87 cursor: pointer;
88
89 }
90
91 .formelement.last{
92 border-color: #dedede;
93 border-style: solid;
94 border-width: 5px;
95 }
96
97 .formelement.last p{
98 text-align: center;
99 font-family: sans-serif;
100 font-size: 30px;
101 color: gray;
102 }
103
104 #sfSavedConditionList{
105 text-align: center !important ;
106 }
107
108 .rednao-properties-control-label{
109 margin-right: 5px;
110 }
111
112 .listOfItems td,.listOfItems th{
113 padding-right: 5px;
114 }
115
116 #formSettingsScrollArea{
117 -webkit-box-sizing: content-box;
118 -moz-box-sizing: content-box;
119 /* box-sizing: content-box; */
120 }
121
122 .smartFormsSettingsButton {
123 -moz-box-shadow: inset 0px 1px 0px 0px #f5978e;
124 -webkit-box-shadow: inset 0px 1px 0px 0px #f5978e;
125 box-shadow: inset 0px 1px 0px 0px #f5978e;
126 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
127 background: -moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
128 background: -webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
129 background: -o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
130 background: -ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
131 background: linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
132 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
133 background-color: #f24537;
134 -moz-border-radius: 6px;
135 -webkit-border-radius: 6px;
136 border-radius: 6px;
137 border: 1px solid #d02718;
138 display: inline-block;
139 cursor: pointer;
140 color: #ffffff !important;
141 font-family: arial;
142 font-size: 15px;
143 font-weight: bold;
144 padding: 6px 24px;
145 text-decoration: none;
146 text-shadow: 0px 1px 0px #810e05;
147 }
148
149 .sfConditionRow td{
150 padding-right: 5px;
151 }
152
153 #smartFormsAfterSubmitDiv input[type=checkbox]
154 {
155 margin-top: 0px;
156 }
157
158 #smartFormsGeneralDiv .rednao-control-group{
159 cursor:pointer;
160 cursor:hand;
161 }
162
163 .rnMSRemoveStep{
164 position:absolute !important;
165 top:0 !important;
166 left:4px !important;
167 z-index:1000 !important;
168 color:lightgray !important;
169 }
170
171 .rnMSRemoveStep:hover{
172 color:#d43f3a !important;
173 }
174 #redNaoSmartFormsPlaceHolder{
175 clear:both;
176 }
177
178
179 .rednaotablist
180 {
181 float:left;
182 }
183
184 .rednaotablist .component
185 {
186 float:left;
187 width:100%;
188 }
189
190 #smartFormsGeneralDiv #target{
191 width:100%;
192 }
193
194 .formelement.last
195 {
196 clear:both;
197 }
198
199 .sfAddIcon{
200 color:#ccc;
201 }
202
203
204 .sfAddIcon:hover,
205 .sfAddIcon.sfSelected{
206 color:#428bca;
207 }
208
209 .sfActionIcon{
210 cursor:hand;
211 cursor:pointer;
212 }
213
214 .sfActionIcon:hover{
215 color:#ff0000;
216 -webkit-transition: color ease-in-out 0.15s;
217 -o-transition: color ease-in-out 0.15s;
218 transition: color ease-in-out 0.15s;
219 }
220
221 .bootstrap-wrapper .sfDelete:hover{
222 color:red;
223
224 }
225
226 .bootstrap-wrapper .sfConditionLogic:hover{
227 color:blue;
228
229 }
230
231 .bootstrap-wrapper .modal-content{
232 max-height: 700px;
233 overflow-y: auto;
234 overflow-x: hidden;
235 }
236
237 .sfHelpIconContainer{
238 padding: 10px;
239 -webkit-border-top-left-radius: 20px;
240 -webkit-border-bottom-left-radius: 20px;
241 -moz-border-radius-topleft: 20px;
242 -moz-border-radius-bottomleft: 20px;
243 border-top-left-radius: 20px;
244 border-bottom-left-radius: 20px;
245 cursor:hand;
246 cursor:pointer;
247 }
248
249 .sfHelpContent{
250 width: 400px;
251 background-color: white;
252 height: 100%;
253 -webkit-border-bottom-left-radius: 20px;
254 -moz-border-radius-bottomleft: 20px;
255 border-bottom-left-radius: 20px;
256 }
257
258 .sfHelper{
259 width:auto !important;
260 }
261
262 .smartFormsSlider .ui-widget-overlay{
263 z-index: 1000001 !important;
264 }
265
266 .select2-drop{
267 z-index: 2000005 !important;
268 }
269
270 .select2-drop-mask{
271 z-index: 1000003 !important;
272 }
273
274 .smartFormsSlider .ui-dialog {
275 z-index: 1000002 !important;
276 }
277
278 #redNaoEmailEditor{
279 z-index: 1000008 !important;
280 }
281
282 .smartFormsSlider .ui-dialog-titlebar-close:before{
283 content:normal;
284 }
285
286 .licenseDiv .ui-dialog{
287 z-index:2000000 !important;
288 }
289
290 .smartFormsFieldPickerOverlay.smartFormsSlider .ui-widget-overlay {
291 z-index: 1000001 !important;
292 }
293
294 .mce-floatpanel,.mce-tooltip{
295 z-index: 1000010 !important;
296 }
297
298
299
300 #mce-modal-block{
301 z-index: 1000009 !important;
302 }
303
304 .bootstrap-wrapper .modal{
305 z-index:1000008 !important;
306 }
307
308 #smartFormName{
309 border:1px solid transparent;
310 border-bottom:1px solid #dfdfdf;
311 font-weight: bold;
312 font-size: 30px;
313 }
314
315 .bootstrap-wrapper .rednao-control-group{
316 position: relative !important;
317 }
318
319 #formBuilderComponents li, #formBuilderComponents li a{
320 cursor:pointer !important;
321 user-select: none;
322 }
323
324 #smartFormName:hover{
325 border: #007cba 1px solid;
326 }
327
328
329 #ExitButton,.faqIcon{
330 transition: color 200ms ease-in-out;
331 }
332
333 #ExitButton:hover,.faqIcon:hover{
334 color:red;
335 cursor: pointer;
336 }
337
338 .sfNotReceivingEmail{
339 color:blue;
340 text-decoration: underline;
341 }
342
343 .sfLabelLayoutContainer .tooltip-inner{
344 max-width: 420px;
345 }
346
347 .sfDragRuller{
348 border:1px;
349 border-color:red;
350 border-style: dashed;
351 width:50px;
352 position: absolute;
353 z-index: 1000000;
354 -webkit-transition: top 200ms ease-out,width 200ms ease-out,height 200ms ease-out,left 200ms ease-out,opacity 200ms ease-out;;
355 -moz-transition: top 200ms ease-out,width 200ms ease-out,height 200ms ease-out,left 200ms ease-out,opacity 200ms ease-out;
356 -ms-transition: top 200ms ease-out,width 200ms ease-out,height 200ms ease-out,left 200ms ease-out, opacity 200ms ease-out;;
357 -o-transition: top 200ms ease-out,width 200ms ease-out,height 200ms ease-out,left 200ms ease-out,opacity 200ms ease-out;;
358 transition: top 200ms ease-out,width 200ms ease-out,height 200ms ease-out,left 200ms ease-out,opacity 200ms ease-out;;
359 }
360
361 .rnTemporalHidden {
362 position: absolute !important;
363 visibility: hidden;
364 }
365
366
367 .rednaoformbuilder .sfInvalidDrop input,.sfInvalidDrop, .sfInvalidDrop label{
368 cursor:no-drop !important;
369 }
370
371
372
373 .sfcustomtab{
374 cursor: pointer;
375 user-select: none;
376 }
377
378 .sfTemplateItem .sfImage{
379
380 height: 280px;
381 }
382
383 .sfTemplateItem:hover{
384 box-shadow: 5px 5px 2px #888888;
385 }
386
387 .sfTemplateItem h2{
388 margin:0;
389 font-size: 20px;
390 }
391
392 .sfPreviewButton{
393 position:absolute;
394 top:0;
395 width:100%;
396 background-color: #82b541;
397 color:white;
398 -webkit-border-top-left-radius: 25px;
399 -webkit-border-top-right-radius: 25px;
400 -moz-border-radius-topleft: 25px;
401 -moz-border-radius-topright: 25px;
402 border-top-left-radius: 25px;
403 border-top-right-radius: 25px;
404 font-size: 15px;
405 height: 20px;
406 top:-20px;
407 -webkit-transition: top 200ms ease-out;
408 -moz-transition: top 200ms ease-out;
409 -ms-transition: top 200ms ease-out;
410 -o-transition: top 200ms ease-out;
411 transition: top 200ms ease-out;
412 cursor:zoom-in;
413
414 }
415
416 .sfTemplateItem:hover .sfPreviewButton{
417 top:0;
418 }
419
420
421 .sfStyleTitle,.sfPropertyTytle{
422 background-color:#f7f7f9;
423 padding:3px;
424 border-style: solid;
425 border-width: 1px;
426 border-color: #e5e5e5;
427 }
428
429 .sfStyleTitle a,.sfPropertyTytle a{
430 padding-left: 5px;
431 outline: 0 !important;
432 box-shadow: none;
433 text-decoration: none;
434
435 }
436
437 .sfStyleTitle a.collapsed .sfAccordionIcon,.sfPropertyTytle a.collapsed .sfAccordionIcon{
438 transform:rotate(0deg);
439 }
440
441 .sfStyleTitle a .sfAccordionIcon,.sfPropertyTytle a .sfAccordionIcon{
442 transform:rotate(90deg);
443 }
444
445 .sfStyleContainer, .sfPropertyContainer{
446 padding:5px;
447 border-color: #eee;
448 border-style: solid;
449 border-width: 1px;
450 }
451
452 .sfBorder:focus{
453 background-color:inherit !important;
454
455 }
456
457 .sfBorder.active:focus{
458 background-color: #e6e6e6 !important;
459 }
460
461 .sfBorder:active{
462 background-color: #f1f1f1 !important;
463 }
464
465 .fieldContainerOfFields{
466 border-color:#aaaaaa !important;
467 border-style: dashed !important;;
468 border-width: 2px !important;;
469 min-height: 50px !important;;
470 }
471
472 .fieldContainerOfFields.fieldEdition{
473 border-color:#940000 !important;
474 }
475
476 .fieldContainerOfFields{
477 padding:6px;
478 padding-bottom:6px;
479 }
480
481 #redNaoFormulaTextArea{
482 border-color: #dfdfdf;
483 border-style: solid;
484 border-width: 1px;
485 }
486
487
488 #redNaoFormulaTextArea:focus{
489 border-color: #66afe9;
490 outline: 0;
491 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
492 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
493 }
494
495 .sfFormulaElementToShow:focus{
496 outline: none !important;
497 }
498
499 body{
500 line-height:1.8em;
501 }
502
503 .CodeMirror.cm-s-default{
504 border-color:#dfdfdf;
505 border-width: 1px;
506 border-style: solid;
507 }
508
509 .bootstrap-wrapper .CodeMirror{
510 opacity:0;
511 }
512
513
514 .smartFromsFieldInFormula {
515 background-color: #dfdfdf;
516 font-weight: bold;
517 padding-left: 5px;
518 padding-right: 5px;
519 margin-left: 3px;
520 margin-right: 3px;
521 border-color: #afafaf;
522 border-style: solid;
523 border-width: 1px;
524 text-overflow: ellipsis;
525 max-width: 10px;
526 }
527
528 #sfFormulaSearch{
529 width:100%;
530 -webkit-border-radius: 20px;
531 -moz-border-radius: 20px;
532 border-radius: 20px;
533 padding-left:26px;
534
535 }
536
537 .CodeMirror-placeholder{
538 color:#999 !important;
539 }
540
541 .sfFormulaLabel{
542 font-weight: bold;
543 }
544
545 .sfFormulaLabel2{
546 font-weight: normal;
547 font-style: italic;
548 }
549
550 .sfFormulaDescription{
551 display: block;
552 font-size: 12px;
553 color:#909090;
554
555 }
556
557 .sfFormulaMethod{
558 color:#4D80E6;
559 }
560
561 .sfFormulaFixedValue{
562 color:#1A4DB3;
563 }
564
565 #emailControls td{
566 padding-top:5px;
567 }
568
569 .bootstrap-wrapper #emailTabs {
570 border-bottom: 1px solid #7f7f7f;
571 }
572
573 .bootstrap-wrapper #emailTabs > li.active > a {
574
575 border: 1px solid #7f7f7f;
576 border-bottom-color: transparent;
577 }
578
579 #emailTabs a{
580 cursor:pointer;
581 outline:none !important;
582 box-shadow: none !important;
583 -webkit-transition: background-color 400ms ease-out, border-color 400ms ease-out;
584 -moz-transition: background-color 400ms ease-out, border-color 400ms ease-out;
585 -ms-transition: background-color 400ms ease-out, border-color 400ms ease-out;
586 -o-transition: background-color 400ms ease-out, border-color 400ms ease-out;
587 transition: background-color 400ms ease-out, border-color 400ms ease-out;
588
589 }
590
591 .emailTabItem .sfCloseButton{
592 font-size: 10px;
593 }
594
595 .sfCloseButton{
596 position: absolute !important;
597 z-index: 1 !important;
598 right: 1px !important;
599 top: 1px !important;
600 color: black !important;
601 cursor: pointer;
602 transition: opacity ease-in-out 0.200s,color ease-in-out 0.200s;
603 opacity: 0;
604 }
605
606 .sfCloseButton:hover{
607 opacity: 1 !important;
608 }
609
610 .emailTabItem:hover .sfCloseButton{
611 opacity: .2;
612 }
613
614
615
616
617
618 .tutorialBox,.tutorialTitle {
619 position: absolute;
620 background: #d51313;
621 border: 2px solid #f5f5f5;
622 max-width:400px;
623 min-height: 40px;
624 font-family: 'Terminal Dosis', sans-serif;
625 padding:5px;
626 color:white;
627 font-size: 20px;
628 display: flex;
629 align-items: center;
630 justify-content: center;
631 }
632 .tutorialBox:after, .tutorialBox:before {
633 border: solid transparent;
634 content: " ";
635 height: 0;
636 width: 0;
637 position: absolute;
638 pointer-events: none;
639 }
640
641 .tutorialBox:after {
642 border-color: rgba(213, 19, 19, 0);
643 border-width: 15px;
644 }
645 .tutorialBox:before {
646 border-color: rgba(245, 245, 245, 0);
647 border-width: 18px;
648 }
649
650 /*right*/
651 .tutorialBox.BoxRight:after, .tutorialBox.BoxRight:before {
652 right: 100%;
653 top: 50%;
654 }
655
656 .tutorialBox.BoxRight:after{
657 border-right-color: #d51313;
658 margin-top: -15px;
659 }
660
661 .tutorialBox.BoxRight:before{
662 margin-top: -18px;
663 border-right-color: #f5f5f5;
664 }
665
666 /*bottom*/
667 .tutorialBox.BoxBottom:after, .tutorialBox.BoxBottom:before {
668 bottom: 100%;
669 left: 50%;
670 }
671
672
673 .tutorialBox.BoxBottom:after{
674 border-bottom-color: #d51313;
675 margin-left: -15px;
676 }
677
678 .tutorialBox.BoxBottom:before{
679 border-bottom-color: #f5f5f5;
680 margin-left: -18px;
681 }
682
683 .bootstrap-wrapper #smartFormsAfterSubmitDiv.table-striped > tbody > tr:nth-child(even) > td,.bootstrap-wrapper #smartFormsAfterSubmitDiv th{
684 background-color: rgb(241, 241, 241);
685 }
686
687 .bootstrap-wrapper .tooltip-inner {
688 white-space: normal;
689 }
690
691 .select2-search-field:first-child{
692 width:100%;
693 }
694
695 .conditionalMode{
696 cursor:pointer;
697 color:#afafaf;
698 transition: color ease-in-out 0.2s;
699 }
700
701 .conditionalSelected{
702 cursor:pointer;
703 color:#08c;
704 }
705
706 #formBuilderContainer .component{
707 padding:3px;
708 transition: background-color 200ms ease-in-out;
709 }
710
711
712 #formBuilderContainer .component:hover{
713 background-color:#e4f1fe;
714 }