/*! * This file is part of the TYPO3 CMS project. * * It is free software; you can redistribute it and/or modify it under * the terms of the GNU General Public License, either version 2 * of the License, or any later version. * * For the full copyright and license information, please read the * LICENSE.txt file that was distributed with this source code. * * The TYPO3 project - inspiring people to share! */ .formeditor{--formeditor-module-gap:var(--module-body-padding-x);--formeditor-module-inspector:400px;--formeditor-inspector-color:var(--typo3-text-color-base);--formeditor-inspector-bg:var(--typo3-surface-container-low);--formeditor-inspector-border-width:var(--typo3-component-border-width);--formeditor-inspector-border-color:color-mix(in srgb,var(--formeditor-inspector-bg),var(--formeditor-inspector-color) var(--typo3-border-mix));--formeditor-inspector-border-radius:var(--typo3-component-border-radius);--formeditor-inspector-box-shadow:var(--typo3-component-box-shadow);--formeditor-stage-element-padding-y:.5rem;--formeditor-stage-element-padding-x:.75rem;--formeditor-stage-element-validator-width:100px;--formeditor-stage-spacing:1rem;--formeditor-stage-element-border-width:var(--typo3-component-border-width);--formeditor-stage-element-border-radius:var(--typo3-component-border-radius);--formeditor-stage-element-border-color-state:initial;--formeditor-stage-element-bg:var(--typo3-surface-bright);--formeditor-stage-element-color:var(--typo3-component-color);--formeditor-stage-element-border-color:var(--typo3-component-border-color);--formeditor-stage-element-hover-border-color:var(--typo3-component-hover-border-color);--formeditor-stage-element-active-border-color:var(--typo3-component-active-border-color);--formeditor-stage-element-hidden-bg:var(--typo3-surface-bright);--formeditor-stage-element-hidden-color:var(--typo3-component-color);--formeditor-stage-element-hidden-border-color:var(--typo3-component-border-color);position:relative} [data-module-name=form_editor]{overflow-x:clip} @media (max-width:949px){ body:has(.formeditor-inspector-expanded){max-height:100dvh;overflow:hidden}} .formeditor-loader{align-items:center;display:flex;flex-direction:column;gap:.25rem;inset:0;justify-content:center;overflow:hidden;position:absolute} .formeditor-module,.formeditor-stage-container{flex-grow:1;min-height:0;min-width:0} .formeditor-stage-container{position:relative} .formeditor-stage-container-inner{position:relative;width:100%} .formeditor-stage-container-inner>:last-child{margin-bottom:0} .formeditor-header{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin-bottom:var(--typo3-spacing)} .formeditor-header h1{margin:0} .formeditor-header-actions{align-items:center;display:flex;gap:.5rem} .formeditor-inspector{border:var(--formeditor-inspector-border-width) solid var(--formeditor-inspector-border-color);color:var(--formeditor-inspector-color);display:flex;flex-direction:column;height:calc(100dvh - var(--module-docheader-height) - var(--module-body-padding-y));inset-inline-end:calc(var(--module-body-padding-x)*-1);position:absolute;top:calc((var(--module-body-padding-y) + var(--formeditor-inspector-border-width))*-1);width:calc(100% + var(--module-body-padding-x));z-index:var(--typo3-zindex-header);-webkit-border-end:0;background:var(--formeditor-inspector-bg);border-inline-end:0;border-radius:var(--formeditor-inspector-border-radius) 0 0 var(--formeditor-inspector-border-radius);box-shadow:var(--typo3-component-box-shadow-flyout);isolation:isolate;overflow:hidden;transform:translateX(100%);transition:transform .3s ease-out} .formeditor-inspector.formeditor-inspector-expanded{transform:translateX(0)} .formeditor-inspector-inner{flex-grow:1;min-height:0;overflow:auto;padding:var(--module-body-padding)} .formeditor-inspector-collapse{display:flex;justify-content:flex-end;margin-bottom:calc(var(--typo3-spacing)/2)} .formeditor-inspector-expand{display:inline-flex} .formeditor-inspector-content .input-group{flex-wrap:nowrap} .formeditor-inspector-content .input-group>:first-child{flex-grow:1} .formeditor-inspector-content .input-group>:first-child>*{border-end-end-radius:0;border-start-end-radius:0} .formeditor-inspector-content .input-group .input-group-btn .btn-group .btn{border-end-start-radius:0;border-start-start-radius:0} .formeditor-inspector-content>.formeditor-inspector-element-remove-button{border-top:1px solid var(--module-docheader-border-color);padding-top:1rem} .formeditor-inspector-content>.formeditor-inspector-element-remove-button .btn{width:100%} .formeditor-inspector-element:last-child>:last-child{margin-bottom:0} .formeditor-inspector-element-headline{border-bottom:1px solid color-mix(in srgb,transparent,currentColor 15%);margin-bottom:1.5rem;padding-bottom:1rem} .formeditor-inspector-element-headline h2{align-items:center;display:flex;font-family:inherit;font-size:var(--typo3-font-size);font-weight:700;gap:.25rem;margin:0} typo3-form-form-element-stage-item-toolbar{display:block} .formeditor-stage{border:1px dotted color-mix(in srgb,var(--module-bg),currentColor 30%);border-radius:var(--formeditor-stage-element-border-radius);margin-bottom:var(--typo3-spacing);overflow-x:auto;overflow-y:hidden;padding:var(--module-body-padding)} .formeditor-stage typo3-form-form-element-stage-item,.formeditor-stage typo3-form-page-stage-item{display:block} .formeditor-stage .formeditor-page-title{cursor:pointer;font-size:.875rem;font-weight:700;margin:0 0 var(--typo3-spacing)} .formeditor-stage .formeditor-page-title:empty:before{content:attr(data-empty-message);opacity:.75} .formeditor-stage .formeditor-page-title:hover{text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb,currentColor,transparent 50%);text-decoration-color:color-mix(in srgb,currentColor,transparent 50%);text-underline-offset:.1em} .formeditor-stage-section{background-color:var(--typo3-surface-container-base);border-radius:calc(var(--formeditor-stage-element-border-radius) - 3px)} .formeditor-stage-heading{margin-bottom:var(--formeditor-stage-spacing)} .formeditor-stage-area{padding:var(--formeditor-stage-spacing)} .formeditor-list,.formeditor-stage-list{display:grid;gap:var(--formeditor-stage-spacing);grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0} .formeditor-element{background-color:var(--formeditor-stage-element-bg);border:var(--formeditor-stage-element-border-width) solid var(--formeditor-stage-element-border-color-state,var(--formeditor-stage-element-border-color));border-radius:var(--formeditor-stage-element-border-radius);color:var(--formeditor-stage-element-color);display:flex;flex-direction:column;overflow:hidden} .formeditor-element.formeditor-element-hidden:not(.formeditor-element.selected){background-color:var(--formeditor-stage-element-hidden-bg);border:var(--formeditor-stage-element-border-width) dashed var(--formeditor-stage-element-hidden-border-color);opacity:.5;transition:opacity .3s ease-in-out} .formeditor-element.formeditor-element-hidden:not(.formeditor-element.selected):focus-within,.formeditor-element.formeditor-element-hidden:not(.formeditor-element.selected):hover{opacity:1} .formeditor-element typo3-form-form-element-stage-item,.formeditor-element typo3-form-form-element-stage-item-toolbar{display:block} .formeditor-element .formeditor-element-toolbar{align-items:center;display:flex;gap:.5rem;padding:var(--formeditor-stage-spacing)} .formeditor-element .formeditor-element-toolbar-left,.formeditor-element .formeditor-element-toolbar-right{flex-shrink:0} .formeditor-element .formeditor-element-toolbar-title{flex:1 1 0;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .formeditor-element .formeditor-element-toolbar-label{font-weight:700} .formeditor-element .formeditor-element-body{background-color:var(--formeditor-stage-element-bg);border-radius:calc(var(--formeditor-stage-element-border-radius) - var(--formeditor-stage-element-border-width));border-start-end-radius:0;border-start-start-radius:0;color:var(--formeditor-stage-element-color);display:flex;overflow:hidden;position:relative} .formeditor-element .formeditor-element-info{display:flex;gap:var(--formeditor-stage-spacing);height:100%;padding:var(--formeditor-stage-spacing);position:relative;width:100%} .formeditor-element .formeditor-element-info>*{flex:0 0 50%} .formeditor-element .formeditor-element-info-label{align-items:flex-start;display:flex;font-weight:700;position:relative} .formeditor-element .formeditor-element-info-content{align-items:center;display:flex;flex-flow:row wrap} .formeditor-element .formeditor-element-validator{background-color:var(--typo3-component-hover-bg);border-start-start-radius:var(--formeditor-stage-element-border-radius);color:var(--typo3-component-hover-color);display:flex;height:100%;inset-inline-end:0;overflow:hidden;position:absolute;top:0;-webkit-margin-end:calc(var(--formeditor-stage-element-validator-width)*-1);margin-inline-end:calc(var(--formeditor-stage-element-validator-width)*-1);transition:margin .15s ease-in-out;z-index:2} .formeditor-element .formeditor-element-validator:has(.formeditor-element-validator-icon:empty){display:none} .formeditor-element .formeditor-element-validator-icon{height:100%} .formeditor-element .formeditor-element-validator-icon .icon,.formeditor-element .formeditor-element-validator-icon typo3-backend-icon{height:100%;margin-inline:var(--formeditor-stage-element-padding-x);z-index:1} .formeditor-element .formeditor-element-validator-list{align-items:center;display:flex;flex-flow:row wrap;gap:1px;height:100%;padding:var(--formeditor-stage-element-padding-y) var(--formeditor-stage-element-padding-x);-webkit-padding-start:0;font-size:var(--typo3-font-size-small);padding-inline-start:0;transition:margin .15s ease-in-out;width:var(--formeditor-stage-element-validator-width)} .formeditor-element .formeditor-element-validator-list:hover{-webkit-margin-end:0;margin-inline-end:0} .formeditor-element .formeditor-element-validator-list-item{opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%} .formeditor-element:hover{--formeditor-stage-element-border-color-state:var(--formeditor-stage-element-hover-border-color)} .formeditor-element:focus-visible{outline:var(--typo3-outline-width) var(--typo3-outline-style) color-mix(in srgb,var(--typo3-state-default-focus-border-color),transparent 25%);outline-offset:0} .formeditor-element.selected{--formeditor-stage-element-border-color-state:var(--formeditor-stage-element-active-border-color);outline:2px solid var(--formeditor-stage-element-active-border-color);outline-offset:-1px} .formeditor-element:has(+.formeditor-list){border-end-end-radius:0;border-end-start-radius:0} .formeditor-element:has(+.formeditor-list) .formeditor-element-body{border-end-end-radius:0;border-end-start-radius:0} .formeditor-element+.formeditor-list:not(:empty){border:var(--formeditor-stage-element-border-width) solid var(--formeditor-stage-element-border-color-state,var(--formeditor-stage-element-border-color));border-end-end-radius:var(--formeditor-stage-element-border-radius);border-end-start-radius:var(--formeditor-stage-element-border-radius);border-top:none;padding:var(--formeditor-stage-spacing)} .formeditor-element.formeditor-element-hidden+.formeditor-list:not(:empty){background-color:var(--formeditor-stage-element-hidden-bg);border:var(--formeditor-stage-element-border-width) dashed var(--formeditor-stage-element-hidden-border-color);border-top:none;opacity:.5;transition:opacity .3s ease-in-out} @container (min-width: 500px){ .formeditor-element-validator:hover{-webkit-margin-end:0;margin-inline-end:0}} typo3-form-form-element-stage-item[invalid] .formeditor-element-info-label{color:var(--typo3-text-color-danger)} .formeditor-element:has(>[invalid]){--formeditor-stage-element-border-color:var(--typo3-state-danger-border-color);--formeditor-stage-element-hover-border-color:var(--typo3-state-danger-hover-border-color);--formeditor-stage-element-active-border-color:var(--typo3-state-danger-focus-border-color)} .formeditor-sortable-handle{cursor:pointer} .formeditor-sortable-ghost{outline:1px dashed var(--typo3-state-success-border-color)!important;outline-offset:-1px!important} .formeditor-is-dragging .formeditor-new-element-placeholder{display:none} .formeditor-new-element-placeholder{align-items:center;display:flex;justify-content:center;list-style:none} .formeditor-new-element-container{align-items:center;border:var(--typo3-component-border-width) dashed color-mix(in srgb,transparent,currentColor 25%);border-radius:var(--typo3-component-border-radius);display:flex;justify-content:center;margin-top:var(--typo3-spacing);padding:.75rem .5rem} .property-grid .form-control{min-width:auto} .property-grid .table-fit{box-shadow:none;margin-bottom:0} .property-grid-editor__entries{background-color:var(--typo3-component-border-color);border:var(--typo3-component-border-width) solid var(--typo3-component-border-color);border-radius:var(--typo3-component-border-radius);display:grid;gap:1px} .property-grid-editor__entries+.property-grid-editor__actions{margin-top:calc(var(--typo3-spacing)/2)} .property-grid-editor__entry{background-color:color-mix(in srgb,var(--typo3-component-bg),var(--typo3-component-color) 3%);display:flex;flex-direction:row;gap:var(--typo3-spacing);padding:var(--typo3-spacing);position:relative} .property-grid-editor__entry:is(.dragging,.moving):after{border:2px dashed var(--typo3-state-primary-border-color);border-radius:calc(var(--typo3-component-border-radius) - var(--typo3-component-border-width));content:"";display:block;height:calc(100% - 2px);left:1px;position:absolute;top:1px;width:calc(100% - 2px)} .property-grid-editor__entry-inputs{flex:1} .property-grid-editor__entry-inputs div:last-child{margin-bottom:0} .property-grid-editor__entry-buttons{display:flex;flex-direction:column;gap:.25rem} .formeditor-module-viewmode-preview .formeditor-inspector-expand,.formeditor-module-viewmode-preview~.formeditor-inspector{display:none} @media (min-width:950px){ .formeditor-module-viewmode-preview~.formeditor-inspector{display:flex;transform:translateX(100%);-webkit-margin-start:calc(var(--formeditor-module-inspector)*-1 - var(--formeditor-module-gap));margin-inline-start:calc(var(--formeditor-module-inspector)*-1 - var(--formeditor-module-gap));opacity:0}} .formeditor-module-viewmode-preview .formeditor-stage select[multiple=multiple]{height:auto;min-height:32px} .formeditor-module-viewmode-preview .formeditor-stage textarea{min-height:100px} .formeditor-module-viewmode-preview .formeditor-stage .container{width:auto} .formeditor-module-viewmode-preview .formeditor-stage .form-navigation .btn-group button,.formeditor-module-viewmode-preview .formeditor-stage .form-navigation .btn-group span{display:inline-flex;-webkit-margin-end:1em;margin-inline-end:1em} .formeditor-module-viewmode-preview .formeditor-stage .formeditor-element-preview{display:inline-block;position:relative;width:100%} .formeditor-module-viewmode-preview .formeditor-stage .formeditor-new-element-container{display:none} @media (min-width:950px){ .formeditor-inner{align-items:flex-start;display:flex;gap:var(--formeditor-module-gap)} .formeditor-stage-container{overflow:visible} .formeditor-stage-container-inner{margin-inline:auto;max-width:800px} .formeditor-inspector{border-radius:var(--formeditor-inspector-border-radius);flex-shrink:0;height:auto;inset:auto;max-height:calc(100dvh - var(--module-docheader-height) - var(--module-body-padding-y)*2);position:-webkit-sticky;position:sticky;top:calc(1rem + var(--module-docheader-bar-height));width:var(--formeditor-module-inspector);-webkit-border-end:var(--formeditor-inspector-border-width) solid var(--formeditor-inspector-border-color);border-inline-end:var(--formeditor-inspector-border-width) solid var(--formeditor-inspector-border-color);box-shadow:var(--formeditor-inspector-box-shadow);transform:none;transition:transform .3s ease-out,opacity .3s ease-out,margin .3s ease-out} .formeditor-inspector-collapse,.formeditor-inspector-expand{display:none}}