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

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