2 * This file is part of the TYPO3 CMS project.
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.
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
11 * The TYPO3 project - inspiring people to share!
14 /* - - - - - - - - - - - - - - - - - - - - -
16 - - - - - - - - - - - - - - - - - - - - - */
18 // Special handling of Tabs within FormEngine
21 // Move dyntab inner padding into fieldset for horizontal HR
22 div.typo3-dyntabmenu-divs {
38 padding: 0 @line-height-computed 0 @line-height-computed;
42 border-top: 1px solid @nav-tabs-border-color;
43 padding: ceil(@line-height-computed * 1.5) @line-height-computed floor(@line-height-computed * 0.25) @line-height-computed;
50 .t3-form-palette-fieldset {
51 .t3-form-palette-field-container {
52 display: inline-block;
54 padding-bottom: @line-height-computed;
62 padding-top: @line-height-computed;
72 padding-bottom: @line-height-computed;
81 img.t3-TCEforms-reqImg {
92 img.t3-TCEforms-reqTabImg {
99 img.t3-TCEforms-contentchangedImg {
108 .t3-form-palette-icon-required {
118 /* renamed to .t3-form-palette-icon-required, lines below kept for backwards-compatibility */
119 img.t3-TCEforms-reqPaletteImg {
130 .t3-form-palette-icon-contentchanged {
138 /* renamed to .t3-form-palette-icon-contentchanged, lines below kept for backwards-compatibility */
139 img.t3-TCEforms-contentchangedPaletteImg {
153 .typo3-TCEforms-recHeaderRow {
155 padding-bottom: 20px;
158 .typo3-TCEforms .bgColor2,
159 .typo3-TCEforms tr.bgColor2 td {
163 .typo3-TCEforms optgroup.c-divider,
164 select option.c-divider {
169 .typo3-TCEforms optgroup option {
170 background-color: white;
175 text-transform: none;
181 .typo3-TCEforms select.icon-select option {
185 .typo3-TCEforms table.typo3-TCEforms-select-checkbox {
189 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tbody {
195 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td {
196 vertical-align: middle;
199 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-header td,
200 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-checkbox,
201 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
205 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
209 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell img {
214 .typo3-TCEforms table.typo3-TCEforms-select-checkbox td.c-descr {
218 .typo3-TCEforms table.typo3-TCEforms-select-checkbox td.c-descr img {
222 .typo3-TCEforms table.typo3-TCEforms-select-singlebox {
227 .typo3-TCEforms .checkbox,
228 .typo3-TCEforms .checkbox:hover {
233 .typo3-TCEforms td.formField-header,
234 .typo3-TCEforms td.palette-header,
235 .typo3-TCEforms td.formField-field {
241 div.typo3-TCEforms div.c-tablayer table > tbody > tr > td > table.wrapperTable > tbody > tr > td {
246 .t3-form-field-group-file tr:last-child td {
250 .typo3-TCEforms td.icons {
251 padding: 0 2px 2px 2px;
254 .typo3-TCEforms td.thumbnails {
258 .typo3-TCEforms div.imagethumbs {
264 .typo3-TCEforms div.imagethumbs br {
268 .typo3-TCEforms div.imagethumbs .nobr {
269 background-color: #CCC;
270 display: inline-block;
279 .typo3-TCEforms div.imagethumbs .nobr a {
287 .typo3-TCEforms div.imagethumbs .nobr a img {
290 vertical-align: middle;
294 .typo3-TCEforms div.imagethumbs .nobr span {
298 .typo3-TCEforms span.filetypes {
306 .t3-form-field-container {
310 .typo3-TCEforms-palette .typo3-csh-link img {
315 .typo3-TCEforms-palette select.select,
316 .t3-form-palette-field-container select.select {
317 margin: 4px 2px 4px 1px;
320 .t3-form-palette-field-container .t3-form-palette-field-label,
321 .t3-form-palette-field-container .t3-form-palette-field {
326 .typo3-TCEforms .typo3-csh-link {
330 .t3-tceforms-fieldReadOnly {
331 background-color: #fefefe;
332 border: 1px solid #7c7c7c;
334 pointer-events: none;
337 filter: ~"alpha(opacity=@50)";
339 /** Lock icon in right corner */
340 padding: 3px 30px 3px 6px;
341 margin: 0 0.5em 0.5em 0;
345 /* - - - - - - - - - - - - - - - - - - - - -
347 - - - - - - - - - - - - - - - - - - - - - */
349 div.typo3-TCEforms-suggest-position-right {
353 div.typo3-TCEforms-suggest label {
357 div.typo3-TCEforms-suggest-indicator {
363 div.typo3-TCEforms-suggest-choices {
364 background-color: white;
365 border: 1px solid #888;
371 div.typo3-TCEforms-suggest-choices ul {
376 div.typo3-TCEforms-suggest-choices li {
378 background-color: #efeff4;
379 background-repeat: no-repeat;
380 background-position: 4px center;
381 list-style-type: none;
384 padding: 4px 2px 4px 24px;
387 div.typo3-TCEforms-suggest-choices li.suggest-noresults {
391 div.typo3-TCEforms-suggest-choices span.suggest-uid {
395 div.typo3-TCEforms-suggest-choices span.suggest-path {
400 input.typo3-TCEforms-suggest-search {
403 vertical-align: middle;
407 /* - - - - - - - - - - - - - - - - - - - - -
409 - - - - - - - - - - - - - - - - - - - - - */
411 .t3-form-field-label-flex {
412 border-top: 1px solid #c0c0c0;
416 .t3-form-field-flex {
421 /* - - - - - - - - - - - - - - - - - - - - -
422 TCEforms Inline-Relational-Record-Editing
423 - - - - - - - - - - - - - - - - - - - - - */
424 .t3-form-field-container-wrap {
428 .t3-form-field-container-inline {
429 border: 1px solid #aaaaaa;
430 background-color: #f9f9f9;
434 .t3-form-field-header-inline > span {
440 .t3-form-field-header-inline-wrap:before,
441 .t3-form-field-header-inline-wrap:after {
446 .t3-form-field-header-inline-wrap:after {
450 .t3-form-field-header-inline-wrap {
454 .t3-form-field-header-inline-icon,
455 .t3-form-field-header-inline-thumbnail {
460 .t3-form-field-header-inline-icon {
466 .t3-form-field-header-inline-thumbnail {
471 .t3-form-field-header-inline-thumbnail img {
475 .t3-form-field-header-inline-ctrl {
479 .t3-form-field-header-inline-ctrl .t3-icon {
484 .t3-form-field-header-inline-body,
485 .t3-form-field-header-inline-summary {
490 .t3-form-field-header-inline-thumbnail,
491 .t3-form-field-header-inline-summary {
495 .t3-form-field-header-inline-ctrl,
496 .t3-form-field-header-inline-summary {
500 .t3-form-field-header-inline-summary dl {
505 .t3-form-field-header-inline-summary dt {
512 .t3-form-field-header-inline-summary dd {
516 .t3-form-field-header-inline-ctrl img {
517 vertical-align: middle;
520 .t3-form-field-header-inline .t3-form-field-header-inline-ctrl > * {
524 .t3-form-field-header-inline:hover .t3-form-field-header-inline-ctrl > * {
528 .t3-form-field-header-inline .t3-form-field-header-inline-ctrl > span.sortableHandle {
531 display: inline-block;
534 .t3-form-field-container-inline-placeHolder div.t3-form-field-record-inline,
535 .t3-form-field-container-inline-collapsed div.t3-form-field-record-inline {
536 display:none !important;
539 .t3-form-field-header-inline {
540 background-color: #E0E0E0;
546 .t3-form-field-container-inline-placeHolder .t3-form-field-header-inline > span {
550 .t3-form-field-record-inline {
551 border-top: 1px solid #aaaaaa;
556 .t3-form-field-record-inline > table {
560 .t3-form-field-record-inline .typo3-dyntabmenu-divs,
561 .t3-form-field-record-inline .typo3-dyntabmenu-tabs {
563 margin-right:8px !important;
564 margin-bottom:0px !important;
571 /* - - - - - - - - - - - - - - - - - - - - -
573 - - - - - - - - - - - - - - - - - - - - - */
574 .t3-flex-section-header .t3-record-title {
583 .t3-flex-section-header,
584 .t3-form-field-container-flexsection {
588 .t3-form-field-header-flexsection {
593 .t3-form-field-label-flexsection {
594 border-top: 1px solid #cdcdcd;
598 .t3-form-field-toggle-flexsection {
599 padding: 5px 0 5px 20px;
602 .t3-form-field-add-flexsection {
603 border-top: 1px solid #cdcdcd;
604 padding: 10px 5px 5px 20px;
608 .t3-form-field-container-flexsections {
614 .t3-flex-section-content,
615 .t3-form-field-record-flexsection {
620 .t3-flex-section-content > div,
621 .t3-form-field-record-flexsection > div {
625 .t3-flex-section-header-preview {
628 display: inline-block;
632 text-overflow: ellipsis;
635 /* preview image in sys_file records */
636 img.t3-tceforms-sysfile-imagepreview {
642 * html div#typo3-docbody .typo3-TCEforms {
646 .typo3-TCEforms img[src*="clear.gif"] {
651 /* - - - - - - - - - - - - - - - - - - - - -
653 - - - - - - - - - - - - - - - - - - - - - */
655 table#typo3-altdoc-header input,
661 .typo3-TCEforms .checkbox,
662 .typo3-TCEforms .checkbox:hover {
667 .t3-tceforms-widget-null-wrapper {
668 display: inline-block;
675 .t3-tceforms-widget-null-wrapper input {
679 .t3-tceforms-input-wrapper-datetime .t3-icon-edit-pick-date {
684 .typo3-TCEforms table#typo3-altdoc-header input:hover,
685 .c-inputButton:hover {
690 .typo3-TCEforms .typo3-TCEforms-recHeader {
695 .typo3-TCEforms .typo3-TCEforms-recHeaderRow {
700 .typo3-TCEforms span.typo3-TCEforms-newToken {
705 .typo3-TCEforms span.typo3-TCEforms-helpText {
706 background: transparent;
710 table.typo3-TCEforms-select-checkbox {
711 background-color: #ffffff;
712 border: 1px solid #aaa;
715 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-header td {
716 background-color: #fff;
720 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr:nth-child(2n) {
721 background-color: #f7f7f7;
724 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-selectedItem {
725 background-color: #d8ecd0;
728 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-invalidItem {
732 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr:hover {
733 background-color: #dedede;
736 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-selectedItem:hover {
737 background-color: #abd99a;
740 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-invalidItem:hover {
741 background-color: transparent;
744 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
748 .typo3-TCEforms optgroup.c-divider,
749 select option.c-divider {
750 background-color: #eee;
751 border-top: 1px solid #666;
754 text-transform: uppercase;
757 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
758 show text of default language under the translated input field
759 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
760 .t3-form-original-language {
761 background-color: #dadada;
762 border: 1px solid #c0c0c0;
768 .t3-form-original-language-diff {
769 border: 1px solid #c0c0c0;
774 .t3-form-original-language-diffheader {
780 .t3-form-original-language-diffcontent {
784 /* Default. Always used on main-palettes in the bottom of the forms */
786 .typo3-TCEforms .typo3-TCEforms-checkboxArray td {
790 input.typo3-TCEforms-suggest-search {
791 background-image: url('../../../../icons/gfx/zoom.gif');
792 background-position: 2px center;
793 background-repeat: no-repeat;
796 div.typo3-TCEforms-suggest-choices ul {
797 list-style-type: none;
800 div.typo3-TCEforms-suggest-choices li.selected {
801 background-color: #ffb !important;
804 div.typo3-TCEforms-suggest-choices li.pages {
805 background-color: #fcc;
808 div.typo3-TCEforms-suggest-choices span.suggest-uid {
812 div.typo3-TCEforms-suggest-choices span.suggest-path abbr {
816 div.typo3-TCEforms-suggest-choises a {
820 /* - - - - - - - - - - - - - - - - - - - - -
822 - - - - - - - - - - - - - - - - - - - - - */
823 .t3-form-field-container-flex {
827 div.t3-form-field-container:first-child .t3-form-field-label-flex {
831 /** no separate background for dyntabs in flexforms **/
832 .typo3-TCEforms .wrapperTable div.typo3-dyntabmenu-tabs ,
833 .typo3-TCEforms .wrapperTable1 div.typo3-dyntabmenu-tabs,
834 .typo3-TCEforms .wrapperTable2 div.typo3-dyntabmenu-tabs,
835 .typo3-TCEforms .wrapperTable3 div.typo3-dyntabmenu-tabs,
836 .typo3-TCEforms .wrapperTable4 div.typo3-dyntabmenu-tabs,
837 .typo3-TCEforms .wrapperTable5 div.typo3-dyntabmenu-tabs {
838 background: transparent;
841 /** tabs inside the table => flexforms */
842 .typo3-TCEforms .wrapperTable .typo3-dyntabmenu-divs,
843 .typo3-TCEforms .wrapperTable1 .typo3-dyntabmenu-divs,
844 .typo3-TCEforms .wrapperTable2 .typo3-dyntabmenu-divs,
845 .typo3-TCEforms .wrapperTable3 .typo3-dyntabmenu-divs,
846 .typo3-TCEforms .wrapperTable4 .typo3-dyntabmenu-divs,
847 .typo3-TCEforms .wrapperTable5 .typo3-dyntabmenu-divs {
848 border: 1px solid #c0c0c0;
852 /* - - - - - - - - - - - - - - - - - - - - -
853 TCEforms Inline-Relational-Record-Editing
854 - - - - - - - - - - - - - - - - - - - - - */
856 .t3-form-field-header-inline:hover {
857 background-color: #cccccc;
860 .t3-form-header-inline-loadingbar {
861 border-top: 1px solid #aaaaaa;
864 .t3-form-field-container-inline-hidden,
865 .t3-form-field-container-inline-placeHolder {
869 .t3-form-field-header-inline table {
873 .t3-form-field-header-inline-thumbnail-image {
877 .t3-form-field-record-inline .typo3-message {
878 margin-bottom: 1.5em;
881 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable,
882 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable1,
883 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable2,
884 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable3,
885 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable4,
886 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable5 {
890 .t3-form-field-header-inline td.t3-form-field-header-inline-summary dl dt {
894 /* - - - - - - - - - - - - - - - - - - - - -
896 - - - - - - - - - - - - - - - - - - - - - */
898 .typo3-TCEforms-flexForm .bgColor4,
899 .typo3-TCEforms-flexForm .bgColor5 {
901 display: inline-block;
904 .typo3-TCEforms-select-selectedItemWithBackgroundImage {
905 background-color:#fff;
906 background-position: 0% 50%;
907 background-repeat:no-repeat;
908 padding:1px 1px 1px 24px;
911 .ext-webkit .typo3-TCEforms-select-selectedItemWithBackgroundImage {
913 background-position-x: 6px;
915 .ext-webkit .typo3-TCEforms-select-selectedItemWithBackgroundImage optgroup option {
918 .ext-chrome:not(.ext-mac) .typo3-TCEforms-select-selectedItemWithBackgroundImage {
920 background-position-x: 5px;
923 .t3-tceforms-fieldReadOnly span.t3-icon {
929 .t3-form-field-item {
931 border: 1px solid transparent;
935 .t3-tceforms-widget-null-wrapper + .t3-form-field-item {
936 display: inline-block;
939 .t3-form-field-item.disabled {
940 border: 1px dotted #696362;
943 .t3-form-field-disable,
944 .t3-form-field-item.disabled .t3-form-field-item.disabled .t3-form-field-disable {
947 .t3-form-field-item.disabled .t3-form-field-disable {
956 filter: alpha(opacity=50);
959 .t3-form-palette-field-label {
963 /* - - - - - - - - - - - - - - - - - - - - -
965 - - - - - - - - - - - - - - - - - - - - - */
967 .t3-form-field-item .x-tree input.x-tree-node-cb {
970 vertical-align: middle;