feat(ui): integrate account pages with shared shell
This commit is contained in:
@@ -64,6 +64,13 @@
|
||||
|
||||
@layer components {
|
||||
.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100vh; }
|
||||
.auth-shell { min-height: 100vh; }
|
||||
.auth-header { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: .75rem 1.25rem; }
|
||||
.auth-theme { width: 9rem; }
|
||||
.auth-main { display: grid; min-height: calc(100vh - 4rem); place-items: center; padding: 2rem; }
|
||||
.auth-card { width: min(100%, 28rem); border: 1px solid var(--border); border-radius: .85rem; background: var(--panel); padding: 1.5rem; box-shadow: 0 16px 42px rgb(20 25 35 / .08); }
|
||||
.auth-eyebrow { margin: 0 0 .35rem; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.auth-form { margin-top: 1.25rem; }
|
||||
[data-sidebar-collapsed="true"] .app-shell { grid-template-columns: 4rem minmax(0, 1fr); }
|
||||
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; border-right: 1px solid var(--border); background: var(--sidebar); padding: 1rem .75rem; }
|
||||
.brand, .account { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .25rem .4rem; }
|
||||
@@ -104,6 +111,13 @@
|
||||
.metric-value { margin-top: .35rem; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.metric-detail { margin-top: .18rem; color: var(--muted); font-size: .78rem; }
|
||||
.field { display: grid; gap: .35rem; }
|
||||
.form-panel { margin-top: 1rem; padding: 1rem; }
|
||||
.form-grid { display: grid; gap: 1rem; }
|
||||
.form-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.form-section { border: 1px solid var(--border); border-radius: .65rem; padding: 1rem; }
|
||||
.form-section legend { padding: 0 .35rem; font-weight: 700; }
|
||||
.field-help { margin: 0 0 .8rem; color: var(--muted); font-size: .78rem; }
|
||||
.form-actions { display: flex; justify-content: flex-end; gap: .6rem; }
|
||||
.field-label { font-size: .78rem; font-weight: 650; }
|
||||
.control { min-height: 2.45rem; width: 100%; border: 1px solid var(--border-strong); border-radius: .5rem; background: var(--panel); color: var(--ink); padding: .55rem .65rem; }
|
||||
.control[aria-invalid="true"] { border-color: var(--danger); }
|
||||
|
||||
Reference in New Issue
Block a user