All files / src/styles login.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* styles/login.css */
 
/* Import global Tailwind styles for consistency */
@import './tailwindCustom.css'; 
 
/* 
   Login Page Styles 
   - Defines the layout and design for the login page.
   - Ensures consistency with global styles for buttons and input fields.
*/
 
/* Login Page Container 
   - Centers the login form vertically and horizontally.
   - Uses a light background in light mode and dark background in dark mode.
*/
.login-container {
    @apply flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900;
}
 
/* Login Page Header 
   - Applies a bold, large text for the login title.
   - Adjusts the text color for dark mode compatibility.
*/
.login-header {
    @apply text-2xl font-bold mb-6 dark:text-white;
}
 
/* Login Input Field 
   - Uses the globally defined input-field class for consistency.
   - Ensures consistent styling for username and password fields.
*/
.login-input {
    @apply input-field;
}
 
/* Login Button 
   - Uses the globally defined button-primary class for consistency.
   - Ensures consistent button styling across the application.
*/
.login-button {
    @apply button-primary;
}
 
/* Login Box 
   - Adds a shadow and rounded corners for a polished look.
   - Applies background colors based on light or dark mode.
   - Provides padding for proper spacing inside the container.
*/
.login-box {
    @apply shadow-lg rounded-lg bg-white dark:bg-gray-800 p-6;
}