Gitiles
Code Review Sign In
gerrit.lilingkun.com / G2-ptPlatform-frontend / 5b1883e599903268896ba3c0bdc5a3712367371f / . / src / components / AuthForm.css
blob: b15cbeed8dfba6998270eda4e859e85cc86822e2 [file] [log] [blame]
Akane121765b61a72025-05-17 13:52:25 +0800[diff] [blame]1/* src/components/AuthForm.css */
2.auth-container {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]3 display: flex;
4 flex-direction: column;
5 align-items: center;
6 justify-content: center;
7 min-height: 100vh;
8 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
9 padding: 20px;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]10}
11
12.auth-title {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]13 color: #1e3c72;
14 font-size: 2.5rem;
15 margin-bottom: 2rem;
16 text-align: center;
17 font-weight: 700;
18 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]19}
20
21.auth-form-wrapper {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]22 width: 100%;
23 max-width: 400px;
24 background: white;
25 padding: 2.5rem;
26 border-radius: 10px;
27 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]28}
29
30.auth-form {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]31 display: flex;
32 flex-direction: column;
33 gap: 1.2rem;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]34}
35
36.auth-form h2 {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]37 color: #1e3c72;
38 text-align: center;
39 margin-bottom: 1.5rem;
40 font-size: 1.5rem;
41 font-weight: 600;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]42}
43
44.form-group {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]45 display: flex;
46 flex-direction: column;
47 gap: 0.5rem;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]48}
49
50.form-group input {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]51 padding: 0.9rem 1rem;
52 border: 1px solid #ddd;
53 border-radius: 6px;
54 font-size: 1rem;
55 width: 100%;
56 box-sizing: border-box;
57 height: 46px;
58 transition: all 0.3s;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]59}
60
61.form-group input:focus {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]62 outline: none;
63 border-color: #1e3c72;
64 box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.2);
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]65}
66
67.auth-button {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]68 padding: 0.9rem;
69 background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
70 color: white;
71 border: none;
72 border-radius: 6px;
73 font-size: 1rem;
74 font-weight: 600;
75 cursor: pointer;
76 transition: all 0.3s;
77 height: 46px;
78 margin-top: 0.5rem;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]79}
80
81.auth-button:hover {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]82 transform: translateY(-2px);
83 box-shadow: 0 4px 12px rgba(30, 60, 114, 0.2);
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]84}
85
86.auth-button:disabled {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]87 background: #cccccc;
88 transform: none;
89 box-shadow: none;
90 cursor: not-allowed;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]91}
92
93.auth-switch {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]94 display: flex;
95 justify-content: center;
96 align-items: center;
97 gap: 0.5rem;
98 margin-top: 1.5rem;
99 font-size: 0.9rem;
100 color: #666;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]101}
102
103.switch-button {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]104 background: none;
105 border: none;
106 color: #1e3c72;
107 cursor: pointer;
108 font-size: 0.9rem;
109 font-weight: 600;
110 padding: 0;
111 transition: all 0.2s;
112 text-decoration: none;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]113}
114
115.switch-button:hover {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]116 color: #2a5298;
117 text-decoration: underline;
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]118}
119
120.error-message {
DREW5b1883e2025-06-07 10:41:32 +0800[diff] [blame^]121 color: #e74c3c;
122 background-color: #fdecea;
123 padding: 0.8rem;
124 border-radius: 6px;
125 text-align: center;
126 margin-bottom: 1rem;
127 border: 1px solid #fadbd8;
128 font-size: 0.9rem;
129}
130
131/* 响应式设计 */
132@media (max-width: 480px) {
133 .auth-form-wrapper {
134 padding: 1.8rem;
135 }
136
137 .auth-title {
138 font-size: 2rem;
139 }
140
141 .auth-form h2 {
142 font-size: 1.3rem;
143 }
22301080a93bebb2025-05-27 19:48:11 +0800[diff] [blame]144}