Add SVG assets for login devices and passkey icons
- Created a new SVG file for login devices with detailed paths and styles. - Added a new SVG file for the passkey icon with multiple vector paths and fill attributes.
This commit is contained in:
@@ -89,8 +89,187 @@
|
||||
.city-current { @apply inline-flex items-center gap-1 rounded-full bg-primary-50 px-2 py-1 text-xs font-medium text-primary-700; }
|
||||
.city-isolation-note { @apply flex items-start gap-3 rounded-xl bg-primary-50 p-4 text-sm text-primary-700; }
|
||||
.city-isolation-note svg { @apply mt-0.5 shrink-0; }
|
||||
.login-surface { @apply flex min-h-screen items-center justify-center p-4; background: #f5f5f5; }
|
||||
.login-card { @apply rounded-xl bg-white p-6 sm:p-8; }
|
||||
.login-surface {
|
||||
display: grid;
|
||||
min-height: 100dvh;
|
||||
place-items: start center;
|
||||
padding: max(32px, calc((100dvh - 595px) / 2)) 16px;
|
||||
background: #fff;
|
||||
}
|
||||
.login-layout { width: min(100%, 332px); }
|
||||
.login-card {
|
||||
width: 100%;
|
||||
padding: 40px 40px 32px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 24px 30px rgb(0 10 28 / 15%);
|
||||
}
|
||||
.login-brand {
|
||||
display: flex;
|
||||
width: 130px;
|
||||
height: 44px;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
margin: 0 auto 28px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.brand-logo.login-brand-logo { width: 130px; height: 27px; }
|
||||
.login-methods { width: 100%; }
|
||||
.login-password-choice,
|
||||
.login-passkey-button,
|
||||
.login-password-submit {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
transition: background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
|
||||
}
|
||||
.login-password-choice {
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
color: #000;
|
||||
background: #f2f3f7;
|
||||
}
|
||||
.login-password-choice:hover:not(:disabled) { background: #e8ebf0; }
|
||||
.login-divider {
|
||||
position: relative;
|
||||
height: 1px;
|
||||
margin: 28px 0 44px;
|
||||
background: #8c98a9;
|
||||
}
|
||||
.login-divider span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 0 16px;
|
||||
color: #8c98a9;
|
||||
background: #fff;
|
||||
font-size: 15px;
|
||||
line-height: 19px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.login-passkey-button {
|
||||
height: 48px;
|
||||
gap: 4px;
|
||||
padding: 1px 16px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
background: #61a246;
|
||||
}
|
||||
.login-passkey-button:hover:not(:disabled) { background: #518b3a; }
|
||||
.login-passkey-button img,
|
||||
.login-passkey-button svg { width: 24px; height: 24px; flex: 0 0 24px; }
|
||||
.login-passkey-button:disabled,
|
||||
.login-password-choice:disabled,
|
||||
.login-password-submit:disabled { opacity: .55; }
|
||||
.login-passkey-hint {
|
||||
margin: 28px 0 0;
|
||||
color: #8c98a9;
|
||||
font-size: 15px;
|
||||
line-height: 19.2px;
|
||||
text-align: center;
|
||||
}
|
||||
.login-error {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin: 0 0 16px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
color: #b42318;
|
||||
background: #fef2f2;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.login-error svg { width: 18px; height: 18px; flex: 0 0 18px; }
|
||||
.login-password-form { display: grid; gap: 16px; }
|
||||
.login-password-heading {
|
||||
display: grid;
|
||||
grid-template-columns: 32px 1fr 32px;
|
||||
align-items: center;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.login-password-heading h2 {
|
||||
margin: 0;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.login-back-button {
|
||||
display: grid;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
color: #536174;
|
||||
background: transparent;
|
||||
}
|
||||
.login-back-button:hover:not(:disabled) { background: #f2f3f7; }
|
||||
.login-back-button svg { width: 20px; height: 20px; }
|
||||
.login-field { display: grid; gap: 6px; color: #536174; font-size: 13px; line-height: 16px; }
|
||||
.login-input-wrap { position: relative; display: block; }
|
||||
.login-input-wrap svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #8c98a9;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.login-input-wrap input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 0 12px 0 40px;
|
||||
border: 1px solid #c9cfd8;
|
||||
border-radius: 8px;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
font-size: 15px !important;
|
||||
line-height: 20px;
|
||||
}
|
||||
.login-input-wrap input::placeholder { color: #8c98a9; }
|
||||
.login-input-wrap input:focus { border-color: #0958d9; outline: none; box-shadow: 0 0 0 2px rgb(9 88 217 / 15%); }
|
||||
.login-password-submit {
|
||||
height: 44px;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
background: #ff6900;
|
||||
font-weight: 500;
|
||||
}
|
||||
.login-password-submit:hover:not(:disabled) { background: #e95f00; }
|
||||
.login-password-submit svg { width: 18px; height: 18px; }
|
||||
.login-device-card {
|
||||
display: flex;
|
||||
min-height: 104px;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
padding: 28px 40px;
|
||||
border-radius: 12px;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
box-shadow: 0 24px 30px rgb(0 10 28 / 15%);
|
||||
}
|
||||
.login-device-card img { width: 72px; height: 45px; flex: 0 0 72px; }
|
||||
.login-device-card p { margin: -1px 0 0; font-size: 15px; line-height: 20.8px; }
|
||||
.login-footer { min-height: 64px; margin-top: 16px; color: #8c98a9; font-size: 13px; line-height: 20px; text-align: center; }
|
||||
.login-footer p { margin: 0; }
|
||||
@media (max-width: 374px) {
|
||||
.login-card { padding: 28px 24px; }
|
||||
.login-device-card { padding: 24px; }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.app-main.app-main-wide { padding: 24px 16px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user