This repository has no description
1.login-container {
2 display: flex;
3 flex-direction: column;
4 justify-content: center;
5 align-items: center;
6 min-height: calc(100vh - 150px);
7 padding: 2rem;
8 box-sizing: border-box;
9}
10
11.login-card {
12 background-color: var(--navbar-bg);
13 border: 1px solid var(--card-border);
14 border-radius: 12px;
15 box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,0.1));
16 padding: 40px;
17 width: 100%;
18 max-width: 450px;
19 text-align: center;
20 display: flex;
21 flex-direction: column;
22 gap: 15px;
23 transition: background-color 0.3s ease, border-color 0.3s ease;
24}
25
26.login-card h1 {
27 color: var(--button-bg);
28 font-size: 2em;
29 margin-bottom: 10px;
30 text-align: center;
31}
32
33.login-card p {
34 color: var(--text);
35 margin-bottom: 20px;
36 line-height: 1.5;
37 text-align: center;
38}
39
40.login-error {
41 background-color: rgba(255, 73, 73, 0.1);
42 color: #ff4949;
43 padding: 0.75rem;
44 border-radius: 4px;
45 margin-bottom: 1.5rem;
46}
47
48.login-form {
49 background: none;
50 border: none;
51 padding: 0px;
52}
53
54.login-input-field {
55 border: 2px solid var(--card-border);
56 border-radius: 6px;
57 padding: 9px;
58 font-size: 1em;
59 background-color: var(--navbar-bg);
60 color: var(--text);
61 transition: all 0.3s ease;
62 font-family: inherit;
63 text-align: center;
64 box-sizing: border-box;
65}
66
67.login-input-field:hover,
68.login-input-field:focus {
69 border-color: var(--button-bg);
70 background-color: var(--background);
71 outline: none;
72}
73
74.login-submit-button {
75 background: var(--button-bg);
76 color: var(--button-text);
77 border: none;
78 border-radius: 6px;
79 padding: 10px 15px;
80 font-weight: 700;
81 font-size: 1em;
82 cursor: pointer;
83 transition: background-color 0.3s ease;
84 width: auto;
85 margin: 0 auto;
86}
87
88.login-submit-button:hover {
89 background: var(--button-hover-bg, #0056b3);
90}
91
92.login-submit-button:disabled {
93 background-color: var(--button-disabled-bg, #cccccc);
94 cursor: not-allowed;
95 opacity: 0.7;
96}
97
98.login-status-message,
99.login-error-message {
100 text-align: center;
101 margin-top: 10px;
102 font-size: 0.9em;
103}
104
105.login-error-message {
106 color: var(--error-text, #721c24);
107 background-color: var(--error-bg, #f8d7da);
108 padding: 10px;
109 border-radius: 4px;
110 border: 1px solid var(--error-border, #f5c6cb);
111}
112
113.dark-mode .login-error-message {
114 color: var(--error-text-dark, #f5c6cb);
115 background-color: var(--error-bg-dark, #4d1f24);
116 border-color: var(--error-border-dark, #721c24);
117}
118
119.login-privacy-note {
120 color: var(--text-muted,#6c757d);
121 font-size: .85em;
122 text-align: center;
123 max-width: 250px;
124 margin: auto;
125 margin-top: 15px;
126}
127
128.login-status p {
129 font-size: 1.1em;
130 color: var(--text-muted, var(--text));
131}