UNPKG

plumes/features/login/css/pl-login.less

Version:

9.69 kBtext/lessView Raw

1@import "../../common/less/common-mixins.less";
2@import "../../common/less/common-variables.less";
3
4@-webkit-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }
5@-moz-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }
6@-ms-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }
7@-o-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }
8@keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }
9
10@-webkit-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
11@-moz-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
12@-ms-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
13@-o-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
14@keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
15
pl-login {
z-index: 1100;
18
.pl-login-container {
  overflow: hidden;
  z-index: 1001;
  position: fixed;
  left: 2rem;
  right: 2rem;
}
26
.bottom-border-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
33
  .bottom-border {
    display: none;
    max-width: 70rem;
    width: 100%;
    height: 1px;
    margin: 0 auto;
40
    .animation(pl-bottom-border-show 0.65s @easeOutQuart);
  }
}
44
.pl-login-content {
  position: relative;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
50
  .pl-login-form {
    opacity: 0;
    position: absolute;
    left: 50%;
    width: 0;
    margin-left: 0;
    top: 50%;
    height: 0;
    margin-top: 0;
    overflow: hidden;
61
    .pl-login-form-content {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
70
    .pl-login-form-message {
      position: absolute;
      left: 0;
      bottom: -14rem;
      width: 100%;
      height: 100%;
      color: white;
      line-height: 14rem;
79
      p {
        font-size: 2rem;
        line-height: 4rem;
        vertical-align: middle;
        display: inline-block;
        line-height: normal;
        text-align: center;
        width: 100%;
      }
    }
90
    .old-avatar {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 14rem;
      height: 14rem;
      background: url('avatar.png') no-repeat;
      background-size: 100%;
100
      &.show {
        display: block;
      }
    }
105
    .avatar {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 14rem;
      width: 14rem;
      margin: -7rem 0 0 -7rem;
      background: url('avatar.png') no-repeat;
      background-size: 100%;
115
      &.show-again {
        .animation(pl-avatar-show-again 0.65s @easeOutQuart);
      }
    }
120
    .input {
      position: relative;
      left: 0;
      background: none;
      color: white;
      margin: 0 0 0 15rem;
      border: none;
      font-size: 2rem;
      line-height: 4rem;
      height: 7rem;
      width: 25rem;
      .transition(all 0.35s @easeOutQuart);
133
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px @accentColor inset;
        -webkit-text-fill-color: white !important;
      }
138
      &::-webkit-input-placeholder {
         color: white;
         opacity: 0.5;
      }
143
      &:-moz-placeholder {
         color: white;
         opacity: 0.5;
      }
148
      &::-moz-placeholder {
         color: white;
         opacity: 0.5;
      }
153
      &:-ms-input-placeholder {
         color: white;
         opacity: 0.5;
      }
158
      &.name {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      }
162
      &.code {
        position: absolute;
        top: 0;
        left: auto;
        right: -26rem;
        .transition(all 0.7s 0.35s @easeOutQuart);
169
        &.show {
          right: 0;
        }
      }
174
      &.hide {
        left: -26rem;
      }
    }
179
    .mask-password {
      position: absolute;
      height: 7rem;
      background: white;
      bottom: -1px;
      width: 0;
      right: 0;
      .transition(all 0.35s @easeOutQuart);
188
      &.show {
        width: 26rem;
      }
    }
193
    .submit {
      display: none;
    }
  }
198
  .pl-login-links {
    .noselect();
    cursor: pointer;
    position: absolute;
    opacity: 0;
    right: 50%;
    top: 50%;
    width: 20rem;
    margin-right: -20rem;
    margin-top: 1rem;
    font-size: 1.6rem;
    text-align: right;
    height: 2rem;
    line-height: 2rem;
    overflow: hidden;
    .transition(all 0.35s @easeOutQuart);
215
    .pl-login-forgot-link {
      top: 2rem;
    }
219
    .pl-login-login-link {
      top: -2rem;
    }
223
    div {
      position: absolute;
      right: 0;
      .transition(all 0.35s @easeOutQuart);
228
      &.show {
        top: 0;
      }
    }
  }
234
  .pl-login-forgot-texts {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 40rem;
    height: 5.6rem;
    margin-left: -20rem;
    margin-bottom: 9rem;
    font-size: 1.8rem;
    overflow: hidden;
    .transition(all 0.35s @easeOutQuart);
246
    .pl-login-forgot-text {
      top: 5.6rem;
    }
250
    .pl-login-forgot-code-text, .pl-login-forgot-password-text {
      top: -5.6rem;
    }
254
    p {
      position: absolute;
      left: 0;
      right: 0;
      height: 5.6rem;
      margin: 0;
      .transition(all 0.35s @easeOutQuart);
262
      &.show {
        top: 0;
      }
    }
267
    .key {
      position: relative;
      top: -2px;
      background: #fff;
      font-weight: 700;
      padding: 2px .65rem;
      font-size: 1.2rem;
      margin: 0 2px;
      border-radius: .25rem;
      color: #3d3c40;
      border-bottom: 2px solid #9e9ea6;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      text-shadow: none;
    }
  }
283
  .help-button {
    .noselect();
    cursor: pointer;
    position: absolute;
    bottom: 50%;
    left: 50%;
    border: none;
    background: none;
    padding: 0;
    font-size: 2.4rem;
    font-weight: 300;
    margin: 0 0 1.4rem 0;
    line-height: 2.4rem;
    opacity: 0;
    .transition(all 0.35s @easeOutQuart);
299
    &.show {
      margin-left: 22rem;
      opacity: 1;
    }
  }
}
306
.help-container {
  position: absolute;
  width: 27rem;
  opacity: 0;
  right: -27rem;
  .transition(all 0.35s @easeOutQuart);
313
  ol {
    margin-top: 1.5rem;
  }
}
318
&.help {
  .help-container {
    opacity: 0.7;
    right: 0;
  }
}
325
&.help .pl-login-content, &.help.sb-show-4 .pl-login-content {
  .pl-login-forgot-texts, .pl-login-links, .pl-login-form {
    margin-left: -40rem;
  }
330
  .help-button, .help-button.show {
    margin-left: 0;
    opacity: 0;
  }
}
336
&.sb-show-1, &.sb-show-2, &.sb-show-3, &.sb-show-4, &.sb-hide-1 {
  .bottom-border-container .bottom-border {
    display: block;
  }
}
342
&.sb-show-2 {
  .pl-login-container {
    .transition(all 1s @easeOutQuart);
  }
347
  .pl-login-content .pl-login-form {
    opacity: 1;
    width: 14rem;
    height: 14rem;
    margin-left: -7rem;
    margin-top: -7rem;
    .transition(all 0.45s @easeOutQuart);
  }
}
357
&.sb-show-3, &.sb-show-4 {
  .pl-login-content .pl-login-form {
    opacity: 1;
    width: 40rem;
    height: 14rem;
    margin-left: -20rem;
    margin-top: -7rem;
    .transition(all 0.45s @easeOutQuart);
366
    .avatar {
      left: 0;
      top: 0;
      margin: 0;
    }
  }
}
374
&.sb-show-4 {
  .pl-login-content .pl-login-links {
    opacity: 1;
    margin-top: 8rem;
    .transition(all 0.45s @easeOutQuart);
  }
}
382
&.sb-hide-1, &.sb-hide-2 {
  .pl-login-container {
    .transition(all 0.55s @easeOutQuart);
  }
387
  .pl-login-content .pl-login-form {
    opacity: 1;
    width: 40rem;
    height: 14rem;
    margin-left: -20rem;
    margin-top: -7rem;
    .transition(all 0.55s @easeOutQuart);
395
    .avatar {
      left: 0;
      top: 0;
      margin: 0;
    }
  }
402
  .bottom-border-container {
    opacity: 0;
    .transition(all 0.55s @easeOutQuart);
  }
}
408
&.sb-hide-2 {
  .pl-login-content .pl-login-form {
    width: 14rem;
    height: 14rem;
    margin-left: -7rem;
    margin-top: -7rem;
    .transition(all 0.45s @easeOutQuart);
  }
}
418
&.sb-hide-3 {
  .pl-login-content .pl-login-form {
    opacity: 1;
    width: 0;
    height: 0;
    margin-left: 0;
    margin-top: 0;
    .transition(all 0.15s linear);
  }
}
429
&.sb-message-1 {
  .pl-login-content .pl-login-form .pl-login-form-content {
    bottom: 14rem;
    .transition(all 0.35s @easeOutQuart);
  }
}
436
&.sb-message-2 {
  .pl-login-content .pl-login-form .pl-login-form-content {
    bottom: -14rem;
  }
441
  .pl-login-content .pl-login-form .pl-login-form-message {
    bottom: 0;
    .transition(all 0.35s @easeOutQuart);
  }
}
447
&.sb-message-3 {
  .pl-login-content .pl-login-form .pl-login-form-content {
    bottom: -14rem;
  }
452
  .pl-login-content .pl-login-form .pl-login-form-message {
    bottom: 14rem;
    .transition(all 0.35s @easeOutQuart);
  }
}
458
&.sb-message-4 {
  .pl-login-content .pl-login-form .pl-login-form-content {
    bottom: 0;
    .transition(all 0.35s @easeOutQuart);
  }
}
465}
\No newline at end of file

