rocky/OSGAccountServer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish admin layout and navigation rhythm

Browse Source 
Prevent Web Awesome controls from overflowing while giving dashboard sections and navigation states consistent visual spacing.
This commit is contained in:
Rocky
2026-08-18 09:22:17 +08:00
parent 971b7e26c6
commit 25cfbfa4e6
1 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-web/src/styles.css
+31 -4
View File
@@ -191,6 +191,8 @@ h2 {
wa-button.button--wide { wa-button.button--wide {
display: block; display: block;
min-width: 0;
max-width: 100%;
} }
.button--small { .button--small {
@@ -276,6 +278,7 @@ wa-button.logout-button::part(button) {
.auth-card { .auth-card {
width: min(100%, 460px); width: min(100%, 460px);
min-width: 0;
padding: clamp(30px, 5vw, 52px); padding: clamp(30px, 5vw, 52px);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 20px; border-radius: 20px;
@@ -284,12 +287,21 @@ wa-button.logout-button::part(button) {
.form-stack { .form-stack {
display: grid; display: grid;
min-width: 0;
margin-top: 30px; margin-top: 30px;
grid-template-columns: minmax(0, 1fr);
gap: 18px; gap: 18px;
} }
.form-stack > * {
min-width: 0;
}
wa-input { wa-input {
display: block;
width: 100%; width: 100%;
min-width: 0;
max-width: 100%;
} }
wa-input::part(form-control-label) { wa-input::part(form-control-label) {
@@ -434,14 +446,19 @@ wa-input.totp-input::part(input) {
} }
.nav-list a:hover, .nav-list a:hover,
.nav-list a.active { .nav-list a:focus-visible {
color: var(--navy); color: var(--navy);
background: var(--hover-fill); background: var(--hover-fill);
} }
.nav-list a.active { .nav-list a.active {
color: var(--primary); 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 { .nav-icon {
@@ -544,6 +561,9 @@ wa-button.logout-button::part(button) {
} }
.page-stage { .page-stage {
display: grid;
align-content: start;
gap: 20px;
animation: pageIn 180ms ease-out; animation: pageIn 180ms ease-out;
} }
@@ -556,7 +576,7 @@ wa-button.logout-button::part(button) {
.page-heading { .page-heading {
display: flex; display: flex;
margin-bottom: 28px; margin-bottom: 8px;
align-items: end; align-items: end;
justify-content: space-between; justify-content: space-between;
gap: 24px; gap: 24px;
@@ -634,7 +654,6 @@ wa-button.logout-button::part(button) {
.metric-grid { .metric-grid {
display: grid; display: grid;
margin-bottom: 22px;
grid-template-columns: repeat(4, minmax(150px, 1fr)); grid-template-columns: repeat(4, minmax(150px, 1fr));
gap: 16px; gap: 16px;
} }
@@ -923,12 +942,14 @@ td strong {
display: flex; display: flex;
max-width: 760px; max-width: 760px;
margin-bottom: 24px; margin-bottom: 24px;
align-items: center;
gap: 10px; gap: 10px;
} }
.search-box { .search-box {
position: relative; position: relative;
display: block; display: block;
min-width: 0;
flex: 1; flex: 1;
} }
@@ -942,7 +963,13 @@ td strong {
} }
.search-box input { .search-box input {
display: block;
padding-left: 42px; padding-left: 42px;
margin: 0;
}
.search-form > wa-button {
flex: 0 0 auto;
} }
.empty-state { .empty-state {