PluginProbe
Smart Grid-Layout Design for Contact Form 7 / 4.10
Smart Grid-Layout Design for Contact Form 7 v4.10
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.10, at admin/css/cf7-grid-layout-post.css

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