|
4 | 4 | left: 0; |
5 | 5 | width: 100%; |
6 | 6 | height: 100%; |
7 | | - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| 7 | + background: var(--primary-gradient); |
8 | 8 | display: flex; |
9 | 9 | align-items: center; |
10 | 10 | justify-content: center; |
|
13 | 13 | } |
14 | 14 |
|
15 | 15 | .auth-container { |
16 | | - background: white; |
17 | | - border-radius: 16px; |
18 | | - box-shadow: 0 20px 60px rgba(0,0,0,0.3); |
| 16 | + background: var(--card-bg); |
| 17 | + border-radius: var(--radius-xl); |
| 18 | + box-shadow: var(--shadow-xl); |
19 | 19 | max-width: 420px; |
20 | 20 | width: 100%; |
21 | 21 | overflow: hidden; |
|
34 | 34 | } |
35 | 35 |
|
36 | 36 | .auth-header { |
37 | | - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| 37 | + background: var(--primary-gradient); |
38 | 38 | color: white; |
39 | 39 | padding: 32px 24px; |
40 | 40 | text-align: center; |
|
53 | 53 |
|
54 | 54 | .auth-tabs { |
55 | 55 | display: flex; |
56 | | - background: #f8f9fa; |
57 | | - border-bottom: 1px solid #dee2e6; |
| 56 | + background: var(--light-bg); |
| 57 | + border-bottom: 1px solid var(--border-color); |
58 | 58 | } |
59 | 59 |
|
60 | 60 | .auth-tab { |
|
64 | 64 | border: none; |
65 | 65 | font-size: 16px; |
66 | 66 | font-weight: 600; |
67 | | - color: #6c757d; |
| 67 | + color: var(--text-secondary); |
68 | 68 | cursor: pointer; |
69 | | - transition: all 0.3s; |
| 69 | + transition: all var(--transition); |
70 | 70 | border-bottom: 3px solid transparent; |
71 | 71 | pointer-events: auto; |
72 | 72 | opacity: 1; |
73 | 73 | } |
74 | 74 |
|
75 | 75 | .auth-tab:hover { |
76 | | - color: #495057; |
77 | | - background: #f8f9fa; |
| 76 | + color: var(--text-primary); |
| 77 | + background: var(--light-bg); |
78 | 78 | } |
79 | 79 |
|
80 | 80 | .auth-tab.active { |
81 | | - color: #667eea; |
82 | | - border-bottom-color: #667eea; |
83 | | - background: white; |
| 81 | + color: var(--primary-color); |
| 82 | + border-bottom-color: var(--primary-color); |
| 83 | + background: var(--card-bg); |
84 | 84 | } |
85 | 85 |
|
86 | 86 | .auth-tab.active:hover { |
87 | | - background: white; |
| 87 | + background: var(--card-bg); |
88 | 88 | } |
89 | 89 |
|
90 | 90 | .auth-form { |
|
94 | 94 | .auth-form h2 { |
95 | 95 | font-size: 24px; |
96 | 96 | margin-bottom: 24px; |
97 | | - color: #212529; |
| 97 | + color: var(--text-primary); |
98 | 98 | } |
99 | 99 |
|
100 | 100 | .form-group { |
|
105 | 105 | display: block; |
106 | 106 | font-size: 14px; |
107 | 107 | font-weight: 600; |
108 | | - color: #495057; |
| 108 | + color: var(--text-primary); |
109 | 109 | margin-bottom: 8px; |
110 | 110 | } |
111 | 111 |
|
112 | 112 | .form-group input { |
113 | 113 | width: 100%; |
114 | 114 | padding: 12px 16px; |
115 | 115 | font-size: 16px; |
116 | | - border: 2px solid #dee2e6; |
117 | | - border-radius: 8px; |
118 | | - transition: all 0.3s; |
| 116 | + border: 2px solid var(--border-color); |
| 117 | + border-radius: var(--radius); |
| 118 | + transition: all var(--transition); |
| 119 | + background: var(--card-bg); |
| 120 | + color: var(--text-primary); |
119 | 121 | } |
120 | 122 |
|
121 | 123 | .form-group input:focus { |
122 | 124 | outline: none; |
123 | | - border-color: #667eea; |
124 | | - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| 125 | + border-color: var(--primary-color); |
| 126 | + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); |
125 | 127 | } |
126 | 128 |
|
127 | 129 | .auth-btn { |
|
130 | 132 | font-size: 16px; |
131 | 133 | font-weight: 600; |
132 | 134 | color: white; |
133 | | - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| 135 | + background: var(--primary-gradient); |
134 | 136 | border: none; |
135 | | - border-radius: 8px; |
| 137 | + border-radius: var(--radius); |
136 | 138 | cursor: pointer; |
137 | | - transition: all 0.3s; |
| 139 | + transition: all var(--transition); |
138 | 140 | margin-top: 8px; |
| 141 | + box-shadow: var(--shadow-sm); |
139 | 142 | } |
140 | 143 |
|
141 | 144 | .auth-btn:hover { |
142 | 145 | transform: translateY(-2px); |
143 | | - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); |
| 146 | + box-shadow: var(--shadow-lg); |
144 | 147 | } |
145 | 148 |
|
146 | 149 | .auth-btn:active { |
|
151 | 154 | text-align: center; |
152 | 155 | margin-top: 16px; |
153 | 156 | font-size: 14px; |
154 | | - color: #6c757d; |
| 157 | + color: var(--text-secondary); |
155 | 158 | } |
156 | 159 |
|
157 | 160 | .auth-link a { |
158 | | - color: #667eea; |
| 161 | + color: var(--primary-color); |
159 | 162 | text-decoration: none; |
160 | 163 | font-weight: 600; |
161 | 164 | } |
|
177 | 180 | body { |
178 | 181 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
179 | 182 | background: var(--light-bg); |
180 | | - color: var(--dark-color); |
| 183 | + color: var(--text-primary); |
181 | 184 | line-height: 1.6; |
182 | 185 | -webkit-font-smoothing: antialiased; |
183 | 186 | -webkit-text-size-adjust: 100%; |
|
0 commit comments