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 div.typo3-dyntabmenu-divs {
22 // Override .tab inner padding: for section border
37 border-top: 1px solid @gray-light;
40 // Padding and margin are created by table <td>
41 margin-top: @padding-large-vertical;
46 .t3-form-palette-fieldset {
47 margin-bottom: @padding-large-vertical;
49 .t3-form-palette-field-container {
50 margin-bottom: @padding-base-vertical;
55 table.t3-form-field-group-file {
57 // Padding coming from outer wrap
68 img.t3-TCEforms-reqImg {
79 img.t3-TCEforms-reqTabImg {
86 img.t3-TCEforms-contentchangedImg {
95 .t3-form-palette-icon-required {
105 /* renamed to .t3-form-palette-icon-required, lines below kept for backwards-compatibility */
106 img.t3-TCEforms-reqPaletteImg {
117 .t3-form-palette-icon-contentchanged {
125 /* renamed to .t3-form-palette-icon-contentchanged, lines below kept for backwards-compatibility */
126 img.t3-TCEforms-contentchangedPaletteImg {
140 .typo3-TCEforms-recHeaderRow {
142 padding-bottom: 20px;
149 .typo3-TCEforms .bgColor2,
150 .typo3-TCEforms tr.bgColor2 td {
154 .typo3-TCEforms optgroup.c-divider,
155 select option.c-divider {
160 .typo3-TCEforms optgroup option {
161 background-color: white;
166 text-transform: none;
172 .typo3-TCEforms select.icon-select option {
176 .typo3-TCEforms table.typo3-TCEforms-select-checkbox {
180 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tbody {
186 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td {
187 vertical-align: middle;
190 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-header td,
191 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-checkbox,
192 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
196 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
200 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell img {
204 .typo3-TCEforms table.typo3-TCEforms-select-checkbox td.c-descr {
208 .typo3-TCEforms table.typo3-TCEforms-select-checkbox td.c-descr img {
212 .typo3-TCEforms table.typo3-TCEforms-select-singlebox {
217 .typo3-TCEforms .checkbox,
218 .typo3-TCEforms .checkbox:hover {
223 .typo3-TCEforms td.formField-header,
224 .typo3-TCEforms td.palette-header,
225 .typo3-TCEforms td.formField-field {
231 div.typo3-TCEforms div.c-tablayer table > tbody > tr > td > table.wrapperTable > tbody > tr > td {
236 .t3-form-field-group-file tr:last-child td {
240 .typo3-TCEforms td.icons {
244 .typo3-TCEforms td.thumbnails {
248 .typo3-TCEforms div.imagethumbs {
254 .typo3-TCEforms div.imagethumbs br {
258 .typo3-TCEforms div.imagethumbs .nobr {
259 background-color: #CCC;
260 display: inline-block;
269 .typo3-TCEforms div.imagethumbs .nobr a {
277 .typo3-TCEforms div.imagethumbs .nobr a img {
280 vertical-align: middle;
284 .typo3-TCEforms div.imagethumbs .nobr span {
288 .typo3-TCEforms span.filetypes {
296 .t3-form-field-container {
300 .typo3-TCEforms-palette .typo3-csh-link img {
305 .typo3-TCEforms-palette select.select,
306 .t3-form-palette-field-container select.select {
307 margin: 4px 2px 4px 1px;
310 .t3-form-palette-field-container {
311 display: inline-block;
314 margin-bottom: 0.5em;
317 .t3-form-palette-field-container .t3-form-palette-field-label,
318 .t3-form-palette-field-container .t3-form-palette-field {
323 .typo3-TCEforms .typo3-csh-link {
327 .t3-tceforms-fieldReadOnly {
328 background-color: #fefefe;
329 border: 1px solid #7c7c7c;
331 pointer-events: none;
334 filter: ~"alpha(opacity=@50)";
336 /** Lock icon in right corner */
337 padding: 3px 30px 3px 6px;
338 margin: 0 0.5em 0.5em 0;
342 /* - - - - - - - - - - - - - - - - - - - - -
344 - - - - - - - - - - - - - - - - - - - - - */
345 div.typo3-TCEforms-suggest-position-right {
350 div.typo3-TCEforms-suggest label {
354 div.typo3-TCEforms-suggest-indicator {
360 div.typo3-TCEforms-suggest-choices {
361 background-color: white;
362 border: 1px solid #888;
368 div.typo3-TCEforms-suggest-choices ul {
373 div.typo3-TCEforms-suggest-choices li {
375 background-color: #efeff4;
376 background-repeat: no-repeat;
377 background-position: 4px center;
378 list-style-type: none;
381 padding: 4px 2px 4px 24px;
384 div.typo3-TCEforms-suggest-choices li.suggest-noresults {
388 div.typo3-TCEforms-suggest-choices span.suggest-uid {
392 div.typo3-TCEforms-suggest-choices span.suggest-path {
397 input.typo3-TCEforms-suggest-search {
400 vertical-align: middle;
404 /* - - - - - - - - - - - - - - - - - - - - -
406 - - - - - - - - - - - - - - - - - - - - - */
408 .t3-form-field-label-flex {
409 border-top: 1px solid #c0c0c0;
413 .t3-form-field-flex {
418 /* - - - - - - - - - - - - - - - - - - - - -
419 TCEforms Inline-Relational-Record-Editing
420 - - - - - - - - - - - - - - - - - - - - - */
421 .t3-form-field-container-wrap {
425 .t3-form-field-container-inline {
426 border: 1px solid #aaaaaa;
427 background-color: #f9f9f9;
431 .t3-form-field-header-inline > span {
437 .t3-form-field-header-inline-wrap:before,
438 .t3-form-field-header-inline-wrap:after {
443 .t3-form-field-header-inline-wrap:after {
447 .t3-form-field-header-inline-wrap {
451 .t3-form-field-header-inline-icon,
452 .t3-form-field-header-inline-thumbnail {
457 .t3-form-field-header-inline-icon {
463 .t3-form-field-header-inline-thumbnail {
468 .t3-form-field-header-inline-thumbnail img {
472 .t3-form-field-header-inline-ctrl {
476 .t3-form-field-header-inline-ctrl .t3-icon {
481 .t3-form-field-header-inline-body,
482 .t3-form-field-header-inline-summary {
487 .t3-form-field-header-inline-thumbnail,
488 .t3-form-field-header-inline-summary {
492 .t3-form-field-header-inline-ctrl,
493 .t3-form-field-header-inline-summary {
497 .t3-form-field-header-inline-summary dl {
502 .t3-form-field-header-inline-summary dt {
509 .t3-form-field-header-inline-summary dd {
513 .t3-form-field-header-inline-ctrl img {
514 vertical-align: middle;
517 .t3-form-field-header-inline .t3-form-field-header-inline-ctrl > * {
521 .t3-form-field-header-inline:hover .t3-form-field-header-inline-ctrl > * {
525 .t3-form-field-header-inline .t3-form-field-header-inline-ctrl > span.sortableHandle {
528 display: inline-block;
531 .t3-form-field-container-inline-placeHolder div.t3-form-field-record-inline,
532 .t3-form-field-container-inline-collapsed div.t3-form-field-record-inline {
533 display:none !important;
536 .t3-form-field-header-inline {
537 background-color: #E0E0E0;
543 .t3-form-field-container-inline-placeHolder .t3-form-field-header-inline > span {
547 .t3-form-field-record-inline {
548 border-top: 1px solid #aaaaaa;
553 .t3-form-field-record-inline > table {
557 .t3-form-field-record-inline .typo3-dyntabmenu-divs,
558 .t3-form-field-record-inline .typo3-dyntabmenu-tabs {
560 margin-right:8px !important;
561 margin-bottom:0px !important;
568 /* - - - - - - - - - - - - - - - - - - - - -
570 - - - - - - - - - - - - - - - - - - - - - */
571 .t3-flex-section-header .t3-record-title {
580 .t3-flex-section-header,
581 .t3-form-field-container-flexsection {
585 .t3-form-field-header-flexsection {
590 .t3-form-field-label-flexsection {
591 border-top: 1px solid #cdcdcd;
595 .t3-form-field-toggle-flexsection {
596 padding: 5px 0 5px 20px;
599 .t3-form-field-add-flexsection {
600 border-top: 1px solid #cdcdcd;
601 padding: 10px 5px 5px 20px;
605 .t3-form-field-container-flexsections {
611 .t3-flex-section-content,
612 .t3-form-field-record-flexsection {
617 .t3-flex-section-content > div,
618 .t3-form-field-record-flexsection > div {
622 .t3-flex-section-header-preview {
625 display: inline-block;
629 text-overflow: ellipsis;
632 /* preview image in sys_file records */
633 img.t3-tceforms-sysfile-imagepreview {
639 * html div#typo3-docbody .typo3-TCEforms {
643 .typo3-TCEforms img[src*="clear.gif"] {
648 /* - - - - - - - - - - - - - - - - - - - - -
650 - - - - - - - - - - - - - - - - - - - - - */
652 table#typo3-altdoc-header input,
658 .typo3-TCEforms .checkbox,
659 .typo3-TCEforms .checkbox:hover {
664 .t3-tceforms-input-wrapper,
665 .t3-tceforms-input-wrapper-hover,
666 .t3-tceforms-input-wrapper-datetime,
667 .t3-tceforms-input-wrapper-datetime-hover {
673 .t3-tceforms-widget-null-wrapper {
674 display: inline-block;
681 .t3-tceforms-widget-null-wrapper input {
687 .t3-tceforms-input-wrapper .t3-tceforms-input-clearer,
688 .t3-tceforms-input-wrapper-hover .t3-tceforms-input-clearer {
696 .t3-tceforms-input-wrapper-datetime .t3-tceforms-input-clearer,
697 .t3-tceforms-input-wrapper-datetime-hover .t3-tceforms-input-clearer {
704 .t3-tceforms-input-wrapper-datetime .t3-icon-edit-pick-date,
705 .t3-tceforms-input-wrapper-datetime-hover .t3-icon-edit-pick-date {
708 .t3-tceforms-input-wrapper .tceforms-textfield,
709 .t3-tceforms-input-wrapper-hover .tceforms-textfield,
710 .t3-tceforms-input-wrapper .tceforms-datetimefield,
711 .t3-tceforms-input-wrapper-hover .tceforms-datetimefield,
712 .t3-tceforms-input-wrapper-datetime .tceforms-textfield,
713 .t3-tceforms-input-wrapper-datetime-hover .tceforms-textfield,
714 .t3-tceforms-input-wrapper-datetime .tceforms-datetimefield,
715 .t3-tceforms-input-wrapper-datetime-hover .tceforms-datetimefield {
718 padding-right: 30px!important;
721 .t3-tceforms-input-wrapper-hover .t3-tceforms-input-clearer,
722 .t3-tceforms-input-wrapper-datetime-hover .t3-tceforms-input-clearer {
726 .typo3-TCEforms table#typo3-altdoc-header input:hover,
727 .c-inputButton:hover {
732 .typo3-TCEforms .typo3-TCEforms-recHeader {
737 .typo3-TCEforms .typo3-TCEforms-recHeaderRow {
742 .typo3-TCEforms span.typo3-TCEforms-newToken {
747 .typo3-TCEforms span.typo3-TCEforms-helpText {
748 background: transparent;
752 table.typo3-TCEforms-select-checkbox {
753 background-color: #ffffff;
754 border: 1px solid #aaa;
757 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-header td {
758 background-color: #fff;
762 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr:nth-child(2n) {
763 background-color: #f7f7f7;
766 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-selectedItem {
767 background-color: #d8ecd0;
770 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-invalidItem {
774 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr:hover {
775 background-color: #dedede;
778 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-selectedItem:hover {
779 background-color: #abd99a;
782 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr.c-invalidItem:hover {
783 background-color: transparent;
786 .typo3-TCEforms table.typo3-TCEforms-select-checkbox tr td.c-labelCell {
790 .typo3-TCEforms optgroup.c-divider,
791 select option.c-divider {
792 background-color: #eee;
793 border-top: 1px solid #666;
796 text-transform: uppercase;
799 .typo3-TCEforms div.typo3-TCEforms-originalLanguageValue {
800 background-color: #dadada;
801 border: 1px solid #c0c0c0;
804 .typo3-TCEforms div.typo3-TCEforms-diffBox {
805 background-color: white;
806 border: 1px solid black;
809 .typo3-TCEforms div.typo3-TCEforms-diffBox-header {
810 background-color: red;
814 /* Default. Always used on main-palettes in the bottom of the forms */
816 .typo3-TCEforms .typo3-TCEforms-checkboxArray td {
821 .typo3-TCEforms .typo3-dyntabmenu-divs table {
823 border-bottom: 1px solid #c0c0c0;
826 input.typo3-TCEforms-suggest-search {
827 background-image: url('../../../../icons/gfx/zoom.gif');
828 background-position: 2px center;
829 background-repeat: no-repeat;
832 div.typo3-TCEforms-suggest-choices ul {
833 list-style-type: none;
836 div.typo3-TCEforms-suggest-choices li.selected {
837 background-color: #ffb !important;
840 div.typo3-TCEforms-suggest-choices li.pages {
841 background-color: #fcc;
844 div.typo3-TCEforms-suggest-choices span.suggest-uid {
848 div.typo3-TCEforms-suggest-choices span.suggest-path abbr {
852 div.typo3-TCEforms-suggest-choises a {
856 /* - - - - - - - - - - - - - - - - - - - - -
858 - - - - - - - - - - - - - - - - - - - - - */
859 .t3-form-field-container-flex {
863 div.t3-form-field-container:first-child .t3-form-field-label-flex {
867 /** no separate background for dyntabs in flexforms **/
868 .typo3-TCEforms .wrapperTable div.typo3-dyntabmenu-tabs ,
869 .typo3-TCEforms .wrapperTable1 div.typo3-dyntabmenu-tabs,
870 .typo3-TCEforms .wrapperTable2 div.typo3-dyntabmenu-tabs,
871 .typo3-TCEforms .wrapperTable3 div.typo3-dyntabmenu-tabs,
872 .typo3-TCEforms .wrapperTable4 div.typo3-dyntabmenu-tabs,
873 .typo3-TCEforms .wrapperTable5 div.typo3-dyntabmenu-tabs {
874 background: transparent;
877 /** tabs inside the table => flexforms */
878 .typo3-TCEforms .wrapperTable .typo3-dyntabmenu-divs,
879 .typo3-TCEforms .wrapperTable1 .typo3-dyntabmenu-divs,
880 .typo3-TCEforms .wrapperTable2 .typo3-dyntabmenu-divs,
881 .typo3-TCEforms .wrapperTable3 .typo3-dyntabmenu-divs,
882 .typo3-TCEforms .wrapperTable4 .typo3-dyntabmenu-divs,
883 .typo3-TCEforms .wrapperTable5 .typo3-dyntabmenu-divs {
884 border: 1px solid #c0c0c0;
888 /* - - - - - - - - - - - - - - - - - - - - -
889 TCEforms Inline-Relational-Record-Editing
890 - - - - - - - - - - - - - - - - - - - - - */
892 .t3-form-field-header-inline:hover {
893 background-color: #cccccc;
896 .t3-form-header-inline-loadingbar {
897 border-top: 1px solid #aaaaaa;
900 .t3-form-field-container-inline-hidden,
901 .t3-form-field-container-inline-placeHolder {
905 .t3-form-field-header-inline table {
909 .t3-form-field-header-inline-thumbnail-image {
913 .t3-form-field-record-inline .typo3-message {
914 margin-bottom: 1.5em;
917 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable,
918 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable1,
919 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable2,
920 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable3,
921 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable4,
922 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable5 {
926 .t3-form-field-header-inline td.t3-form-field-header-inline-summary dl dt {
930 /* - - - - - - - - - - - - - - - - - - - - -
932 - - - - - - - - - - - - - - - - - - - - - */
934 .typo3-TCEforms-flexForm .bgColor4,
935 .typo3-TCEforms-flexForm .bgColor5 {
937 display: inline-block;
940 .typo3-TCEforms-select-selectedItemWithBackgroundImage {
941 background-color:#fff;
942 background-position: 0% 50%;
943 background-repeat:no-repeat;
944 padding:1px 1px 1px 24px;
947 .ext-webkit .typo3-TCEforms-select-selectedItemWithBackgroundImage {
949 background-position-x: 6px;
951 .ext-webkit .typo3-TCEforms-select-selectedItemWithBackgroundImage optgroup option {
954 .ext-chrome:not(.ext-mac) .typo3-TCEforms-select-selectedItemWithBackgroundImage {
956 background-position-x: 5px;
959 .t3-tceforms-fieldReadOnly span.t3-icon {
965 .t3-form-field-item {
967 border: 1px solid transparent;
971 .t3-tceforms-widget-null-wrapper + .t3-form-field-item {
972 display: inline-block;
975 .t3-form-field-item.disabled {
976 border: 1px dotted #696362;
979 .t3-form-field-disable,
980 .t3-form-field-item.disabled .t3-form-field-item.disabled .t3-form-field-disable {
983 .t3-form-field-item.disabled .t3-form-field-disable {
992 filter: alpha(opacity=50);
995 .t3-form-palette-field-label {
999 /* - - - - - - - - - - - - - - - - - - - - -
1001 - - - - - - - - - - - - - - - - - - - - - */
1002 .t3-form-field-item .x-tree input.x-tree-node-cb {
1005 vertical-align: middle;