diff --git a/Build/Sources/Sass/_minimal.scss b/Build/Sources/Sass/_minimal.scss index 3e82801dfdaa297e324535d9861b7ee1f5e64459..e5d8d34b01b638ca33798be3d0d4c6efaf5e4996 100644 --- a/Build/Sources/Sass/_minimal.scss +++ b/Build/Sources/Sass/_minimal.scss @@ -50,7 +50,7 @@ @import "../../node_modules/bootstrap/scss/list-group"; @import "../../node_modules/bootstrap/scss/close"; @import "../../node_modules/bootstrap/scss/toasts"; -@import "../../node_modules/bootstrap/scss/modal"; +// @import "../../node_modules/bootstrap/scss/modal"; @import "../../node_modules/bootstrap/scss/popover"; @import "../../node_modules/bootstrap/scss/carousel"; @import "../../node_modules/bootstrap/scss/spinners"; @@ -103,3 +103,4 @@ @import "component/panel"; @import "component/table"; @import "component/simpletable"; +@import "component/modal"; diff --git a/Build/Sources/Sass/backend.scss b/Build/Sources/Sass/backend.scss index 5d3bf18ad7d4ad3e42fcb434ecea88a486484329..b32a0ca7bdb57b66737f0d3f543a9fd3ae696a62 100644 --- a/Build/Sources/Sass/backend.scss +++ b/Build/Sources/Sass/backend.scss @@ -37,7 +37,6 @@ @import "component/tree"; @import "component/elementbrowser"; @import "component/media"; -@import "component/modal"; @import "component/note"; @import "component/card"; @import "component/contextmenu"; diff --git a/Build/Sources/Sass/component/_modal.scss b/Build/Sources/Sass/component/_modal.scss index 61a50f55e8c03124c17b969506314ccbcc58d545..8be6a7d9e52a599b5cf9d107c00b722730f5b38d 100644 --- a/Build/Sources/Sass/component/_modal.scss +++ b/Build/Sources/Sass/component/_modal.scss @@ -1,28 +1,122 @@ // -// Modals +// Modal // +.modal { + --modal-height: auto; + --modal-width: 600px; + --typo3-modal-zindex: var(--typo3-zindex-modal); + --typo3-modal-padding: 1rem; + --typo3-modal-color: var(--typo3-component-color); + --typo3-modal-bg: var(--typo3-surface-container-low); + --typo3-modal-border-color: color-mix(in srgb, var(--typo3-modal-bg), var(--typo3-modal-color) 5%); + --typo3-modal-border-width: var(--typo3-component-border-width); + --typo3-modal-border-radius: var(--typo3-component-border-radius); + --typo3-modal-box-shadow: var(--typo3-component-box-shadow-dialog); + --typo3-modal-header-bg: var(--typo3-surface-container-base); + --typo3-modal-header-color: var(--typo3-text-color-base); + --typo3-modal-header-border-color: color-mix(in srgb, var(--typo3-modal-header-bg), var(--typo3-modal-header-color) 10%); + --typo3-modal-header-font-size: var(--typo3-font-size); + --typo3-modal-header-padding-y: .75rem; + --typo3-modal-header-padding-x: 1rem; + --typo3-modal-footer-gap: .5rem; + position: fixed; + top: 0; + left: 0; + z-index: var(--typo3-modal-zindex); + display: none; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + outline: 0; +} -@import "../cropper/variables"; +.modal-dialog { + position: relative; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: center; + height: 100vh; + width: 100vw; + margin: 0 auto !important; + pointer-events: none; + + .modal.fade & { + transform: translate(0, -50px); + transition: transform .3s ease-out; + + @media (prefers-reduced-motion) { + transition: none; + } + } + + .modal.show & { + transform: none; + } +} + +.modal-content { + display: flex; + margin: 0 auto; + max-height: calc(100vh - 40px); + max-width: calc(100vw - 40px); + flex-direction: column; + height: var(--modal-height); + width: var(--modal-width); + color: var(--typo3-modal-color); + pointer-events: auto; + background-color: var(--typo3-modal-bg); + background-clip: padding-box; + border: var(--typo3-modal-border-width) solid var(--typo3-modal-border-color); + border-radius: var(--typo3-modal-border-radius); + box-shadow: var(--typo3-modal-box-shadow); + outline: 0; + + .modal-loading { + height: 100%; + display: flex; + flex: 1 0 auto; + justify-content: center; + align-items: center; + } +} + +.modal-backdrop { + --typo3-backdrop-zindex: var(--typo3-zindex-modal-backdrop); + --typo3-backdrop-bg: #000; + --typo3-backdrop-opacity: .65; + position: fixed; + z-index: var(--typo3-backdrop-zindex); + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: var(--typo3-backdrop-bg); + + &.fade { opacity: 0; } + &.show { opacity: var(--typo3-backdrop-opacity); } +} + +.modal-header { + display: flex; + flex-shrink: 0; + align-items: center; + color: var(--typo3-modal-header-color); + background-color: var(--typo3-modal-header-bg); + padding: var(--typo3-modal-header-padding-y) var(--typo3-modal-header-padding-x); + border-bottom: var(--typo3-modal-border-width) solid var(--typo3-modal-header-border-color); + border-start-start-radius: var(--typo3-modal-border-radius); + border-start-end-radius: var(--typo3-modal-border-radius); -// -// Variables -// -$modal-sidebar-sm: 250px; -$modal-sidebar-md: 300px; -$modal-sidebar-button-space: $padding-small-vertical; -// -// Component -// -.modal { .close { background: transparent; border: none; color: inherit; - padding: 0; - margin: 0; - text-shadow: rgba(0, 0, 0, .5) 0 0 3px; opacity: .5; user-select: none; + padding: calc(var(--typo3-modal-header-padding-y) * .5) calc(var(--typo3-modal-header-padding-x) * .5); + margin: calc(-.5 * var(--typo3-modal-header-padding-y)) calc(-.5 * var(--typo3-modal-header-padding-x)) calc(-.5 * var(--typo3-modal-header-padding-y)) auto; &:hover, &:active { @@ -34,25 +128,16 @@ $modal-sidebar-button-space: $padding-small-vertical; } } -.modal-dialog { - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: center; - margin: 0 auto !important; - height: 100vh; - width: 100vw; -} - -.modal-content { - display: flex; - flex-direction: column; - margin: 0 auto; - max-height: calc(100vh - 40px); - max-width: calc(100vw - 40px); +.modal-title { + margin-bottom: 0; + font-size: var(--typo3-modal-header-font-size); + line-height: 1rem; } .modal-body { + position: relative; + flex: 1 1 auto; + padding: var(--typo3-modal-padding); overflow-y: auto; > *:first-child { @@ -64,15 +149,18 @@ $modal-sidebar-button-space: $padding-small-vertical; } } -.modal-header, -.modal-footer { - padding: calc(var(--#{$prefix}modal-padding) / 2) var(--#{$prefix}modal-padding); -} - .modal-footer { - .btn + .btn { - margin-inline-start: .5em; - } + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + padding: calc(var(--typo3-modal-padding) / 2) var(--typo3-modal-padding); + background-color: var(--typo3-modal-bg); + border-top: var(--typo3-modal-border-width) solid var(--typo3-modal-border-color); + border-end-start-radius: var(--typo3-modal-border-radius); + border-end-end-radius: var(--typo3-modal-border-radius); + gap: var(--typo3-modal-footer-gap); .progress { flex-basis: 100%; @@ -84,23 +172,77 @@ $modal-sidebar-button-space: $padding-small-vertical; } } -.modal-content { - transition: margin-top .1s ease-in; - border: none; +// +// Iframe +// +.modal-type-iframe { + padding: 0; - .modal-loading { - height: 100%; - display: flex; - flex: 1 0 auto; - justify-content: center; - align-items: center; + .modal-body { + padding: 0; + } +} + +.modal-iframe { + display: block; + border: 0; + height: 100%; + width: 100%; + position: absolute; + top: 0; + inset-inline-start: 0; +} + +// +// Severity +// +@each $state in $base-variants { + .modal-severity-#{$state} { + --typo3-modal-header-color: var(--typo3-surface-container-#{$state}-text); + --typo3-modal-header-bg: var(--typo3-surface-container-#{$state}); } } +// +// Variant +// +.modal-style-dark { + color-scheme: only dark; +} + +// +// Size +// +.modal-size-small { + --modal-width: 440px; +} + +.modal-size-default { + --modal-width: 600px; +} + +.modal-size-medium { + --modal-width: 800px; + --modal-height: 520px; +} + +.modal-size-large { + --modal-width: 1000px; + --modal-height: 800px; +} + +.modal-size-full { + --modal-width: 100%; + --modal-height: 100%; +} + // // Image manipulation // .modal-image-manipulation { + --typo3-modal-image-manipulation-sidebar-sm: 250px; + --typo3-modal-image-manipulation-sidebar-md: 300px; + .modal-body { padding: 0; @@ -112,6 +254,7 @@ $modal-sidebar-button-space: $padding-small-vertical; .modal-panel-main { overflow: visible; + background-color: var(--typo3-modal-bg); background-image: url("../Images/cropper-background.png"); display: flex; align-items: center; @@ -124,11 +267,11 @@ $modal-sidebar-button-space: $padding-small-vertical; width: 100%; @include media-breakpoint-up('md') { - width: calc(100% - #{$modal-sidebar-sm}); + width: calc(100% - var(--typo3-modal-image-manipulation-sidebar-sm)); } @include media-breakpoint-up('lg') { - width: calc(100% - #{$modal-sidebar-md}); + width: calc(100% - var(--typo3-modal-image-manipulation-sidebar-md)); } img { @@ -148,113 +291,15 @@ $modal-sidebar-button-space: $padding-small-vertical; width: 100%; @include media-breakpoint-up('md') { - width: $modal-sidebar-sm; + width: var(--typo3-modal-image-manipulation-sidebar-sm); } @include media-breakpoint-up('lg') { - width: $modal-sidebar-md; + width: var(--typo3-modal-image-manipulation-sidebar-md); } } } -// -// Iframe -// -.modal-type-iframe { - padding: 0; - - .modal-body { - padding: 0; - } -} - -.modal-iframe { - display: block; - border: 0; - height: 100%; - width: 100%; - position: absolute; - top: 0; - inset-inline-start: 0; -} - -// -// Size -// -.modal-size-small { - .modal-content { - width: 440px; - } -} - -.modal-size-default { - .modal-content { - width: 600px; - } -} - -.modal-size-medium { - .modal-content { - width: 800px; - height: 520px; - } -} - -.modal-size-large { - .modal-content { - width: 1000px; - height: 800px; - } -} - -.modal-size-full { - .modal-content { - width: 100%; - height: 100%; - } -} - -// -// Severity -// -@each $state, $value in $theme-colors { - .modal-severity-#{$state} { - .modal-header { - background-color: $value; - color: color-contrast($value); - border-bottom-color: shade-color($value, 10%); - } - } -} - -// -// Variant -// -.modal-style-dark { - color: #fff; - - .modal-header { - color: #fff; - background-color: #484848; - border-bottom-color: #000; - } - - .modal-content { - overflow: hidden; - background-color: #292929; - } - - .modal-body, - .modal-footer { - background-color: #292929; - color: #fff; - } - - .modal-footer { - border-top: 1px solid #000; - } -} - // // MultiStepWizard-Modal // @@ -277,7 +322,7 @@ $modal-sidebar-button-space: $padding-small-vertical; .progress-bar { &.inactive { background: none; - color: $body-color; + color: var(--typo3-text-color-base); } } } diff --git a/Build/Sources/Sass/component/_root.scss b/Build/Sources/Sass/component/_root.scss index 723f5f9d34017955f7a7d63cd6abd209956fe29a..0cb995c69b5d22dc99aba80f99fb74312fb74db1 100644 --- a/Build/Sources/Sass/component/_root.scss +++ b/Build/Sources/Sass/component/_root.scss @@ -38,6 +38,10 @@ // Header --typo3-header-font-family: "Source Sans 3", sans-serif; + // Z-Index + --typo3-zindex-modal-backdrop: 1050; + --typo3-zindex-modal: 1055; + // Colors --typo3-text-color-base: light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10)); --typo3-text-color-link: var(--typo3-text-color-base); diff --git a/Build/Sources/Sass/scaffold/_scaffold.scss b/Build/Sources/Sass/scaffold/_scaffold.scss index e3eae265817d447df8ade012b2899438fcbc2909..2666b468e313cb7ab844f95038ea1fb593171cfb 100644 --- a/Build/Sources/Sass/scaffold/_scaffold.scss +++ b/Build/Sources/Sass/scaffold/_scaffold.scss @@ -7,7 +7,7 @@ // Variables // $scaffold-overlay-bg: rgba(0, 0, 0, .65); -$scaffold-overlay-zindex: $zindex-modal-backdrop; +$scaffold-overlay-zindex: var(--typo3-zindex-modal-backdrop); $scaffold-secondary-bg: #151515; $scaffold-secondary-color: #f5f5f5; $scaffold-topbar-bg: $scaffold-secondary-bg; diff --git a/Build/Sources/Sass/typo3/_element_cropper.scss b/Build/Sources/Sass/typo3/_element_cropper.scss index f0851a47603929bacd26a0ecef0fca351ecf5261..3d041694b04b0e2fb1ff7a43e7fb0f7da6eacd2e 100644 --- a/Build/Sources/Sass/typo3/_element_cropper.scss +++ b/Build/Sources/Sass/typo3/_element_cropper.scss @@ -1,6 +1,4 @@ .cropper { - color-scheme: only dark; - .cropper-line { background-color: transparent; } diff --git a/Build/Sources/Sass/variables/_main.scss b/Build/Sources/Sass/variables/_main.scss index b22b3b733bab18e3632a09a09e0b5fe2fc853ab2..495642bca78c5b47d5e0be190f2d61cae3e2635a 100644 --- a/Build/Sources/Sass/variables/_main.scss +++ b/Build/Sources/Sass/variables/_main.scss @@ -168,20 +168,9 @@ $panel-default-heading-bg: #ddd; $hr-border: #7a7a7a; $hr-opacity: 1; -// Modal -$zindex-modal: 5000; - // Popover $popover-box-shadow: var(--typo3-component-box-shadow-flyout); -// todo: remove modal media queries? -$modal-sm: 100vw; -$modal-md: 100vw; -$modal-lg: 100vw; -$modal-xl: 100vw; -$modal-content-box-shadow-xs: var(--typo3-component-box-shadow-dialog); -$modal-content-box-shadow-sm-up: var(--typo3-component-box-shadow-dialog); - // Dropdown $dropdown-padding-x: 2px; $dropdown-padding-y: 2px; diff --git a/Build/Sources/TypeScript/backend/modal.ts b/Build/Sources/TypeScript/backend/modal.ts index b74af20bf614b185aa8f98ee55f61db36185c411..c76356fc08ba66dbb3c756eb0905f4116a1af190 100644 --- a/Build/Sources/TypeScript/backend/modal.ts +++ b/Build/Sources/TypeScript/backend/modal.ts @@ -494,7 +494,7 @@ class Modal { const modalTrigger = (evt: Event, triggerElement: HTMLElement): void => { evt.preventDefault(); const content = triggerElement.dataset.bsContent || triggerElement.dataset.content || TYPO3?.lang?.['message.confirmation'] || 'Are you sure?'; - let severity = SeverityEnum.info; + let severity = SeverityEnum.notice; if (triggerElement.dataset.severity in SeverityEnum) { const severityKey = triggerElement.dataset.severity as keyof typeof SeverityEnum; severity = SeverityEnum[severityKey]; diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css index 8d7db30b7a6ea9e9835f076861cf732331507651..19bdde0151abc7c4bd8af5c626cf694731eb8f77 100644 --- a/typo3/sysext/backend/Resources/Public/Css/backend.css +++ b/typo3/sysext/backend/Resources/Public/Css/backend.css @@ -734,73 +734,6 @@ progress{vertical-align:baseline} .toast-header{display:flex;align-items:center;padding:var(--bs-toast-padding-y) var(--bs-toast-padding-x);color:var(--bs-toast-header-color);background-color:var(--bs-toast-header-bg);background-clip:padding-box;border-bottom:var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);border-top-left-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));border-top-right-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width))} .toast-header .btn-close{margin-right:calc(-.5 * var(--bs-toast-padding-x));margin-left:var(--bs-toast-padding-x)} .toast-body{padding:var(--bs-toast-padding-x);word-wrap:break-word} -.modal{--bs-modal-zindex:5000;--bs-modal-width:100vw;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-bg:var(--bs-body-bg);--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:var(--bs-border-width);--bs-modal-border-radius:var(--bs-border-radius-lg);--bs-modal-box-shadow:var(--typo3-component-box-shadow-dialog);--bs-modal-inner-border-radius:calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:var(--bs-border-width);--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:var(--bs-border-width);position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0} -.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none} -.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)} -@media (prefers-reduced-motion:reduce){ -.modal.fade .modal-dialog{transition:none} -} -.modal.show .modal-dialog{transform:none} -.modal.modal-static .modal-dialog{transform:scale(1.02)} -.modal-dialog-scrollable{height:calc(100% - var(--bs-modal-margin) * 2)} -.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden} -.modal-dialog-scrollable .modal-body{overflow-y:auto} -.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--bs-modal-margin) * 2)} -.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);border-radius:var(--bs-modal-border-radius);box-shadow:var(--bs-modal-box-shadow);outline:0} -.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)} -.modal-backdrop.fade{opacity:0} -.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)} -.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:var(--bs-modal-header-padding);border-bottom:var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);border-top-left-radius:var(--bs-modal-inner-border-radius);border-top-right-radius:var(--bs-modal-inner-border-radius)} -.modal-header .btn-close{padding:calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);margin:calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto} -.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)} -.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)} -.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);background-color:var(--bs-modal-footer-bg);border-top:var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);border-bottom-right-radius:var(--bs-modal-inner-border-radius);border-bottom-left-radius:var(--bs-modal-inner-border-radius)} -.modal-footer>*{margin:calc(var(--bs-modal-footer-gap) * .5)} -@media (min-width:576px){ -.modal{--bs-modal-margin:1.75rem;--bs-modal-box-shadow:var(--typo3-component-box-shadow-dialog)} -.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto} -.modal-sm{--bs-modal-width:100vw} -} -@media (min-width:992px){ -.modal-lg,.modal-xl{--bs-modal-width:100vw} -} -@media (min-width:1200px){ -.modal-xl{--bs-modal-width:100vw} -} -.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0} -.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0} -.modal-fullscreen .modal-footer,.modal-fullscreen .modal-header{border-radius:0} -.modal-fullscreen .modal-body{overflow-y:auto} -@media (max-width:575.98px){ -.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0} -.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0} -.modal-fullscreen-sm-down .modal-footer,.modal-fullscreen-sm-down .modal-header{border-radius:0} -.modal-fullscreen-sm-down .modal-body{overflow-y:auto} -} -@media (max-width:767.98px){ -.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0} -.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0} -.modal-fullscreen-md-down .modal-footer,.modal-fullscreen-md-down .modal-header{border-radius:0} -.modal-fullscreen-md-down .modal-body{overflow-y:auto} -} -@media (max-width:991.98px){ -.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0} -.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0} -.modal-fullscreen-lg-down .modal-footer,.modal-fullscreen-lg-down .modal-header{border-radius:0} -.modal-fullscreen-lg-down .modal-body{overflow-y:auto} -} -@media (max-width:1199.98px){ -.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0} -.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0} -.modal-fullscreen-xl-down .modal-footer,.modal-fullscreen-xl-down .modal-header{border-radius:0} -.modal-fullscreen-xl-down .modal-body{overflow-y:auto} -} -@media (max-width:1399.98px){ -.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0} -.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0} -.modal-fullscreen-xxl-down .modal-footer,.modal-fullscreen-xxl-down .modal-header{border-radius:0} -.modal-fullscreen-xxl-down .modal-body{overflow-y:auto} -} .popover{--bs-popover-zindex:1070;--bs-popover-max-width:276px;--bs-popover-font-size:0.65625rem;--bs-popover-bg:var(--bs-body-bg);--bs-popover-border-width:var(--bs-border-width);--bs-popover-border-color:var(--bs-border-color-translucent);--bs-popover-border-radius:var(--bs-border-radius-lg);--bs-popover-inner-border-radius:calc(var(--bs-border-radius-lg) - var(--bs-border-width));--bs-popover-box-shadow:var(--typo3-component-box-shadow-flyout);--bs-popover-header-padding-x:1rem;--bs-popover-header-padding-y:0.5rem;--bs-popover-header-font-size:0.75rem;--bs-popover-header-color:inherit;--bs-popover-header-bg:var(--bs-secondary-bg);--bs-popover-body-padding-x:1rem;--bs-popover-body-padding-y:1rem;--bs-popover-body-color:var(--bs-body-color);--bs-popover-arrow-width:1rem;--bs-popover-arrow-height:0.5rem;--bs-popover-arrow-border:var(--bs-popover-border-color);z-index:var(--bs-popover-zindex);display:block;max-width:var(--bs-popover-max-width);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-popover-font-size);word-wrap:break-word;background-color:var(--bs-popover-bg);background-clip:padding-box;border:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-radius:var(--bs-popover-border-radius);box-shadow:var(--bs-popover-box-shadow)} .popover .popover-arrow{display:block;width:var(--bs-popover-arrow-width);height:var(--bs-popover-arrow-height)} .popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0} @@ -2291,7 +2224,7 @@ body.with-overflow{overflow:auto} .scaffold{display:flex;flex-wrap:wrap;background-color:var(--scaffold-bg);color:var(--scaffold-color);position:relative;height:100vh} .scaffold-header{flex:0 0 100%;position:sticky;top:0;z-index:1000;display:flex;flex-flow:row wrap;align-items:stretch;height:45px} .scaffold-topbar{background-color:#151515;color:#f5f5f5;height:45px;flex:1 0 auto} -.scaffold-modulemenu{background-color:#292929;color:#f5f5f5;top:45px;width:auto;height:calc(100vh - 45px);max-width:100%;overflow-x:hidden;overflow-y:auto;color-scheme:dark;position:absolute;z-index:1051} +.scaffold-modulemenu{background-color:#292929;color:#f5f5f5;top:45px;width:auto;height:calc(100vh - 45px);max-width:100%;overflow-x:hidden;overflow-y:auto;color-scheme:dark;position:absolute;z-index:var(--typo3-zindex-modal-backdrop) 1} @media (min-width:992px){ .scaffold-modulemenu{z-index:1000;position:sticky} } @@ -2313,7 +2246,7 @@ body.with-overflow{overflow:auto} .scaffold-content-navigation-expanded .scaffold-content-navigation{display:flex} .scaffold-content-navigation-component{flex:1 0 auto} .scaffold-content-module{flex:1 0 0%;display:flex;flex-direction:row} -.scaffold-content-overlay{display:none;position:absolute;z-index:1050;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.65)} +.scaffold-content-overlay{display:none;position:absolute;z-index:var(--typo3-zindex-modal-backdrop);top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.65)} .scaffold-modulemenu-expanded .scaffold-content-overlay{display:block} @media (min-width:992px){ .scaffold-modulemenu-expanded .scaffold-content-overlay{display:none} @@ -2442,7 +2375,7 @@ button[aria-expanded=true]:not(:disabled) .modulemenu-indicator:after{transform: .scaffold-modulemenu-expanded .modulemenu-indicator{display:block!important} .scaffold-modulemenu-expanded .modulemenu-name{position:static;margin:0;margin-inline-start:1em;width:auto;height:auto} :root{--token-color-neutral-base:#000;--token-color-neutral-0:white;--token-color-neutral-3:#f7f7f7;--token-color-neutral-4:whitesmoke;--token-color-neutral-5:#f2f2f2;--token-color-neutral-10:#e6e6e6;--token-color-neutral-15:#d9d9d9;--token-color-neutral-20:#cccccc;--token-color-neutral-25:#bfbfbf;--token-color-neutral-30:#b3b3b3;--token-color-neutral-35:#a6a6a6;--token-color-neutral-40:#999999;--token-color-neutral-45:#8c8c8c;--token-color-neutral-50:gray;--token-color-neutral-55:#737373;--token-color-neutral-60:#666666;--token-color-neutral-65:#595959;--token-color-neutral-70:#4d4d4d;--token-color-neutral-75:#404040;--token-color-neutral-80:#333333;--token-color-neutral-85:#262626;--token-color-neutral-90:#1a1a1a;--token-color-neutral-95:#0d0d0d;--token-color-neutral-96:#0a0a0a;--token-color-neutral-97:#080808;--token-color-neutral-100:black;--token-color-blue-base:#05c;--token-color-blue-3:#f0f6ff;--token-color-blue-4:#ebf3ff;--token-color-blue-5:#e6f0ff;--token-color-blue-10:#cce1ff;--token-color-blue-15:#b3d2ff;--token-color-blue-20:#99c4ff;--token-color-blue-25:#80b5ff;--token-color-blue-30:#66a6ff;--token-color-blue-35:#4d97ff;--token-color-blue-40:#3388ff;--token-color-blue-45:#1a79ff;--token-color-blue-50:#006aff;--token-color-blue-55:#0060e6;--token-color-blue-60:#0055cc;--token-color-blue-65:#004ab3;--token-color-blue-70:#004099;--token-color-blue-75:#003580;--token-color-blue-80:#002b66;--token-color-blue-85:#00204d;--token-color-blue-90:#001533;--token-color-blue-95:#000b1a;--token-color-blue-96:#000914;--token-color-blue-97:#00060f;--token-color-purple-base:#5e4db2;--token-color-purple-3:#f5f4fa;--token-color-purple-4:#f2f1f9;--token-color-purple-5:#efedf7;--token-color-purple-10:#dfdbf0;--token-color-purple-15:#cfcae8;--token-color-purple-20:#bfb8e0;--token-color-purple-25:#afa6d9;--token-color-purple-30:#9e94d1;--token-color-purple-35:#8e82c9;--token-color-purple-40:#7e71c1;--token-color-purple-45:#6e5fba;--token-color-purple-50:#5e4db2;--token-color-purple-55:#5545a0;--token-color-purple-60:#4b3e8e;--token-color-purple-65:#42367d;--token-color-purple-70:#382e6b;--token-color-purple-75:#2f2759;--token-color-purple-80:#261f47;--token-color-purple-85:#1c1735;--token-color-purple-90:#130f24;--token-color-purple-95:#090812;--token-color-purple-96:#08060e;--token-color-purple-97:#06050b;--token-color-teal-base:#abdced;--token-color-teal-3:#f2fafc;--token-color-teal-4:#eef8fb;--token-color-teal-5:#eaf6fb;--token-color-teal-10:#d5eef6;--token-color-teal-15:#c0e5f2;--token-color-teal-20:#abdced;--token-color-teal-25:#96d3e9;--token-color-teal-30:#81cbe4;--token-color-teal-35:#6cc2e0;--token-color-teal-40:#57b9db;--token-color-teal-45:#42b0d7;--token-color-teal-50:#2da8d2;--token-color-teal-55:#2997bd;--token-color-teal-60:#2486a8;--token-color-teal-65:#207593;--token-color-teal-70:#1b657e;--token-color-teal-75:#175469;--token-color-teal-80:#124354;--token-color-teal-85:#0e323f;--token-color-teal-90:#09222a;--token-color-teal-95:#051115;--token-color-teal-96:#040d11;--token-color-teal-97:#030a0d;--token-color-green-base:#247554;--token-color-green-3:#f3fbf8;--token-color-green-4:#effaf6;--token-color-green-5:#ecf9f4;--token-color-green-10:#d8f3e8;--token-color-green-15:#c5eddd;--token-color-green-20:#b1e7d1;--token-color-green-25:#9ee1c6;--token-color-green-30:#8adbba;--token-color-green-35:#77d5af;--token-color-green-40:#63cfa3;--token-color-green-45:#50c998;--token-color-green-50:#3cc38c;--token-color-green-55:#36b07e;--token-color-green-60:#309c70;--token-color-green-65:#2a8962;--token-color-green-70:#247554;--token-color-green-75:#1e6246;--token-color-green-80:#184e38;--token-color-green-85:#123b2a;--token-color-green-90:#0c271c;--token-color-green-95:#06140e;--token-color-green-96:#05100b;--token-color-green-97:#040c08;--token-color-magenta-base:#c6398f;--token-color-magenta-3:#fcf3f8;--token-color-magenta-4:#faeff6;--token-color-magenta-5:#f9ebf4;--token-color-magenta-10:#f4d7e9;--token-color-magenta-15:#eec4dd;--token-color-magenta-20:#e8b0d2;--token-color-magenta-25:#e39cc7;--token-color-magenta-30:#dd88bc;--token-color-magenta-35:#d774b1;--token-color-magenta-40:#d161a5;--token-color-magenta-45:#cc4d9a;--token-color-magenta-50:#c6398f;--token-color-magenta-55:#b23381;--token-color-magenta-60:#9e2e72;--token-color-magenta-65:#8b2864;--token-color-magenta-70:#772256;--token-color-magenta-75:#631d48;--token-color-magenta-80:#4f1739;--token-color-magenta-85:#3b112b;--token-color-magenta-90:#280b1d;--token-color-magenta-95:#14060e;--token-color-magenta-96:#10050b;--token-color-magenta-97:#0c0309;--token-color-yellow-base:#fc3;--token-color-yellow-3:#fffbf0;--token-color-yellow-4:#fffaeb;--token-color-yellow-5:#fff9e6;--token-color-yellow-10:#fff2cc;--token-color-yellow-15:#ffecb3;--token-color-yellow-20:#ffe699;--token-color-yellow-25:#ffdf80;--token-color-yellow-30:#ffd966;--token-color-yellow-35:#ffd24d;--token-color-yellow-40:#ffcc33;--token-color-yellow-45:#ffc61a;--token-color-yellow-50:#ffbf00;--token-color-yellow-55:#e6ac00;--token-color-yellow-60:#cc9900;--token-color-yellow-65:#b38600;--token-color-yellow-70:#997300;--token-color-yellow-75:#806000;--token-color-yellow-80:#664d00;--token-color-yellow-85:#4d3900;--token-color-yellow-90:#332600;--token-color-yellow-95:#1a1300;--token-color-yellow-96:#140f00;--token-color-yellow-97:#0f0b00;--token-color-orange-base:#ee6d11;--token-color-orange-3:#fef6f1;--token-color-orange-4:#fef3ec;--token-color-orange-5:#fdf0e7;--token-color-orange-10:#fce2cf;--token-color-orange-15:#fad3b8;--token-color-orange-20:#f8c5a0;--token-color-orange-25:#f7b688;--token-color-orange-30:#f5a770;--token-color-orange-35:#f39958;--token-color-orange-40:#f18a41;--token-color-orange-45:#f07c29;--token-color-orange-50:#ee6d11;--token-color-orange-55:#d6620f;--token-color-orange-60:#be570e;--token-color-orange-65:#a74c0c;--token-color-orange-70:#8f410a;--token-color-orange-75:#773709;--token-color-orange-80:#5f2c07;--token-color-orange-85:#472105;--token-color-orange-90:#301603;--token-color-orange-95:#180b02;--token-color-orange-96:#130901;--token-color-orange-97:#0e0701;--token-color-red-base:#d13a2e;--token-color-red-3:#fcf3f2;--token-color-red-4:#fbefee;--token-color-red-5:#faebea;--token-color-red-10:#f6d8d5;--token-color-red-15:#f1c4c0;--token-color-red-20:#edb0ab;--token-color-red-25:#e89d97;--token-color-red-30:#e38982;--token-color-red-35:#df756d;--token-color-red-40:#da6158;--token-color-red-45:#d64e43;--token-color-red-50:#d13a2e;--token-color-red-55:#bc3429;--token-color-red-60:#a72e25;--token-color-red-65:#922920;--token-color-red-70:#7d231c;--token-color-red-75:#691d17;--token-color-red-80:#541712;--token-color-red-85:#3f110e;--token-color-red-90:#2a0c09;--token-color-red-95:#150605;--token-color-red-96:#110504;--token-color-red-97:#0d0303} -:root{color-scheme:only light;scroll-behavior:smooth;--typo3-font-size:12px;--typo3-font-size-small:11px;--typo3-font-family-sans-serif:Verdana,Arial,Helvetica,sans-serif;--typo3-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--typo3-font-family:var(--typo3-font-family-sans-serif);--typo3-font-family-code:var(--typo3-font-family-monospace);--typo3-spacing:1rem;--typo3-header-font-family:"Source Sans 3",sans-serif;--typo3-text-color-base:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10));--typo3-text-color-link:var(--typo3-text-color-base);--typo3-text-color-variant:light-dark(var(--token-color-neutral-60), var(--token-color-neutral-30));--typo3-text-color-primary:light-dark(var(--token-color-blue-60), var(--token-color-blue-30));--typo3-text-color-secondary:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-35));--typo3-text-color-info:light-dark(var(--token-color-teal-70), var(--token-color-teal-40));--typo3-text-color-success:light-dark(var(--token-color-green-70), var(--token-color-green-50));--typo3-text-color-warning:light-dark(var(--token-color-yellow-80), var(--token-color-yellow-40));--typo3-text-color-danger:light-dark(var(--token-color-red-60), var(--token-color-red-40));--typo3-text-color-code:light-dark(var(--token-color-magenta-60), var(--token-color-magenta-35));--typo3-text-color-notice:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-40));--typo3-text-color-default:var(--typo3-text-color-base);--typo3-surface-dim:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-96));--typo3-surface-base:light-dark(var(--token-color-neutral-4), var(--token-color-neutral-96));--typo3-surface-bright:light-dark(var(--token-color-neutral-4), var(--token-color-neutral-85));--typo3-surface-container-lowest:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-100));--typo3-surface-container-low:light-dark(var(--token-color-neutral-3), var(--token-color-neutral-97));--typo3-surface-container-base:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-container-high:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-highest:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-85));--typo3-surface-primary:light-dark(var(--token-color-blue-60), var(--token-color-blue-70));--typo3-surface-primary-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-primary:light-dark(var(--token-color-blue-10), var(--token-color-blue-90));--typo3-surface-container-primary-text:light-dark(var(--token-color-blue-90), var(--token-color-blue-10));--typo3-surface-secondary:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-70));--typo3-surface-secondary-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-secondary:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-secondary-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10));--typo3-surface-info:light-dark(var(--token-color-teal-20), var(--token-color-teal-70));--typo3-surface-info-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-info:light-dark(var(--token-color-teal-10), var(--token-color-teal-90));--typo3-surface-container-info-text:light-dark(var(--token-color-teal-90), var(--token-color-teal-10));--typo3-surface-success:light-dark(var(--token-color-green-70), var(--token-color-green-80));--typo3-surface-success-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-success:light-dark(var(--token-color-green-10), var(--token-color-green-90));--typo3-surface-container-success-text:light-dark(var(--token-color-green-90), var(--token-color-green-10));--typo3-surface-warning:light-dark(var(--token-color-yellow-40), var(--token-color-yellow-80));--typo3-surface-warning-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-warning:light-dark(var(--token-color-yellow-10), var(--token-color-yellow-90));--typo3-surface-container-warning-text:light-dark(var(--token-color-yellow-90), var(--token-color-yellow-10));--typo3-surface-danger:light-dark(var(--token-color-red-50), var(--token-color-red-70));--typo3-surface-danger-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-danger:light-dark(var(--token-color-red-10), var(--token-color-red-90));--typo3-surface-container-danger-text:light-dark(var(--token-color-red-90), var(--token-color-red-10));--typo3-surface-notice:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-85));--typo3-surface-notice-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-notice:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-notice-text:light-dark(var(--token-color-neutral-95), var(--token-color-neutral-0));--typo3-surface-default:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-default-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-default:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-container-default-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-default-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-default-bg:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-90));--typo3-state-default-border-color:light-dark(var(--token-color-neutral-25), var(--token-color-neutral-80));--typo3-state-default-hover-color:var(--typo3-state-default-color);--typo3-state-default-hover-bg:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-85));--typo3-state-default-hover-border-color:light-dark(var(--token-color-neutral-35), var(--token-color-neutral-75));--typo3-state-default-focus-color:var(--typo3-state-default-color);--typo3-state-default-focus-bg:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-80));--typo3-state-default-focus-border-color:light-dark(var(--token-color-neutral-40), var(--token-color-neutral-70));--typo3-state-default-disabled-color:var(--typo3-state-default-color);--typo3-state-default-disabled-bg:var(--typo3-state-default-bg);--typo3-state-default-disabled-border-color:var(--typo3-state-default-border-color);--typo3-state-primary-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-primary-bg:light-dark(var(--token-color-blue-60), var(--token-color-blue-70));--typo3-state-primary-border-color:light-dark(var(--token-color-blue-65), var(--token-color-blue-65));--typo3-state-primary-hover-color:var(--typo3-state-primary-color);--typo3-state-primary-hover-bg:light-dark(var(--token-color-blue-65), var(--token-color-blue-65));--typo3-state-primary-hover-border-color:light-dark(var(--token-color-blue-70), var(--token-color-blue-60));--typo3-state-primary-focus-color:var(--typo3-state-primary-color);--typo3-state-primary-focus-bg:light-dark(var(--token-color-blue-70), var(--token-color-blue-60));--typo3-state-primary-focus-border-color:light-dark(var(--token-color-blue-75), var(--token-color-blue-55));--typo3-state-primary-disabled-color:var(--typo3-state-primary-color);--typo3-state-primary-disabled-bg:var(--typo3-state-primary-bg);--typo3-state-primary-disabled-border-color:var(--typo3-state-default-primary-color);--typo3-state-secondary-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-secondary-bg:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-70));--typo3-state-secondary-border-color:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-65));--typo3-state-secondary-hover-color:var(--typo3-state-secondary-color);--typo3-state-secondary-hover-bg:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-65));--typo3-state-secondary-hover-border-color:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-60));--typo3-state-secondary-focus-color:var(--typo3-state-secondary-color);--typo3-state-secondary-focus-bg:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-60));--typo3-state-secondary-focus-border-color:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-55));--typo3-state-secondary-disabled-color:var(--typo3-state-secondary-color);--typo3-state-secondary-disabled-bg:var(--typo3-state-secondary-bg);--typo3-state-secondary-disabled-border-color:var(--typo3-state-default-secondary-color);--typo3-state-success-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-success-bg:light-dark(var(--token-color-green-70), var(--token-color-green-80));--typo3-state-success-border-color:light-dark(var(--token-color-green-75), var(--token-color-green-75));--typo3-state-success-hover-color:var(--typo3-state-success-color);--typo3-state-success-hover-bg:light-dark(var(--token-color-green-75), var(--token-color-green-75));--typo3-state-success-hover-border-color:light-dark(var(--token-color-green-80), var(--token-color-green-70));--typo3-state-success-focus-color:var(--typo3-state-success-color);--typo3-state-success-focus-bg:light-dark(var(--token-color-green-80), var(--token-color-green-70));--typo3-state-success-focus-border-color:light-dark(var(--token-color-green-85), var(--token-color-green-65));--typo3-state-success-disabled-color:var(--typo3-state-success-color);--typo3-state-success-disabled-bg:var(--typo3-state-success-bg);--typo3-state-success-disabled-border-color:var(--typo3-state-default-success-color);--typo3-state-warning-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-warning-bg:light-dark(var(--token-color-yellow-40), var(--token-color-yellow-80));--typo3-state-warning-border-color:light-dark(var(--token-color-yellow-45), var(--token-color-yellow-75));--typo3-state-warning-hover-color:var(--typo3-state-warning-color);--typo3-state-warning-hover-bg:light-dark(var(--token-color-yellow-45), var(--token-color-yellow-75));--typo3-state-warning-hover-border-color:light-dark(var(--token-color-yellow-50), var(--token-color-yellow-70));--typo3-state-warning-focus-color:var(--typo3-state-warning-color);--typo3-state-warning-focus-bg:light-dark(var(--token-color-yellow-50), var(--token-color-yellow-70));--typo3-state-warning-focus-border-color:light-dark(var(--token-color-yellow-55), var(--token-color-yellow-65));--typo3-state-warning-disabled-color:var(--typo3-state-warning-color);--typo3-state-warning-disabled-bg:var(--typo3-state-warning-bg);--typo3-state-warning-disabled-border-color:var(--typo3-state-warning-border-color);--typo3-state-danger-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-danger-bg:light-dark(var(--token-color-red-50), var(--token-color-red-70));--typo3-state-danger-border-color:light-dark(var(--token-color-red-55), var(--token-color-red-65));--typo3-state-danger-hover-color:var(--typo3-state-danger-color);--typo3-state-danger-hover-bg:light-dark(var(--token-color-red-55), var(--token-color-red-65));--typo3-state-danger-hover-border-color:light-dark(var(--token-color-red-60), var(--token-color-red-60));--typo3-state-danger-focus-color:var(--typo3-state-danger-color);--typo3-state-danger-focus-bg:light-dark(var(--token-color-red-60), var(--token-color-red-60));--typo3-state-danger-focus-border-color:light-dark(var(--token-color-red-65), var(--token-color-red-55));--typo3-state-danger-disabled-color:var(--typo3-state-danger-color);--typo3-state-danger-disabled-bg:var(--typo3-state-danger-bg);--typo3-state-danger-disabled-border-color:var(--typo3-state-danger-border-color);--typo3-state-info-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-info-bg:light-dark(var(--token-color-teal-20), var(--token-color-teal-70));--typo3-state-info-border-color:light-dark(var(--token-color-teal-25), var(--token-color-teal-65));--typo3-state-info-hover-color:var(--typo3-state-info-color);--typo3-state-info-hover-bg:light-dark(var(--token-color-teal-25), var(--token-color-teal-65));--typo3-state-info-hover-border-color:light-dark(var(--token-color-teal-30), var(--token-color-teal-60));--typo3-state-info-focus-color:var(--typo3-state-info-color);--typo3-state-info-focus-bg:light-dark(var(--token-color-teal-30), var(--token-color-teal-60));--typo3-state-info-focus-border-color:light-dark(var(--token-color-teal-35), var(--token-color-teal-55));--typo3-state-info-disabled-color:var(--typo3-state-info-color);--typo3-state-info-disabled-bg:var(--typo3-state-info-bg);--typo3-state-info-disabled-border-color:var(--typo3-state-info-border-color);--typo3-state-notice-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-notice-bg:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-85));--typo3-state-notice-border-color:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-80));--typo3-state-notice-hover-color:var(--typo3-state-notice-color);--typo3-state-notice-hover-bg:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-80));--typo3-state-notice-hover-border-color:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-75));--typo3-state-notice-focus-color:var(--typo3-state-notice-color);--typo3-state-notice-focus-bg:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-75));--typo3-state-notice-focus-border-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-70));--typo3-state-notice-disabled-color:var(--typo3-state-notice-color);--typo3-state-notice-disabled-bg:var(--typo3-state-notice-bg);--typo3-state-notice-disabled-border-color:var(--typo3-state-notice-border-color);--typo3-shadow-2:0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 1px 2px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-4:0 2px 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 2px 4px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-8:0 4px 8px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-16:0 8px 16px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 8px 16px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-28:0 14px 28px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 14px 28px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-64:0 0 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 32px 64px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-component-color:var(--typo3-text-color-base);--typo3-component-variant-color:var(--typo3-text-color-variant);--typo3-component-primary-color:var(--typo3-text-color-primary);--typo3-component-secondary-color:var(--typo3-text-color-secondary);--typo3-component-match-highlight-color:inherit;--typo3-component-match-highlight-bg:rgba(234, 92, 0, .33);--typo3-component-bg:var(--typo3-surface-container-lowest);--typo3-component-link-color:light-dark(#05c, #6699e0);--typo3-component-link-hover-color:light-dark(#1a66d1, #80aae6);--typo3-component-font-size:0.75rem;--typo3-component-line-height:1.5;--typo3-component-border-radius:4px;--typo3-component-border-width:1px;--typo3-component-border-color:light-dark(rgb(215, 215, 215), rgb(51, 51, 51));--typo3-component-padding-y:.75rem;--typo3-component-padding-x:1rem;--typo3-component-box-shadow:var(--typo3-shadow-2);--typo3-component-box-shadow-strong:var(--typo3-shadow-4);--typo3-component-box-shadow-tooltip:var(--typo3-shadow-8);--typo3-component-box-shadow-flyout:var(--typo3-shadow-16);--typo3-component-box-shadow-dialog:var(--typo3-shadow-28);--typo3-component-box-shadow-window:var(--typo3-shadow-64);--typo3-component-hover-color:var(--typo3-component-color);--typo3-component-hover-bg:light-dark(#f2f7fc, rgb(51, 51, 51));--typo3-component-hover-border-color:light-dark(#d9e6f7, rgb(90, 90, 90));--typo3-component-focus-color:var(--typo3-component-color);--typo3-component-focus-bg:light-dark(#f2f7fc, #002b66);--typo3-component-focus-border-color:light-dark(#3377d6, #00337a);--typo3-component-active-color:#fff;--typo3-component-active-bg:light-dark(#3377d6, #0048ad);--typo3-component-active-border-color:light-dark(#3377d6, #0044a3);--typo3-component-disabled-color:rgb(115, 115, 115);--typo3-component-disabled-bg:transparent;--typo3-component-disabled-border-color:transparent;--typo3-component-spacing:2rem;--typo3-list-item-padding-y:.5rem;--typo3-list-item-padding-x:.75rem;--typo3-list-item-hover-color:var(--typo3-component-hover-color);--typo3-list-item-hover-bg:var(--typo3-component-hover-bg);--typo3-list-item-hover-border-color:var(--typo3-component-hover-border-color);--typo3-list-item-focus-color:var(--typo3-component-focus-color);--typo3-list-item-focus-bg:var(--typo3-component-focus-bg);--typo3-list-item-focus-border-color:var(--typo3-component-focus-border-color);--typo3-list-item-active-color:var(--typo3-list-item-focus-color);--typo3-list-item-active-bg:var(--typo3-list-item-focus-bg);--typo3-list-item-active-border-color:var(--typo3-list-item-focus-border-color);--typo3-list-item-disabled-color:var(--typo3-component-disabled-color);--typo3-list-item-disabled-bg:var(--typo3-component-disabled-bg);--typo3-list-item-disabled-border-color:var(--typo3-component-disabled-border-color);--typo3-legend-font-weight:600;--typo3-input-font-size:.75rem;--typo3-input-line-height:1.5;--typo3-input-padding-y:.5rem;--typo3-input-padding-x:.75rem;--typo3-input-sm-padding-y:.3125rem;--typo3-input-sm-padding-x:.5rem;--typo3-input-sm-font-size:.6875rem;--typo3-input-border-width:1px;--typo3-input-border-radius:var(--typo3-component-border-radius);--typo3-input-color:var(--typo3-text-color-base);--typo3-input-placeholder-color:color-mix(in srgb, var(--typo3-input-color), transparent 30%);--typo3-input-bg:var(--typo3-surface-container-lowest);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-default-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-default-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-primary-focus-border-color);--typo3-input-active-color:var(--typo3-state-primary-color);--typo3-input-active-bg:var(--typo3-state-primary-bg);--typo3-input-active-border-color:var(--typo3-state-primary-focus-border-color);--typo3-input-disabled-color:var(--typo3-state-default-disabled-color);--typo3-input-disabled-bg:var(--typo3-state-default-disabled-bg);--typo3-input-disabled-border-color:var(--typo3-state-default-disabled-border-color);--typo3-input-disabled-opacity:.65} +:root{color-scheme:only light;scroll-behavior:smooth;--typo3-font-size:12px;--typo3-font-size-small:11px;--typo3-font-family-sans-serif:Verdana,Arial,Helvetica,sans-serif;--typo3-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--typo3-font-family:var(--typo3-font-family-sans-serif);--typo3-font-family-code:var(--typo3-font-family-monospace);--typo3-spacing:1rem;--typo3-header-font-family:"Source Sans 3",sans-serif;--typo3-zindex-modal-backdrop:1050;--typo3-zindex-modal:1055;--typo3-text-color-base:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10));--typo3-text-color-link:var(--typo3-text-color-base);--typo3-text-color-variant:light-dark(var(--token-color-neutral-60), var(--token-color-neutral-30));--typo3-text-color-primary:light-dark(var(--token-color-blue-60), var(--token-color-blue-30));--typo3-text-color-secondary:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-35));--typo3-text-color-info:light-dark(var(--token-color-teal-70), var(--token-color-teal-40));--typo3-text-color-success:light-dark(var(--token-color-green-70), var(--token-color-green-50));--typo3-text-color-warning:light-dark(var(--token-color-yellow-80), var(--token-color-yellow-40));--typo3-text-color-danger:light-dark(var(--token-color-red-60), var(--token-color-red-40));--typo3-text-color-code:light-dark(var(--token-color-magenta-60), var(--token-color-magenta-35));--typo3-text-color-notice:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-40));--typo3-text-color-default:var(--typo3-text-color-base);--typo3-surface-dim:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-96));--typo3-surface-base:light-dark(var(--token-color-neutral-4), var(--token-color-neutral-96));--typo3-surface-bright:light-dark(var(--token-color-neutral-4), var(--token-color-neutral-85));--typo3-surface-container-lowest:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-100));--typo3-surface-container-low:light-dark(var(--token-color-neutral-3), var(--token-color-neutral-97));--typo3-surface-container-base:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-container-high:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-highest:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-85));--typo3-surface-primary:light-dark(var(--token-color-blue-60), var(--token-color-blue-70));--typo3-surface-primary-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-primary:light-dark(var(--token-color-blue-10), var(--token-color-blue-90));--typo3-surface-container-primary-text:light-dark(var(--token-color-blue-90), var(--token-color-blue-10));--typo3-surface-secondary:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-70));--typo3-surface-secondary-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-secondary:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-secondary-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10));--typo3-surface-info:light-dark(var(--token-color-teal-20), var(--token-color-teal-70));--typo3-surface-info-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-info:light-dark(var(--token-color-teal-10), var(--token-color-teal-90));--typo3-surface-container-info-text:light-dark(var(--token-color-teal-90), var(--token-color-teal-10));--typo3-surface-success:light-dark(var(--token-color-green-70), var(--token-color-green-80));--typo3-surface-success-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-success:light-dark(var(--token-color-green-10), var(--token-color-green-90));--typo3-surface-container-success-text:light-dark(var(--token-color-green-90), var(--token-color-green-10));--typo3-surface-warning:light-dark(var(--token-color-yellow-40), var(--token-color-yellow-80));--typo3-surface-warning-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-warning:light-dark(var(--token-color-yellow-10), var(--token-color-yellow-90));--typo3-surface-container-warning-text:light-dark(var(--token-color-yellow-90), var(--token-color-yellow-10));--typo3-surface-danger:light-dark(var(--token-color-red-50), var(--token-color-red-70));--typo3-surface-danger-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-danger:light-dark(var(--token-color-red-10), var(--token-color-red-90));--typo3-surface-container-danger-text:light-dark(var(--token-color-red-90), var(--token-color-red-10));--typo3-surface-notice:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-85));--typo3-surface-notice-text:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-surface-container-notice:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-90));--typo3-surface-container-notice-text:light-dark(var(--token-color-neutral-95), var(--token-color-neutral-0));--typo3-surface-default:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-default-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-surface-container-default:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-95));--typo3-surface-container-default-text:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-default-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-default-bg:light-dark(var(--token-color-neutral-5), var(--token-color-neutral-90));--typo3-state-default-border-color:light-dark(var(--token-color-neutral-25), var(--token-color-neutral-80));--typo3-state-default-hover-color:var(--typo3-state-default-color);--typo3-state-default-hover-bg:light-dark(var(--token-color-neutral-10), var(--token-color-neutral-85));--typo3-state-default-hover-border-color:light-dark(var(--token-color-neutral-35), var(--token-color-neutral-75));--typo3-state-default-focus-color:var(--typo3-state-default-color);--typo3-state-default-focus-bg:light-dark(var(--token-color-neutral-15), var(--token-color-neutral-80));--typo3-state-default-focus-border-color:light-dark(var(--token-color-neutral-40), var(--token-color-neutral-70));--typo3-state-default-disabled-color:var(--typo3-state-default-color);--typo3-state-default-disabled-bg:var(--typo3-state-default-bg);--typo3-state-default-disabled-border-color:var(--typo3-state-default-border-color);--typo3-state-primary-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-primary-bg:light-dark(var(--token-color-blue-60), var(--token-color-blue-70));--typo3-state-primary-border-color:light-dark(var(--token-color-blue-65), var(--token-color-blue-65));--typo3-state-primary-hover-color:var(--typo3-state-primary-color);--typo3-state-primary-hover-bg:light-dark(var(--token-color-blue-65), var(--token-color-blue-65));--typo3-state-primary-hover-border-color:light-dark(var(--token-color-blue-70), var(--token-color-blue-60));--typo3-state-primary-focus-color:var(--typo3-state-primary-color);--typo3-state-primary-focus-bg:light-dark(var(--token-color-blue-70), var(--token-color-blue-60));--typo3-state-primary-focus-border-color:light-dark(var(--token-color-blue-75), var(--token-color-blue-55));--typo3-state-primary-disabled-color:var(--typo3-state-primary-color);--typo3-state-primary-disabled-bg:var(--typo3-state-primary-bg);--typo3-state-primary-disabled-border-color:var(--typo3-state-default-primary-color);--typo3-state-secondary-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-secondary-bg:light-dark(var(--token-color-neutral-70), var(--token-color-neutral-70));--typo3-state-secondary-border-color:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-65));--typo3-state-secondary-hover-color:var(--typo3-state-secondary-color);--typo3-state-secondary-hover-bg:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-65));--typo3-state-secondary-hover-border-color:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-60));--typo3-state-secondary-focus-color:var(--typo3-state-secondary-color);--typo3-state-secondary-focus-bg:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-60));--typo3-state-secondary-focus-border-color:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-55));--typo3-state-secondary-disabled-color:var(--typo3-state-secondary-color);--typo3-state-secondary-disabled-bg:var(--typo3-state-secondary-bg);--typo3-state-secondary-disabled-border-color:var(--typo3-state-default-secondary-color);--typo3-state-success-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-success-bg:light-dark(var(--token-color-green-70), var(--token-color-green-80));--typo3-state-success-border-color:light-dark(var(--token-color-green-75), var(--token-color-green-75));--typo3-state-success-hover-color:var(--typo3-state-success-color);--typo3-state-success-hover-bg:light-dark(var(--token-color-green-75), var(--token-color-green-75));--typo3-state-success-hover-border-color:light-dark(var(--token-color-green-80), var(--token-color-green-70));--typo3-state-success-focus-color:var(--typo3-state-success-color);--typo3-state-success-focus-bg:light-dark(var(--token-color-green-80), var(--token-color-green-70));--typo3-state-success-focus-border-color:light-dark(var(--token-color-green-85), var(--token-color-green-65));--typo3-state-success-disabled-color:var(--typo3-state-success-color);--typo3-state-success-disabled-bg:var(--typo3-state-success-bg);--typo3-state-success-disabled-border-color:var(--typo3-state-default-success-color);--typo3-state-warning-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-warning-bg:light-dark(var(--token-color-yellow-40), var(--token-color-yellow-80));--typo3-state-warning-border-color:light-dark(var(--token-color-yellow-45), var(--token-color-yellow-75));--typo3-state-warning-hover-color:var(--typo3-state-warning-color);--typo3-state-warning-hover-bg:light-dark(var(--token-color-yellow-45), var(--token-color-yellow-75));--typo3-state-warning-hover-border-color:light-dark(var(--token-color-yellow-50), var(--token-color-yellow-70));--typo3-state-warning-focus-color:var(--typo3-state-warning-color);--typo3-state-warning-focus-bg:light-dark(var(--token-color-yellow-50), var(--token-color-yellow-70));--typo3-state-warning-focus-border-color:light-dark(var(--token-color-yellow-55), var(--token-color-yellow-65));--typo3-state-warning-disabled-color:var(--typo3-state-warning-color);--typo3-state-warning-disabled-bg:var(--typo3-state-warning-bg);--typo3-state-warning-disabled-border-color:var(--typo3-state-warning-border-color);--typo3-state-danger-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-danger-bg:light-dark(var(--token-color-red-50), var(--token-color-red-70));--typo3-state-danger-border-color:light-dark(var(--token-color-red-55), var(--token-color-red-65));--typo3-state-danger-hover-color:var(--typo3-state-danger-color);--typo3-state-danger-hover-bg:light-dark(var(--token-color-red-55), var(--token-color-red-65));--typo3-state-danger-hover-border-color:light-dark(var(--token-color-red-60), var(--token-color-red-60));--typo3-state-danger-focus-color:var(--typo3-state-danger-color);--typo3-state-danger-focus-bg:light-dark(var(--token-color-red-60), var(--token-color-red-60));--typo3-state-danger-focus-border-color:light-dark(var(--token-color-red-65), var(--token-color-red-55));--typo3-state-danger-disabled-color:var(--typo3-state-danger-color);--typo3-state-danger-disabled-bg:var(--typo3-state-danger-bg);--typo3-state-danger-disabled-border-color:var(--typo3-state-danger-border-color);--typo3-state-info-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-0));--typo3-state-info-bg:light-dark(var(--token-color-teal-20), var(--token-color-teal-70));--typo3-state-info-border-color:light-dark(var(--token-color-teal-25), var(--token-color-teal-65));--typo3-state-info-hover-color:var(--typo3-state-info-color);--typo3-state-info-hover-bg:light-dark(var(--token-color-teal-25), var(--token-color-teal-65));--typo3-state-info-hover-border-color:light-dark(var(--token-color-teal-30), var(--token-color-teal-60));--typo3-state-info-focus-color:var(--typo3-state-info-color);--typo3-state-info-focus-bg:light-dark(var(--token-color-teal-30), var(--token-color-teal-60));--typo3-state-info-focus-border-color:light-dark(var(--token-color-teal-35), var(--token-color-teal-55));--typo3-state-info-disabled-color:var(--typo3-state-info-color);--typo3-state-info-disabled-bg:var(--typo3-state-info-bg);--typo3-state-info-disabled-border-color:var(--typo3-state-info-border-color);--typo3-state-notice-color:light-dark(var(--token-color-neutral-0), var(--token-color-neutral-0));--typo3-state-notice-bg:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-85));--typo3-state-notice-border-color:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-80));--typo3-state-notice-hover-color:var(--typo3-state-notice-color);--typo3-state-notice-hover-bg:light-dark(var(--token-color-neutral-80), var(--token-color-neutral-80));--typo3-state-notice-hover-border-color:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-75));--typo3-state-notice-focus-color:var(--typo3-state-notice-color);--typo3-state-notice-focus-bg:light-dark(var(--token-color-neutral-85), var(--token-color-neutral-75));--typo3-state-notice-focus-border-color:light-dark(var(--token-color-neutral-90), var(--token-color-neutral-70));--typo3-state-notice-disabled-color:var(--typo3-state-notice-color);--typo3-state-notice-disabled-bg:var(--typo3-state-notice-bg);--typo3-state-notice-disabled-border-color:var(--typo3-state-notice-border-color);--typo3-shadow-2:0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 1px 2px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-4:0 2px 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 2px 4px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-8:0 4px 8px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-16:0 8px 16px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 8px 16px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-28:0 14px 28px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 14px 28px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-64:0 0 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 32px 64px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-component-color:var(--typo3-text-color-base);--typo3-component-variant-color:var(--typo3-text-color-variant);--typo3-component-primary-color:var(--typo3-text-color-primary);--typo3-component-secondary-color:var(--typo3-text-color-secondary);--typo3-component-match-highlight-color:inherit;--typo3-component-match-highlight-bg:rgba(234, 92, 0, .33);--typo3-component-bg:var(--typo3-surface-container-lowest);--typo3-component-link-color:light-dark(#05c, #6699e0);--typo3-component-link-hover-color:light-dark(#1a66d1, #80aae6);--typo3-component-font-size:0.75rem;--typo3-component-line-height:1.5;--typo3-component-border-radius:4px;--typo3-component-border-width:1px;--typo3-component-border-color:light-dark(rgb(215, 215, 215), rgb(51, 51, 51));--typo3-component-padding-y:.75rem;--typo3-component-padding-x:1rem;--typo3-component-box-shadow:var(--typo3-shadow-2);--typo3-component-box-shadow-strong:var(--typo3-shadow-4);--typo3-component-box-shadow-tooltip:var(--typo3-shadow-8);--typo3-component-box-shadow-flyout:var(--typo3-shadow-16);--typo3-component-box-shadow-dialog:var(--typo3-shadow-28);--typo3-component-box-shadow-window:var(--typo3-shadow-64);--typo3-component-hover-color:var(--typo3-component-color);--typo3-component-hover-bg:light-dark(#f2f7fc, rgb(51, 51, 51));--typo3-component-hover-border-color:light-dark(#d9e6f7, rgb(90, 90, 90));--typo3-component-focus-color:var(--typo3-component-color);--typo3-component-focus-bg:light-dark(#f2f7fc, #002b66);--typo3-component-focus-border-color:light-dark(#3377d6, #00337a);--typo3-component-active-color:#fff;--typo3-component-active-bg:light-dark(#3377d6, #0048ad);--typo3-component-active-border-color:light-dark(#3377d6, #0044a3);--typo3-component-disabled-color:rgb(115, 115, 115);--typo3-component-disabled-bg:transparent;--typo3-component-disabled-border-color:transparent;--typo3-component-spacing:2rem;--typo3-list-item-padding-y:.5rem;--typo3-list-item-padding-x:.75rem;--typo3-list-item-hover-color:var(--typo3-component-hover-color);--typo3-list-item-hover-bg:var(--typo3-component-hover-bg);--typo3-list-item-hover-border-color:var(--typo3-component-hover-border-color);--typo3-list-item-focus-color:var(--typo3-component-focus-color);--typo3-list-item-focus-bg:var(--typo3-component-focus-bg);--typo3-list-item-focus-border-color:var(--typo3-component-focus-border-color);--typo3-list-item-active-color:var(--typo3-list-item-focus-color);--typo3-list-item-active-bg:var(--typo3-list-item-focus-bg);--typo3-list-item-active-border-color:var(--typo3-list-item-focus-border-color);--typo3-list-item-disabled-color:var(--typo3-component-disabled-color);--typo3-list-item-disabled-bg:var(--typo3-component-disabled-bg);--typo3-list-item-disabled-border-color:var(--typo3-component-disabled-border-color);--typo3-legend-font-weight:600;--typo3-input-font-size:.75rem;--typo3-input-line-height:1.5;--typo3-input-padding-y:.5rem;--typo3-input-padding-x:.75rem;--typo3-input-sm-padding-y:.3125rem;--typo3-input-sm-padding-x:.5rem;--typo3-input-sm-font-size:.6875rem;--typo3-input-border-width:1px;--typo3-input-border-radius:var(--typo3-component-border-radius);--typo3-input-color:var(--typo3-text-color-base);--typo3-input-placeholder-color:color-mix(in srgb, var(--typo3-input-color), transparent 30%);--typo3-input-bg:var(--typo3-surface-container-lowest);--typo3-input-group-addon-bg:color-mix(in srgb, var(--typo3-input-bg), var(--typo3-input-color) 10%);--typo3-input-border-color:var(--typo3-state-default-border-color);--typo3-input-hover-color:var(--typo3-input-color);--typo3-input-hover-bg:var(--typo3-input-bg);--typo3-input-hover-border-color:var(--typo3-state-default-hover-border-color);--typo3-input-focus-color:var(--typo3-input-color);--typo3-input-focus-bg:var(--typo3-input-bg);--typo3-input-focus-border-color:var(--typo3-state-primary-focus-border-color);--typo3-input-active-color:var(--typo3-state-primary-color);--typo3-input-active-bg:var(--typo3-state-primary-bg);--typo3-input-active-border-color:var(--typo3-state-primary-focus-border-color);--typo3-input-disabled-color:var(--typo3-state-default-disabled-color);--typo3-input-disabled-bg:var(--typo3-state-default-disabled-bg);--typo3-input-disabled-border-color:var(--typo3-state-default-disabled-border-color);--typo3-input-disabled-opacity:.65} [data-color-scheme=auto]{color-scheme:light dark} [data-color-scheme=dark]{color-scheme:only dark} [data-color-scheme=light]{color-scheme:only light} @@ -3052,6 +2985,68 @@ td .table-fit{margin-bottom:0} .simpletable td,.simpletable th{padding:.25em 1em} .simpletable td:first-child,.simpletable th:first-child{padding-inline-start:0} .simpletable td:last-child,.simpletable th:last-child{padding-inline-end:0} +.modal{--modal-height:auto;--modal-width:600px;--typo3-modal-zindex:var(--typo3-zindex-modal);--typo3-modal-padding:1rem;--typo3-modal-color:var(--typo3-component-color);--typo3-modal-bg:var(--typo3-surface-container-low);--typo3-modal-border-color:color-mix(in srgb, var(--typo3-modal-bg), var(--typo3-modal-color) 5%);--typo3-modal-border-width:var(--typo3-component-border-width);--typo3-modal-border-radius:var(--typo3-component-border-radius);--typo3-modal-box-shadow:var(--typo3-component-box-shadow-dialog);--typo3-modal-header-bg:var(--typo3-surface-container-base);--typo3-modal-header-color:var(--typo3-text-color-base);--typo3-modal-header-border-color:color-mix(in srgb, var(--typo3-modal-header-bg), var(--typo3-modal-header-color) 10%);--typo3-modal-header-font-size:var(--typo3-font-size);--typo3-modal-header-padding-y:.75rem;--typo3-modal-header-padding-x:1rem;--typo3-modal-footer-gap:.5rem;position:fixed;top:0;left:0;z-index:var(--typo3-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0} +.modal-dialog{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100vh;width:100vw;margin:0 auto!important;pointer-events:none} +.modal.fade .modal-dialog{transform:translate(0,-50px);transition:transform .3s ease-out} +@media (prefers-reduced-motion){ +.modal.fade .modal-dialog{transition:none} +} +.modal.show .modal-dialog{transform:none} +.modal-content{display:flex;margin:0 auto;max-height:calc(100vh - 40px);max-width:calc(100vw - 40px);flex-direction:column;height:var(--modal-height);width:var(--modal-width);color:var(--typo3-modal-color);pointer-events:auto;background-color:var(--typo3-modal-bg);background-clip:padding-box;border:var(--typo3-modal-border-width) solid var(--typo3-modal-border-color);border-radius:var(--typo3-modal-border-radius);box-shadow:var(--typo3-modal-box-shadow);outline:0} +.modal-content .modal-loading{height:100%;display:flex;flex:1 0 auto;justify-content:center;align-items:center} +.modal-backdrop{--typo3-backdrop-zindex:var(--typo3-zindex-modal-backdrop);--typo3-backdrop-bg:#000;--typo3-backdrop-opacity:.65;position:fixed;z-index:var(--typo3-backdrop-zindex);top:0;left:0;width:100vw;height:100vh;background-color:var(--typo3-backdrop-bg)} +.modal-backdrop.fade{opacity:0} +.modal-backdrop.show{opacity:var(--typo3-backdrop-opacity)} +.modal-header{display:flex;flex-shrink:0;align-items:center;color:var(--typo3-modal-header-color);background-color:var(--typo3-modal-header-bg);padding:var(--typo3-modal-header-padding-y) var(--typo3-modal-header-padding-x);border-bottom:var(--typo3-modal-border-width) solid var(--typo3-modal-header-border-color);border-start-start-radius:var(--typo3-modal-border-radius);border-start-end-radius:var(--typo3-modal-border-radius)} +.modal-header .close{background:0 0;border:none;color:inherit;opacity:.5;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:calc(var(--typo3-modal-header-padding-y) * .5) calc(var(--typo3-modal-header-padding-x) * .5);margin:calc(-.5 * var(--typo3-modal-header-padding-y)) calc(-.5 * var(--typo3-modal-header-padding-x)) calc(-.5 * var(--typo3-modal-header-padding-y)) auto} +.modal-header .close:active,.modal-header .close:hover{box-shadow:none;outline:0;background:0 0;opacity:1} +.modal-title{margin-bottom:0;font-size:var(--typo3-modal-header-font-size);line-height:1rem} +.modal-body{position:relative;flex:1 1 auto;padding:var(--typo3-modal-padding);overflow-y:auto} +.modal-body>:first-child{margin-top:0} +.modal-body>:last-child{margin-bottom:0} +.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--typo3-modal-padding)/ 2) var(--typo3-modal-padding);background-color:var(--typo3-modal-bg);border-top:var(--typo3-modal-border-width) solid var(--typo3-modal-border-color);border-end-start-radius:var(--typo3-modal-border-radius);border-end-end-radius:var(--typo3-modal-border-radius);gap:var(--typo3-modal-footer-gap)} +.modal-footer .progress{flex-basis:100%;margin-inline:0} +.modal-footer .modal-btn-group{margin-inline:0} +.modal-type-iframe{padding:0} +.modal-type-iframe .modal-body{padding:0} +.modal-iframe{display:block;border:0;height:100%;width:100%;position:absolute;top:0;inset-inline-start:0} +.modal-severity-primary{--typo3-modal-header-color:var(--typo3-surface-container-primary-text);--typo3-modal-header-bg:var(--typo3-surface-container-primary)} +.modal-severity-secondary{--typo3-modal-header-color:var(--typo3-surface-container-secondary-text);--typo3-modal-header-bg:var(--typo3-surface-container-secondary)} +.modal-severity-info{--typo3-modal-header-color:var(--typo3-surface-container-info-text);--typo3-modal-header-bg:var(--typo3-surface-container-info)} +.modal-severity-success{--typo3-modal-header-color:var(--typo3-surface-container-success-text);--typo3-modal-header-bg:var(--typo3-surface-container-success)} +.modal-severity-warning{--typo3-modal-header-color:var(--typo3-surface-container-warning-text);--typo3-modal-header-bg:var(--typo3-surface-container-warning)} +.modal-severity-danger{--typo3-modal-header-color:var(--typo3-surface-container-danger-text);--typo3-modal-header-bg:var(--typo3-surface-container-danger)} +.modal-severity-notice{--typo3-modal-header-color:var(--typo3-surface-container-notice-text);--typo3-modal-header-bg:var(--typo3-surface-container-notice)} +.modal-severity-default{--typo3-modal-header-color:var(--typo3-surface-container-default-text);--typo3-modal-header-bg:var(--typo3-surface-container-default)} +.modal-style-dark{color-scheme:only dark} +.modal-size-small{--modal-width:440px} +.modal-size-default{--modal-width:600px} +.modal-size-medium{--modal-width:800px;--modal-height:520px} +.modal-size-large{--modal-width:1000px;--modal-height:800px} +.modal-size-full{--modal-width:100%;--modal-height:100%} +.modal-image-manipulation{--typo3-modal-image-manipulation-sidebar-sm:250px;--typo3-modal-image-manipulation-sidebar-md:300px} +.modal-image-manipulation .modal-body{padding:0} +@media (min-width:768px){ +.modal-image-manipulation .modal-body{display:flex;flex-direction:row} +} +.modal-image-manipulation .modal-panel-main{overflow:visible;background-color:var(--typo3-modal-bg);background-image:url(../Images/cropper-background.png);display:flex;align-items:center;justify-content:center;padding:20px;width:100%} +@media (min-width:768px){ +.modal-image-manipulation .modal-panel-main{width:calc(100% - var(--typo3-modal-image-manipulation-sidebar-sm))} +} +@media (min-width:992px){ +.modal-image-manipulation .modal-panel-main{width:calc(100% - var(--typo3-modal-image-manipulation-sidebar-md))} +} +.modal-image-manipulation .modal-panel-main img{max-width:100%;max-height:100%;height:auto} +.modal-image-manipulation .modal-panel-sidebar{padding:15px;flex-shrink:0;border-inline-start:1px solid rgba(0,0,0,.25);position:relative;overflow:auto;-webkit-overflow-scrolling:touch;width:100%} +@media (min-width:768px){ +.modal-image-manipulation .modal-panel-sidebar{width:var(--typo3-modal-image-manipulation-sidebar-sm)} +} +@media (min-width:992px){ +.modal-image-manipulation .modal-panel-sidebar{width:var(--typo3-modal-image-manipulation-sidebar-md)} +} +.modal-multi-step-wizard .modal-body .carousel.slide{min-height:21em} +.modal-multi-step-wizard .modal-body .carousel-inner{width:auto;margin:-5px;padding:5px} +.modal-multi-step-wizard .modal-footer .progress-bar.inactive{background:0 0;color:var(--typo3-text-color-base)} select-pure{--typo3-form-selectpure-border-radius:var(--typo3-input-border-radius);--typo3-form-selectpure-border-width:var(--typo3-input-border-width);--typo3-form-selectpure-border-color:var(--typo3-input-border-color);--typo3-form-selectpure-padding-x:var(--typo3-input-padding-x);--typo3-form-selectpure-padding-y:var(--typo3-input-padding-y);--typo3-form-selectpure-font-size:var(--typo3-input-font-size);--typo3-form-selectpure-line-height:var(--typo3-input-line-height);--typo3-form-selectpure-color:var(--typo3-input-color);--typo3-form-selectpure-bg:var(--typo3-input-bg);--typo3-form-selectpure-hover-color:var(--typo3-input-hover-color);--typo3-form-selectpure-hover-bg:var(--typo3-input-hover-bg);--typo3-form-selectpure-focus-border-color:var(--typo3-input-focus-border-color);--typo3-form-selectpure-disabled-color:var(--typo3-input-disabled-color);--typo3-form-selectpure-disabled-bg:var(--typo3-input-disabled-bg);--font-size:var(--typo3-form-selectpure-font-size);--font-family:inherit;--font-weight:400;--border-radius:var(--typo3-form-selectpure-border-radius);--border-width:var(--typo3-form-selectpure-border-width);--border-color:var(--typo3-form-selectpure-border-color);--padding:calc(var(--typo3-form-selectpure-padding-y) - 4px) var(--typo3-form-selectpure-padding-x);--select-height:calc(var(--typo3-form-selectpure-padding-y) * 2 + var(--typo3-form-selectpure-font-size) * var(--typo3-form-selectpure-line-height) + var(--typo3-form-selectpure-border-width) * 2);--select-width:100%;--color:var(--typo3-form-selectpure-color);--background-color:var(--typo3-form-selectpure-bg);--hover-color:var(--typo3-form-selectpure-hover-color);--hover-background-color:var(--typo3-form-selectpure-hover-bg);--disabled-color:var(--typo3-form-selectpure-disabled-color);--disabled-background-color:var(--typo3-form-selectpure-disabled-bg);--select-outline:.25rem solid color-mix(in srgb, var(--typo3-form-selectpure-focus-border-color), transparent 25%);--selected-background-color:var(--typo3-component-active-bg);--selected-color:var(--typo3-component-active-color);--dropdown-gap:calc(var(--typo3-spacing) * .5);--dropdown-items:5;--dropdown-z-index:2} .input-group>select-pure{position:relative;flex:1 1 auto} .cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} @@ -3379,64 +3374,6 @@ typo3-backend-form-selecttree-toolbar{display:block} .media{display:grid;grid-template-columns:2rem auto;grid-gap:1rem} .media .media-body{grid-column:1/3;overflow:hidden} .media .media-left+.media-body{grid-column:2/3;align-self:center} -.modal .close{background:0 0;border:none;color:inherit;padding:0;margin:0;text-shadow:rgba(0,0,0,.5) 0 0 3px;opacity:.5;-webkit-user-select:none;-moz-user-select:none;user-select:none} -.modal .close:active,.modal .close:hover{box-shadow:none;outline:0;background:0 0;opacity:1} -.modal-dialog{display:flex;flex-direction:column;align-items:stretch;justify-content:center;margin:0 auto!important;height:100vh;width:100vw} -.modal-content{display:flex;flex-direction:column;margin:0 auto;max-height:calc(100vh - 40px);max-width:calc(100vw - 40px)} -.modal-body{overflow-y:auto} -.modal-body>:first-child{margin-top:0} -.modal-body>:last-child{margin-bottom:0} -.modal-footer,.modal-header{padding:calc(var(--bs-modal-padding)/ 2) var(--bs-modal-padding)} -.modal-footer .btn+.btn{margin-inline-start:.5em} -.modal-footer .progress{flex-basis:100%;margin-inline:0} -.modal-footer .modal-btn-group{margin-inline:0} -.modal-content{transition:margin-top .1s ease-in;border:none} -.modal-content .modal-loading{height:100%;display:flex;flex:1 0 auto;justify-content:center;align-items:center} -.modal-image-manipulation .modal-body{padding:0} -@media (min-width:768px){ -.modal-image-manipulation .modal-body{display:flex;flex-direction:row} -} -.modal-image-manipulation .modal-panel-main{overflow:visible;background-image:url(../Images/cropper-background.png);display:flex;align-items:center;justify-content:center;padding:20px;width:100%} -@media (min-width:768px){ -.modal-image-manipulation .modal-panel-main{width:calc(100% - 250px)} -} -@media (min-width:992px){ -.modal-image-manipulation .modal-panel-main{width:calc(100% - 300px)} -} -.modal-image-manipulation .modal-panel-main img{max-width:100%;max-height:100%;height:auto} -.modal-image-manipulation .modal-panel-sidebar{padding:15px;flex-shrink:0;border-inline-start:1px solid rgba(0,0,0,.25);position:relative;overflow:auto;-webkit-overflow-scrolling:touch;width:100%} -@media (min-width:768px){ -.modal-image-manipulation .modal-panel-sidebar{width:250px} -} -@media (min-width:992px){ -.modal-image-manipulation .modal-panel-sidebar{width:300px} -} -.modal-type-iframe{padding:0} -.modal-type-iframe .modal-body{padding:0} -.modal-iframe{display:block;border:0;height:100%;width:100%;position:absolute;top:0;inset-inline-start:0} -.modal-size-small .modal-content{width:440px} -.modal-size-default .modal-content{width:600px} -.modal-size-medium .modal-content{width:800px;height:520px} -.modal-size-large .modal-content{width:1000px;height:800px} -.modal-size-full .modal-content{width:100%;height:100%} -.modal-severity-primary .modal-header{background-color:#05c;color:#fff;border-bottom-color:#004db8} -.modal-severity-secondary .modal-header{background-color:#737373;color:#fff;border-bottom-color:#686868} -.modal-severity-success .modal-header{background-color:#247554;color:#fff;border-bottom-color:#20694c} -.modal-severity-info .modal-header{background-color:#abdced;color:#000;border-bottom-color:#9ac6d5} -.modal-severity-warning .modal-header{background-color:#fc3;color:#000;border-bottom-color:#e6b82e} -.modal-severity-danger .modal-header{background-color:#d13a2e;color:#fff;border-bottom-color:#bc3429} -.modal-severity-light .modal-header{background-color:#f5f5f5;color:#000;border-bottom-color:#ddd} -.modal-severity-default .modal-header{background-color:#f5f5f5;color:#000;border-bottom-color:#ddd} -.modal-severity-notice .modal-header{background-color:#333;color:#fff;border-bottom-color:#2e2e2e} -.modal-severity-dark .modal-header{background-color:#1e1e1e;color:#fff;border-bottom-color:#1b1b1b} -.modal-style-dark{color:#fff} -.modal-style-dark .modal-header{color:#fff;background-color:#484848;border-bottom-color:#000} -.modal-style-dark .modal-content{overflow:hidden;background-color:#292929} -.modal-style-dark .modal-body,.modal-style-dark .modal-footer{background-color:#292929;color:#fff} -.modal-style-dark .modal-footer{border-top:1px solid #000} -.modal-multi-step-wizard .modal-body .carousel.slide{min-height:21em} -.modal-multi-step-wizard .modal-body .carousel-inner{width:auto;margin:-5px;padding:5px} -.modal-multi-step-wizard .modal-footer .progress-bar.inactive{background:0 0;color:#000} :root{--note-primary-color:#000;--note-primary-bg:#d9e6f7;--note-primary-header-color:#000;--note-primary-header-bg:#99bbeb;--note-secondary-color:#000;--note-secondary-bg:#eaeaea;--note-secondary-header-color:#000;--note-secondary-header-bg:#c7c7c7;--note-success-color:#000;--note-success-bg:#deeae5;--note-success-header-color:#000;--note-success-header-bg:#a7c8bb;--note-info-color:#000;--note-info-bg:#f2fafc;--note-info-header-color:#000;--note-info-header-bg:#ddf1f8;--note-warning-color:#000;--note-warning-bg:#fff7e0;--note-warning-header-color:#000;--note-warning-header-bg:#ffebad;--note-danger-color:#000;--note-danger-bg:#f8e1e0;--note-danger-header-color:#000;--note-danger-header-bg:#edb0ab;--note-light-color:#000;--note-light-bg:#fefefe;--note-light-header-color:#000;--note-light-header-bg:#fbfbfb;--note-default-color:#000;--note-default-bg:#fefefe;--note-default-header-color:#000;--note-default-header-bg:#fbfbfb;--note-notice-color:#000;--note-notice-bg:#e0e0e0;--note-notice-header-color:#000;--note-notice-header-bg:#adadad;--note-dark-color:#000;--note-dark-bg:#dddddd;--note-dark-header-color:#000;--note-dark-header-bg:#a5a5a5;--note-light-bg:rgb(245, 245, 245);--note-light-header-bg:#dddddd;--note-default-bg:rgb(238, 238, 238);--note-default-header-bg:#d6d6d6} .note-list{display:grid;gap:var(--typo3-spacing);margin-bottom:var(--typo3-spacing)} .note-list .note{margin-bottom:0} @@ -3797,7 +3734,6 @@ typo3-rte-ckeditor-ckeditor5 .ck.ck-style-panel .ck-style-grid .ck-style-grid__b .collapse-horizontal{height:auto;width:0;vertical-align:middle;overflow:hidden} .collapse-horizontal.show{display:inline-block;width:auto} .collapse-horizontal.collapsing{display:inline-block;transition-property:width,visibility;width:0} -.cropper{color-scheme:only dark} .cropper .cropper-line{background-color:transparent} .cropper .cropper-dashed{border:1px dashed var(--typo3-state-primary-bg)} .cropper .cropper-point{background-color:var(--typo3-state-primary-bg)} diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/modal.js b/typo3/sysext/backend/Resources/Public/JavaScript/modal.js index b93da5cf3e66c0ec5d82e221895de4a8fb583937..c0911566d6466181b0d5620855d0427c309a970f 100644 --- a/typo3/sysext/backend/Resources/Public/JavaScript/modal.js +++ b/typo3/sysext/backend/Resources/Public/JavaScript/modal.js @@ -50,4 +50,4 @@ var Identifiers,__decorate=function(t,e,a,o){var s,n=arguments.length,i=n<3?e:nu ${t.icon?html`<typo3-backend-icon identifier="${t.icon}" size="small"></typo3-backend-icon>`:nothing} ${t.text} </button> - `}trigger(t){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0}))}};__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"modalTitle",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"content",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"type",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"severity",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"variant",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"size",void 0),__decorate([property({type:Number,reflect:!0})],ModalElement.prototype,"zindex",void 0),__decorate([property({type:Boolean})],ModalElement.prototype,"staticBackdrop",void 0),__decorate([property({type:Boolean})],ModalElement.prototype,"hideCloseButton",void 0),__decorate([property({type:Array})],ModalElement.prototype,"additionalCssClasses",void 0),__decorate([property({type:Array,attribute:!1})],ModalElement.prototype,"buttons",void 0),__decorate([state()],ModalElement.prototype,"templateResultContent",void 0),__decorate([state()],ModalElement.prototype,"activeButton",void 0),ModalElement=__decorate([customElement("typo3-backend-modal")],ModalElement);export{ModalElement};class Modal{constructor(){this.sizes=Sizes,this.styles=Styles,this.types=Types,this.currentModal=null,this.instances=[],this.defaultConfiguration={type:Types.default,title:"Information",content:"No content provided, please check your <code>Modal</code> configuration.",severity:SeverityEnum.notice,buttons:[],style:Styles.default,size:Sizes.default,additionalCssClasses:[],callback:null,ajaxCallback:null,staticBackdrop:!1,hideCloseButton:!1},this.initializeMarkupTrigger(document)}static createModalResponseEventFromElement(t,e){return t.dataset.eventName?new CustomEvent(t.dataset.eventName,{bubbles:!0,detail:{result:e,payload:t.dataset.eventPayload||null}}):null}dismiss(){this.currentModal&&this.currentModal.hideModal()}confirm(t,e,a=SeverityEnum.warning,o=[],s){0===o.length&&o.push({text:TYPO3?.lang?.["button.cancel"]||"Cancel",active:!0,btnClass:"btn-default",name:"cancel"},{text:TYPO3?.lang?.["button.ok"]||"OK",btnClass:"btn-"+Severity.getCssClass(a),name:"ok"});const n=this.advanced({title:t,content:e,severity:a,buttons:o,additionalCssClasses:s});return n.addEventListener("button.clicked",(t=>{const e=t.target;"cancel"===e.getAttribute("name")?e.dispatchEvent(new CustomEvent("confirm.button.cancel",{bubbles:!0})):"ok"===e.getAttribute("name")&&e.dispatchEvent(new CustomEvent("confirm.button.ok",{bubbles:!0}))})),n}loadUrl(t,e=SeverityEnum.info,a,o,s){return this.advanced({type:Types.ajax,title:t,severity:e,buttons:a,ajaxCallback:s,content:o})}show(t,e,a=SeverityEnum.info,o,s){return this.advanced({type:Types.default,title:t,content:e,severity:a,buttons:o,additionalCssClasses:s})}advanced(t){return t.type="string"==typeof t.type&&t.type in Types?t.type:this.defaultConfiguration.type,t.title="string"==typeof t.title?t.title:this.defaultConfiguration.title,t.content="string"==typeof t.content||"object"==typeof t.content?t.content:this.defaultConfiguration.content,t.severity=void 0!==t.severity?t.severity:this.defaultConfiguration.severity,t.buttons=t.buttons||this.defaultConfiguration.buttons,t.size="string"==typeof t.size&&t.size in Sizes?t.size:this.defaultConfiguration.size,t.style="string"==typeof t.style&&t.style in Styles?t.style:this.defaultConfiguration.style,t.additionalCssClasses=t.additionalCssClasses||this.defaultConfiguration.additionalCssClasses,t.callback="function"==typeof t.callback?t.callback:this.defaultConfiguration.callback,t.ajaxCallback="function"==typeof t.ajaxCallback?t.ajaxCallback:this.defaultConfiguration.ajaxCallback,t.staticBackdrop=t.staticBackdrop||this.defaultConfiguration.staticBackdrop,t.hideCloseButton=t.hideCloseButton||this.defaultConfiguration.hideCloseButton,this.generate(t)}setButtons(t){return this.currentModal.buttons=t,this.currentModal}initializeMarkupTrigger(t){new RegularEvent("click",((t,e)=>{t.preventDefault();const a=e.dataset.bsContent||e.dataset.content||TYPO3?.lang?.["message.confirmation"]||"Are you sure?";let o=SeverityEnum.info;if(e.dataset.severity in SeverityEnum){const t=e.dataset.severity;o=SeverityEnum[t]}let s=Sizes.default;if(e.dataset.size in Sizes){const t=e.dataset.size;s=Sizes[t]}let n=e.dataset.url||null;if(null!==n){const t=n.includes("?")?"&":"?";n=n+t+new URLSearchParams(e.dataset).toString()}this.advanced({type:null!==n?Types.ajax:Types.default,title:e.dataset.title||"Alert",content:null!==n?n:a,size:s,severity:o,staticBackdrop:void 0!==e.dataset.staticBackdrop,buttons:[{text:e.dataset.buttonCloseText||TYPO3?.lang?.["button.close"]||"Close",active:!0,btnClass:"btn-default",trigger:(t,a)=>{a.hideModal();const o=Modal.createModalResponseEventFromElement(e,!1);null!==o&&e.dispatchEvent(o)}},{text:e.dataset.buttonOkText||TYPO3?.lang?.["button.ok"]||"OK",btnClass:"btn-"+Severity.getCssClass(o),trigger:(t,a)=>{a.hideModal();const o=Modal.createModalResponseEventFromElement(e,!0);null!==o&&e.dispatchEvent(o);const s=e.dataset.uri||e.dataset.href||e.getAttribute("href");s&&"#"!==s&&(e.ownerDocument.location.href=s),"submit"===e.getAttribute("type")&&(e.closest("form")?.submit(),"BUTTON"===e.tagName&&e.hasAttribute("form")&&e.ownerDocument.querySelector("form#"+e.getAttribute("form"))?.submit()),e.dataset.targetForm&&e.ownerDocument.querySelector("form#"+e.dataset.targetForm)?.submit()}}]})})).delegateTo(t,".t3js-modal-trigger")}generate(t){const e=document.createElement("typo3-backend-modal");return e.type=t.type,"string"==typeof t.content?e.content=t.content:t.type===Types.default&&(e.type=Types.template,e.templateResultContent=t.content),e.severity=t.severity,e.variant=t.style,e.size=t.size,e.modalTitle=t.title,e.additionalCssClasses=t.additionalCssClasses,e.buttons=t.buttons,e.staticBackdrop=t.staticBackdrop,e.hideCloseButton=t.hideCloseButton,t.callback&&(e.callback=t.callback),t.ajaxCallback&&(e.ajaxCallback=t.ajaxCallback),e.addEventListener("typo3-modal-shown",(()=>{const t=e.nextElementSibling,a=1e3+10*this.instances.length;e.zindex=a;const o=a-5;t.style.zIndex=o.toString(),e.querySelector(`${Identifiers.footer} .t3js-active`)?.focus()})),e.addEventListener("typo3-modal-hide",(()=>{if(this.instances.length>0){const t=this.instances.length-1;this.instances.splice(t,1),this.currentModal=this.instances[t-1]}})),e.addEventListener("typo3-modal-hidden",(()=>{e.remove(),this.instances.length>0&&document.body.classList.add("modal-open")})),e.addEventListener("typo3-modal-show",(()=>{this.currentModal=e,this.instances.push(e)})),document.body.appendChild(e),e}}let modalObject=null;try{parent&&parent.window.TYPO3&&parent.window.TYPO3.Modal?(parent.window.TYPO3.Modal.initializeMarkupTrigger(document),modalObject=parent.window.TYPO3.Modal):top&&top.TYPO3.Modal&&(top.TYPO3.Modal.initializeMarkupTrigger(document),modalObject=top.TYPO3.Modal)}catch{}modalObject||(modalObject=new Modal,"undefined"!=typeof TYPO3&&(TYPO3.Modal=modalObject));export default modalObject; \ No newline at end of file + `}trigger(t){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0}))}};__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"modalTitle",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"content",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"type",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"severity",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"variant",void 0),__decorate([property({type:String,reflect:!0})],ModalElement.prototype,"size",void 0),__decorate([property({type:Number,reflect:!0})],ModalElement.prototype,"zindex",void 0),__decorate([property({type:Boolean})],ModalElement.prototype,"staticBackdrop",void 0),__decorate([property({type:Boolean})],ModalElement.prototype,"hideCloseButton",void 0),__decorate([property({type:Array})],ModalElement.prototype,"additionalCssClasses",void 0),__decorate([property({type:Array,attribute:!1})],ModalElement.prototype,"buttons",void 0),__decorate([state()],ModalElement.prototype,"templateResultContent",void 0),__decorate([state()],ModalElement.prototype,"activeButton",void 0),ModalElement=__decorate([customElement("typo3-backend-modal")],ModalElement);export{ModalElement};class Modal{constructor(){this.sizes=Sizes,this.styles=Styles,this.types=Types,this.currentModal=null,this.instances=[],this.defaultConfiguration={type:Types.default,title:"Information",content:"No content provided, please check your <code>Modal</code> configuration.",severity:SeverityEnum.notice,buttons:[],style:Styles.default,size:Sizes.default,additionalCssClasses:[],callback:null,ajaxCallback:null,staticBackdrop:!1,hideCloseButton:!1},this.initializeMarkupTrigger(document)}static createModalResponseEventFromElement(t,e){return t.dataset.eventName?new CustomEvent(t.dataset.eventName,{bubbles:!0,detail:{result:e,payload:t.dataset.eventPayload||null}}):null}dismiss(){this.currentModal&&this.currentModal.hideModal()}confirm(t,e,a=SeverityEnum.warning,o=[],s){0===o.length&&o.push({text:TYPO3?.lang?.["button.cancel"]||"Cancel",active:!0,btnClass:"btn-default",name:"cancel"},{text:TYPO3?.lang?.["button.ok"]||"OK",btnClass:"btn-"+Severity.getCssClass(a),name:"ok"});const n=this.advanced({title:t,content:e,severity:a,buttons:o,additionalCssClasses:s});return n.addEventListener("button.clicked",(t=>{const e=t.target;"cancel"===e.getAttribute("name")?e.dispatchEvent(new CustomEvent("confirm.button.cancel",{bubbles:!0})):"ok"===e.getAttribute("name")&&e.dispatchEvent(new CustomEvent("confirm.button.ok",{bubbles:!0}))})),n}loadUrl(t,e=SeverityEnum.info,a,o,s){return this.advanced({type:Types.ajax,title:t,severity:e,buttons:a,ajaxCallback:s,content:o})}show(t,e,a=SeverityEnum.info,o,s){return this.advanced({type:Types.default,title:t,content:e,severity:a,buttons:o,additionalCssClasses:s})}advanced(t){return t.type="string"==typeof t.type&&t.type in Types?t.type:this.defaultConfiguration.type,t.title="string"==typeof t.title?t.title:this.defaultConfiguration.title,t.content="string"==typeof t.content||"object"==typeof t.content?t.content:this.defaultConfiguration.content,t.severity=void 0!==t.severity?t.severity:this.defaultConfiguration.severity,t.buttons=t.buttons||this.defaultConfiguration.buttons,t.size="string"==typeof t.size&&t.size in Sizes?t.size:this.defaultConfiguration.size,t.style="string"==typeof t.style&&t.style in Styles?t.style:this.defaultConfiguration.style,t.additionalCssClasses=t.additionalCssClasses||this.defaultConfiguration.additionalCssClasses,t.callback="function"==typeof t.callback?t.callback:this.defaultConfiguration.callback,t.ajaxCallback="function"==typeof t.ajaxCallback?t.ajaxCallback:this.defaultConfiguration.ajaxCallback,t.staticBackdrop=t.staticBackdrop||this.defaultConfiguration.staticBackdrop,t.hideCloseButton=t.hideCloseButton||this.defaultConfiguration.hideCloseButton,this.generate(t)}setButtons(t){return this.currentModal.buttons=t,this.currentModal}initializeMarkupTrigger(t){new RegularEvent("click",((t,e)=>{t.preventDefault();const a=e.dataset.bsContent||e.dataset.content||TYPO3?.lang?.["message.confirmation"]||"Are you sure?";let o=SeverityEnum.notice;if(e.dataset.severity in SeverityEnum){const t=e.dataset.severity;o=SeverityEnum[t]}let s=Sizes.default;if(e.dataset.size in Sizes){const t=e.dataset.size;s=Sizes[t]}let n=e.dataset.url||null;if(null!==n){const t=n.includes("?")?"&":"?";n=n+t+new URLSearchParams(e.dataset).toString()}this.advanced({type:null!==n?Types.ajax:Types.default,title:e.dataset.title||"Alert",content:null!==n?n:a,size:s,severity:o,staticBackdrop:void 0!==e.dataset.staticBackdrop,buttons:[{text:e.dataset.buttonCloseText||TYPO3?.lang?.["button.close"]||"Close",active:!0,btnClass:"btn-default",trigger:(t,a)=>{a.hideModal();const o=Modal.createModalResponseEventFromElement(e,!1);null!==o&&e.dispatchEvent(o)}},{text:e.dataset.buttonOkText||TYPO3?.lang?.["button.ok"]||"OK",btnClass:"btn-"+Severity.getCssClass(o),trigger:(t,a)=>{a.hideModal();const o=Modal.createModalResponseEventFromElement(e,!0);null!==o&&e.dispatchEvent(o);const s=e.dataset.uri||e.dataset.href||e.getAttribute("href");s&&"#"!==s&&(e.ownerDocument.location.href=s),"submit"===e.getAttribute("type")&&(e.closest("form")?.submit(),"BUTTON"===e.tagName&&e.hasAttribute("form")&&e.ownerDocument.querySelector("form#"+e.getAttribute("form"))?.submit()),e.dataset.targetForm&&e.ownerDocument.querySelector("form#"+e.dataset.targetForm)?.submit()}}]})})).delegateTo(t,".t3js-modal-trigger")}generate(t){const e=document.createElement("typo3-backend-modal");return e.type=t.type,"string"==typeof t.content?e.content=t.content:t.type===Types.default&&(e.type=Types.template,e.templateResultContent=t.content),e.severity=t.severity,e.variant=t.style,e.size=t.size,e.modalTitle=t.title,e.additionalCssClasses=t.additionalCssClasses,e.buttons=t.buttons,e.staticBackdrop=t.staticBackdrop,e.hideCloseButton=t.hideCloseButton,t.callback&&(e.callback=t.callback),t.ajaxCallback&&(e.ajaxCallback=t.ajaxCallback),e.addEventListener("typo3-modal-shown",(()=>{const t=e.nextElementSibling,a=1e3+10*this.instances.length;e.zindex=a;const o=a-5;t.style.zIndex=o.toString(),e.querySelector(`${Identifiers.footer} .t3js-active`)?.focus()})),e.addEventListener("typo3-modal-hide",(()=>{if(this.instances.length>0){const t=this.instances.length-1;this.instances.splice(t,1),this.currentModal=this.instances[t-1]}})),e.addEventListener("typo3-modal-hidden",(()=>{e.remove(),this.instances.length>0&&document.body.classList.add("modal-open")})),e.addEventListener("typo3-modal-show",(()=>{this.currentModal=e,this.instances.push(e)})),document.body.appendChild(e),e}}let modalObject=null;try{parent&&parent.window.TYPO3&&parent.window.TYPO3.Modal?(parent.window.TYPO3.Modal.initializeMarkupTrigger(document),modalObject=parent.window.TYPO3.Modal):top&&top.TYPO3.Modal&&(top.TYPO3.Modal.initializeMarkupTrigger(document),modalObject=top.TYPO3.Modal)}catch{}modalObject||(modalObject=new Modal,"undefined"!=typeof TYPO3&&(TYPO3.Modal=modalObject));export default modalObject; \ No newline at end of file diff --git a/typo3/sysext/styleguide/Classes/Controller/ComponentsController.php b/typo3/sysext/styleguide/Classes/Controller/ComponentsController.php index 74853df222955c11b30ce1a2676626835ec0d8fc..1dbeb74b42211245cd24edceac32d8b835e74a04 100644 --- a/typo3/sysext/styleguide/Classes/Controller/ComponentsController.php +++ b/typo3/sysext/styleguide/Classes/Controller/ComponentsController.php @@ -252,6 +252,7 @@ final class ComponentsController 'currentAction' => 'modal', 'routeIdentifier' => 'styleguide_components', 'variants' => ['notice', 'info', 'ok', 'warning', 'error'], + 'sizes' => ['small', 'default', 'medium', 'large', 'full'], ]); return $view->renderResponse('Backend/Components/Modal'); } diff --git a/typo3/sysext/styleguide/Resources/Private/Language/locallang.xlf b/typo3/sysext/styleguide/Resources/Private/Language/locallang.xlf index 0cb873ee1bbeef989af4be827ccbd4219a8ae354..ebb6f4e79f25f97dae0552d126a4330778b54dd3 100644 --- a/typo3/sysext/styleguide/Resources/Private/Language/locallang.xlf +++ b/typo3/sysext/styleguide/Resources/Private/Language/locallang.xlf @@ -461,6 +461,9 @@ <trans-unit id="component.modal.section.severity.headline" resname="component.modal.section.severity.headline"> <source>Severity</source> </trans-unit> + <trans-unit id="component.modal.section.size.headline" resname="component.modal.section.size.headline"> + <source>Size</source> + </trans-unit> <!-- Component: Navs --> <trans-unit id="component.navs.headline" resname="component.navs.headline"> diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Modal.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Modal.html index ca1054b011a910c46f895458bb031ec371cea600..7b537f1f39da9bf7e958778132e7ab5ef56619d1 100644 --- a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Modal.html +++ b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Modal.html @@ -62,6 +62,29 @@ </f:for> </div> </sg:example> + + <h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:component.modal.section.size.headline" /></h2> + <f:variable name="codeSnippetSeverity"> + <f:for each="{sizes}" as="size"> + data-size="{size}" + </f:for> + </f:variable> + <sg:example codePreview="true" codeLanguage="html" customCode="{codeSnippetSeverity}"> + <div class="example-container"> + <f:for each="{sizes}" as="size"> + <div class="example-item"> + <a + class="btn btn-default t3js-modal-trigger" + data-size="{size}" + data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum faucibus libero sed efficitur. Aenean dictum faucibus tortor, ac rutrum lorem vulputate sit amet. Proin quis sem ante. Sed fermentum id leo et mollis. Aenean rhoncus metus vitae eros auctor aliquet. Mauris tristique rhoncus lacus in fermentum." + > + Open {size} modal + </a> + </div> + </f:for> + </div> + </sg:example> + </div> </f:section>