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