@inf-monkeys-tech/monkeys-design 0.4.36 → 0.4.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,375 +0,0 @@
1
- .artist-login-container {
2
- position: relative;
3
- width: 100vw;
4
- height: 100vh;
5
- overflow: hidden;
6
- display: flex;
7
- align-items: center;
8
- justify-content: flex-end;
9
- padding-right: 5%;
10
- background-size: cover;
11
- background-position: center;
12
- background-repeat: no-repeat;
13
- border-radius: var(--login-form-radius, 20px);
14
-
15
- &.bsd-theme {
16
- background-color: #000000;
17
- }
18
- }
19
-
20
- /* 背景层:动态背景或自定义图片 */
21
- .artist-login-bg {
22
- position: fixed;
23
- top: 0;
24
- left: 0;
25
- width: 100vw;
26
- height: 100vh;
27
- z-index: 0;
28
- background-size: cover;
29
- background-position: center;
30
- background-repeat: no-repeat;
31
- filter: brightness(0.92);
32
- border-radius: var(--login-form-radius, 20px);
33
- }
34
-
35
- .artist-logo {
36
- position: absolute;
37
- left: 30px;
38
- display: flex;
39
- align-items: center;
40
- gap: 10px;
41
- z-index: 10;
42
-
43
- &.logo-location-top {
44
- top: 30px;
45
- }
46
-
47
- &.logo-location-middle {
48
- top: 50%;
49
- transform: translateY(-50%);
50
- }
51
-
52
- &.logo-location-bottom {
53
- bottom: 30px;
54
- }
55
-
56
- .logo-single {
57
- height: 48px;
58
- width: auto;
59
- max-width: 320px;
60
- object-fit: contain;
61
- }
62
-
63
- .logo-icon {
64
- width: 46px;
65
- height: 46px;
66
- }
67
-
68
- .logo-title {
69
- height: 36px;
70
- width: auto;
71
- }
72
- }
73
-
74
- .login-form-container {
75
- position: relative;
76
- width: 500px;
77
- min-height: 800px;
78
- max-width: 90vw;
79
- background: var(--login-card-bg, rgba(255, 255, 255, 0.95));
80
- border-radius: var(--login-form-radius, 20px);
81
- padding: 80px;
82
- border: none;
83
- box-shadow:
84
- 0 0 0 1px var(--login-card-glow-border, rgba(77, 143, 157, 0.5)),
85
- 0 0 30px var(--login-card-glow-color, rgba(77, 143, 157, 0.4)),
86
- 0 20px 40px rgba(0, 0, 0, 0.1);
87
- overflow: hidden; // 让背景与边框一起遵守圆角
88
- background-clip: padding-box; // 确保内部背景不溢出圆角
89
- backdrop-filter: var(--login-card-blur, blur(10px));
90
- z-index: 15;
91
- box-sizing: border-box;
92
- color: #fff;
93
- }
94
-
95
- .back-to-home {
96
- position: absolute;
97
- top: 20px;
98
- right: 20px;
99
- display: flex;
100
- align-items: center;
101
- gap: 8px;
102
- padding: 8px 16px;
103
- background: rgba(255, 255, 255, 0.95);
104
- border: 1px solid rgba(0, 0, 0, 0.1);
105
- border-radius: 20px;
106
- color: rgba(0, 0, 0, 0.85);
107
- font-size: 14px;
108
- cursor: pointer;
109
- transition: all 0.3s ease;
110
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
111
-
112
- &:hover {
113
- background: rgba(255, 255, 255, 1);
114
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
115
- transform: translateY(-1px);
116
- }
117
-
118
- .back-icon {
119
- width: 20px;
120
- height: 12px;
121
- flex-shrink: 0;
122
- }
123
- }
124
-
125
- .artist-login-container.dark-mode {
126
- .back-to-home {
127
- background: rgba(0, 0, 0, 0.1);
128
- border: 1.5px solid rgba(255, 255, 255, 0.1);
129
- color: rgba(255, 255, 255, 0.85);
130
-
131
- &:hover {
132
- background: rgba(0, 0, 0, 0.2);
133
- border-color: rgba(255, 255, 255, 0.2);
134
- }
135
-
136
- }
137
- }
138
-
139
- .form-title {
140
- font-size: 28px;
141
- font-weight: bold;
142
- color: #fff;
143
- background: var(--login-title-gradient, linear-gradient(#fff, #fff));
144
- background-clip: text;
145
- -webkit-background-clip: text;
146
- -webkit-text-fill-color: transparent;
147
- margin-top: 80px;
148
- margin-bottom: 30px;
149
- text-align: left;
150
- }
151
-
152
- .auth-tabs {
153
- display: flex;
154
- gap: 0;
155
- margin-bottom: 30px;
156
- border-radius: 10px;
157
- overflow: hidden;
158
-
159
- .tab-button {
160
- flex: 1;
161
- display: flex;
162
- align-items: center;
163
- justify-content: center;
164
- gap: 8px;
165
- padding: 12px 16px;
166
- border: none;
167
- border-radius: 0;
168
- font-size: 14px;
169
- font-weight: 500;
170
- cursor: pointer;
171
- transition: all 0.3s ease;
172
- background: #f5f5f5;
173
- color: var(--login-tab-inactive-color, #666);
174
-
175
- &:first-child {
176
- border-top-left-radius: 10px;
177
- border-bottom-left-radius: 10px;
178
- }
179
-
180
- &:last-child {
181
- border-top-right-radius: 10px;
182
- border-bottom-right-radius: 10px;
183
- }
184
-
185
- &.active {
186
- background: var(--login-primary-color, #4D8F9D);
187
- color: white;
188
- }
189
-
190
- &:hover:not(.active) {
191
- background: #e0e0e0;
192
- }
193
-
194
- .tab-icon {
195
- width: 16px;
196
- height: 16px;
197
- }
198
- }
199
- }
200
-
201
- .artist-login-container.dark-mode {
202
- .auth-tabs {
203
- .tab-button:not(.active) {
204
- background: #1E2752;
205
- color: white;
206
-
207
- &:hover {
208
- background: #2a3568;
209
- }
210
- }
211
- }
212
- }
213
-
214
- .login-form {
215
- display: flex;
216
- flex-direction: column;
217
- gap: 20px;
218
- }
219
-
220
- .form-field {
221
- .form-input {
222
- width: 100%;
223
- padding: 15px 20px;
224
- border: var(--login-input-border, none);
225
- border-radius: 10px;
226
- background: var(--login-input-bg, #f8f9fa);
227
- font-size: 16px;
228
- color: var(--login-input-text, var(--login-text-color, #333));
229
- transition: all 0.3s ease;
230
-
231
- &:focus {
232
- outline: none;
233
- background: var(--login-input-bg, #fff);
234
- box-shadow: 0 0 0 2px rgba(77, 143, 157, 0.2);
235
- }
236
-
237
- &::placeholder {
238
- color: var(--login-input-placeholder, #999);
239
- }
240
- }
241
- }
242
-
243
- .form-options {
244
- display: flex;
245
- justify-content: space-between;
246
- align-items: flex-start;
247
- margin: 10px 0 -10px 0;
248
-
249
- .remember-section {
250
- display: flex;
251
- flex-direction: column;
252
- gap: 4px;
253
- }
254
-
255
- .remember-password {
256
- display: flex;
257
- align-items: center;
258
- gap: 8px;
259
- font-size: 14px;
260
- color: var(--login-text-color, #fff);
261
- }
262
-
263
- .remember-hint {
264
-
265
- margin-top: 10px;
266
- margin-left: 0; // 与记住密码文字左对齐
267
- display: flex;
268
- align-items: center;
269
- gap: 6px;
270
-
271
- svg {
272
- color: #999;
273
- flex-shrink: 0;
274
- }
275
-
276
- .hint-text {
277
- font-size: 12px;
278
- color: #999;
279
- }
280
- }
281
-
282
- .forgot-password {
283
- background: none;
284
- border: none;
285
- color: #4D8F9D;
286
- font-size: 14px;
287
- cursor: pointer;
288
- text-decoration: underline;
289
-
290
- &:hover {
291
- color: #416887;
292
- }
293
- }
294
- }
295
-
296
- .submit-button {
297
- width: 100%;
298
- padding: 15px;
299
- background: linear-gradient(135deg, var(--login-primary-color, #4D8F9D) 0%, var(--login-primary-color, #4D8F9D) 100%);
300
- color: white;
301
- border: none;
302
- border-radius: 10px;
303
- font-size: 16px;
304
- font-weight: 600;
305
- cursor: pointer;
306
- transition: all 0.3s ease;
307
-
308
- &:hover:not(:disabled) {
309
- transform: translateY(-2px);
310
- box-shadow: 0 10px 20px rgba(77, 143, 157, 0.3);
311
- }
312
-
313
- &:disabled {
314
- opacity: 0.7;
315
- cursor: not-allowed;
316
- }
317
- }
318
-
319
- .dingtalk-button {
320
- width: 100%;
321
- transition: all 0.3s ease;
322
-
323
- &:hover:not(:disabled) {
324
- transform: translateY(-2px);
325
- box-shadow: 0 10px 20px rgba(64, 150, 255, 0.3);
326
- }
327
- }
328
-
329
- .login-checkbox {
330
- background: var(--login-checkbox-bg, #fff) !important;
331
- box-shadow: var(--login-checkbox-shadow, none);
332
- border: var(--login-checkbox-border, 1px solid transparent);
333
- border-radius: var(--login-checkbox-radius, 6px);
334
-
335
- &[data-state='checked'] {
336
- background: var(--login-checkbox-bg-checked, var(--login-primary-color, #4D8F9D)) !important;
337
- color: var(--login-checkbox-check-color, #fff);
338
- }
339
- }
340
-
341
- /* 响应式设计 */
342
- @media (max-width: 768px) {
343
- .artist-login-container {
344
- padding-right: 0;
345
- justify-content: center;
346
- }
347
-
348
- .login-form-container {
349
- width: 90vw;
350
- max-width: 500px;
351
- min-height: auto;
352
- padding: 30px 20px;
353
- }
354
-
355
- .artist-logo {
356
- left: 20px;
357
-
358
- &.logo-location-top {
359
- top: 20px;
360
- }
361
-
362
- &.logo-location-middle {
363
- top: 50%;
364
- transform: translateY(-50%);
365
- }
366
-
367
- &.logo-location-bottom {
368
- bottom: 20px;
369
- }
370
-
371
- .logo-text {
372
- font-size: 20px;
373
- }
374
- }
375
- }