Halaman utama Jelajahi Bantuan
Masuk
pengfeng
/
xiaoshu-app
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Pohon: 018b3f181c
Ranting Tag
xiaoshu-app
/
src
/
app
/
features
/
auth
/
login-page.component.scss

login-page.component.scss 2.4 KB
Riwayat Mentahan

123456789101112131415161718192021 
  1. :host { display: block; min-height: 100dvh; background: linear-gradient(180deg, var(--brand-pale) 0, #f6f8f7 42%, #fff 100%); }
    2. 

  2. .login-page { width: min(100%, 480px); margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 24px 36px; }
    3. 

  3. .login-brand { display: flex; align-items: center; margin-bottom: 34px; gap: 14px; }
    4. 

  4. .logo-mark { display: grid; width: 54px; height: 54px; color: white; background: var(--brand-strong); border-radius: var(--radius-md); place-items: center; box-shadow: 0 9px 22px rgb(39 125 105 / 24%); }
    5. 

  5. .login-brand h1 { margin: 0; font-size: 27px; letter-spacing: 0; }
    6. 

  6. .login-brand p { margin: 4px 0 0; color: var(--ink-soft); }
    7. 

  7. .mode-tabs { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 22px; border-bottom: 1px solid var(--line); }
    8. 

  8. .mode-tabs button { min-height: 44px; color: var(--ink-soft); background: transparent; border: 0; border-bottom: 2px solid transparent; }
    9. 

  9. .mode-tabs button.active { color: var(--brand-strong); border-bottom-color: var(--brand-strong); font-weight: 650; }
    10. 

  10. form { display: grid; gap: 14px; }
    11. 

  11. .input-wrap { display: grid; min-height: 50px; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; padding: 0 13px; color: var(--ink-soft); background: white; border: 1px solid var(--line); border-radius: var(--radius-md); gap: 9px; }
    12. 

  12. .input-wrap:focus-within { border-color: var(--brand-strong); box-shadow: 0 0 0 3px rgb(39 125 105 / 12%); }
    13. 

  13. .input-wrap input { width: 100%; height: 48px; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; }
    14. 

  14. .input-wrap button { height: 34px; padding: 0 0 0 12px; color: var(--brand-strong); background: transparent; border: 0; border-left: 1px solid var(--line); }
    15. 

  15. .input-wrap .eye-button { display: grid; width: 34px; padding: 0; border-left: 0; place-items: center; }
    16. 

  16. .privacy { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; margin-top: 3px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; gap: 8px; }
    17. 

  17. .privacy input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand-strong); }
    18. 

  18. .privacy a { color: var(--brand-strong); }
    19. 

  19. .submit { width: 100%; margin-top: 5px; }
    20. 

  20. .switch-register { min-height: 42px; color: var(--brand-strong); background: transparent; border: 0; }
    21. 

  21. .audit-notice { margin-bottom: 12px; padding: 10px 12px; color: #8a5a00; background: #fff6dc; border: 1px solid #f1d38a; border-radius: var(--radius-sm); font-size: 13px; }
    22.