Commit 03bbd188 authored by Oliver Bartsch's avatar Oliver Bartsch Committed by Benni Mack

[TASK] Improve multi-factor authentication view

Following improvements are done:

* Reduce margin-top of the MFA provider title
* The bottom border of card-body is changed to
a top border of card-footer to prevent the border
from being shown without a card-footer
* A new class `card-mfa` is added to the outer card
container to allow individual styling of the MFA view

Additionally this also fixes the custom styling options,
as these were still applied to the `panel` class, which
was however replaced by `card` during the bootstrap 5
migration.

Resolves: #93913
Releases: master
Change-Id: I4e7ff6e30b77f71b0d5823f5202062410ebddf88
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/68771Tested-by: Jochen's avatarJochen <rothjochen@gmail.com>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Jochen's avatarJochen <rothjochen@gmail.com>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent 051a083a
......@@ -149,11 +149,11 @@ $login-container-padding-horizontal: 2.5em;
.card-body {
padding: 1.75em $login-container-padding-horizontal 2.5em;
border-bottom: 3px solid $login-highlight;
}
.card-footer {
padding: 1.5em $login-container-padding-horizontal;
border-top: 3px solid $login-highlight;
border-bottom-left-radius: $login-border-radius - 1;
border-bottom-right-radius: $login-border-radius - 1;
}
......@@ -165,6 +165,14 @@ $login-container-padding-horizontal: 2.5em;
@media (max-width: $screen-xs-max) {
margin-bottom: 0;
}
&.card-mfa {
.card-heading {
h2 {
margin: 0.75rem 0;
}
}
}
}
//
......
......@@ -58,7 +58,7 @@ class AuthenticationStyleInformation implements LoggerAwareInterface
return '
.typo3-login-carousel-control.right,
.typo3-login-carousel-control.left,
.panel-login { border: 0; }
.card-login { border: 0; }
.typo3-login { background-image: url("' . $backgroundImageUri . '"); }
.typo3-login-footnote { background-color: #000000; color: #ffffff; opacity: 0.5; }
';
......@@ -81,7 +81,7 @@ class AuthenticationStyleInformation implements LoggerAwareInterface
.btn-login:hover, .btn-login:focus, .btn-login:active,
.btn-login:active:hover, .btn-login:active:focus,
.btn-login { background-color: ' . $highlightColor . '; }
.panel-login .panel-body { border-color: ' . $highlightColor . '; }
.card-login .card-footer { border-color: ' . $highlightColor . '; }
';
}
......
......@@ -4,7 +4,7 @@
<div class="typo3-login-inner">
<div class="typo3-login-container">
<div class="typo3-login-wrap">
<div class="card card-login">
<div class="card card-login card-mfa">
<header class="card-heading">
<h2 class="text-center">{provider.title -> f:translate(id: provider.title)}</h2>
</header>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment