TYPO3 v15 dev-main snapshot ()
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
/*!
|
||||
* 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}}
|
||||
Reference in New Issue
Block a user