修复用户管理组件缺失的弹窗与表单样式

This commit is contained in:
xuans 2026-09-17 12:44:44 +08:00
parent d313b129b0
commit a3d0f6cf83

View File

@ -96,6 +96,138 @@
.user-modal {
width: min(100%, 620px);
}
.eyebrow {
margin: 0 0 8px;
color: #687792;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
}
.primary-button,
.secondary-button {
min-height: 42px;
padding: 10px 16px;
border: 1px solid #d5ddea;
border-radius: 8px;
background: #fff;
color: #32405a;
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.primary-button {
border-color: #315aaa;
background: #315aaa;
color: #fff;
}
button:disabled {
cursor: wait;
opacity: 0.6;
}
.text-button {
min-height: 36px;
padding: 6px;
border: 0;
color: #315aaa;
background: transparent;
font: inherit;
cursor: pointer;
}
.danger-text,
.form-error {
color: #9c3b3b;
}
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 10;
display: grid;
place-items: center;
overflow-y: auto;
padding: 16px;
background: rgba(18, 31, 58, 0.52);
}
.user-modal {
box-sizing: border-box;
max-height: calc(100dvh - 32px);
overflow: auto;
padding: 24px;
border: 1px solid #b9cbe0;
border-radius: 8px;
background: #fff;
box-shadow: 0 20px 60px rgba(19, 38, 79, 0.25);
}
.modal-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.modal-heading h2 {
margin: 0;
font-size: 24px;
letter-spacing: 0;
}
.close-button {
flex: 0 0 34px;
width: 34px;
height: 34px;
border: 0;
border-radius: 8px;
color: #687792;
background: #f1f4f8;
font-size: 24px;
cursor: pointer;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.field {
display: flex;
min-width: 0;
flex-direction: column;
gap: 8px;
margin-bottom: 17px;
color: #32405a;
font-size: 13px;
font-weight: 700;
}
.field small {
color: #687792;
font-size: 12px;
font-weight: 400;
}
.field input,
.field select {
box-sizing: border-box;
width: 100%;
min-width: 0;
height: 42px;
padding: 10px 12px;
border: 1px solid #bdcde0;
border-radius: 8px;
color: #172033;
background: #fff;
font: inherit;
font-weight: 400;
}
.field input:focus-visible,
.field select:focus-visible,
button:focus-visible {
outline: 2px solid #315aaa;
outline-offset: 2px;
}
.modal-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
@media (max-width: 720px) {
.user-management-heading {
align-items: stretch;
@ -108,4 +240,13 @@
.user-table td {
padding: 11px 8px;
}
}
}
@media (max-width: 480px) {
.form-grid {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.user-modal {
padding: 18px;
}
}