Currently, by default, the login popup looks like this:
With a little CSS, I made it look like this:
They were simple and small changes, but I think they make a big difference in the members' experience.
Custom CSS used:
.LogInModal .Modal-body {
display: flex;
flex-direction: column;
}
.LogInModal .Form-group:has(input[name="identification"]),
.LogInModal .Form-group:has(input[name="password"]),
.LogInModal .Form-group:has(input[type="checkbox"]),
.LogInModal .Button--primary {
order: 1;
}
.LogInModal .SocialButton,
.LogInModal .fof-auth-buttons,
.LogInModal .LogInButtons {
order: 3;
}
.LogInModal .LogInButtons::before,
.LogInModal .fof-auth-buttons::before {
content: "or continue with...";
display: block;
text-align: center;
font-size: 12px;
color: #888;
margin: 12px 0 10px;
padding-top: 12px;
border-top: 1px solid #e0e0e0;
}
.LogInModal .Form-group:has(input[type="checkbox"]) {
display: flex;
justify-content: center;
align-items: center;
}
.LogInModal .Form-group:has(input[type="checkbox"]) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.LogInModal input[type="checkbox"] {
display: none;
}
.LogInModal .Form-group:has(input[type="checkbox"]) label::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f111";
font-size: 18px;
color: #aaa;
margin-right: 6px;
transition: color 0.2s ease;
}
.LogInModal input[type="checkbox"]:checked ~ label::before,
.LogInModal .Form-group:has(input[type="checkbox"]:checked) label::before {
content: "\f058";
color: #4caf50;
}
For version 2.0, it might be necessary to change some things in fontawesome...
