|
1 | 1 | body { |
2 | | - font-family: 'Inter', sans-serif; |
3 | | - background-color: #212529; /* Dark background for Bootstrap dark theme */ |
4 | | - display: flex; |
5 | | - justify-content: center; |
6 | | - align-items: center; |
7 | | - min-height: 100vh; |
8 | | - margin: 0; |
9 | | - color: #f8f9fa; /* Light text color for dark theme */ |
| 2 | + font-family: "Inter", sans-serif; |
| 3 | + background-color: #212529; /* Dark background for Bootstrap dark theme */ |
| 4 | + display: flex; |
| 5 | + justify-content: center; |
| 6 | + align-items: center; |
| 7 | + min-height: 100vh; |
| 8 | + margin: 0; |
| 9 | + color: #f8f9fa; /* Light text color for dark theme */ |
10 | 10 | } |
11 | 11 | .login-container { |
12 | | - background-color: #343a40; /* Darker background for the form */ |
13 | | - padding: 2rem; |
14 | | - border-radius: 0.5rem; |
15 | | - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); /* Darker shadow */ |
16 | | - border: 1px solid #495057; /* Border for the form */ |
17 | | - max-width: 500px; /* Equivalent to max-w-md */ |
18 | | - width: 100%; |
| 12 | + background-color: #343a40; /* Darker background for the form */ |
| 13 | + padding: 2rem; |
| 14 | + border-radius: 0.5rem; |
| 15 | + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); /* Darker shadow */ |
| 16 | + border: 1px solid #495057; /* Border for the form */ |
| 17 | + max-width: 500px; /* Equivalent to max-w-md */ |
| 18 | + width: 100%; |
19 | 19 | } |
20 | 20 | .form-control-dark { |
21 | | - background-color: #495057; /* Darker input background */ |
22 | | - color: #f8f9fa; /* Light text in inputs */ |
23 | | - border: 1px solid #6c757d; /* Darker input border */ |
| 21 | + background-color: #495057; /* Darker input background */ |
| 22 | + color: #f8f9fa; /* Light text in inputs */ |
| 23 | + border: 1px solid #6c757d; /* Darker input border */ |
24 | 24 | } |
25 | 25 | .form-control-dark::placeholder { |
26 | | - color: #ced4da; /* Lighter placeholder text */ |
27 | | - opacity: 0.7; |
| 26 | + color: #ced4da; /* Lighter placeholder text */ |
| 27 | + opacity: 0.7; |
28 | 28 | } |
29 | 29 | .form-control-dark:focus { |
30 | | - background-color: #495057; |
31 | | - color: #f8f9fa; |
32 | | - border-color: #0d6efd; /* Blue focus border */ |
33 | | - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); |
| 30 | + background-color: #495057; |
| 31 | + color: #f8f9fa; |
| 32 | + border-color: #0d6efd; /* Blue focus border */ |
| 33 | + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); |
34 | 34 | } |
35 | 35 | .btn-primary-custom { |
36 | | - background-color: #0d6efd; /* Bootstrap blue */ |
37 | | - border-color: #0d6efd; |
38 | | - color: white; |
39 | | - transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; |
| 36 | + background-color: #0d6efd; /* Bootstrap blue */ |
| 37 | + border-color: #0d6efd; |
| 38 | + color: white; |
| 39 | + transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; |
40 | 40 | } |
41 | 41 | .btn-primary-custom:hover { |
42 | | - background-color: #0b5ed7; /* Darker blue on hover */ |
43 | | - border-color: #0a58ca; |
| 42 | + background-color: #0b5ed7; /* Darker blue on hover */ |
| 43 | + border-color: #0a58ca; |
44 | 44 | } |
0 commit comments