bdf3504270db687eb5c1cbb0e4e3b039483e8687
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Public / Css / visual / element_tceforms.css
1 /* - - - - - - - - - - - - - - - - - - - - -
2 TCEforms
3 - - - - - - - - - - - - - - - - - - - - - */
4
5 table#typo3-altdoc-header input,
6 .c-inputButton {
7 background: none;
8 border: 0;
9 }
10
11 .checkbox,
12 .checkbox:hover {
13 background: #efeff4;
14 border: 0;
15 }
16
17 .t3-tceforms-input-wrapper,
18 .t3-tceforms-input-wrapper-hover,
19 .t3-tceforms-input-wrapper-datetime,
20 .t3-tceforms-input-wrapper-datetime-hover {
21 display: block;
22 float: left;
23 position: relative;
24 }
25
26 .t3-tceforms-widget-null-wrapper {
27 display: inline-block;
28 float: right;
29 position: relative;
30 width: 20px;
31 max-width: 20px;
32 }
33
34 .t3-tceforms-widget-null-wrapper input {
35 margin-left: 2px;
36 margin-top: 42%;
37 }
38
39
40 .t3-tceforms-input-wrapper .t3-tceforms-input-clearer,
41 .t3-tceforms-input-wrapper-hover .t3-tceforms-input-clearer {
42 position: absolute;
43 right: 4px;
44 top: 28%;
45 z-index: 1000;
46 cursor: pointer;
47 }
48
49 .t3-tceforms-input-wrapper-datetime .t3-tceforms-input-clearer,
50 .t3-tceforms-input-wrapper-datetime-hover .t3-tceforms-input-clearer {
51 position: absolute;
52 right: 24px;
53 top: 28%;
54 z-index: 1000;
55 cursor: pointer;
56 }
57
58 .t3-tceforms-input-wrapper .tceforms-textfield,
59 .t3-tceforms-input-wrapper-hover .tceforms-textfield,
60 .t3-tceforms-input-wrapper .tceforms-datetimefield,
61 .t3-tceforms-input-wrapper-hover .tceforms-datetimefield,
62 .t3-tceforms-input-wrapper-datetime .tceforms-textfield,
63 .t3-tceforms-input-wrapper-datetime-hover .tceforms-textfield,
64 .t3-tceforms-input-wrapper-datetime .tceforms-datetimefield,
65 .t3-tceforms-input-wrapper-datetime-hover .tceforms-datetimefield {
66 position: relative;
67 z-index: 2000;
68 min-height: 14px;
69 padding-right: 20px!important;
70 }
71
72 .t3-tceforms-input-wrapper-hover .t3-tceforms-input-clearer,
73 .t3-tceforms-input-wrapper-datetime-hover .t3-tceforms-input-clearer {
74 z-index: 3700;
75 }
76
77 .typo3-TCEforms table#typo3-altdoc-header input:hover,
78 .c-inputButton:hover {
79 background: none;
80 border: 0;
81 }
82
83 .typo3-TCEforms .typo3-TCEforms-recHeader {
84 color: #555555;
85 font-weight: bold;
86 }
87
88 .typo3-TCEforms .typo3-TCEforms-recHeaderRow {
89 background: #fff;
90 text-align: right;
91 }
92
93 .typo3-TCEforms span.typo3-TCEforms-newToken {
94 color: #990000;
95 font-weight: bold;
96 }
97
98 .typo3-TCEforms span.typo3-TCEforms-helpText {
99 background: transparent;
100 color: #fff;
101 }
102
103 table.typo3-TCEforms-select-checkbox {
104 background-color: #ffffff;
105 border: 1px solid #aaa;
106 }
107
108 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-header td {
109 background-color: #fff;
110 font-weight: bold;
111 }
112
113 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr:nth-child(2n) {
114 background-color: #f7f7f7;
115 }
116
117 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-selectedItem {
118 background-color: #d8ecd0;
119 }
120
121 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-invalidItem {
122 color: #dddddd;
123 }
124
125 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr:hover {
126 background-color: #dedede;
127 }
128
129 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-selectedItem:hover {
130 background-color: #abd99a;
131 }
132
133 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-invalidItem:hover {
134 background-color: transparent;
135 }
136
137 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
138 white-space: nowrap;
139 }
140
141 .typo3-TCEforms optgroup.c-divider,
142 select option.c-divider {
143 background-color: #eee;
144 border-top: 1px solid #666;
145 color: #666;
146 font-style: italic;
147 text-transform: uppercase;
148 }
149
150 .typo3-TCEforms optgroup option {
151 background-color: white;
152 border-bottom: none;
153 color: black;
154 font-style: normal;
155 text-indent: 0px;
156 text-transform: none;
157 }
158
159 .typo3-TCEforms div.typo3-TCEforms-originalLanguageValue {
160 background-color: #dadada;
161 border: 1px solid #c0c0c0;
162 }
163
164 .typo3-TCEforms div.typo3-TCEforms-diffBox {
165 background-color: white;
166 border: 1px solid black;
167 }
168
169 .typo3-TCEforms div.typo3-TCEforms-diffBox-header {
170 background-color: red;
171 font-weight: bold;
172 }
173
174 .typo3-TCEforms div.typo3-dyntabmenu-divs {
175 border-bottom: 0;
176 }
177
178 /* Default. Always used on main-palettes in the bottom of the forms */
179 .typo3-TCEforms .class-main1,
180 .typo3-TCEforms .class-main11,
181 .typo3-TCEforms .class-main21,
182 .typo3-TCEforms .class-main31,
183 .typo3-TCEforms .class-main41,
184 .typo3-TCEforms .class-main51 {
185 }
186
187 .typo3-TCEforms .class-main2 td,
188 .typo3-TCEforms .class-main12 td,
189 .typo3-TCEforms .class-main22 td,
190 .typo3-TCEforms .class-main32 td,
191 .typo3-TCEforms .class-main42 td,
192 .typo3-TCEforms .class-main52 td {
193 border-top: 1px solid #c0c0c0;
194 }
195
196 .typo3-TCEforms .class-main1 .typo3-TCEforms-checkboxArray td,
197 .typo3-TCEforms .class-main11 .typo3-TCEforms-checkboxArray td,
198 .typo3-TCEforms .class-main21 .typo3-TCEforms-checkboxArray td,
199 .typo3-TCEforms .class-main31 .typo3-TCEforms-checkboxArray td,
200 .typo3-TCEforms .class-main41 .typo3-TCEforms-checkboxArray td,
201 .typo3-TCEforms .class-main51 .typo3-TCEforms-checkboxArray td {
202 padding-right: 5px;
203 }
204
205 .typo3-TCEforms tr.class-main2:first-child td,
206 .typo3-TCEforms tr.class-main12:first-child td,
207 .typo3-TCEforms tr.class-main22:first-child td,
208 .typo3-TCEforms tr.class-main32:first-child td,
209 .typo3-TCEforms tr.class-main42:first-child td,
210 .typo3-TCEforms tr.class-main52:first-child td {
211 border-top: 0;
212 }
213
214 .typo3-TCEforms .class-main2,
215 .typo3-TCEforms .class-main12,
216 .typo3-TCEforms .class-main22,
217 .typo3-TCEforms .class-main32,
218 .typo3-TCEforms .class-main42,
219 .typo3-TCEforms .class-main52 {
220 }
221
222
223
224
225 .typo3-TCEforms table.wrapperAttention .class-main2,
226 .typo3-TCEforms table.wrapperAttention .class-main12,
227 .typo3-TCEforms table.wrapperAttention .class-main22,
228 .typo3-TCEforms table.wrapperAttention .class-main32,
229 .typo3-TCEforms table.wrapperAttention .class-main42,
230 .typo3-TCEforms table.wrapperAttention .class-main52 {
231
232 }
233
234
235 .typo3-TCEforms .class-main4,
236 .typo3-TCEforms .class-main14,
237 .typo3-TCEforms .class-main24,
238 .typo3-TCEforms .class-main34,
239 .typo3-TCEforms .class-main44,
240 .typo3-TCEforms .class-main54 {
241 color: #000000;
242 }
243
244 .typo3-TCEforms .class-main5,
245 .typo3-TCEforms .class-main15,
246 .typo3-TCEforms .class-main25,
247 .typo3-TCEforms .class-main35,
248 .typo3-TCEforms .class-main45,
249 .typo3-TCEforms .class-main55 {
250 color: #3c3c44;
251 }
252
253 .typo3-TCEforms .wrapperTable,
254 .typo3-TCEforms .wrapperTable1,
255 .typo3-TCEforms .wrapperTable2,
256 .typo3-TCEforms .wrapperTable3,
257 .typo3-TCEforms .wrapperTable4,
258 .typo3-TCEforms .wrapperTable5 {
259 border: 1px solid #c0c0c0;
260 }
261
262 .typo3-TCEforms .wrapperTable1 {
263 border-top: 1px solid #c0c0c0;
264 }
265
266 .typo3-TCEforms .typo3-dyntabmenu-divs .wrapperTable,
267 .typo3-TCEforms .typo3-dyntabmenu-divs .wrapperTable1,
268 .typo3-TCEforms .typo3-dyntabmenu-divs .wrapperTable2,
269 .typo3-TCEforms .typo3-dyntabmenu-divs .wrapperTable3,
270 .typo3-TCEforms .typo3-dyntabmenu-divs .wrapperTable4,
271 .typo3-TCEforms .typo3-dyntabmenu-divs .wrapperTable5 {
272 border: none;
273 border-bottom: 1px solid #c0c0c0;
274 }
275
276 .typo3-TCEforms table.wrapperAttention .wrapperTable,
277 .typo3-TCEforms table.wrapperAttention .wrapperTable1,
278 .typo3-TCEforms table.wrapperAttention .wrapperTable2,
279 .typo3-TCEforms table.wrapperAttention .wrapperTable3,
280 .typo3-TCEforms table.wrapperAttention .wrapperTable4,
281 .typo3-TCEforms table.wrapperAttention .wrapperTable5 {
282 }
283
284 .t3-form-palette-fieldset {
285 border:none;
286 }
287
288 .typo3-TCEforms div.imagethumbs .nobr {
289 background-color: #CCC;
290 }
291
292 .typo3-TCEforms span.filetypes {
293 font-size: 0.8em;
294 }
295
296 input.typo3-TCEforms-suggest-search {
297 background-image: url('../../../../icons/gfx/zoom.gif');
298 background-position: 2px center;
299 background-repeat: no-repeat;
300 }
301
302 div.typo3-TCEforms-suggest-choices {
303 background-color: white;
304 border: 1px solid #888;
305 }
306
307 div.typo3-TCEforms-suggest-choices ul {
308 list-style-type: none;
309 }
310
311 div.typo3-TCEforms-suggest-choices li.selected {
312 background-color: #ffb !important;
313 }
314
315 div.typo3-TCEforms-suggest-choices li {
316 cursor: pointer;
317 background-color: #efeff4;
318 background-repeat: no-repeat;
319 background-position: 4px center;
320 list-style-type: none;
321 }
322
323 div.typo3-TCEforms-suggest-choices li.pages {
324 background-color: #fcc;
325 }
326
327 div.typo3-TCEforms-suggest-choices span.suggest-uid {
328 font-size: 0.9em;
329 }
330
331 div.typo3-TCEforms-suggest-choices span.suggest-path {
332 font-size: 0.9em;
333 }
334
335 div.typo3-TCEforms-suggest-choices span.suggest-path abbr {
336 border-bottom: none;
337 }
338
339 div.typo3-TCEforms-suggest-choises a {
340 cursor: pointer;
341 }
342
343 /* - - - - - - - - - - - - - - - - - - - - -
344 TCEforms Flexforms
345 - - - - - - - - - - - - - - - - - - - - - */
346 .t3-form-field-container-flex {
347 }
348
349 .t3-form-field-label-flex {
350 border-top: 1px solid #c0c0c0;
351 }
352
353 div.t3-form-field-container:first-child .t3-form-field-label-flex {
354 border-top: 0;
355 }
356
357 /** no separate background for dyntabs in flexforms **/
358 .typo3-TCEforms .wrapperTable div.typo3-dyntabmenu-tabs ,
359 .typo3-TCEforms .wrapperTable1 div.typo3-dyntabmenu-tabs,
360 .typo3-TCEforms .wrapperTable2 div.typo3-dyntabmenu-tabs,
361 .typo3-TCEforms .wrapperTable3 div.typo3-dyntabmenu-tabs,
362 .typo3-TCEforms .wrapperTable4 div.typo3-dyntabmenu-tabs,
363 .typo3-TCEforms .wrapperTable5 div.typo3-dyntabmenu-tabs {
364 background: transparent;
365 }
366
367 /** tabs inside the table => flexforms */
368 .typo3-TCEforms .wrapperTable .typo3-dyntabmenu-divs,
369 .typo3-TCEforms .wrapperTable1 .typo3-dyntabmenu-divs,
370 .typo3-TCEforms .wrapperTable2 .typo3-dyntabmenu-divs,
371 .typo3-TCEforms .wrapperTable3 .typo3-dyntabmenu-divs,
372 .typo3-TCEforms .wrapperTable4 .typo3-dyntabmenu-divs,
373 .typo3-TCEforms .wrapperTable5 .typo3-dyntabmenu-divs {
374 border: 1px solid #c0c0c0;
375 }
376
377
378 /* - - - - - - - - - - - - - - - - - - - - -
379 TCEforms Inline-Relational-Record-Editing
380 - - - - - - - - - - - - - - - - - - - - - */
381 .t3-form-field-container-inline {
382 border: 1px solid #aaaaaa;
383 background-color: #f9f9f9;
384 }
385
386 .t3-form-field-header-inline {
387 background-color: #E0E0E0;
388 }
389 .t3-form-field-header-inline:hover {
390 background-color: #cccccc;
391 }
392
393 .t3-form-header-inline-loadingbar {
394 border-top: 1px solid #aaaaaa;
395 }
396
397 .t3-form-field-container-inline-hidden,
398 .t3-form-field-container-inline-placeHolder {
399 opacity:0.3;
400 }
401
402 .t3-form-field-header-inline table {
403 vertical-align:top;
404 }
405
406 .t3-form-field-header-inline-thumbnail-image {
407 border: none;
408 }
409
410 .t3-form-field-record-inline {
411 border-top: 1px solid #aaaaaa;
412 }
413
414 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable,
415 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable1,
416 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable2,
417 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable3,
418 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable4,
419 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable5 {
420 border: 0;
421 }
422
423 .t3-form-field-header-inline td.t3-form-field-header-inline-summary,
424 .t3-form-field-header-inline td.t3-form-field-header-inline-icon {
425 cursor: pointer;
426 }
427
428 .t3-form-field-header-inline td.t3-form-field-header-inline-summary dl dt {
429 font-weight: bold;
430 }
431
432 /* - - - - - - - - - - - - - - - - - - - - -
433 TCEforms Sections
434 - - - - - - - - - - - - - - - - - - - - - */
435
436 .typo3-TCEforms-flexForm .bgColor4,
437 .typo3-TCEforms-flexForm .bgColor5 {
438 background: none;
439 display: inline-block;
440 }
441
442 .t3-form-field-label-flexsection {
443 border-top: 1px solid #cdcdcd;
444 }
445
446 .t3-form-field-container-flexsections {
447 background: #dadada;
448 }
449
450 .t3-form-field-record-flexsection {
451 background: #eee;
452 }
453
454 .t3-form-field-add-flexsection {
455 border-top: 1px solid #cdcdcd;
456 }
457
458
459 .typo3-TCEforms-select-selectedItemWithBackgroundImage {
460 background-color:#fff;
461 background-position: 0% 50%;
462 background-repeat:no-repeat;
463 padding:1px 1px 1px 24px;
464 }
465
466 .ext-webkit .typo3-TCEforms-select-selectedItemWithBackgroundImage {
467 text-indent: 20px;
468 background-position-x: 6px;
469 }
470 .ext-webkit .typo3-TCEforms-select-selectedItemWithBackgroundImage optgroup option {
471 text-indent: 20px;
472 }
473 .ext-chrome:not(.ext-mac) .typo3-TCEforms-select-selectedItemWithBackgroundImage {
474 text-indent: 0px;
475 background-position-x: 5px;
476 }
477
478 .t3-tceforms-fieldReadOnly {
479 padding:5px;
480 border:1px solid #cccccc;
481 background: #f4f4f4;
482 color: #696362;
483 -webkit-box-shadow: inset 0px 0px 5px 0px #e8e8e8;
484 box-shadow: inset 0px 0px 5px 0px #e8e8e8;
485 padding-right:21px;
486 position:relative;
487 }
488
489 .t3-tceforms-fieldReadOnly span.t3-icon {
490 position:absolute;
491 right:3px;
492 top:4px;
493 }
494
495 .t3-form-field-item {
496 position: relative;
497 border: 1px solid transparent;
498 padding: 7px 0;
499 }
500
501 .t3-tceforms-widget-null-wrapper + .t3-form-field-item {
502 display: inline-block;
503 }
504
505 .t3-form-field-item.disabled {
506 border: 1px dotted #696362;
507 }
508
509 .t3-form-field-disable,
510 .t3-form-field-item.disabled .t3-form-field-item.disabled .t3-form-field-disable {
511 display: none;
512 }
513 .t3-form-field-item.disabled .t3-form-field-disable {
514 z-index: 8000;
515 background: #f4f4f4;
516 display: block;
517 position: absolute;
518 width: 100%;
519 height: 100%;
520
521 opacity: 0.5;
522 filter: alpha(opacity=50);
523 -moz-opacity: 0.5;
524 }
525
526 .t3-form-palette-field-label {
527 text-indent: 2px;
528 }