friloo
701e85ab88
- Add the button (and error messages) to every wp_login_form() form via login_form_top/login_form_bottom; in button-only mode the password fields are wrapped and hidden there. - New template functions m365_login_button() and m365_login_messages(); the shortcode gains divider and messages attributes. - New setting for the custom login page URL: failed sign-ins, the fallback link and the logout redirect point there instead of wp-login.php. Must be a same-site URL. - Button-only mode now blocks every interactive password sign-in through the authenticate filter, not only wp-login.php; XML-RPC, REST, WP-CLI and cron are exempt, plus a filter for trusted exceptions. - Fallback key accepted on any page (init) instead of login_init only. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JJxAHYdMfKPoN4koRc4Ci2
178 lines
3.3 KiB
CSS
178 lines
3.3 KiB
CSS
/* M365 Login – login screen button */
|
||
.m365-login {
|
||
--m365-bg: #2f2f2f;
|
||
--m365-bg-hover: #1a1a1a;
|
||
--m365-color: #ffffff;
|
||
--m365-border: #2f2f2f;
|
||
--m365-radius: 4px;
|
||
margin: 0 0 16px;
|
||
}
|
||
|
||
.m365-login--below {
|
||
background: #fff;
|
||
padding: 0 24px 26px;
|
||
margin: -1px 0 0;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||
border: 1px solid #c3c4c7;
|
||
border-top: 0;
|
||
}
|
||
|
||
body.m365-login-attached #loginform {
|
||
border-bottom: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.m365-login--above {
|
||
background: #fff;
|
||
padding: 24px;
|
||
margin: 20px 0 0;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||
border: 1px solid #c3c4c7;
|
||
}
|
||
|
||
.m365-login--above .m365-login__divider {
|
||
margin: 22px 0 0;
|
||
}
|
||
|
||
.m365-login__divider {
|
||
position: relative;
|
||
text-align: center;
|
||
margin: 0 0 22px;
|
||
color: #646970;
|
||
font-size: 13px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.m365-login__divider::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 50%;
|
||
height: 1px;
|
||
background: #dcdcde;
|
||
}
|
||
|
||
.m365-login__divider span {
|
||
position: relative;
|
||
background: #fff;
|
||
padding: 0 12px;
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
.m365-login__button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
min-height: 44px;
|
||
padding: 10px 16px;
|
||
background: var(--m365-bg);
|
||
color: var(--m365-color);
|
||
border: 1px solid var(--m365-border);
|
||
border-radius: var(--m365-radius);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
|
||
}
|
||
|
||
.m365-login__button:hover,
|
||
.m365-login__button:focus {
|
||
background: var(--m365-bg-hover);
|
||
color: var(--m365-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.m365-login__button:focus {
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--m365-bg-hover);
|
||
}
|
||
|
||
.m365-login__button:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
.m365-login__icon {
|
||
flex: 0 0 auto;
|
||
width: 20px;
|
||
height: 20px;
|
||
display: block;
|
||
background: #fff;
|
||
padding: 3px;
|
||
box-sizing: content-box;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.m365-login__label {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.m365-login--shortcode {
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
max-width: 360px;
|
||
}
|
||
|
||
/* Button-only mode: the password form is hidden until the fallback key is used. */
|
||
body.m365-button-only #loginform,
|
||
body.m365-button-only #nav {
|
||
display: none;
|
||
}
|
||
|
||
body.m365-button-only .m365-login--below,
|
||
body.m365-button-only .m365-login--above {
|
||
margin-top: 20px;
|
||
padding: 26px 24px;
|
||
border: 1px solid #c3c4c7;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
/* Custom login pages: wp_login_form() injection, shortcode and template function. */
|
||
.m365-login--form {
|
||
margin: 16px 0 0;
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.m365-login--form .m365-login__divider span,
|
||
.m365-login--shortcode .m365-login__divider span {
|
||
background: transparent;
|
||
}
|
||
|
||
.m365-login--form .m365-login__divider,
|
||
.m365-login--shortcode .m365-login__divider {
|
||
margin: 0 0 16px;
|
||
}
|
||
|
||
.m365-login__notice {
|
||
box-sizing: border-box;
|
||
margin: 0 0 16px;
|
||
padding: 12px 14px;
|
||
border-left: 4px solid #72aee6;
|
||
background: #fff;
|
||
color: #1d2327;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.m365-login__notice--error {
|
||
border-left-color: #d63638;
|
||
}
|
||
|
||
.m365-login__notice--message {
|
||
border-left-color: #00a32a;
|
||
}
|
||
|
||
.m365-login__hidden-fields {
|
||
display: none !important;
|
||
}
|