d9944606e4fe2e214ef9df05645c62f6b212ed43
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Public / Css / structure / element_tceforms.css
1 /* - - - - - - - - - - - - - - - - - - - - -
2 TCEforms
3 - - - - - - - - - - - - - - - - - - - - - */
4
5 img.t3-TCEforms-reqImg {
6 display: block;
7 position: absolute;
8 left: 14px;
9 top: 28%;
10 z-index: 3000;
11 height: 16px;
12 margin-right: 2px;
13 width: 16px;
14 }
15
16 img.t3-TCEforms-reqTabImg {
17 height: 16px;
18 margin-left: 4px;
19 margin-bottom: -3px;
20 width: 16px;
21 }
22
23 img.t3-TCEforms-contentchangedImg {
24 display: block;
25 position: absolute;
26 left: 4px;
27 top: 32%;
28 z-index: 4000;
29 width: 7px;
30 }
31
32 .t3-form-palette-icon-required {
33 display: block;
34 position: absolute;
35 left: 4px;
36 top: 26%;
37 z-index: 3000;
38 height: 16px;
39 margin-right: 2px;
40 width: 16px;
41 }
42 /* renamed to .t3-form-palette-icon-required, lines below kept for backwards-compatibility */
43 img.t3-TCEforms-reqPaletteImg {
44 display: block;
45 position: absolute;
46 left: 14px;
47 top: 30%;
48 z-index: 3000;
49 height: 16px;
50 margin-right: 2px;
51 width: 16px;
52 }
53
54 .t3-form-palette-icon-contentchanged {
55 display: block;
56 position: absolute;
57 left: -6px;
58 top: 30%;
59 z-index: 4000;
60 width: 7px;
61 }
62 /* renamed to .t3-form-palette-icon-contentchanged, lines below kept for backwards-compatibility */
63 img.t3-TCEforms-contentchangedPaletteImg {
64 display: block;
65 position: absolute;
66 left: 4px;
67 top: 30%;
68 z-index: 4000;
69 width: 7px;
70 }
71
72 .typo3-TCEforms {
73 width: 100%;
74 }
75
76
77 .typo3-TCEforms-recHeaderRow {
78 padding-top: 5px;
79 padding-bottom: 20px;
80 }
81
82 table.wrapperTable tr.class-main2 td.palette-header,
83 table.wrapperTable1 .class-main12 td.palette-header {
84 padding-left: 10px;
85 }
86
87 .typo3-TCEforms .bgColor2,
88 .typo3-TCEforms tr.bgColor2 td {
89 padding-bottom: 5px;
90 }
91
92 .typo3-TCEforms optgroup.c-divider,
93 select option.c-divider {
94 margin-top: 10px;
95 padding: 0px;
96 }
97
98 .typo3-TCEforms optgroup option {
99 margin: 0px;
100 padding: 2px;
101 }
102
103
104 .typo3-TCEforms select.icon-select option {
105 padding-left: 22px;
106 }
107
108 .typo3-TCEforms table.typo3-TCEforms-select-checkbox {
109 margin-bottom: 10px;
110 }
111
112 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tbody {
113 display: block;
114 max-height: 300px;
115 overflow-y: scroll;
116 }
117
118 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td {
119 vertical-align: middle;
120 }
121
122 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-header td,
123 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-checkbox,
124 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
125 padding: 1px 3px;
126 }
127
128 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
129 min-width: 300px;
130 }
131
132 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell img {
133 margin-right: 5px;
134 }
135
136 .typo3-TCEforms table.typo3-TCEforms-select-checkbox td.c-descr {
137 width: 40px;
138 }
139
140 .typo3-TCEforms table.typo3-TCEforms-select-checkbox td.c-descr img {
141 float: right;
142 }
143
144 .typo3-TCEforms table.typo3-TCEforms-select-singlebox {
145 margin-bottom: 10px;
146 margin-top: 4px;
147 }
148
149 .checkbox,
150 .checkbox:hover {
151 margin: 4px 0 4px 2px;
152 position: relative;
153 z-index: 3500;
154 }
155
156 .typo3-TCEforms .class-main1 > td,
157 .typo3-TCEforms .class-main11 > td,
158 .typo3-TCEforms .class-main21 > td,
159 .typo3-TCEforms .class-main31 > td,
160 .typo3-TCEforms .class-main41 > td,
161 .typo3-TCEforms .class-main51 > td {
162 padding: 2px 0px 2px 0px;
163 }
164
165 .typo3-TCEforms .class-main2 > td,
166 .typo3-TCEforms .class-main12 > td,
167 .typo3-TCEforms .class-main22 > td,
168 .typo3-TCEforms .class-main32 > td,
169 .typo3-TCEforms .class-main42 > td,
170 .typo3-TCEforms .class-main52 > td {
171 padding: 6px 0px 2px 0px;
172 }
173
174 .typo3-TCEforms .class-main3,
175 .typo3-TCEforms .class-main13,
176 .typo3-TCEforms .class-main23,
177 .typo3-TCEforms .class-main33,
178 .typo3-TCEforms .class-main43,
179 .typo3-TCEforms .class-main53 {
180 padding: 2px 0px 2px 0px;
181 }
182
183 .typo3-TCEforms td.formField-header,
184 .typo3-TCEforms td.formField-field {
185 display: block;
186 position: relative;
187 padding-left: 10px;
188 padding-right: 10px;
189 }
190
191 .typo3-TCEforms .formField,
192 .typo3-TCEforms .formField1,
193 .typo3-TCEforms .formField2,
194 .typo3-TCEforms .formField3,
195 .typo3-TCEforms .formField4,
196 .typo3-TCEforms .formField5 {
197 margin: 4px 2px 4px 1px;
198 padding: 2px;
199 vertical-align: middle;
200 position: relative;
201 }
202
203 .typo3-TCEforms .formField:focus,
204 .typo3-TCEforms .formField1:focus,
205 .typo3-TCEforms .formField2:focus,
206 .typo3-TCEforms .formField3:focus,
207 .typo3-TCEforms .formField4:focus,
208 .typo3-TCEforms .formField5:focus {
209 z-index: 3500;
210 }
211
212 .typo3-TCEforms .wrapperTable,
213 .typo3-TCEforms .wrapperTable1,
214 .typo3-TCEforms .wrapperTable2,
215 .typo3-TCEforms .wrapperTable3,
216 .typo3-TCEforms .wrapperTable4,
217 .typo3-TCEforms .wrapperTable5 {
218 padding: 5px 0 5px 0;
219 }
220
221 .typo3-TCEforms td.icons {
222 padding: 6px 2px;
223 }
224
225 .typo3-TCEforms td.thumbnails {
226 padding-top: 6px;
227 }
228
229 .typo3-TCEforms div.imagethumbs {
230 padding-top: 6px;
231 white-space: normal;
232 width: 253px;
233 }
234
235 .typo3-TCEforms div.imagethumbs br {
236 display: none;
237 }
238
239 .typo3-TCEforms div.imagethumbs .nobr {
240 display: inline-block;
241 width: 60px;
242 height: 60px;
243 overflow: hidden;
244 margin-right: 3px;
245 margin-bottom: 1px;
246 text-align: center;
247 }
248
249 .typo3-TCEforms div.imagethumbs .nobr a {
250 display: block;
251 width: 60px;
252 height: 60px;
253 line-height: 58px;
254 text-align: center;
255 }
256
257 .typo3-TCEforms div.imagethumbs .nobr a img {
258 display: inline;
259 margin-right: auto;
260 vertical-align: middle;
261 margin-left: auto;
262 }
263
264 .typo3-TCEforms div.imagethumbs .nobr span {
265 display: none;
266 }
267
268 .typo3-TCEforms span.filetypes {
269 display: block;
270 margin-top: 6px;
271 white-space: normal;
272 width: 250px;
273 }
274
275 .t3-form-field-container {
276 display: block;
277 }
278
279 .typo3-TCEforms-palette .typo3-csh-link img {
280 padding-top: 3px;
281 vertical-align: top;
282 }
283
284 .typo3-TCEforms-palette select.select,
285 .t3-form-palette-field-container select.select {
286 margin: 4px 2px 4px 1px;
287 }
288
289 .t3-form-palette-field-container {
290 display: inline-block;
291 vertical-align: top;
292 padding-right: 25px;
293 }
294
295 .t3-form-palette-field-container .t3-form-palette-field-label,
296 .t3-form-palette-field-container .t3-form-palette-field {
297 display: block;
298 position: relative;
299 }
300
301 .typo3-TCEforms .typo3-csh-link {
302 margin-left: 5px;
303 }
304
305 /* - - - - - - - - - - - - - - - - - - - - -
306 TCEforms suggest
307 - - - - - - - - - - - - - - - - - - - - - */
308 div.typo3-TCEforms-suggest-position-right {
309 margin-left: 10px;
310 margin-top: 5px;
311 }
312
313 div.typo3-TCEforms-suggest label {
314 margin-right: 5px;
315 }
316
317 div.typo3-TCEforms-suggest-indicator {
318 left: 230px;
319 position: relative;
320 top: -18px;
321 }
322
323 div.typo3-TCEforms-suggest-choices {
324 position: absolute;
325 width: 250px;
326 z-index: 4000;
327 }
328
329 div.typo3-TCEforms-suggest-choices ul {
330 margin: 0;
331 padding: 0;
332 }
333
334 div.typo3-TCEforms-suggest-choices li {
335 display: block;
336 margin: 0;
337 padding: 4px 2px 4px 24px;
338 }
339
340 div.typo3-TCEforms-suggest-choices li.suggest-noresults {
341 height: auto;
342 }
343
344 div.typo3-TCEforms-suggest-choices span.suggest-uid {
345 margin-left: 0.3em;
346 }
347
348 div.typo3-TCEforms-suggest-choices span.suggest-path {
349 margin-top: 0.3em;
350 }
351
352 input.typo3-TCEforms-suggest-search {
353 width: 200px;
354 padding-left: 20px;
355 vertical-align: middle;
356 }
357
358
359 /* - - - - - - - - - - - - - - - - - - - - -
360 TCEforms Flexforms
361 - - - - - - - - - - - - - - - - - - - - - */
362 /** tabs inside the table => flexforms */
363 .typo3-TCEforms .wrapperTable .typo3-dyntabmenu-divs,
364 .typo3-TCEforms .wrapperTable1 .typo3-dyntabmenu-divs,
365 .typo3-TCEforms .wrapperTable2 .typo3-dyntabmenu-divs,
366 .typo3-TCEforms .wrapperTable3 .typo3-dyntabmenu-divs,
367 .typo3-TCEforms .wrapperTable4 .typo3-dyntabmenu-divs,
368 .typo3-TCEforms .wrapperTable5 .typo3-dyntabmenu-divs {
369 margin-right: 20px;
370 margin-bottom: 10px;
371 }
372
373 .t3-form-field-label-flex {
374 padding: 5px;
375 }
376
377 .t3-form-field-flex {
378 padding: 0 5px 5px;
379 }
380
381
382 /* - - - - - - - - - - - - - - - - - - - - -
383 TCEforms Inline-Relational-Record-Editing
384 - - - - - - - - - - - - - - - - - - - - - */
385 .t3-form-field-container-wrap {
386 margin: 6px 0px;
387 }
388
389 .t3-form-field-container-inline {
390 margin: 2px 0px;
391 }
392
393 .t3-form-field-header-inline > span {
394 position: absolute;
395 left: 4px;
396 top: 15px;
397 }
398
399 .t3-form-field-header-inline-wrap:before,
400 .t3-form-field-header-inline-wrap:after {
401 content: " ";
402 display: table;
403 }
404
405 .t3-form-field-header-inline-wrap:after {
406 clear: both;
407 }
408
409 .t3-form-field-header-inline-wrap {
410 min-width: 300px;
411 }
412
413 .t3-form-field-header-inline-icon,
414 .t3-form-field-header-inline-thumbnail {
415 float: left;
416 margin-right: 5px;
417 }
418
419 .t3-form-field-header-inline-icon {
420 width: 18px;
421 height: 16px;
422 padding: 3px 0px;
423 }
424
425 .t3-form-field-header-inline-thumbnail {
426 float: left;
427 margin-right: 15px;
428 }
429
430 .t3-form-field-header-inline-thumbnail img {
431 display: block;
432 }
433
434 .t3-form-field-header-inline-ctrl {
435 float: right;
436 }
437
438 .t3-form-field-header-inline-ctrl .t3-icon {
439 margin: 0px;
440 margin-left: 3px;
441 }
442
443 .t3-form-field-header-inline-body,
444 .t3-form-field-header-inline-summary {
445 overflow: hidden;
446 zoom: 1;
447 }
448
449 .t3-form-field-header-inline-thumbnail,
450 .t3-form-field-header-inline-summary {
451 cursor: pointer;
452 }
453
454 .t3-form-field-header-inline-ctrl,
455 .t3-form-field-header-inline-summary {
456 padding: 5px 0px;
457 }
458
459 .t3-form-field-header-inline-summary dl {
460 margin: 0px;
461 overflow: hidden;
462 }
463
464 .t3-form-field-header-inline-summary dt {
465 font-weight: bold;
466 float: left;
467 clear: left;
468 margin-right: 10px;
469 }
470
471 .t3-form-field-header-inline-summary dd {
472 float: left;
473 }
474
475 .t3-form-field-header-inline-ctrl img {
476 vertical-align: middle;
477 }
478
479 .t3-form-field-header-inline .t3-form-field-header-inline-ctrl > * {
480 opacity: 0;
481 }
482
483 .t3-form-field-header-inline:hover .t3-form-field-header-inline-ctrl > * {
484 opacity: 1;
485 }
486
487 .t3-form-field-header-inline .t3-form-field-header-inline-ctrl > span.sortableHandle {
488 margin-left: 16px;
489 opacity: 1;
490 display: inline-block;
491 }
492
493 .t3-form-field-container-inline-placeHolder div.t3-form-field-record-inline,
494 .t3-form-field-container-inline-collapsed div.t3-form-field-record-inline {
495 display:none !important;
496 }
497
498 .t3-form-field-header-inline {
499 padding: 6px 16px;
500 position:relative;
501 }
502
503 .t3-form-field-container-inline-placeHolder .t3-form-field-header-inline > span {
504 display:none;
505 }
506
507 .t3-form-field-record-inline {
508 padding: 8px 8px;
509 position: relative;
510 }
511
512 .t3-form-field-record-inline > table {
513 width:100%;
514 }
515
516 .t3-form-field-record-inline .typo3-dyntabmenu-divs,
517 .t3-form-field-record-inline .typo3-dyntabmenu-tabs {
518 margin-left:8px;
519 margin-right:8px !important;
520 margin-bottom:0px !important;
521 }
522
523 .sortableHandle {
524 cursor: move;
525 }
526
527 /* - - - - - - - - - - - - - - - - - - - - -
528 TCEforms Sections
529 - - - - - - - - - - - - - - - - - - - - - */
530 .t3-form-field-container-flexsection {
531 padding-left: 20px;
532 }
533
534 .t3-form-field-header-flexsection {
535 width: 100%;
536 height: 16px;
537 }
538
539 .t3-form-field-label-flexsection {
540 padding: 5px 10px;
541 }
542
543 .t3-form-field-toggle-flexsection {
544 padding: 5px 0 5px 20px;
545 }
546
547 .t3-form-field-add-flexsection {
548 padding: 10px 5px 5px 20px;
549 }
550
551 .t3-form-field-container-flexsections {
552 margin: 5px 0;
553 }
554
555 .t3-form-field-record-flexsection {
556 padding: 5px 0;
557 }
558
559 .t3-form-field-record-flexsection > div {
560 margin:0 10px;
561 }
562
563 /* preview image in sys_file records */
564 img.t3-tceforms-sysfile-imagepreview {
565 float: left;
566 margin-right: 10px;
567 margin-bottom: 10px;
568 }
569
570 * html div#typo3-docbody .typo3-TCEforms {
571 margin-top: 20px;
572 }
573
574 .typo3-TCEforms .formField-field img[src*="clear.gif"],
575 .typo3-TCEforms .t3-form-palette-field img[src*="clear.gif"] {
576 z-index: 0;
577 }