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 .typo3-TCEforms div.typo3-TCEforms-originalLanguageValue {
758 background-color: #dadada;
759 border: 1px solid #c0c0c0;
762 .typo3-TCEforms div.typo3-TCEforms-diffBox {
763 background-color: white;
764 border: 1px solid black;
767 .typo3-TCEforms div.typo3-TCEforms-diffBox-header {
768 background-color: red;
772 /* Default. Always used on main-palettes in the bottom of the forms */
774 .typo3-TCEforms .typo3-TCEforms-checkboxArray td {
778 input.typo3-TCEforms-suggest-search {
779 background-image: url('../../../../icons/gfx/zoom.gif');
780 background-position: 2px center;
781 background-repeat: no-repeat;
784 div.typo3-TCEforms-suggest-choices ul {
785 list-style-type: none;
788 div.typo3-TCEforms-suggest-choices li.selected {
789 background-color: #ffb !important;
792 div.typo3-TCEforms-suggest-choices li.pages {
793 background-color: #fcc;
796 div.typo3-TCEforms-suggest-choices span.suggest-uid {
800 div.typo3-TCEforms-suggest-choices span.suggest-path abbr {
804 div.typo3-TCEforms-suggest-choises a {
808 /* - - - - - - - - - - - - - - - - - - - - -
810 - - - - - - - - - - - - - - - - - - - - - */
811 .t3-form-field-container-flex {
815 div.t3-form-field-container:first-child .t3-form-field-label-flex {
819 /** no separate background for dyntabs in flexforms **/
820 .typo3-TCEforms .wrapperTable div.typo3-dyntabmenu-tabs ,
821 .typo3-TCEforms .wrapperTable1 div.typo3-dyntabmenu-tabs,
822 .typo3-TCEforms .wrapperTable2 div.typo3-dyntabmenu-tabs,
823 .typo3-TCEforms .wrapperTable3 div.typo3-dyntabmenu-tabs,
824 .typo3-TCEforms .wrapperTable4 div.typo3-dyntabmenu-tabs,
825 .typo3-TCEforms .wrapperTable5 div.typo3-dyntabmenu-tabs {
826 background: transparent;
829 /** tabs inside the table => flexforms */
830 .typo3-TCEforms .wrapperTable .typo3-dyntabmenu-divs,
831 .typo3-TCEforms .wrapperTable1 .typo3-dyntabmenu-divs,
832 .typo3-TCEforms .wrapperTable2 .typo3-dyntabmenu-divs,
833 .typo3-TCEforms .wrapperTable3 .typo3-dyntabmenu-divs,
834 .typo3-TCEforms .wrapperTable4 .typo3-dyntabmenu-divs,
835 .typo3-TCEforms .wrapperTable5 .typo3-dyntabmenu-divs {
836 border: 1px solid #c0c0c0;
840 /* - - - - - - - - - - - - - - - - - - - - -
841 TCEforms Inline-Relational-Record-Editing
842 - - - - - - - - - - - - - - - - - - - - - */
844 .t3-form-field-header-inline:hover {
845 background-color: #cccccc;
848 .t3-form-header-inline-loadingbar {
849 border-top: 1px solid #aaaaaa;
852 .t3-form-field-container-inline-hidden,
853 .t3-form-field-container-inline-placeHolder {
857 .t3-form-field-header-inline table {
861 .t3-form-field-header-inline-thumbnail-image {
865 .t3-form-field-record-inline .typo3-message {
866 margin-bottom: 1.5em;
869 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable,
870 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable1,
871 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable2,
872 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable3,
873 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable4,
874 .typo3-TCEforms .t3-form-field-container-inline .wrapperTable5 {
878 .t3-form-field-header-inline td.t3-form-field-header-inline-summary dl dt {
882 /* - - - - - - - - - - - - - - - - - - - - -
884 - - - - - - - - - - - - - - - - - - - - - */
886 .typo3-TCEforms-flexForm .bgColor4,
887 .typo3-TCEforms-flexForm .bgColor5 {
889 display: inline-block;
892 .typo3-TCEforms-select-selectedItemWithBackgroundImage {
893 background-color:#fff;
894 background-position: 0% 50%;
895 background-repeat:no-repeat;
896 padding:1px 1px 1px 24px;
899 .ext-webkit .typo3-TCEforms-select-selectedItemWithBackgroundImage {
901 background-position-x: 6px;
903 .ext-webkit .typo3-TCEforms-select-selectedItemWithBackgroundImage optgroup option {
906 .ext-chrome:not(.ext-mac) .typo3-TCEforms-select-selectedItemWithBackgroundImage {
908 background-position-x: 5px;
911 .t3-tceforms-fieldReadOnly span.t3-icon {
917 .t3-form-field-item {
919 border: 1px solid transparent;
923 .t3-tceforms-widget-null-wrapper + .t3-form-field-item {
924 display: inline-block;
927 .t3-form-field-item.disabled {
928 border: 1px dotted #696362;
931 .t3-form-field-disable,
932 .t3-form-field-item.disabled .t3-form-field-item.disabled .t3-form-field-disable {
935 .t3-form-field-item.disabled .t3-form-field-disable {
944 filter: alpha(opacity=50);
947 .t3-form-palette-field-label {
951 /* - - - - - - - - - - - - - - - - - - - - -
953 - - - - - - - - - - - - - - - - - - - - - */
955 .t3-form-field-item .x-tree input.x-tree-node-cb {
958 vertical-align: middle;