style: 統一後台品牌視覺

This commit is contained in:
2026-08-02 23:03:18 +08:00
parent 8b8a0bb6f7
commit 44c9cc6fe2
7 changed files with 47 additions and 10 deletions
+8 -4
View File
@@ -23,8 +23,8 @@ button, input, select, textarea { font: inherit; }
button, .button { min-height: 42px; }
.admin-topbar { position: sticky; z-index: 20; top: 0; min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: var(--color-text-inverse); background: var(--color-bg); border-bottom: 1px solid rgba(255, 204, 0, .3); }
.admin-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; letter-spacing: .06em; }
.admin-brand i { color: var(--color-brand); }
.admin-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.admin-brand__logo { display: block; width: clamp(190px, 20vw, 250px); max-height: 46px; height: auto; object-fit: contain; }
.admin-brand small { padding-left: 10px; color: var(--color-brand-light); border-left: 1px solid rgba(255, 255, 255, .25); font-weight: 500; }
.admin-topbar__actions { display: flex; align-items: center; gap: 18px; font-size: .9rem; }
.admin-topbar__actions a { color: var(--color-brand-light); text-decoration: none; }
@@ -109,11 +109,14 @@ tbody tr:hover { background: rgba(255, 204, 0, .06); }
.inline-form label { display: flex; flex-direction: column; gap: 6px; color: var(--color-text-muted); font-size: .82rem; font-weight: 700; }
.auth-page { display: grid; place-items: center; padding: 24px; color: var(--color-text-inverse); background: var(--color-bg); background-image: radial-gradient(circle at 20% 10%, rgba(255, 204, 0, .16), transparent 32%), radial-gradient(circle at 80% 90%, rgba(252, 238, 167, .1), transparent 34%); }
.auth-card { width: min(460px, 100%); padding: clamp(28px, 6vw, 48px); border: 1px solid rgba(255, 204, 0, .35); border-radius: 20px; background: var(--color-bg-raised); box-shadow: 0 26px 80px rgba(0, 0, 0, .45); }
.auth-card { position: relative; width: min(500px, 100%); padding: clamp(28px, 6vw, 48px); overflow: hidden; border: 1px solid rgba(255, 204, 0, .35); border-radius: 20px; background: var(--color-bg-raised); box-shadow: 0 26px 80px rgba(0, 0, 0, .45); }
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, transparent, var(--color-brand), transparent); }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; margin: 0 auto 24px; color: var(--color-brand-light); text-decoration: none; }
.auth-brand img { display: block; width: min(340px, 92%); height: auto; object-fit: contain; }
.auth-brand span { font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-align: center; }
.auth-card h1 { margin: 7px 0 10px; color: var(--color-text-inverse); text-align: center; }
.auth-card > p { color: var(--color-brand-light); text-align: center; }
.auth-card .eyebrow { color: var(--color-brand); }
.auth-gem { color: var(--color-brand); font-size: 2.5rem; text-align: center; }
.auth-card form { display: flex; flex-direction: column; gap: 17px; margin-top: 28px; }
.auth-card label { display: flex; flex-direction: column; gap: 7px; color: var(--color-text-inverse); font-size: .9rem; }
.auth-card input { color: var(--color-text-inverse); background: var(--color-bg); border-color: rgba(255, 204, 0, .36); }
@@ -128,6 +131,7 @@ tbody tr:hover { background: rgba(255, 204, 0, .06); }
@media (max-width: 760px) {
.admin-topbar { padding-inline: 16px; }
.admin-brand small, .admin-topbar__actions span { display: none; }
.admin-brand__logo { width: min(190px, 48vw); }
.admin-shell { display: block; }
.admin-sidebar { position: fixed; z-index: 30; inset: 68px auto 0 0; width: min(290px, 86vw); transform: translateX(-105%); transition: transform .2s ease; overflow-y: auto; }
.admin-sidebar.is-open { transform: translateX(0); }