libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

Merge pull request #3747 from ssilvert/otp-scrollbar

Browse source 
KEYCLOAK-3884: OTP login page cutoff under weird sizes
This commit is contained in:
Stan Silvert 2017-01-12 16:37:43 -05:00 committed by GitHub
commit c4cce147e2
2 changed files with 13 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
themes/src/main/resources/theme/base/login/login-config-totp.ftl
View file

@ -11,7 +11,7 @@
</li> </li>
<li> <li>
<p>${msg("loginTotpStep2")}</p> <p>${msg("loginTotpStep2")}</p>
<img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"><br/> <img id="kc-totp-secret-qr-code" src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"><br/>
<span class="code">${totp.totpSecretEncoded}</span> <span class="code">${totp.totpSecretEncoded}</span>
</li> </li>
<li> <li>

25
themes/src/main/resources/theme/keycloak/login/resources/css/login.css
View file

@ -152,6 +152,11 @@ ol#kc-totp-settings li:first-of-type {
margin-top: 0; margin-top: 0;
} }
#kc-totp-secret-qr-code {
max-width:150px;
max-height:150px;
}
/* OAuth */ /* OAuth */
#kc-oauth h3 { #kc-oauth h3 {
@ -244,18 +249,6 @@ ol#kc-totp-settings li:first-of-type {
.zocial.microsoft {background-color: #0052a4; color: #fff;} .zocial.microsoft {background-color: #0052a4; color: #fff;}
.zocial.microsoft:before { content: "\f15d"; } .zocial.microsoft:before { content: "\f15d"; }
@media (min-width: 1281px) {
#kc-container-wrapper {
bottom: 13%;
}
#kc-logo-wrapper {
position: absolute;
top: 50px;
right: 50px;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
#kc-container-wrapper { #kc-container-wrapper {
position: absolute; position: absolute;
@ -326,7 +319,13 @@ ol#kc-totp-settings li:first-of-type {
} }
} }
@media (max-height: 500px) { @media (min-height: 621px) {
#kc-container-wrapper {
bottom: 12%;
}
}
@media (max-height: 620px) {
#kc-container-wrapper { #kc-container-wrapper {
} }
} }