PluginProbe
Smart Grid-Layout Design for Contact Form 7 / 4.5
Smart Grid-Layout Design for Contact Form 7 v4.5
4.18.0 4.17.0 3.2.0 3.2.1 3.3.0 3.3.1 3.3.2 3.3.3 3.3.4 3.3.5 3.3.6 3.3.7 3.3.8 4.0.0 4.0.1 4.1.0 4.1.1 4.1.2 4.1.3 4.1.4 4.10 4.11 4.12 4.13 4.14 All 119 releases
cf7-grid-layout / admin / css / cf7-grid-layout-post.css

cf7-grid-layout-post.css in Smart Grid-Layout Design for Contact Form 7 4.5, at admin/css/cf7-grid-layout-post.css

657 lines 16.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #editors, #contact-form-editor {position: relative;}
2 #optional-editors {
3 display: inline-block;
4 position: absolute;
5 margin-top: 8px;
6 z-index:2;
7 }
8 *[dir="rtl"] #optional-editors {left: 0}
9 .codemirror-theme label:hover {
10 font-weight: bold;
11 }
12 .codemirror-theme label {
13 z-index: 10;
14 position: relative;
15 }
16 #contact-form-editor .loading-screen{position:absolute;z-index: 100; padding: 100px 5px 850px 5px; width: calc(100% - 10px); background-color: white; text-align: center}
17 #contact-form-editor .loading-screen h2{font-size: 20px}
18 #contact-form-editor .loading-screen .spinner{visibility: visible; float:none}
19 #contact-form-editor .loading-screen .js-error p {text-align: left;font-size: 15px}
20 #contact-form-editor .loading-screen .error {color: #b90101}
21 #optional-editors a.button {font-weight: bold;}
22 #js-tags > li.show-events:not(#last-item) {
23 display: inline-block;
24 vertical-align: top;
25 border: solid 2px #007cba;
26 background: white;
27 padding: 5px 8px;
28 border-radius: 3px;
29 }
30 #last-item {
31 display: inline-block;
32 margin-top: 5px;
33 margin-left: 3px;
34 }
35 #js-tags > li:hover > span {
36 transform: rotate(90deg);
37 display: inline-block;
38 }
39 #js-tags > li > span {
40 font-weight:bold;
41 transition: 0.2s ease-out;
42 padding: 0 5px;
43 }
44 #js-tags > li > ul {display: none;}
45 #js-tags > li > ul>li {margin:0;}
46 #js-tags > li:hover > ul {
47 display: block;
48 position: absolute;
49 background: white;
50 padding: 5px 8px;
51 border: solid 1px;
52 border-radius: 3px;
53 z-index: 100;
54 }
55 #js-tags > li:hover > ul > li:hover{position: relative}
56 #js-tags > li:hover > ul > li:hover > span > span{
57 display:block;
58 position: absolute;
59 background: white;
60 padding: 5px 8px;
61 border: solid 1px;
62 border-radius: 3px;
63 z-index: 20;
64 width: 225px;
65 left: 4px;
66 top: -3px;
67 font-style: italic;
68 }
69
70 /* @since 4.4 .cf7sg-slider-section .cf7sg-collapsible .collapsible-row-label,
71 .cf7sg-accordion-rows .cf7sg-collapsible .collapsible-row-label, */
72 .columns.cf7sg-slider-section, .columns.cf7sg-accordion-rows {box-shadow: 0 0 6px #6a0080;}
73 .columns:not(.full) + .row-controls .grid-controls .make-grid{display:inline-block;}
74 .columns.full > .container:not(.cf7sg-collapsible) > .row:not(.cf7-sg-table) > .columns:not(.full) + .row-controls .grid-controls .make-grid,
75 .button.make-grid.display-none,
76 .display-none, #js-tags > li.display-none:not(.show-events) {display: none;}
77 .enable-grouping.grid-column > .grid-controls .grouping-option {
78 display: inline-block;
79 }
80 .codemirror-theme {
81 position: absolute;
82 top: -26px;
83 padding: 2px 0 2px 5px;
84 background: #eae9e9;
85 width: calc( 100% - 313px);
86 }
87 .codemirror-theme span.file {
88 margin-left: 10px;
89 vertical-align: middle;
90 background: #f7ecb1;
91 padding: 4px 8px;
92 color: black;
93 max-width: calc( 100% - 216px );
94 display: inline-block;
95 overflow-x: hidden;
96 height: 20px;
97 }
98 #cf7-codemirror,#cf7-js-codemirror,#cf7-css-codemirror {position: relative;}
99 label.accordion-label:hover + span.popup{display: inline;
100 position: absolute;
101 background: white;
102 margin-left: 6px;
103 width: 200px;
104 border: solid 1px gray;
105 border-radius: 3px;
106 padding: 1px 5px;}
107 #grid-form .js-help + .cf7sg-helper-list{margin-top:39px;}
108 span.js-icon.column-control{
109 background-image: url('./image/js-sprite.png');
110 width: 13px;
111 display: inline-block;
112 height: 10px;
113 background-size: 200%;
114 margin-top: 4px;}
115 .js-icon.column-control:hover {background-position-x: 13px;}
116 span.php-icon.column-control{
117 background-image: url('./image/php-sprite.png');
118 width: 26px;
119 display: inline-block;
120 height: 13px;
121 background-size: 200%;
122 margin-top: 2px;}
123 .php-icon.column-control:hover {background-position-x: 26px;}
124 a.helper {text-decoration: none;cursor: pointer;}
125 a.helper + span.helper {
126 display: none;
127 position: absolute;
128 background: white;
129 border: solid 1px;
130 padding: 2px;
131 margin-top: -25px;
132 color: black;
133 }
134 .helper .tag-colour { font-weight: bold;}
135 a.helper:hover + span.helper {display: inline;}
136 .wp-pointer-buttons a.close {
137 margin: 5px 0 0 20px;
138 }
139 #ajax-response.error-msg{
140 color:red;
141 }
142 #full-screen-cf7 {
143 position: absolute;
144 top: -39px;
145 left: 160px;
146 z-index: 100;
147 }
148 #full-screen-cf7.full-screen {
149 position: absolute;
150 top: auto;
151 left: auto;
152 right: 0;
153 bottom: -58px;
154 }
155 *[dir="rtl"] #full-screen-cf7.full-screen {
156 right: auto;
157 left: 0;
158 }
159 #cf7sg-editor.full-screen {
160 top: 5px;
161 z-index: 10;
162 position: fixed;
163 overflow: auto;
164 height: 100%;
165 margin-left: -15px;
166 right:0;
167 width: calc( 100% - 170px);
168 }
169 .folded #cf7sg-editor.full-screen{
170 width: calc( 100% - 46px);
171 }
172 #form-editor-tabs ul.ui-tabs-nav {
173 border-bottom: 1px solid #ddd;
174 padding: 7px 0px 0 3px;
175 margin: 0;
176 min-width: 100%;
177 text-align: right;
178 z-index: 1;
179 position: relative;
180 }
181 #form-editor-tabs ul li.ui-state-disabled:first-child {
182 display: none;
183 }
184 #form-editor-tabs ul.ui-tabs-nav > li {
185 display: inline-block;
186 border: solid 1px #ddd;
187 padding: 3px 7px;
188 background-color: #d1d1d1;
189 margin: 0 0px -1px;
190 border-top-left-radius: 3px;
191 }
192 #form-editor-tabs ul.ui-tabs-nav > li.ui-tabs-active {
193 background: #f5f5f5;
194 border-bottom: none;
195 }
196 .tagsdiv .tagchecklist > span {
197 display: block;
198 margin: 0;
199 clear: both;
200 line-height: 15px;
201 }
202 .tagsdiv .tagchecklist button.ntdelbutton{
203 display:none;
204 }
205 .cf7sg-dynamic-list p.the-tagcloud a {
206 display: block;
207 line-height: 15px;
208 font-size: 13px !important;
209 text-decoration: none;
210 color: #669;
211 cursor:default;
212 }
213 #poststuff .cf7sg-dynamic-list p.the-tagcloud {
214 border: none;
215 padding: 0;
216 margin-left: 14px;
217 margin-top:0;
218 }
219 .cf7sg-dynamic-list button.tagcloud-link {
220 display: none;
221 }
222 .cf7sg-dynamic-list .hide-if-no-js {
223 margin-top: 0;
224 }
225 /*
226 grid layout
227 */
228 #html-script, #grid-col, #grid-helper,#grid-js-helper,
229 #grid-form .grid-controls,
230 #grid-form .row-controls .dashicons-no-alt,
231 #grid-form .grid-column > .dashicons-no-alt,
232 #grid-row, #grid-collapsible, #grid-tabs, .cf7-sg-hidden,
233 #grid-collapsible-with-toggle,
234 #grid-cf7-forms,
235 #grid-form .cf7sg-external-form-content,
236 #grid-form .table-row-button {
237 display: none;
238 }
239 /* footer table special styling */
240 #grid-form .row.cf7-sg-table .row-controls label.table-row-button {
241 display: block;
242 text-align: center;
243 }
244 #grid-form .cf7-sg-table-footer .row {
245 min-height: 66px;
246 }
247 .cf7-sg-table-footer .cf7-field-label.cf7-field-inner,
248 .cf7-sg-table-footer .cf7-field-type.cf7-field-inner,
249 .cf7-sg-table-footer .dashicons-move.row-control,
250 .cf7-sg-table-footer .button.make-grid.column-control,
251 .cf7-sg-table-footer .button.external-form {
252 display: none;
253 }
254 .cf7-sg-table-footer .cf7-field-tip.cf7-field-inner {
255 height: 42px;
256 }
257 #grid-form .form-select {
258 display: block;
259 margin: 0 auto;
260 }
261 #grid-form .form-controls {
262 position: relative;
263 padding: 22px;
264 }
265 #grid-form .cf7sg-external-form {
266 border: solid 1px #777;
267 background-color: #ddd;
268 margin: 3px 0;
269 border-radius: 3px;
270 }
271 textarea.grid-input {
272 width: 100%;
273 min-height: 65px;
274 }
275 #grid-form .grid-controls {
276 position: absolute;
277 background: #f1f1f1;
278 padding: 5px;
279 border: solid 1px grey;
280 width: 137px;
281 z-index:1008;
282 }
283 #grid-form .container,
284 #grid-form .table-row-button input {
285 max-width: 100%;
286 }
287 #cf7-codemirror .CodeMirror,
288 #cf7-js-codemirror .CodeMirror,
289 #cf7-css-codemirror .CodeMirror {
290 height: calc( 100vh - 180px);
291 }
292 #grid-form .row.cf7-sg-table {
293 box-shadow: 0px 0px 4px #920a03;
294 }
295 #grid-form .grid-column {
296 background-color: #ddd;
297 }
298 #grid-form .dashicons:hover{
299 cursor:pointer;
300 color: blue;
301 }
302 #grid-form .dashicons{
303 clear:both;
304 }
305 #grid-form .columns {
306 border-top: solid 2px #ddd;
307 border-bottom: solid 2px #ddd;
308 }
309 #grid-form .columns.column-selected {
310 border-bottom-color: #0055d4;
311 border-top-color: #0055d4;
312 }
313 #grid-form .container {
314 padding: 0;
315 border: solid 1px #d7d7d7;
316 margin-top: 5px;
317 border-radius: 3px;
318 }
319 #grid-form .row {
320 padding: 4px 20px 4px 4px;
321 position: relative;
322 min-height: 90px;
323 }
324 #grid-form .row-controls{
325 position: absolute;
326 top:0;
327 right: 0;
328 width: 20px;
329 display: inline-block;
330 height: 100%;
331 background: #606060;
332 border-top-right-radius: 3px;
333 border-bottom-right-radius: 3px;
334 }
335 #grid-form .row-controls .grid-controls {
336 position: absolute;
337 top: 20px;
338 right: 0px;
339 text-align: right;
340 }
341 #grid-form .cf7sg-tag-dynamic_select:last-child {
342 margin: 0;
343 }
344 #grid-form .cf7sg-helper-list {
345 margin: 0;
346 margin-top: 22px;
347 padding: 2px 5px 8px 5px;
348 background: white;
349 }
350 #grid-form .php-icon {
351 position: relative;
352 }
353 #grid-form .php-icon + div.helper-popup,
354 #grid-form .js-icon + div.helper-popup {
355 position: absolute;
356 z-index: 9;
357 background: #d8d8d8;
358 border: solid 1px #787878;
359 width: 300px;
360 }
361 #grid-form .helper-popup p {
362 margin: 0;
363 position: absolute;
364 top: 0;
365 left: 0;
366 text-align: center;
367 width: 100%;
368 }
369 #grid-form .helper-popup .dashicons.dashicons-no-alt {
370 position: absolute;
371 right: -9px;
372 top: -8px;
373 background: white;
374 border-radius: 50%;
375 z-index: 9;
376 }
377 #grid-form .helper-popup .helper{
378 position: relative;
379 }
380 #grid-form .helper-popup .copy-helper {
381 display: none;
382 position: absolute;
383 top: -22px;
384 left: 20px;
385 background: #323232;
386 color: white;
387 padding: 2px 5px;
388 border-radius: 3px;
389 font-weight: bold;
390 min-width: 78px;
391 }
392 #grid-form .helper-popup .helper:hover .copy-helper {
393 display: inline-block;
394 }
395 #grid-form .helper-popup .no-post-my-form{
396 display: none;
397 }
398 #grid-form .cf7sg-collapsible-title label {
399 padding-left: 4px;
400 }
401 #grid-form .row-selected .row-controls{
402 background-color: #0055d4;
403 }
404 #grid-form .row-controls .dashicons{
405 color: #ddd;
406 }
407 .dashicons.dashicons-plus.row-control::before, .dashicons.dashicons-plus.form-control::before {
408 position: relative;
409 top: 1px;
410 }
411 #grid-form .grid-column .dashicons-move {
412 margin-left: calc(50% - 65px);
413 }
414 #grid-form .columns.one .grid-column .dashicons-move {
415 margin-left: 0;
416 }
417 #grid-form .grid-column .icon-code.column-control {
418 float: right;
419 margin-right: 5px;
420 }
421 .icon-code{
422 background: url('image/code-sprite.png') 0px 0px;
423 width: 20px;
424 height: 15px;
425 background-repeat: no-repeat;
426 background-size: auto 20px;
427 display:inline-block;
428 }
429 #grid-form .grid-column .icon-code.column-control:hover {
430 background-position: -20px 0px;
431 cursor: pointer;
432 }
433 /*limit inner tables/tabs within tables/tabs */
434 #grid-form .container.cf7-sg-table .container .row-controls span.dashicons-edit,
435 #grid-form .container.cf7-sg-tabs-panel .row .row label.tabs-row-label {
436 display: none !important;
437 }
438 #grid-form .row-controls .dashicons {
439 margin-top: 3px;
440 }
441 #grid-form .row > div:nth-last-child(2) > .grid-column .dashicons-trash.column-control {
442 display: none;
443 }
444 #grid-form .row .columns + .columns > .grid-column .dashicons-trash.column-control {
445 display: inline-block;
446 }
447 #grid-form > .container > .row:first-child > .columns:first-child .dashicons-move.column-control {
448 margin-left: calc(50% - 45px);
449 }
450 #grid-form > .container:first-child >.row:first-child > .row-controls .dashicons-trash,
451 #grid-form > .cf7sg-external-form:first-child > .form-controls .dashicons-trash {
452 visibility:hidden;
453 }
454
455 .CodeMirror-wrap.cm-s-material-ocean .cm-shortcode {color: #4496ff;}
456 .CodeMirror-wrap.cm-s-paraiso-light .cm-shortcode {color: blue;}
457 .CodeMirror-wrap.cm-s-paraiso-light span.cm-string {color: #937c01;}
458 .CodeMirror-wrap.cm-s-paraiso-light span.cm-tag {color: #b70b0b;}
459 .CodeMirror-wrap.cm-s-material-ocean .cm-cf7sg-attr {color: #d300ff;}
460 .CodeMirror-wrap.cm-s-material-ocean .cm-cf7sg-attr + .cm-string {color: #00f900;}
461 .CodeMirror-wrap.cm-s-paraiso-light .cm-cf7sg-attr {color: #228f85;}
462 .CodeMirror-wrap.cm-s-paraiso-light .cm-cf7sg-attr + .cm-string {color: #f124ee;}
463
464 .disable-button{
465 text-decoration: none;
466 padding: 0 10px 1px;
467 color: #9b9b9b;
468 border: solid 1px #ccc;
469 background-color: #ccc;
470 height: 28px;
471 line-height: 26px;
472 vertical-align: top;
473 display: inline-block;
474 border-radius: 3px;
475 font-size: 13px;
476 margin: 0;
477 box-sizing: border-box;
478 white-space: nowrap;
479 }
480 .disable-button:hover {
481 color: #939393;
482 cursor: unset;
483 }
484 .disable-button.button:hover {
485 cursor: pointer;
486 color:inherit;
487 }
488 #top-grid-controls {
489 padding-top: 2px;
490 }
491 #grid-form > .container {
492 max-width: 100%;
493 }
494 .button.make-grid, .button.external-form {
495 width: 100%;
496 text-align: center;
497 margin-top: 5px;
498 }
499 #form-editor-tabs > ul li.ui-tabs-active > a {
500 color:inherit;
501 background-color: inherit;
502 }
503 #form-editor-tabs > ul li > a {
504 padding: 1px 8px;
505 display: block;
506 text-decoration: none;
507 min-width: 75px;
508 text-align: center;
509 background-color: #818a99;
510 color: white;
511 min-height: 25px;
512 }
513 div#form-editor-tabs > ul.ui-tabs-nav li {
514 padding: 0;
515 }
516 #form-editor-tabs ul.ui-tabs-nav > li.ui-tabs-active a:hover {
517 cursor: default;
518 }
519 .columns .row-controls .table-row-label,
520 .columns .row-controls .tabs-row-label,
521 .container.cf7-sg-table + .container > .row .row-controls .footer-row-label{
522 display: inline-block;
523 }
524 #grid-form ul.cf7-sg-tabs-list{
525 margin: 0;
526 }
527 #grid-form ul.cf7-sg-tabs-list li{
528 display: inline-block;
529 background-color: #d7d7d7;
530 padding: 2px 2px 0 5px;
531 margin-bottom: -5px;
532 border-top-right-radius: 3px;
533 margin-top: 2px;
534 border-bottom-right-radius: 0px;
535 }
536 #grid-form input:disabled:hover, #grid-form .grid-controls label:hover {
537 cursor: default;
538 }
539 #grid-form .container.cf7-sg-tabs-panel, #grid-form .container.cf7sg-collapsible {
540 border: solid 2px #009cff;
541 }
542 #grid-form ul.cf7-sg-tabs-list li {
543 border-top: solid 2px #009cff;
544 border-left: solid 2px #009cff;
545 border-right: solid 2px #009cff;
546 }
547 #grid-form .two .grid-column .dashicons-move {
548 margin-left: -2px;
549 }
550 #grid-form .cf7-field-inner input,
551 #grid-form .cf7-field-inner textarea,
552 #grid-form .cf7-field-inner span.dashicons {
553 display: none;
554 }
555 #grid-form .cf7-field-inner span.dashicons {
556 position:absolute;
557 margin-top: 2px;
558 background: #a5a5a5;
559 padding: 3px 0 0px 0;
560 top: 0;
561 right: 0;
562 }
563 #grid-form .cf7-field-inner {
564 padding: 0px 10px;
565 background: #ededed;
566 margin: 0;
567 position: relative;
568 }
569 #grid-form .cf7-field-tip .content {
570 font-size: 90%;
571 color: #727272;
572 font-style: italic;
573 text-overflow: ellipsis;
574 overflow: hidden;
575 white-space: nowrap;
576 }
577 #grid-form .cf7-field-type .content {
578 border: solid 1px;
579 width: 100%;
580 display: block;
581 padding: 3px 0px 3px 3px;
582 border-radius: 2px;
583 text-align: center;
584 color: #999;
585 text-overflow: ellipsis;
586 overflow: hidden;
587 white-space: nowrap;
588 }
589 #grid-form p.content:hover {
590 cursor: pointer;
591 color: blue;
592 }
593 #grid-form .cf7-field-inner input,
594 #grid-form .cf7-field-inner textarea {
595 width: calc(100% - 10px);
596 }
597 #grid-form .cf7-field-type.textarea p.content {
598 padding: 35px 0;
599 }
600 #grid-form .cf7-field-inner p {
601 margin: 0;
602 min-height: 20px;
603 }
604 #grid-form .grid-column.submit-field .cf7-field-label,
605 #grid-form .grid-column.submit-field .cf7-field-tip {
606 display: none;
607 }
608 #grid-form .cf7-field-type.select .content::after,
609 #grid-form .cf7-field-type.dynamic-select .content::after {
610 content: '\25BC';
611 position: absolute;
612 right: 13px;
613 font-size: 1.1em;
614 line-height: 1px;
615 top: 12px;
616 }
617 #grid-form .cf7-field-type.radio .content::after {
618 content: '\25c9';
619 position: absolute;
620 left: 23px;
621 font-size: 1.3em;
622 line-height: 1px;
623 top: 12px;
624 }
625 #grid-form .cf7-field-type.checkbox .content::after {
626 content: '\25a1';
627 position: absolute;
628 left: 23px;
629 font-size: 1.3em;
630 line-height: 1px;
631 top: 12px;
632 }
633 .row-controls .dashicons-move.row-control, .row-controls .dashicons-move.form-control{
634 visibility: hidden;
635 }
636 .container + .container > .row > .row-controls .dashicons-move,
637 .container + .cf7sg-external-form > .form-controls .dashicons-move,
638 .cf7sg-external-form + .container > .row > .row-controls .dashicons-move {
639 visibility: visible;
640 }
641 .cf7sg-warning {
642 position: absolute;
643 display: block;
644 top: 0;
645 right: 50px;
646 background: white;
647 padding: 10px 20px;
648 border: 2px solid grey;
649 border-radius: 3px;
650 font-size: 1.2em;
651 margin-top: 50px;
652 }
653 [data-search="li.cf7sg-tag-all,li.cf7sg-tag-dynamic_select,li.cf7sg-tag-dynamic_select-filter"] + .helper-popup {
654 min-width: 300px;
655 }
656 body.disable-scroll{overflow:hidden;}
657