1	`@import "../../common/less/common-mixins.less";`
2	`@import "../../common/less/common-variables.less";`
3
4	`@-webkit-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }`
5	`@-moz-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }`
6	`@-ms-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }`
7	`@-o-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }`
8	`@keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 100%; } }`
9
10	`@-webkit-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
11	`@-moz-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
12	`@-ms-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
13	`@-o-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
14	`@keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
15
16	`.pl-login {`
17	`z-index: 1100;`
18
19	`.pl-login-container {`
20	`overflow: hidden;`
21	`z-index: 1001;`
22	`position: fixed;`
23	`left: 2rem;`
24	`right: 2rem;`
25	`}`
26
27	`.bottom-border-container {`
28	`position: absolute;`
29	`left: 0;`
30	`right: 0;`
31	`bottom: 0;`
32	`height: 1px;`
33
34	`.bottom-border {`
35	`display: none;`
36	`max-width: 70rem;`
37	`width: 100%;`
38	`height: 1px;`
39	`margin: 0 auto;`
40
41	`.animation(pl-bottom-border-show 0.65s @easeOutQuart);`
42	`}`
43	`}`
44
45	`.pl-login-content {`
46	`position: relative;`
47	`height: 100%;`
48	`margin: 0 auto;`
49	`overflow: hidden;`
50
51	`.pl-login-form {`
52	`opacity: 0;`
53	`position: absolute;`
54	`left: 50%;`
55	`width: 0;`
56	`margin-left: 0;`
57	`top: 50%;`
58	`height: 0;`
59	`margin-top: 0;`
60	`overflow: hidden;`
61
62	`.pl-login-form-content {`
63	`position: absolute;`
64	`left: 0;`
65	`bottom: 0;`
66	`width: 100%;`
67	`height: 100%;`
68	`overflow: hidden;`
69	`}`
70
71	`.pl-login-form-message {`
72	`position: absolute;`
73	`left: 0;`
74	`bottom: -14rem;`
75	`width: 100%;`
76	`height: 100%;`
77	`color: white;`
78	`line-height: 14rem;`
79
80	`p {`
81	`font-size: 2rem;`
82	`line-height: 4rem;`
83	`vertical-align: middle;`
84	`display: inline-block;`
85	`line-height: normal;`
86	`text-align: center;`
87	`width: 100%;`
88	`}`
89	`}`
90
91	`.old-avatar {`
92	`display: none;`
93	`position: absolute;`
94	`top: 0;`
95	`left: 0;`
96	`width: 14rem;`
97	`height: 14rem;`
98	`background: url('avatar.png') no-repeat;`
99	`background-size: 100%;`
100
101	`&.show {`
102	`display: block;`
103	`}`
104	`}`
105
106	`.avatar {`
107	`position: absolute;`
108	`top: 50%;`
109	`left: 50%;`
110	`height: 14rem;`
111	`width: 14rem;`
112	`margin: -7rem 0 0 -7rem;`
113	`background: url('avatar.png') no-repeat;`
114	`background-size: 100%;`
115
116	`&.show-again {`
117	`.animation(pl-avatar-show-again 0.65s @easeOutQuart);`
118	`}`
119	`}`
120
121	`.input {`
122	`position: relative;`
123	`left: 0;`
124	`background: none;`
125	`color: white;`
126	`margin: 0 0 0 15rem;`
127	`border: none;`
128	`font-size: 2rem;`
129	`line-height: 4rem;`
130	`height: 7rem;`
131	`width: 25rem;`
132	`.transition(all 0.35s @easeOutQuart);`
133
134	`&:-webkit-autofill {`
135	`-webkit-box-shadow: 0 0 0px 1000px @accentColor inset;`
136	`-webkit-text-fill-color: white !important;`
137	`}`
138
139	`&::-webkit-input-placeholder {`
140	`color: white;`
141	`opacity: 0.5;`
142	`}`
143
144	`&:-moz-placeholder {`
145	`color: white;`
146	`opacity: 0.5;`
147	`}`
148
149	`&::-moz-placeholder {`
150	`color: white;`
151	`opacity: 0.5;`
152	`}`
153
154	`&:-ms-input-placeholder {`
155	`color: white;`
156	`opacity: 0.5;`
157	`}`
158
159	`&.name {`
160	`border-bottom: 1px solid rgba(255, 255, 255, 0.3);`
161	`}`
162
163	`&.code {`
164	`position: absolute;`
165	`top: 0;`
166	`left: auto;`
167	`right: -26rem;`
168	`.transition(all 0.7s 0.35s @easeOutQuart);`
169
170	`&.show {`
171	`right: 0;`
172	`}`
173	`}`
174
175	`&.hide {`
176	`left: -26rem;`
177	`}`
178	`}`
179
180	`.mask-password {`
181	`position: absolute;`
182	`height: 7rem;`
183	`background: white;`
184	`bottom: -1px;`
185	`width: 0;`
186	`right: 0;`
187	`.transition(all 0.35s @easeOutQuart);`
188
189	`&.show {`
190	`width: 26rem;`
191	`}`
192	`}`
193
194	`.submit {`
195	`display: none;`
196	`}`
197	`}`
198
199	`.pl-login-links {`
200	`.noselect();`
201	`cursor: pointer;`
202	`position: absolute;`
203	`opacity: 0;`
204	`right: 50%;`
205	`top: 50%;`
206	`width: 20rem;`
207	`margin-right: -20rem;`
208	`margin-top: 1rem;`
209	`font-size: 1.6rem;`
210	`text-align: right;`
211	`height: 2rem;`
212	`line-height: 2rem;`
213	`overflow: hidden;`
214	`.transition(all 0.35s @easeOutQuart);`
215
216	`.pl-login-forgot-link {`
217	`top: 2rem;`
218	`}`
219
220	`.pl-login-login-link {`
221	`top: -2rem;`
222	`}`
223
224	`div {`
225	`position: absolute;`
226	`right: 0;`
227	`.transition(all 0.35s @easeOutQuart);`
228
229	`&.show {`
230	`top: 0;`
231	`}`
232	`}`
233	`}`
234
235	`.pl-login-forgot-texts {`
236	`position: absolute;`
237	`left: 50%;`
238	`bottom: 50%;`
239	`width: 40rem;`
240	`height: 5.6rem;`
241	`margin-left: -20rem;`
242	`margin-bottom: 9rem;`
243	`font-size: 1.8rem;`
244	`overflow: hidden;`
245	`.transition(all 0.35s @easeOutQuart);`
246
247	`.pl-login-forgot-text {`
248	`top: 5.6rem;`
249	`}`
250
251	`.pl-login-forgot-code-text, .pl-login-forgot-password-text {`
252	`top: -5.6rem;`
253	`}`
254
255	`p {`
256	`position: absolute;`
257	`left: 0;`
258	`right: 0;`
259	`height: 5.6rem;`
260	`margin: 0;`
261	`.transition(all 0.35s @easeOutQuart);`
262
263	`&.show {`
264	`top: 0;`
265	`}`
266	`}`
267
268	`.key {`
269	`position: relative;`
270	`top: -2px;`
271	`background: #fff;`
272	`font-weight: 700;`
273	`padding: 2px .65rem;`
274	`font-size: 1.2rem;`
275	`margin: 0 2px;`
276	`border-radius: .25rem;`
277	`color: #3d3c40;`
278	`border-bottom: 2px solid #9e9ea6;`
279	`box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);`
280	`text-shadow: none;`
281	`}`
282	`}`
283
284	`.help-button {`
285	`.noselect();`
286	`cursor: pointer;`
287	`position: absolute;`
288	`bottom: 50%;`
289	`left: 50%;`
290	`border: none;`
291	`background: none;`
292	`padding: 0;`
293	`font-size: 2.4rem;`
294	`font-weight: 300;`
295	`margin: 0 0 1.4rem 0;`
296	`line-height: 2.4rem;`
297	`opacity: 0;`
298	`.transition(all 0.35s @easeOutQuart);`
299
300	`&.show {`
301	`margin-left: 22rem;`
302	`opacity: 1;`
303	`}`
304	`}`
305	`}`
306
307	`.help-container {`
308	`position: absolute;`
309	`width: 27rem;`
310	`opacity: 0;`
311	`right: -27rem;`
312	`.transition(all 0.35s @easeOutQuart);`
313
314	`ol {`
315	`margin-top: 1.5rem;`
316	`}`
317	`}`
318
319	`&.help {`
320	`.help-container {`
321	`opacity: 0.7;`
322	`right: 0;`
323	`}`
324	`}`
325
326	`&.help .pl-login-content, &.help.sb-show-4 .pl-login-content {`
327	`.pl-login-forgot-texts, .pl-login-links, .pl-login-form {`
328	`margin-left: -40rem;`
329	`}`
330
331	`.help-button, .help-button.show {`
332	`margin-left: 0;`
333	`opacity: 0;`
334	`}`
335	`}`
336
337	`&.sb-show-1, &.sb-show-2, &.sb-show-3, &.sb-show-4, &.sb-hide-1 {`
338	`.bottom-border-container .bottom-border {`
339	`display: block;`
340	`}`
341	`}`
342
343	`&.sb-show-2 {`
344	`.pl-login-container {`
345	`.transition(all 1s @easeOutQuart);`
346	`}`
347
348	`.pl-login-content .pl-login-form {`
349	`opacity: 1;`
350	`width: 14rem;`
351	`height: 14rem;`
352	`margin-left: -7rem;`
353	`margin-top: -7rem;`
354	`.transition(all 0.45s @easeOutQuart);`
355	`}`
356	`}`
357
358	`&.sb-show-3, &.sb-show-4 {`
359	`.pl-login-content .pl-login-form {`
360	`opacity: 1;`
361	`width: 40rem;`
362	`height: 14rem;`
363	`margin-left: -20rem;`
364	`margin-top: -7rem;`
365	`.transition(all 0.45s @easeOutQuart);`
366
367	`.avatar {`
368	`left: 0;`
369	`top: 0;`
370	`margin: 0;`
371	`}`
372	`}`
373	`}`
374
375	`&.sb-show-4 {`
376	`.pl-login-content .pl-login-links {`
377	`opacity: 1;`
378	`margin-top: 8rem;`
379	`.transition(all 0.45s @easeOutQuart);`
380	`}`
381	`}`
382
383	`&.sb-hide-1, &.sb-hide-2 {`
384	`.pl-login-container {`
385	`.transition(all 0.55s @easeOutQuart);`
386	`}`
387
388	`.pl-login-content .pl-login-form {`
389	`opacity: 1;`
390	`width: 40rem;`
391	`height: 14rem;`
392	`margin-left: -20rem;`
393	`margin-top: -7rem;`
394	`.transition(all 0.55s @easeOutQuart);`
395
396	`.avatar {`
397	`left: 0;`
398	`top: 0;`
399	`margin: 0;`
400	`}`
401	`}`
402
403	`.bottom-border-container {`
404	`opacity: 0;`
405	`.transition(all 0.55s @easeOutQuart);`
406	`}`
407	`}`
408
409	`&.sb-hide-2 {`
410	`.pl-login-content .pl-login-form {`
411	`width: 14rem;`
412	`height: 14rem;`
413	`margin-left: -7rem;`
414	`margin-top: -7rem;`
415	`.transition(all 0.45s @easeOutQuart);`
416	`}`
417	`}`
418
419	`&.sb-hide-3 {`
420	`.pl-login-content .pl-login-form {`
421	`opacity: 1;`
422	`width: 0;`
423	`height: 0;`
424	`margin-left: 0;`
425	`margin-top: 0;`
426	`.transition(all 0.15s linear);`
427	`}`
428	`}`
429
430	`&.sb-message-1 {`
431	`.pl-login-content .pl-login-form .pl-login-form-content {`
432	`bottom: 14rem;`
433	`.transition(all 0.35s @easeOutQuart);`
434	`}`
435	`}`
436
437	`&.sb-message-2 {`
438	`.pl-login-content .pl-login-form .pl-login-form-content {`
439	`bottom: -14rem;`
440	`}`
441
442	`.pl-login-content .pl-login-form .pl-login-form-message {`
443	`bottom: 0;`
444	`.transition(all 0.35s @easeOutQuart);`
445	`}`
446	`}`
447
448	`&.sb-message-3 {`
449	`.pl-login-content .pl-login-form .pl-login-form-content {`
450	`bottom: -14rem;`
451	`}`
452
453	`.pl-login-content .pl-login-form .pl-login-form-message {`
454	`bottom: 14rem;`
455	`.transition(all 0.35s @easeOutQuart);`
456	`}`
457	`}`
458
459	`&.sb-message-4 {`
460	`.pl-login-content .pl-login-form .pl-login-form-content {`
461	`bottom: 0;`
462	`.transition(all 0.35s @easeOutQuart);`
463	`}`
464	`}`
465	`}`
\	No newline at end of file