friloo/wp-m365-login
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 4

Use flex divider lines on custom login pages

Browse source 
The absolute line behind the divider text needs a known background;
on themed pages the text now sits between two flex lines instead.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JJxAHYdMfKPoN4koRc4Ci2
This commit is contained in:
friloo 2026-09-22 14:53:03 +00:00
parent 701e85ab88
commit 966164177d
No known key found for this signature in database
1 changed files with 22 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

27
assets/css/login.css
View file

@ -143,16 +143,33 @@ body.m365-button-only .m365-login--above {
background: transparent;
}
.m365-login--form .m365-login__divider span,
.m365-login--shortcode .m365-login__divider span {
background: transparent;
}
/* On unknown backgrounds the divider uses flex lines instead of an absolute line behind the text. */
.m365-login--form .m365-login__divider,
.m365-login--shortcode .m365-login__divider {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 16px;
}
.m365-login--form .m365-login__divider::before,
.m365-login--shortcode .m365-login__divider::before,
.m365-login--form .m365-login__divider::after,
.m365-login--shortcode .m365-login__divider::after {
content: "";
position: static;
flex: 1 1 auto;
height: 1px;
background: #dcdcde;
}
.m365-login--form .m365-login__divider span,
.m365-login--shortcode .m365-login__divider span {
position: static;
padding: 0;
background: transparent;
}
.m365-login__notice {
box-sizing: border-box;
margin: 0 0 16px;