mirror of https://github.com/halo-dev/halo
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
parent
aab8806f0d
commit
2de02c9ad4
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue