upskill-event-manager/hvac-community-events/assets/css/community-login.css

96 lines
No EOL
2.4 KiB
CSS

/**
* HVAC Community Events: Community Login Styles
*
* Styles for the custom login form page.
*
* @version 1.0.0
*/
.hvac-community-login-wrapper {
/* Add styles to center the card vertically/horizontally if needed */
padding: 40px 0; /* Example padding */
}
.hvac-login-form-card {
max-width: 400px; /* Adjust as needed based on design */
margin: 0 auto;
padding: 30px;
background-color: #ffffff; /* White card background */
border: 1px solid #e0e0e0; /* Light border */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
border-radius: 4px; /* Rounded corners */
}
/* Style the form generated by wp_login_form */
#hvac_community_loginform p {
margin-bottom: 15px;
}
#hvac_community_loginform label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
#hvac_community_loginform input[type="text"],
#hvac_community_loginform input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
#hvac_community_loginform .login-remember label {
font-weight: normal;
display: inline-block; /* Align checkbox and label */
}
#hvac_community_loginform .login-remember input[type="checkbox"] {
margin-right: 5px;
vertical-align: middle;
}
#hvac_community_loginform .login-submit #wp-submit {
/* Use Astra button styles if possible, or define custom */
/* Example using Astra's class structure (might need adjustment) */
/* @extend .ast-button; */
display: inline-block;
padding: 10px 20px;
background-color: #0073aa; /* Example blue */
color: #ffffff;
border: none;
border-radius: 3px;
cursor: pointer;
text-decoration: none;
font-size: 1em;
width: 100%; /* Make button full width */
text-align: center;
}
#hvac_community_loginform .login-submit #wp-submit:hover {
background-color: #005a87; /* Darker blue on hover */
}
.hvac-login-links {
margin-top: 20px;
text-align: center;
font-size: 0.9em;
}
.hvac-login-links a {
color: #0073aa; /* Link color */
text-decoration: none;
}
.hvac-login-links a:hover {
text-decoration: underline;
}
/* Add responsive adjustments if needed */
@media (max-width: 544px) { /* Example using Astra mobile breakpoint */
.hvac-login-form-card {
max-width: 90%;
padding: 20px;
}
}