From 7c0161c8a75ccd4f142513ddfbb0a5e6985bacc0 Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Thu, 12 Sep 2024 09:27:39 +0200
Subject: [PATCH] [TASK] Make list-group context aware
We are dropping the Bootstrap CSS definitions for
all list-group to have more control about the styling of
the list-group elements. From now on we are shipping
custom css adapted to our needs. The new list-group
element styling is context aware and adapts to
light and dark color schemes.
Resolves: #104927
Releases: main
Change-Id: I9212f0e668a00591f1351b1a56daec99eadc420b
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/86041
Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Andreas Nedbal <andy@pixelde.su>
Reviewed-by: Andreas Nedbal <andy@pixelde.su>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: core-ci <typo3@b13.com>
---
Build/Sources/Sass/_minimal.scss | 3 +-
Build/Sources/Sass/component/_list-group.scss | 90 +++++++++++++++++++
.../Private/Templates/LinkBrowser/Page.html | 2 +-
.../backend/Resources/Public/Css/backend.css | 82 +++--------------
4 files changed, 103 insertions(+), 74 deletions(-)
create mode 100644 Build/Sources/Sass/component/_list-group.scss
diff --git a/Build/Sources/Sass/_minimal.scss b/Build/Sources/Sass/_minimal.scss
index e5d8d34b01b6..940b231e226b 100644
--- a/Build/Sources/Sass/_minimal.scss
+++ b/Build/Sources/Sass/_minimal.scss
@@ -47,7 +47,7 @@
// @import "../../node_modules/bootstrap/scss/badge";
// @import "../../node_modules/bootstrap/scss/alert";
@import "../../node_modules/bootstrap/scss/progress";
-@import "../../node_modules/bootstrap/scss/list-group";
+// @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";
@@ -104,3 +104,4 @@
@import "component/table";
@import "component/simpletable";
@import "component/modal";
+@import "component/list-group";
diff --git a/Build/Sources/Sass/component/_list-group.scss b/Build/Sources/Sass/component/_list-group.scss
new file mode 100644
index 000000000000..6af29f69f855
--- /dev/null
+++ b/Build/Sources/Sass/component/_list-group.scss
@@ -0,0 +1,90 @@
+//
+// List group
+//
+.list-group {
+ --typo3-list-group-border-width: var(--typo3-component-border-width);
+ --typo3-list-group-border-radius: var(--typo3-component-border-radius);
+ --typo3-list-group-padding-x: 1rem;
+ --typo3-list-group-padding-y: .5rem;
+ --typo3-list-group-color: var(--typo3-component-color);
+ --typo3-list-group-bg: var(--typo3-component-bg);
+ --typo3-list-group-border-color: var(--typo3-component-border-color);
+ --typo3-list-group-hover-color: var(--typo3-list-item-hover-color);
+ --typo3-list-group-hover-bg: var(--typo3-list-item-hover-bg);
+ --typo3-list-group-hover-border-color: var(--typo3-list-item-hover-border-color);
+ --typo3-list-group-active-color: var(--typo3-list-item-active-color);
+ --typo3-list-group-active-bg: var(--typo3-list-item-active-bg);
+ --typo3-list-group-active-border-color: var(--typo3-list-item-active-border-color);
+ --typo3-list-group-disabled-color: var(--typo3-list-item-disabled-color);
+ --typo3-list-group-disabled-bg: var(--typo3-list-item-disabled-bg);
+ --typo3-list-group-disabled-border-color: var(--typo3-list-item-disabled-border-color);
+ //
+ color: var(--typo3-list-group-color);
+ background-color: var(--typo3-list-group-bg);
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 0;
+ border-radius: var(--typo3-list-group-border-radius);
+}
+
+.list-group-item-action {
+ position: relative;
+ width: 100%;
+ color: var(--typo3-list-group-color);
+ background-color: var(--typo3-list-group-bg);
+ text-align: inherit;
+
+ &:hover,
+ &:focus {
+ --typo3-list-group-color: var(--typo3-list-group-hover-color);
+ --typo3-list-group-bg: var(--typo3-list-group-hover-bg);
+ --typo3-list-group-border-color: var(--typo3-list-group-hover-border-color);
+ text-decoration: none;
+ z-index: 1;
+ }
+
+ &:focus-visible {
+ outline: .25rem solid color-mix(in srgb, var(--typo3-list-group-border-color), transparent 25%);
+ z-index: 3 !important;
+ }
+}
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: var(--typo3-list-group-padding-y) var(--typo3-list-group-padding-x);
+ text-decoration: none;
+ color: var(--typo3-list-group-color);
+ background-color: var(--typo3-list-group-bg);
+ border: var(--typo3-list-group-border-width) solid var(--typo3-list-group-border-color);
+ outline-offset: 0;
+
+ &:first-child {
+ border-start-start-radius: var(--typo3-list-group-border-radius);
+ border-start-end-radius: var(--typo3-list-group-border-radius);
+ }
+
+ &:last-child {
+ border-end-start-radius: var(--typo3-list-group-border-radius);
+ border-end-end-radius: var(--typo3-list-group-border-radius);
+ }
+
+ &.active {
+ --typo3-list-group-color: var(--typo3-list-group-active-color);
+ --typo3-list-group-bg: var(--typo3-list-group-active-bg);
+ --typo3-list-group-border-color: var(--typo3-list-group-active-border-color);
+ z-index: 2;
+ }
+
+ &.disabled,
+ &:disabled {
+ --typo3-list-group-color: var(--typo3-list-group-disabled-color);
+ --typo3-list-group-bg: var(--typo3-list-group-disabled-bg);
+ --typo3-list-group-border-color: var(--typo3-list-group-disabled-border-color);
+ pointer-events: none;
+ }
+
+ & + & {
+ margin-top: calc(-1 * var(--typo3-list-group-border-width));
+ }
+}
diff --git a/typo3/sysext/backend/Resources/Private/Templates/LinkBrowser/Page.html b/typo3/sysext/backend/Resources/Private/Templates/LinkBrowser/Page.html
index 82e58c795213..8f80b4340a93 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/LinkBrowser/Page.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/LinkBrowser/Page.html
@@ -30,7 +30,7 @@
<f:if condition="{contentElements}">
<h4 class="mt-4 mb-3"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_browse_links.xlf:contentElements" /></h4>
- <div class="list-group list-group-flush">
+ <div class="list-group">
<f:for each="{contentElements}" as="content">
<a href="{content.url}" class="t3js-pageLink list-group-item list-group-item-action {f:if(condition: content.isSelected, then: ' active')}">
{content.icon -> f:format.raw()} {content.title -> f:format.raw()}
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 584b63e1bb57..627aad7ed684 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -648,78 +648,6 @@ progress{vertical-align:baseline}
@media (prefers-reduced-motion:reduce){
.progress-bar-animated{animation:none}
}
-.list-group{--bs-list-group-color:var(--bs-body-color);--bs-list-group-bg:var(--bs-body-bg);--bs-list-group-border-color:var(--bs-border-color);--bs-list-group-border-width:var(--bs-border-width);--bs-list-group-border-radius:var(--bs-border-radius);--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:var(--bs-secondary-color);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-tertiary-bg);--bs-list-group-action-active-color:var(--bs-body-color);--bs-list-group-action-active-bg:var(--bs-secondary-bg);--bs-list-group-disabled-color:var(--bs-secondary-color);--bs-list-group-disabled-bg:var(--bs-body-bg);--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#05c;--bs-list-group-active-border-color:#05c;display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}
-.list-group-numbered{list-style-type:none;counter-reset:section}
-.list-group-numbered>.list-group-item::before{content:counters(section, ".") ". ";counter-increment:section}
-.list-group-item-action{width:100%;color:var(--bs-list-group-action-color);text-align:inherit}
-.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:var(--bs-list-group-action-hover-color);text-decoration:none;background-color:var(--bs-list-group-action-hover-bg)}
-.list-group-item-action:active{color:var(--bs-list-group-action-active-color);background-color:var(--bs-list-group-action-active-bg)}
-.list-group-item{position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}
-.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
-.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}
-.list-group-item.disabled,.list-group-item:disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}
-.list-group-item.active{z-index:2;color:var(--bs-list-group-active-color);background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color)}
-.list-group-item+.list-group-item{border-top-width:0}
-.list-group-item+.list-group-item.active{margin-top:calc(-1 * var(--bs-list-group-border-width));border-top-width:var(--bs-list-group-border-width)}
-.list-group-horizontal{flex-direction:row}
-.list-group-horizontal>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}
-.list-group-horizontal>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}
-.list-group-horizontal>.list-group-item.active{margin-top:0}
-.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}
-.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}
-@media (min-width:576px){
-.list-group-horizontal-sm{flex-direction:row}
-.list-group-horizontal-sm>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}
-.list-group-horizontal-sm>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}
-.list-group-horizontal-sm>.list-group-item.active{margin-top:0}
-.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}
-.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}
-}
-@media (min-width:768px){
-.list-group-horizontal-md{flex-direction:row}
-.list-group-horizontal-md>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}
-.list-group-horizontal-md>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}
-.list-group-horizontal-md>.list-group-item.active{margin-top:0}
-.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}
-.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}
-}
-@media (min-width:992px){
-.list-group-horizontal-lg{flex-direction:row}
-.list-group-horizontal-lg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}
-.list-group-horizontal-lg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}
-.list-group-horizontal-lg>.list-group-item.active{margin-top:0}
-.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}
-.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}
-}
-@media (min-width:1200px){
-.list-group-horizontal-xl{flex-direction:row}
-.list-group-horizontal-xl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}
-.list-group-horizontal-xl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}
-.list-group-horizontal-xl>.list-group-item.active{margin-top:0}
-.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}
-.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}
-}
-@media (min-width:1400px){
-.list-group-horizontal-xxl{flex-direction:row}
-.list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}
-.list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}
-.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}
-.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}
-.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}
-}
-.list-group-flush{border-radius:0}
-.list-group-flush>.list-group-item{border-width:0 0 var(--bs-list-group-border-width)}
-.list-group-flush>.list-group-item:last-child{border-bottom-width:0}
-.list-group-item-primary{--bs-list-group-color:var(--bs-primary-text-emphasis);--bs-list-group-bg:var(--bs-primary-bg-subtle);--bs-list-group-border-color:var(--bs-primary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-primary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-primary-border-subtle);--bs-list-group-active-color:var(--bs-primary-bg-subtle);--bs-list-group-active-bg:var(--bs-primary-text-emphasis);--bs-list-group-active-border-color:var(--bs-primary-text-emphasis)}
-.list-group-item-secondary{--bs-list-group-color:var(--bs-secondary-text-emphasis);--bs-list-group-bg:var(--bs-secondary-bg-subtle);--bs-list-group-border-color:var(--bs-secondary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-secondary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-secondary-border-subtle);--bs-list-group-active-color:var(--bs-secondary-bg-subtle);--bs-list-group-active-bg:var(--bs-secondary-text-emphasis);--bs-list-group-active-border-color:var(--bs-secondary-text-emphasis)}
-.list-group-item-success{--bs-list-group-color:var(--bs-success-text-emphasis);--bs-list-group-bg:var(--bs-success-bg-subtle);--bs-list-group-border-color:var(--bs-success-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-success-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-success-border-subtle);--bs-list-group-active-color:var(--bs-success-bg-subtle);--bs-list-group-active-bg:var(--bs-success-text-emphasis);--bs-list-group-active-border-color:var(--bs-success-text-emphasis)}
-.list-group-item-info{--bs-list-group-color:var(--bs-info-text-emphasis);--bs-list-group-bg:var(--bs-info-bg-subtle);--bs-list-group-border-color:var(--bs-info-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-info-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-info-border-subtle);--bs-list-group-active-color:var(--bs-info-bg-subtle);--bs-list-group-active-bg:var(--bs-info-text-emphasis);--bs-list-group-active-border-color:var(--bs-info-text-emphasis)}
-.list-group-item-warning{--bs-list-group-color:var(--bs-warning-text-emphasis);--bs-list-group-bg:var(--bs-warning-bg-subtle);--bs-list-group-border-color:var(--bs-warning-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-warning-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-warning-border-subtle);--bs-list-group-active-color:var(--bs-warning-bg-subtle);--bs-list-group-active-bg:var(--bs-warning-text-emphasis);--bs-list-group-active-border-color:var(--bs-warning-text-emphasis)}
-.list-group-item-danger{--bs-list-group-color:var(--bs-danger-text-emphasis);--bs-list-group-bg:var(--bs-danger-bg-subtle);--bs-list-group-border-color:var(--bs-danger-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-danger-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-danger-border-subtle);--bs-list-group-active-color:var(--bs-danger-bg-subtle);--bs-list-group-active-bg:var(--bs-danger-text-emphasis);--bs-list-group-active-border-color:var(--bs-danger-text-emphasis)}
-.list-group-item-light{--bs-list-group-color:var(--bs-light-text-emphasis);--bs-list-group-bg:var(--bs-light-bg-subtle);--bs-list-group-border-color:var(--bs-light-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-light-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-light-border-subtle);--bs-list-group-active-color:var(--bs-light-bg-subtle);--bs-list-group-active-bg:var(--bs-light-text-emphasis);--bs-list-group-active-border-color:var(--bs-light-text-emphasis)}
-.list-group-item-default{--bs-list-group-color:var(--bs-default-text-emphasis);--bs-list-group-bg:var(--bs-default-bg-subtle);--bs-list-group-border-color:var(--bs-default-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-default-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-default-border-subtle);--bs-list-group-active-color:var(--bs-default-bg-subtle);--bs-list-group-active-bg:var(--bs-default-text-emphasis);--bs-list-group-active-border-color:var(--bs-default-text-emphasis)}
-.list-group-item-notice{--bs-list-group-color:var(--bs-notice-text-emphasis);--bs-list-group-bg:var(--bs-notice-bg-subtle);--bs-list-group-border-color:var(--bs-notice-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-notice-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-notice-border-subtle);--bs-list-group-active-color:var(--bs-notice-bg-subtle);--bs-list-group-active-bg:var(--bs-notice-text-emphasis);--bs-list-group-active-border-color:var(--bs-notice-text-emphasis)}
-.list-group-item-dark{--bs-list-group-color:var(--bs-dark-text-emphasis);--bs-list-group-bg:var(--bs-dark-bg-subtle);--bs-list-group-border-color:var(--bs-dark-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-dark-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-dark-border-subtle);--bs-list-group-active-color:var(--bs-dark-bg-subtle);--bs-list-group-active-bg:var(--bs-dark-text-emphasis);--bs-list-group-active-border-color:var(--bs-dark-text-emphasis)}
.btn-close{--bs-btn-close-color:#000;--bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");--bs-btn-close-opacity:0.5;--bs-btn-close-hover-opacity:0.75;--bs-btn-close-focus-shadow:0 0 0 0.25rem rgba(0, 85, 204, 0.25);--bs-btn-close-focus-opacity:1;--bs-btn-close-disabled-opacity:0.25;--bs-btn-close-white-filter:invert(1) grayscale(100%) brightness(200%);box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:var(--bs-btn-close-color);background:transparent var(--bs-btn-close-bg) center/1em auto no-repeat;border:0;border-radius:.125rem;opacity:var(--bs-btn-close-opacity)}
.btn-close:hover{color:var(--bs-btn-close-color);text-decoration:none;opacity:var(--bs-btn-close-hover-opacity)}
.btn-close:focus{outline:0;box-shadow:var(--bs-btn-close-focus-shadow);opacity:var(--bs-btn-close-focus-opacity)}
@@ -3050,6 +2978,16 @@ td .table-fit{margin-bottom:0}
.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)}
+.list-group{--typo3-list-group-border-width:var(--typo3-component-border-width);--typo3-list-group-border-radius:var(--typo3-component-border-radius);--typo3-list-group-padding-x:1rem;--typo3-list-group-padding-y:.5rem;--typo3-list-group-color:var(--typo3-component-color);--typo3-list-group-bg:var(--typo3-component-bg);--typo3-list-group-border-color:var(--typo3-component-border-color);--typo3-list-group-hover-color:var(--typo3-list-item-hover-color);--typo3-list-group-hover-bg:var(--typo3-list-item-hover-bg);--typo3-list-group-hover-border-color:var(--typo3-list-item-hover-border-color);--typo3-list-group-active-color:var(--typo3-list-item-active-color);--typo3-list-group-active-bg:var(--typo3-list-item-active-bg);--typo3-list-group-active-border-color:var(--typo3-list-item-active-border-color);--typo3-list-group-disabled-color:var(--typo3-list-item-disabled-color);--typo3-list-group-disabled-bg:var(--typo3-list-item-disabled-bg);--typo3-list-group-disabled-border-color:var(--typo3-list-item-disabled-border-color);color:var(--typo3-list-group-color);background-color:var(--typo3-list-group-bg);display:flex;flex-direction:column;margin-bottom:0;border-radius:var(--typo3-list-group-border-radius)}
+.list-group-item-action{position:relative;width:100%;color:var(--typo3-list-group-color);background-color:var(--typo3-list-group-bg);text-align:inherit}
+.list-group-item-action:focus,.list-group-item-action:hover{--typo3-list-group-color:var(--typo3-list-group-hover-color);--typo3-list-group-bg:var(--typo3-list-group-hover-bg);--typo3-list-group-border-color:var(--typo3-list-group-hover-border-color);text-decoration:none;z-index:1}
+.list-group-item-action:focus-visible{outline:.25rem solid color-mix(in srgb,var(--typo3-list-group-border-color),transparent 25%);z-index:3!important}
+.list-group-item{position:relative;display:block;padding:var(--typo3-list-group-padding-y) var(--typo3-list-group-padding-x);text-decoration:none;color:var(--typo3-list-group-color);background-color:var(--typo3-list-group-bg);border:var(--typo3-list-group-border-width) solid var(--typo3-list-group-border-color);outline-offset:0}
+.list-group-item:first-child{border-start-start-radius:var(--typo3-list-group-border-radius);border-start-end-radius:var(--typo3-list-group-border-radius)}
+.list-group-item:last-child{border-end-start-radius:var(--typo3-list-group-border-radius);border-end-end-radius:var(--typo3-list-group-border-radius)}
+.list-group-item.active{--typo3-list-group-color:var(--typo3-list-group-active-color);--typo3-list-group-bg:var(--typo3-list-group-active-bg);--typo3-list-group-border-color:var(--typo3-list-group-active-border-color);z-index:2}
+.list-group-item.disabled,.list-group-item:disabled{--typo3-list-group-color:var(--typo3-list-group-disabled-color);--typo3-list-group-bg:var(--typo3-list-group-disabled-bg);--typo3-list-group-border-color:var(--typo3-list-group-disabled-border-color);pointer-events:none}
+.list-group-item+.list-group-item{margin-top:calc(-1 * var(--typo3-list-group-border-width))}
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}
--
GitLab