From 966164177d9f8fd8b164d140e266d879da7b7721 Mon Sep 17 00:00:00 2001 From: friloo Date: Tue, 22 Sep 2026 14:53:03 +0000 Subject: [PATCH] Use flex divider lines on custom login pages 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 Claude-Session: https://claude.ai/code/session_01JJxAHYdMfKPoN4koRc4Ci2 --- assets/css/login.css | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/assets/css/login.css b/assets/css/login.css index 5ad87a8..4743224 100644 --- a/assets/css/login.css +++ b/assets/css/login.css @@ -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;