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

492 lines 11.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 a.helper {text-decoration: none;}
2 a.helper + span.helper {
3 display: none;
4 position: absolute;
5 background: white;
6 border: solid 1px;
7 padding: 2px;
8 margin-top: -25px;
9 color: black;
10 }
11 .helper .tag-colour { font-weight: bold;}
12 a.helper:hover + span.helper {display: inline;}
13 .wp-pointer-buttons a.close {
14 margin: 5px 0 0 20px;
15 }
16 #ajax-response.error-msg{
17 color:red;
18 }
19 #full-screen-cf7 {
20 position: absolute;
21 top: -39px;
22 left: 160px;
23 }
24 #full-screen-cf7.full-screen {
25 position: absolute;
26 top: auto;
27 left: auto;
28 right: 0;
29 bottom: -58px;
30 }
31 #cf7sg-editor.full-screen {
32 top: 5px;
33 z-index: 10;
34 position: fixed;
35 overflow: auto;
36 height: 100%;
37 margin-left: -15px;
38 }
39 #form-editor-tabs ul.ui-tabs-nav {
40 border-bottom: 1px solid #ddd;
41 padding: 7px 0px 0 3px;
42 margin: 0;
43 min-width: 100%;
44 text-align: right;
45 }
46 #form-editor-tabs ul li.ui-state-disabled:first-child {
47 display: none;
48 }
49 #form-editor-tabs ul.ui-tabs-nav > li {
50 display: inline-block;
51 border: solid 1px #ddd;
52 padding: 3px 7px;
53 background-color: #d1d1d1;
54 margin: 0 0px -1px;
55 border-top-left-radius: 3px;
56 }
57 #form-editor-tabs ul.ui-tabs-nav > li.ui-tabs-active {
58 background: transparent;
59 border-bottom: none;
60 }
61 .tagsdiv .tagchecklist > span {
62 display: block;
63 margin: 0;
64 clear: both;
65 line-height: 15px;
66 }
67 .tagsdiv .tagchecklist button.ntdelbutton{
68 display:none;
69 }
70 .cf7sg-dynamic-list p.the-tagcloud a {
71 display: block;
72 line-height: 15px;
73 font-size: 13px !important;
74 text-decoration: none;
75 color: #669;
76 cursor:default;
77 }
78 #poststuff .cf7sg-dynamic-list p.the-tagcloud {
79 border: none;
80 padding: 0;
81 margin-left: 14px;
82 margin-top:0;
83 }
84 .cf7sg-dynamic-list button.tagcloud-link {
85 display: none;
86 }
87 .cf7sg-dynamic-list .hide-if-no-js {
88 margin-top: 0;
89 }
90 /*
91 grid layout
92 */
93 #html-script, #grid-col, #grid-helper,
94 #grid-form .grid-controls,
95 #grid-form .row-controls .dashicons-no-alt,
96 #grid-form .grid-column > .dashicons-no-alt,
97 #grid-row, #grid-collapsible, #grid-tabs, .cf7-sg-hidden,
98 #grid-collapsible-with-toggle,
99 #grid-cf7-forms,
100 #grid-form .cf7sg-external-form-content,
101 #grid-form .table-row-button {
102 display: none;
103 }
104 #grid-form .row.cf7-sg-table .row-controls label.table-row-button {
105 display: block;
106 text-align: center;
107 }
108 #grid-form .form-select {
109 display: block;
110 margin: 0 auto;
111 }
112 #grid-form .form-controls {
113 position: relative;
114 padding: 22px;
115 }
116 #grid-form .cf7sg-external-form {
117 border: solid 1px #777;
118 background-color: #ddd;
119 margin: 3px 0;
120 border-radius: 3px;
121 }
122 textarea.grid-input {
123 width: 100%;
124 min-height: 65px;
125 }
126 #grid-form .grid-controls {
127 position: absolute;
128 background: #f1f1f1;
129 padding: 5px;
130 border: solid 1px grey;
131 width: 137px;
132 z-index:1008;
133 }
134 #grid-form .container,
135 #grid-form .table-row-button input {
136 max-width: 100%;
137 }
138 #cf7-codemirror .CodeMirror {
139 height: calc( 100vh - 180px);
140 }
141 #grid-form .row.cf7-sg-table {
142 box-shadow: 0px 0px 4px #0093ff;
143 }
144 #grid-form .grid-column {
145 background-color: #ddd;
146 }
147 #grid-form .dashicons:hover{
148 cursor:pointer;
149 color: blue;
150 }
151 #grid-form .dashicons{
152 clear:both;
153 }
154 #grid-form .columns {
155 border-top: solid 2px #ddd;
156 border-bottom: solid 2px #ddd;
157 }
158 #grid-form .columns.column-selected {
159 border-bottom-color: #0055d4;
160 border-top-color: #0055d4;
161 }
162 #grid-form .container {
163 padding: 0;
164 border: solid 1px #d7d7d7;
165 margin-top: 5px;
166 border-radius: 3px;
167 }
168 #grid-form .row {
169 padding: 4px 20px 4px 4px;
170 position: relative;
171 min-height: 90px;
172 }
173 #grid-form .row-controls{
174 position: absolute;
175 top:0;
176 right: 0;
177 width: 20px;
178 display: inline-block;
179 height: 100%;
180 background: #606060;
181 border-top-right-radius: 3px;
182 border-bottom-right-radius: 3px;
183 }
184 #grid-form .row-controls .grid-controls {
185 position: absolute;
186 top: 20px;
187 right: 0px;
188 text-align: right;
189 }
190 #grid-form .cf7sg-tag-dynamic_select:last-child {
191 margin: 0;
192 }
193 #grid-form .cf7sg-helper-list {
194 margin: 0;
195 margin-top: 22px;
196 padding: 2px 5px 8px 5px;
197 background: white;
198 }
199 #grid-form .dashicons-controls-repeat {
200 position: relative;
201 }
202 #grid-form .dashicons-controls-repeat + div.helper-popup {
203 position: absolute;
204 z-index: 9;
205 background: #d8d8d8;
206 border: solid 1px #787878;
207 width: 300px;
208 }
209 #grid-form .helper-popup p {
210 margin: 0;
211 position: absolute;
212 top: 0;
213 left: 0;
214 text-align: center;
215 width: 100%;
216 }
217 #grid-form .helper-popup .dashicons.dashicons-no-alt {
218 position: absolute;
219 right: -9px;
220 top: -8px;
221 background: white;
222 border-radius: 50%;
223 z-index: 9;
224 }
225 #grid-form .helper-popup .helper{
226 position: relative;
227 }
228 #grid-form .helper-popup .copy-helper {
229 display: none;
230 position: absolute;
231 top: -22px;
232 left: 20px;
233 background: #323232;
234 color: white;
235 padding: 2px 5px;
236 border-radius: 3px;
237 font-weight: bold;
238 min-width: 78px;
239 }
240 #grid-form .helper-popup .helper:hover .copy-helper {
241 display: inline-block;
242 }
243 #grid-form .helper-popup .no-post-my-form{
244 display: none;
245 }
246 #grid-form .cf7sg-collapsible-title label {
247 padding-left: 4px;
248 }
249 #grid-form .row-selected .row-controls{
250 background-color: #0055d4;
251 }
252 #grid-form .row-controls .dashicons{
253 color: #ddd;
254 }
255 .dashicons.dashicons-plus.row-control::before, .dashicons.dashicons-plus.form-control::before {
256 position: relative;
257 top: 1px;
258 }
259 #grid-form .grid-column .dashicons-move {
260 margin-left: calc(50% - 65px);
261 }
262 #grid-form .columns.one .grid-column .dashicons-move {
263 margin-left: 0;
264 }
265 #grid-form .grid-column .icon-code.column-control {
266 float: right;
267 margin-right: 5px;
268 }
269 .icon-code{
270 background: url('image/code-sprite.png') 0px 0px;
271 width: 20px;
272 height: 15px;
273 background-repeat: no-repeat;
274 background-size: auto 20px;
275 display:inline-block;
276 }
277 #grid-form .grid-column .icon-code.column-control:hover {
278 background-position: -20px 0px;
279 cursor: pointer;
280 }
281 /*limit inner tables/tabs within tables/tabs */
282 #grid-form .container.cf7-sg-table .container .row-controls span.dashicons-edit,
283 #grid-form .container.cf7-sg-tabs-panel .row .row label.tabs-row-label {
284 display: none !important;
285 }
286 #grid-form .row-controls .dashicons {
287 margin-top: 3px;
288 }
289 #grid-form .row > div:nth-last-child(2) > .grid-column .dashicons-trash.column-control {
290 display: none;
291 }
292 #grid-form .row .columns + .columns > .grid-column .dashicons-trash.column-control {
293 display: inline-block;
294 }
295 #grid-form > .container > .row:first-child > .columns:first-child .dashicons-move.column-control {
296 margin-left: calc(50% - 45px);
297 }
298 #grid-form > .container:first-child >.row:first-child > .row-controls .dashicons-trash,
299 #grid-form > .cf7sg-external-form:first-child > .form-controls .dashicons-trash {
300 visibility:hidden;
301 }
302 .CodeMirror-wrap .cm-shortcode {
303 color: blue;
304 }
305 .CodeMirror-wrap.cm-s-paraiso-light span.cm-string {
306 color: #fea218;
307 }
308 .disable-button{
309 text-decoration: none;
310 padding: 0 10px 1px;
311 color: #9b9b9b;
312 border: solid 1px #ccc;
313 background-color: #ccc;
314 height: 28px;
315 line-height: 26px;
316 vertical-align: top;
317 display: inline-block;
318 border-radius: 3px;
319 font-size: 13px;
320 margin: 0;
321 box-sizing: border-box;
322 white-space: nowrap;
323 }
324 .disable-button:hover {
325 color: #939393;
326 cursor: unset;
327 }
328 .disable-button.button:hover {
329 cursor: pointer;
330 color:inherit;
331 }
332 #top-grid-controls {
333 padding-top: 2px;
334 }
335 #grid-form > .container {
336 max-width: 100%;
337 }
338 .button.make-grid, .button.external-form {
339 width: 100%;
340 text-align: center;
341 margin-top: 5px;
342 }
343 #form-editor-tabs > ul li > a {
344 padding: 3px 8px;
345 display: block;
346 color: inherit;
347 text-decoration: none;
348 }
349 div#form-editor-tabs > ul.ui-tabs-nav li {
350 padding: 0;
351 }
352 #form-editor-tabs ul.ui-tabs-nav > li.ui-tabs-active a:hover {
353 cursor: default;
354 }
355 .columns .row-controls .table-row-label,
356 .columns .row-controls .tabs-row-label,
357 .container.cf7-sg-table + .container > .row .row-controls .footer-row-label{
358 display: inline-block;
359 }
360 #grid-form ul.cf7-sg-tabs-list{
361 margin: 0;
362 }
363 #grid-form ul.cf7-sg-tabs-list li{
364 display: inline-block;
365 background-color: #d7d7d7;
366 padding: 2px 2px 0 5px;
367 margin-bottom: -5px;
368 border-top-right-radius: 3px;
369 margin-top: 2px;
370 border-bottom-right-radius: 0px;
371 }
372 #grid-form input:disabled:hover, #grid-form .grid-controls label:hover {
373 cursor: default;
374 }
375 #grid-form .container.cf7-sg-tabs-panel, #grid-form .container.cf7sg-collapsible {
376 border: solid 2px #009cff;
377 }
378 #grid-form ul.cf7-sg-tabs-list li {
379 border-top: solid 2px #009cff;
380 border-left: solid 2px #009cff;
381 border-right: solid 2px #009cff;
382 }
383 #grid-form .two .grid-column .dashicons-move {
384 margin-left: -2px;
385 }
386 #grid-form .cf7-field-inner input,
387 #grid-form .cf7-field-inner textarea,
388 #grid-form .cf7-field-inner span.dashicons {
389 display: none;
390 }
391 #grid-form .cf7-field-inner span.dashicons {
392 position:absolute;
393 margin-top: 2px;
394 background: #a5a5a5;
395 padding: 3px 0 0px 0;
396 top: 0;
397 right: 0;
398 }
399 #grid-form .cf7-field-inner {
400 padding: 0px 10px;
401 background: #ededed;
402 margin: 0;
403 position: relative;
404 }
405 #grid-form .cf7-field-tip .content {
406 font-size: 90%;
407 color: #727272;
408 font-style: italic;
409 text-overflow: ellipsis;
410 overflow: hidden;
411 white-space: nowrap;
412 }
413 #grid-form .cf7-field-type .content {
414 border: solid 1px;
415 width: 100%;
416 display: block;
417 padding: 3px 0px 3px 3px;
418 border-radius: 2px;
419 text-align: center;
420 color: #999;
421 text-overflow: ellipsis;
422 overflow: hidden;
423 white-space: nowrap;
424 }
425 #grid-form p.content:hover {
426 cursor: pointer;
427 color: blue;
428 }
429 #grid-form .cf7-field-inner input,
430 #grid-form .cf7-field-inner textarea {
431 width: calc(100% - 10px);
432 }
433 #grid-form .cf7-field-type.textarea p.content {
434 padding: 35px 0;
435 }
436 #grid-form .cf7-field-inner p {
437 margin: 0;
438 min-height: 20px;
439 }
440 #grid-form .grid-column.submit-field .cf7-field-label,
441 #grid-form .grid-column.submit-field .cf7-field-tip {
442 display: none;
443 }
444 #grid-form .cf7-field-type.select .content::after,
445 #grid-form .cf7-field-type.dynamic-select .content::after {
446 content: '\25BC';
447 position: absolute;
448 right: 13px;
449 font-size: 2em;
450 line-height: 1px;
451 top: 12px;
452 }
453 #grid-form .cf7-field-type.radio .content::after {
454 content: '\25c9';
455 position: absolute;
456 left: 23px;
457 font-size: 1.3em;
458 line-height: 1px;
459 top: 12px;
460 }
461 #grid-form .cf7-field-type.checkbox .content::after {
462 content: '\25a1';
463 position: absolute;
464 left: 23px;
465 font-size: 1.3em;
466 line-height: 1px;
467 top: 12px;
468 }
469 .row-controls .dashicons-move.row-control, .row-controls .dashicons-move.form-control{
470 visibility: hidden;
471 }
472 .container + .container > .row > .row-controls .dashicons-move,
473 .container + .cf7sg-external-form > .form-controls .dashicons-move,
474 .cf7sg-external-form + .container > .row > .row-controls .dashicons-move {
475 visibility: visible;
476 }
477 .cf7sg-warning {
478 position: absolute;
479 display: block;
480 top: 0;
481 right: 50px;
482 background: white;
483 padding: 10px 20px;
484 border: 2px solid grey;
485 border-radius: 3px;
486 font-size: 1.2em;
487 margin-top: 50px;
488 }
489 [data-search="li.cf7sg-tag-all,li.cf7sg-tag-dynamic_select,li.cf7sg-tag-dynamic_select-filter"] + .helper-popup {
490 min-width: 300px;
491 }
492