refactor: improve ui of login page (#6809)

#### What type of PR is this?

/area core
/kind improvement
/milestone 2.20.x

#### What this PR does / why we need it:

优化登录页面的 UI。

<img width="1910" alt="image" src="https://github.com/user-attachments/assets/736b1f72-e7c1-4c19-a0d9-dc935c738931">


#### Does this PR introduce a user-facing change?

```release-note
None
```
pull/6822/head
Ryan Wang 2024-10-11 16:03:05 +08:00 committed by GitHub
parent aab8806f0d
commit 2de02c9ad4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 7 deletions

View File

@ -2,7 +2,6 @@
.gateway-page { .gateway-page {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-color: #f5f5f5;
overflow: auto; overflow: auto;
} }
@ -44,6 +43,7 @@
margin: 0 auto; margin: 0 auto;
max-width: 28em; max-width: 28em;
padding: 5% 1em; padding: 5% 1em;
line-height: 1.5;
font-family: font-family:
ui-sans-serif, ui-sans-serif,
system-ui, system-ui,
@ -64,6 +64,7 @@
/* Form */ /* Form */
.halo-form-wrapper { .halo-form-wrapper {
border-radius: var(--rounded-lg); border-radius: var(--rounded-lg);
border: 1px solid #dfe6ecb3;
background: #fff; background: #fff;
padding: 1.5em; padding: 1.5em;
} }
@ -79,11 +80,11 @@
.halo-form .form-item { .halo-form .form-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 1.3em; margin-bottom: 1.5em;
width: 100%; width: 100%;
} }
.halo-form .form-item:last-child { .halo-form .form-item:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
@ -91,7 +92,7 @@
gap: var(--spacing-lg); gap: var(--spacing-lg);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-bottom: 1.3em; margin-bottom: 1.5em;
} }
.halo-form .form-item-group .form-item { .halo-form .form-item-group .form-item {
@ -160,13 +161,13 @@
.halo-form .form-item label { .halo-form .form-item label {
color: var(--color-text); color: var(--color-text);
margin-bottom: 0.625em; margin-bottom: 0.75rem;
font-size: var(--text-base); font-size: var(--text-base);
font-weight: 500; font-weight: 500;
} }
.halo-form .form-item .form-label-group { .halo-form .form-item .form-label-group {
margin-bottom: 0.625em; margin-bottom: 0.75em;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -305,7 +306,7 @@
.pill-items li a { .pill-items li a {
gap: var(--spacing-sm); gap: var(--spacing-sm);
font-size: var(--text-sm); font-size: var(--text-sm);
padding: 0.7em 1em; padding: 0.6em 0.9em;
display: flex; display: flex;
align-items: center; align-items: center;
color: #1f2937; color: #1f2937;