Skip to content

feat: Implement modern CSS styling for all authentication and contact… #1882

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
subhankarpal306 wants to merge 1 commit into from
Closed

feat: Implement modern CSS styling for all authentication and contact… #1882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions css/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/* =================================================== */
/* FORMS STYLING MODULE - Login/Signup/Contact Forms */
/* This file applies a modern look with shadows and transitions. */
/* =================================================== */

/* 1. Form Container Styles (Applies Box Shadow and Background) */
.form-container {
max-width: 400px;
margin: 40px auto;
padding: 30px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow for visibility */
background-color: #ffffff;
}

/* 2. Input Field Styles (Applies Padding, Border, and Transitions) */
.form-input {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 6px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box; /* Ensures padding doesn't affect the 100% width */
font-size: 1em;
}

/* 2a. Focus State: Change border color and add glow when active */
.form-input:focus {
border-color: #007bff; /* Clear accent color (Blue) */
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
outline: none; /* Remove distracting default browser outline */
}

/* 3. Submit Button Styling */
.form-submit-btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 6px;
background-color: #28a745; /* Primary action color (Green) */
color: white;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}

.form-submit-btn:hover {
background-color: #218838; /* Darken slightly on hover */
}

/* 4. Error State Styling (Used for JavaScript/validation feedback) */

/* Styles applied to the input field when it has an error */
.form-input.input-error {
border-color: #dc3545; /* Red border for errors */
}

/* Styles applied to the message below the input */
.error-message {
color: #dc3545; /* Red text for error message */
font-size: 0.85em;
margin-top: -10px; /* Pulls the message closer to the input */
margin-bottom: 10px;
}
1 change: 1 addition & 0 deletions faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/forms.css">


<link rel="stylesheet" href="styles.css" />
Expand Down
1 change: 1 addition & 0 deletions forgotPassword.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forgot Password</title>
<link rel="stylesheet" href="css/forms.css">
<link rel="icon" type="image/x-icon" href="log/favicon.ico">
<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
Expand Down
1 change: 1 addition & 0 deletions newLogin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./login/login.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="css/forms.css">
</head>

<body>
Expand Down