Polish admin layout and navigation rhythm
Prevent Web Awesome controls from overflowing while giving dashboard sections and navigation states consistent visual spacing.
This commit is contained in:
@@ -191,6 +191,8 @@ h2 {
|
||||
|
||||
wa-button.button--wide {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.button--small {
|
||||
@@ -276,6 +278,7 @@ wa-button.logout-button::part(button) {
|
||||
|
||||
.auth-card {
|
||||
width: min(100%, 460px);
|
||||
min-width: 0;
|
||||
padding: clamp(30px, 5vw, 52px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
@@ -284,12 +287,21 @@ wa-button.logout-button::part(button) {
|
||||
|
||||
.form-stack {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
margin-top: 30px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.form-stack > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
wa-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
wa-input::part(form-control-label) {
|
||||
@@ -434,14 +446,19 @@ wa-input.totp-input::part(input) {
|
||||
}
|
||||
|
||||
.nav-list a:hover,
|
||||
.nav-list a.active {
|
||||
.nav-list a:focus-visible {
|
||||
color: var(--navy);
|
||||
background: var(--hover-fill);
|
||||
}
|
||||
|
||||
.nav-list a.active {
|
||||
color: var(--primary);
|
||||
box-shadow: inset 3px 0 var(--primary);
|
||||
background: color-mix(in srgb, var(--primary) 12%, var(--surface-muted));
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-list a.active:hover {
|
||||
background: color-mix(in srgb, var(--primary) 16%, var(--surface-muted));
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
@@ -544,6 +561,9 @@ wa-button.logout-button::part(button) {
|
||||
}
|
||||
|
||||
.page-stage {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 20px;
|
||||
animation: pageIn 180ms ease-out;
|
||||
}
|
||||
|
||||
@@ -556,7 +576,7 @@ wa-button.logout-button::part(button) {
|
||||
|
||||
.page-heading {
|
||||
display: flex;
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 8px;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
@@ -634,7 +654,6 @@ wa-button.logout-button::part(button) {
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
margin-bottom: 22px;
|
||||
grid-template-columns: repeat(4, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
@@ -923,12 +942,14 @@ td strong {
|
||||
display: flex;
|
||||
max-width: 760px;
|
||||
margin-bottom: 24px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -942,7 +963,13 @@ td strong {
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
display: block;
|
||||
padding-left: 42px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form > wa-button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
|
||||
Reference in New Issue
Block a user