Refactor frontend styles toward Tailwind utilities and unified design system

This commit is contained in:
shuaiplus
2026-04-25 02:23:10 +08:00
parent 514889adfc
commit e4bc1b9bbe
20 changed files with 632 additions and 1177 deletions
+12 -21
View File
@@ -7,7 +7,7 @@
}
.field > span {
@apply mb-2 block text-sm font-semibold;
@apply mb-2 mt-2.5 block text-sm font-semibold;
}
.input {
@@ -18,10 +18,10 @@
}
select.input {
@apply pr-[42px];
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 42px;
background-image:
linear-gradient(45deg, transparent 50%, #365fa8 50%),
linear-gradient(135deg, #365fa8 50%, transparent 50%);
@@ -33,11 +33,7 @@ select.input {
}
input[type='file'].input {
height: auto;
min-height: 48px;
padding: 8px 10px;
font-size: 14px;
line-height: 1.4;
@apply h-auto min-h-12 px-2.5 py-2 text-sm leading-[1.4];
}
input[type='file'].input::file-selector-button {
@@ -75,7 +71,7 @@ input[type='file'].input::file-selector-button:hover {
}
.password-wrap .input {
padding-right: 44px;
@apply pr-11;
}
.password-toggle {
@@ -101,8 +97,7 @@ input[type='file'].input::file-selector-button:hover {
.user-chip,
.side-link,
.mobile-tab {
position: relative;
overflow: hidden;
@apply relative overflow-hidden;
}
.topbar-actions .btn::before,
@@ -110,15 +105,9 @@ input[type='file'].input::file-selector-button:hover {
.side-link::before,
.mobile-tab::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 110px;
height: 110px;
border-radius: 999px;
@apply absolute left-1/2 top-1/2 h-[110px] w-[110px] rounded-full opacity-0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 42%, transparent 72%);
transform: translate(-50%, -50%) scale(0.68);
opacity: 0;
pointer-events: none;
transition:
opacity var(--dur-fast) var(--ease-smooth),
@@ -141,7 +130,7 @@ input[type='file'].input::file-selector-button:hover {
}
.btn-icon {
flex-shrink: 0;
@apply shrink-0;
}
.btn.full {
@@ -191,6 +180,10 @@ input[type='file'].input::file-selector-button:hover {
@apply mt-2 text-[13px] leading-normal text-slate-500;
}
.check-line-compact {
@apply mb-0;
}
.auth-support-row {
@apply -mt-0.5 mb-3 flex items-center justify-between gap-2.5;
}
@@ -205,7 +198,5 @@ input[type='file'].input::file-selector-button:hover {
}
.auth-link-btn:disabled {
color: #94a3b8;
cursor: not-allowed;
text-decoration: none;
@apply cursor-not-allowed text-slate-400 no-underline;
}