From 9685e53648346f51799afb924fe6d5108e877722 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 10 Jun 2024 14:14:34 +0200
Subject: [PATCH] [TASK] Remove conflicting card styles
This patch removes the Bootstrap "card" component as the
cards present in the Backend are implemented using the
classes and styling of TYPO3.
The conflict comes from a time in which Bootstrap (3.x)
only had panel-* classes and for the new card component
the classes were modelled after Bootstraps naming scheme.
This did not end up matching what Bootstrap implemented
finally, causing confusion within some developers when
using cards in the backend.
Resolves: #99233
Related: #94529
Releases: main
Change-Id: Ia1bf1f453310cc452059ec9396c2f54be87c2150
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/76870
Tested-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
---
Build/Sources/Sass/_minimal.scss | 2 +-
Build/Sources/Sass/component/_card.scss | 76 ++++++-------------
Build/Sources/Sass/component/_root.scss | 2 +-
Build/Sources/Sass/module/_viewpage.scss | 2 +-
.../backend/Resources/Public/Css/backend.css | 64 ++++------------
.../Private/Templates/Backend/Cards.html | 56 ++++----------
6 files changed, 56 insertions(+), 146 deletions(-)
diff --git a/Build/Sources/Sass/_minimal.scss b/Build/Sources/Sass/_minimal.scss
index f3e8aeb59a58..8d410dfeac3b 100644
--- a/Build/Sources/Sass/_minimal.scss
+++ b/Build/Sources/Sass/_minimal.scss
@@ -39,7 +39,7 @@
@import "../../node_modules/bootstrap/scss/button-group";
@import "../../node_modules/bootstrap/scss/nav";
@import "../../node_modules/bootstrap/scss/navbar";
-@import "../../node_modules/bootstrap/scss/card";
+// @import "../../node_modules/bootstrap/scss/card";
// @import "../../node_modules/bootstrap/scss/accordion"; @TODO evaluate
@import "../../node_modules/bootstrap/scss/breadcrumb";
@import "../../node_modules/bootstrap/scss/pagination";
diff --git a/Build/Sources/Sass/component/_card.scss b/Build/Sources/Sass/component/_card.scss
index e770705349e8..326d2ce1756f 100644
--- a/Build/Sources/Sass/component/_card.scss
+++ b/Build/Sources/Sass/component/_card.scss
@@ -200,31 +200,28 @@
// Styleguide component.card.4
//
-//
-// Variables
-//
-$card-bg-scale: -95%;
-$card-border-scale: -60%;
-$card-hover-border-scale: -40%;
-
:root {
--typo3-card-grid-gap: 1rem;
- --typo3-card-color: #{$body-color};
--typo3-card-padding: 1rem;
- --typo3-card-bg: #{$body-bg};
- --typo3-card-border-color: #{shade-color($body-bg, 20%)};
- --typo3-card-hover-border-color: #{shade-color($body-bg, 30%)};
}
//
// Component
//
.card {
- --#{$prefix}body-color: var(--typo3-card-color);
- --#{$prefix}card-bg: var(--typo3-card-bg);
- --#{$prefix}card-border-color: var(--typo3-card-border-color);
- --#{$prefix}card-border-radius: var(--typo3-component-border-radius);
- --#{$prefix}card-box-shadow: var(--typo3-component-box-shadow);
+ --typo3-card-color: var(--typo3-text-color-base);
+ --typo3-card-color-subtle: var(--typo3-text-color-variant);
+ --typo3-card-bg: var(--typo3-surface-container-low);
+ --typo3-card-border-color: color-mix(in srgb, var(--typo3-card-bg), var(--typo3-card-color) 15%);
+ --typo3-card-hover-border-color: color-mix(in srgb, var(--typo3-card-bg), var(--typo3-card-color) 30%);
+ color: var(--typo3-card-color);
+ background: var(--typo3-card-bg);
+ border: 1px solid var(--typo3-card-border-color);
+ border-radius: var(--typo3-component-border-radius);
+ box-shadow: var(--typo3-component-box-shadow);
+ position: relative;
+ display: flex;
+ flex-direction: column;
overflow: hidden;
margin-bottom: var(--typo3-spacing);
transition: all .2s ease-in-out;
@@ -389,11 +386,11 @@ a.card {
}
.card-subtitle {
+ color: var(--typo3-card-color-subtle);
display: block;
margin-top: .5em;
font-size: 1em;
line-height: 1.2em;
- opacity: .5;
}
.card-longdesc {
@@ -401,6 +398,13 @@ a.card {
}
}
+//
+// Body
+//
+.card-body {
+ flex: 1 1 auto;
+}
+
//
// Footer
//
@@ -418,39 +422,9 @@ a.card {
//
// Color Variants
//
-@mixin card-variant($background, $border, $border-hover, $text-color) {
- --typo3-card-color: #{$text-color};
- --typo3-card-bg: #{$background};
- --typo3-card-border-color: #{$border};
- --typo3-card-hover-border-color: #{$border-hover};
-}
-
-@each $state, $value in $theme-colors {
- @if $state != light and $state != default {
- $card-background: shift-color($value, $card-bg-scale);
- $card-border: shift-color($value, $card-border-scale);
- $card-hover-border: shift-color($value, $card-hover-border-scale);
- $card-color: color-contrast($card-background);
-
- .card-#{$state} {
- @include card-variant($card-background, $card-border, $card-hover-border, $card-color);
- }
+@each $variant in $base-variants {
+ .card-#{$variant} {
+ --typo3-card-color: var(--typo3-surface-container-#{$variant}-text);
+ --typo3-card-bg: var(--typo3-surface-container-#{$variant});
}
}
-
-//
-// The light variants have problems beeing generated, they need manual correction.
-//
-.card-light {
- --typo3-card-color: #{$body-color};
- --typo3-card-bg: #{$light};
- --typo3-card-border-color: #{shade-color($light, 10%)};
- --typo3-card-hover-border-color: #{shade-color($light, 20%)};
-}
-
-.card-default {
- --typo3-card-color: #{$body-color};
- --typo3-card-bg: #{$default};
- --typo3-card-border-color: #{shade-color($default, 10%)};
- --typo3-card-hover-border-color: #{shade-color($default, 20%)};
-}
diff --git a/Build/Sources/Sass/component/_root.scss b/Build/Sources/Sass/component/_root.scss
index b4fd1e535204..8319cb203ce0 100644
--- a/Build/Sources/Sass/component/_root.scss
+++ b/Build/Sources/Sass/component/_root.scss
@@ -38,7 +38,7 @@
// Colors
--typo3-text-color-base: light-dark(var(--token-color-neutral-90), var(--token-color-neutral-10));
- --typo3-text-color-variant: light-dark(var(--token-color-neutral-75), var(--token-color-neutral-25));
+ --typo3-text-color-variant: light-dark(var(--token-color-neutral-60), var(--token-color-neutral-40));
// Surfaces
--typo3-surface-dim: light-dark(var(--token-color-neutral-15), var(--token-color-neutral-96));
diff --git a/Build/Sources/Sass/module/_viewpage.scss b/Build/Sources/Sass/module/_viewpage.scss
index 2a504e9e7370..b2cf19c19691 100644
--- a/Build/Sources/Sass/module/_viewpage.scss
+++ b/Build/Sources/Sass/module/_viewpage.scss
@@ -54,7 +54,7 @@
.viewpage-item {
position: relative;
display: inline-block;
- background-color: var(--typo3-surface-container-base);
+ background-color: var(--typo3-surface-container-highest);
box-shadow: var(--typo3-component-box-shadow-tooltip);
color: var(--typo3-text-color-base);
border-radius: var(--viewpage-item-radius);
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 02fa5bfc6d7a..8218d1242d6a 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -842,41 +842,6 @@ textarea.form-control-lg{min-height:calc(1.5em + 1rem + calc(var(--bs-border-wid
.navbar-expand .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}
.navbar-dark,.navbar[data-bs-theme=dark]{--bs-navbar-color:rgba(255, 255, 255, 0.55);--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);--bs-navbar-active-color:#fff;--bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
[data-bs-theme=dark] .navbar-toggler-icon{--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
-.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:transparent;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius);box-shadow:var(--bs-card-box-shadow)}
-.card>hr{margin-right:0;margin-left:0}
-.card>.list-group{border-top:inherit;border-bottom:inherit}
-.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}
-.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}
-.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}
-.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}
-.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}
-.card-subtitle{margin-top:calc(-.5 * var(--bs-card-title-spacer-y));margin-bottom:0;color:var(--bs-card-subtitle-color)}
-.card-text:last-child{margin-bottom:0}
-.card-link:hover{text-decoration:none}
-.card-link+.card-link{margin-left:var(--bs-card-spacer-x)}
-.card-header{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);margin-bottom:0;color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)}
-.card-header:first-child{border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0}
-.card-footer{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)}
-.card-footer:last-child{border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}
-.card-header-tabs{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-bottom:calc(-1 * var(--bs-card-cap-padding-y));margin-left:calc(-.5 * var(--bs-card-cap-padding-x));border-bottom:0}
-.card-header-tabs .nav-link.active,.card-header-tabs .nav.nav-tabs>li:not(.nav-item)>a.active:not(.nav-link){background-color:var(--bs-card-bg);border-bottom-color:var(--bs-card-bg)}
-.card-header-pills{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-left:calc(-.5 * var(--bs-card-cap-padding-x))}
-.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--bs-card-img-overlay-padding);border-radius:var(--bs-card-inner-border-radius)}
-.card-img,.card-img-bottom,.card-img-top{width:100%}
-.card-img,.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}
-.card-img,.card-img-bottom{border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}
-.card-group>.card{margin-bottom:var(--bs-card-group-margin)}
-@media (min-width:576px){
-.card-group{display:flex;flex-flow:row wrap}
-.card-group>.card{flex:1 0 0%;margin-bottom:0}
-.card-group>.card+.card{margin-left:0;border-left:0}
-.card-group>.card:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}
-.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}
-.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}
-.card-group>.card:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}
-.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}
-.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}
-}
.breadcrumb{--bs-breadcrumb-padding-x:0;--bs-breadcrumb-padding-y:0;--bs-breadcrumb-margin-bottom:1rem;--bs-breadcrumb-divider-color:var(--bs-secondary-color);--bs-breadcrumb-item-padding-x:0.5rem;--bs-breadcrumb-item-active-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}
.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}
.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/")}
@@ -2752,7 +2717,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-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-variant:light-dark(var(--token-color-neutral-75), var(--token-color-neutral-25));--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:light-dark(#05c, #6699e0);--typo3-component-secondary-color:light-dark(#666666, #999999);--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:12px;--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-color:#333;--typo3-input-color-placeholder:rgb(187, 187, 187);--typo3-input-font-size:.75rem;--typo3-input-line-height:1.5;--typo3-input-padding-y:.5rem;--typo3-input-padding-x:.75rem;--typo3-input-bg:#fefefe;--typo3-input-border-width:var(--bs-border-width);--typo3-input-border-color:rgb(187, 187, 187);--typo3-input-border-radius:0.125rem;--typo3-input-box-shadow:var(--bs-box-shadow-inset);--typo3-input-focus-color:#333;--typo3-input-focus-bg:#fefefe;--typo3-input-focus-border-color:#80aae6;--typo3-input-focus-box-shadow:0 0 0 0.25rem rgba(0, 85, 204, 0.25);--typo3-input-disabled-bg:var(--bs-secondary-bg)}
+:root{color-scheme:only light;scroll-behavior:smooth;--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-variant:light-dark(var(--token-color-neutral-60), var(--token-color-neutral-40));--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:light-dark(#05c, #6699e0);--typo3-component-secondary-color:light-dark(#666666, #999999);--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:12px;--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-color:#333;--typo3-input-color-placeholder:rgb(187, 187, 187);--typo3-input-font-size:.75rem;--typo3-input-line-height:1.5;--typo3-input-padding-y:.5rem;--typo3-input-padding-x:.75rem;--typo3-input-bg:#fefefe;--typo3-input-border-width:var(--bs-border-width);--typo3-input-border-color:rgb(187, 187, 187);--typo3-input-border-radius:0.125rem;--typo3-input-box-shadow:var(--bs-box-shadow-inset);--typo3-input-focus-color:#333;--typo3-input-focus-bg:#fefefe;--typo3-input-focus-border-color:#80aae6;--typo3-input-focus-box-shadow:0 0 0 0.25rem rgba(0, 85, 204, 0.25);--typo3-input-disabled-bg:var(--bs-secondary-bg)}
[data-color-scheme=auto]{color-scheme:light dark}
[data-color-scheme=dark]{color-scheme:only dark}
[data-color-scheme=light]{color-scheme:only light}
@@ -3564,8 +3529,8 @@ typo3-backend-form-selecttree-toolbar{display:block;border-bottom:1px solid rgba
.note-category-2{--note-color:var(--note-warning-color);--note-bg:var(--note-warning-bg);--note-header-color:var(--note-warning-header-color);--note-header-bg:var(--note-warning-header-bg)}
.note-category-3{--note-color:var(--note-notice-color);--note-bg:var(--note-notice-bg);--note-header-color:var(--note-notice-header-color);--note-header-bg:var(--note-notice-header-bg)}
.note-category-4{--note-color:var(--note-success-color);--note-bg:var(--note-success-bg);--note-header-color:var(--note-success-header-color);--note-header-bg:var(--note-success-header-bg)}
-:root{--typo3-card-grid-gap:1rem;--typo3-card-color:#000;--typo3-card-padding:1rem;--typo3-card-bg:#fff;--typo3-card-border-color:#cccccc;--typo3-card-hover-border-color:#b3b3b3}
-.card{--bs-body-color:var(--typo3-card-color);--bs-card-bg:var(--typo3-card-bg);--bs-card-border-color:var(--typo3-card-border-color);--bs-card-border-radius:var(--typo3-component-border-radius);--bs-card-box-shadow:var(--typo3-component-box-shadow);overflow:hidden;margin-bottom:var(--typo3-spacing);transition:all .2s ease-in-out;transition-property:box-shadow,border,transform}
+:root{--typo3-card-grid-gap:1rem;--typo3-card-padding:1rem}
+.card{--typo3-card-color:var(--typo3-text-color-base);--typo3-card-color-subtle:var(--typo3-text-color-variant);--typo3-card-bg:var(--typo3-surface-container-low);--typo3-card-border-color:color-mix(in srgb, var(--typo3-card-bg), var(--typo3-card-color) 15%);--typo3-card-hover-border-color:color-mix(in srgb, var(--typo3-card-bg), var(--typo3-card-color) 30%);color:var(--typo3-card-color);background:var(--typo3-card-bg);border:1px solid var(--typo3-card-border-color);border-radius:var(--typo3-component-border-radius);box-shadow:var(--typo3-component-box-shadow);position:relative;display:flex;flex-direction:column;overflow:hidden;margin-bottom:var(--typo3-spacing);transition:all .2s ease-in-out;transition-property:box-shadow,border,transform}
.card .table-fit{box-shadow:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;margin-bottom:0}
.card .table-fit:not(:first-child){margin-top:var(--typo3-card-padding)}
a.card:hover{--typo3-card-border-color:var(--typo3-card-hover-border-color);text-decoration:none;transform:translate(0,-1px)}
@@ -3602,20 +3567,19 @@ a.card:hover{--typo3-card-border-color:var(--typo3-card-hover-border-color);text
.card-header .card-icon{float:var(--typo3-position-start);margin-inline-end:calc(var(--typo3-card-padding) * .5)}
.card-header .card-header-body{display:block;overflow:hidden}
.card-header .card-title{font-family:inherit;font-weight:500;display:block;font-size:1.35em;line-height:1.2em;margin:0}
-.card-header .card-subtitle{display:block;margin-top:.5em;font-size:1em;line-height:1.2em;opacity:.5}
+.card-header .card-subtitle{color:var(--typo3-card-color-subtle);display:block;margin-top:.5em;font-size:1em;line-height:1.2em}
.card-header .card-longdesc{margin-top:1em}
+.card-body{flex:1 1 auto}
.card-footer{border-top:none}
.card-disabled{opacity:.4}
-.card-primary{--typo3-card-color:#000;--typo3-card-bg:#f2f7fc;--typo3-card-border-color:#99bbeb;--typo3-card-hover-border-color:#6699e0}
-.card-secondary{--typo3-card-color:#000;--typo3-card-bg:#f8f8f8;--typo3-card-border-color:#c7c7c7;--typo3-card-hover-border-color:#ababab}
-.card-success{--typo3-card-color:#000;--typo3-card-bg:#f4f8f6;--typo3-card-border-color:#a7c8bb;--typo3-card-hover-border-color:#7cac98}
-.card-info{--typo3-card-color:#000;--typo3-card-bg:#fbfdfe;--typo3-card-border-color:#ddf1f8;--typo3-card-hover-border-color:#cdeaf4}
-.card-warning{--typo3-card-color:#000;--typo3-card-bg:#fffcf5;--typo3-card-border-color:#ffebad;--typo3-card-hover-border-color:#ffe085}
-.card-danger{--typo3-card-color:#000;--typo3-card-bg:#fdf5f5;--typo3-card-border-color:#edb0ab;--typo3-card-hover-border-color:#e38982}
-.card-notice{--typo3-card-color:#000;--typo3-card-bg:whitesmoke;--typo3-card-border-color:#adadad;--typo3-card-hover-border-color:#858585}
-.card-dark{--typo3-card-color:#000;--typo3-card-bg:#f4f4f4;--typo3-card-border-color:#a5a5a5;--typo3-card-hover-border-color:#787878}
-.card-light{--typo3-card-color:#000;--typo3-card-bg:rgb(245, 245, 245);--typo3-card-border-color:#dddddd;--typo3-card-hover-border-color:#c4c4c4}
-.card-default{--typo3-card-color:#000;--typo3-card-bg:rgb(238, 238, 238);--typo3-card-border-color:#d6d6d6;--typo3-card-hover-border-color:#bebebe}
+.card-primary{--typo3-card-color:var(--typo3-surface-container-primary-text);--typo3-card-bg:var(--typo3-surface-container-primary)}
+.card-secondary{--typo3-card-color:var(--typo3-surface-container-secondary-text);--typo3-card-bg:var(--typo3-surface-container-secondary)}
+.card-info{--typo3-card-color:var(--typo3-surface-container-info-text);--typo3-card-bg:var(--typo3-surface-container-info)}
+.card-success{--typo3-card-color:var(--typo3-surface-container-success-text);--typo3-card-bg:var(--typo3-surface-container-success)}
+.card-warning{--typo3-card-color:var(--typo3-surface-container-warning-text);--typo3-card-bg:var(--typo3-surface-container-warning)}
+.card-danger{--typo3-card-color:var(--typo3-surface-container-danger-text);--typo3-card-bg:var(--typo3-surface-container-danger)}
+.card-notice{--typo3-card-color:var(--typo3-surface-container-notice-text);--typo3-card-bg:var(--typo3-surface-container-notice)}
+.card-default{--typo3-card-color:var(--typo3-surface-container-default-text);--typo3-card-bg:var(--typo3-surface-container-default)}
.form{margin-bottom:var(--typo3-spacing)}
.form-row{display:flex;flex-wrap:wrap;gap:var(--typo3-spacing);margin-bottom:var(--typo3-spacing)}
.form-row>.form-group{margin-bottom:0}
@@ -4432,7 +4396,7 @@ td.permission-column-group{padding-inline-start:0;width:200px;white-space:nowrap
[data-module-id=typo3-module-viewpage] .resizable-w{top:0;left:calc(var(--viewpage-resizable-size) * -1);height:100%;width:var(--viewpage-resizable-size)}
[data-module-id=typo3-module-viewpage] .resizable-s{bottom:calc(var(--viewpage-resizable-size) * -1);height:var(--viewpage-resizable-size);width:100%}
[data-module-id=typo3-module-viewpage] .resizable-e{top:0;right:calc(var(--viewpage-resizable-size) * -1);height:100%;width:var(--viewpage-resizable-size)}
-.viewpage-item{position:relative;display:inline-block;background-color:var(--typo3-surface-container-base);box-shadow:var(--typo3-component-box-shadow-tooltip);color:var(--typo3-text-color-base);border-radius:var(--viewpage-item-radius)}
+.viewpage-item{position:relative;display:inline-block;background-color:var(--typo3-surface-container-highest);box-shadow:var(--typo3-component-box-shadow-tooltip);color:var(--typo3-text-color-base);border-radius:var(--viewpage-item-radius)}
.viewpage-item iframe{display:block;border-radius:0 0 var(--viewpage-item-radius) var(--viewpage-item-radius)}
.viewpage-topbar{height:var(--viewpage-topbar-height);flex-shrink:0;padding:.75em 1em;display:flex;flex-direction:row;justify-content:space-between;align-items:center}
.viewpage-topbar-orientation a{color:inherit;opacity:.5;transition:all .2s ease-in-out}
diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Cards.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Cards.html
index 596140400cfa..bd410a2a6e41 100644
--- a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Cards.html
+++ b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Cards.html
@@ -23,7 +23,7 @@
takes on the full width of the place it has been put into.
</p>
- <sg:code language="html">
+ <sg:code language="html" colorschemes="true">
<div class="card">
<div class="card-header">
<div class="card-icon">
@@ -52,7 +52,7 @@
To display multiple cards, group them by wrapping them with <code>div.card-container</code>.
</p>
- <sg:code language="html" exampleonly="true">
+ <sg:code language="html" colorschemes="true" exampleonly="true">
<div class="card-container">
<div class="card card-size-fixed-small">
<div class="card-header">
@@ -104,7 +104,7 @@
</div>
</sg:code>
- <sg:code language="html" codeonly="true">
+ <sg:code language="html" colorschemes="true" codeonly="true">
<div class="card-container">
<div class="card card-size-fixed-small">
<div class="card-header">...</div>
@@ -128,7 +128,7 @@
a single card is used, it must be wrapped with <code>div.card-container</code> as with multiple cards.
</p>
- <sg:code language="html" exampleonly="true">
+ <sg:code language="html" colorschemes="true" exampleonly="true">
<div class="card-container">
<div class="card card-size-small">
<div class="card-header">
@@ -216,7 +216,7 @@
size that ensures that the card retains its size in all viewports.
</p>
- <sg:code language="html" exampleonly="true">
+ <sg:code language="html" colorschemes="true" exampleonly="true">
<div class="card-container">
<div class="card card-size-fixed-small">
<div class="card-header">
@@ -288,7 +288,7 @@
placed at the bottom of the card.
</p>
- <sg:code language="html" exampleonly="true">
+ <sg:code language="html" colorschemes="true" exampleonly="true">
<div class="card-container">
<div class="card card-size-fixed-small">
<div class="card-header">
@@ -330,7 +330,7 @@
</div>
</sg:code>
- <sg:code language="html" codeonly="true">
+ <sg:code language="html" colorschemes="true" codeonly="true">
<div class="card-container">
<div class="card card-size-fixed-small">
<div class="card-header">...</div>
@@ -361,7 +361,7 @@
to the <code>div.card</code> - just omit the extra class.
</p>
- <sg:code language="html" exampleonly="true">
+ <sg:code language="html" colorschemes="true" exampleonly="true">
<div class="card-container">
<div class="card card-size-small card-primary">
<div class="card-header">
@@ -461,34 +461,6 @@
</div>
</div>
</div>
- <div class="card card-size-small card-dark">
- <div class="card-header">
- <div class="card-header-body">
- <h3 class="card-title">Dark (<code>.card-dark</code>)</h3>
- </div>
- </div>
- <div class="card-body">
- <div class="card-text">
- <p>
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
- </p>
- </div>
- </div>
- </div>
- <div class="card card-size-small card-light">
- <div class="card-header">
- <div class="card-header-body">
- <h3 class="card-title">Light (<code>.card-light</code>)</h3>
- </div>
- </div>
- <div class="card-body">
- <div class="card-text">
- <p>
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
- </p>
- </div>
- </div>
- </div>
<div class="card card-size-small card-default">
<div class="card-header">
<div class="card-header-body">
@@ -524,7 +496,7 @@
<code>div.card-header</code>.
</p>
- <sg:code language="html">
+ <sg:code colorschemes="true" language="html">
<section class="card-container">
<div class="card card-size-medium">
<div class="card-header">
@@ -545,7 +517,7 @@
In some sections of the "About" module, tables are included within the card component.
</p>
- <sg:code language="html" exampleonly="true">
+ <sg:code colorschemes="true" language="html" exampleonly="true">
<div class="container-small about-module">
<div class="card">
<div class="card-body">
@@ -582,7 +554,7 @@
</div>
</sg:code>
- <sg:code language="html" codeonly="true">
+ <sg:code colorschemes="true" language="html" codeonly="true">
<div class="card">
<div class="card-body">...</div>
<div class="table-fit">
@@ -600,7 +572,7 @@
On top of the element information overlay, rows are included within the card component.
</p>
- <sg:code language="html" exampleonly="true">
+ <sg:code colorschemes="true" language="html" exampleonly="true">
<div class="card-container">
<div class="card card-size-medium">
<div class="card-header">
@@ -628,7 +600,7 @@
</div>
</sg:code>
- <sg:code language="html" codeonly="true">
+ <sg:code colorschemes="true" language="html" codeonly="true">
<div class="card-container">
<div class="card card-size-medium">
<div class="card-header">...</div>
@@ -655,7 +627,7 @@
been enhanced with an image and some badges.
</p>
- <sg:code language="html" exampleonly="true">
+ <sg:code colorschemes="true" language="html" exampleonly="true">
<div class="card-container">
<div class="card card-size-fixed-small">
<div class="card-image">
--
GitLab