Refine settings IA with tabbed sections

This commit is contained in:
ejclaw
2026-05-04 01:37:56 +09:00
parent b8d8f10332
commit 1576bb67df
6 changed files with 246 additions and 150 deletions

View File

@@ -669,6 +669,7 @@ button:disabled {
.settings-nav button {
display: grid;
gap: 2px;
min-height: 52px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 12px;
@@ -685,7 +686,8 @@ button:disabled {
}
.settings-nav button:hover,
.settings-nav button:focus-visible {
.settings-nav button:focus-visible,
.settings-nav button[aria-selected='true'] {
transform: translateX(2px);
border-color: rgba(214, 130, 88, 0.24);
background: rgba(214, 130, 88, 0.08);
@@ -728,7 +730,7 @@ button:disabled {
.settings-row input,
.settings-row select {
min-height: 38px;
min-height: 44px;
padding: 0 12px;
border: 1px solid var(--panel-border);
border-radius: 10px;
@@ -929,7 +931,7 @@ button:disabled {
.settings-save,
.settings-restart {
min-height: 32px;
min-height: 44px;
padding: 0 14px;
border: 0;
border-radius: 999px;
@@ -1006,7 +1008,7 @@ button:disabled {
}
.settings-secondary {
min-height: 28px;
min-height: 36px;
padding: 0 10px;
border: 1px solid var(--panel-border-strong);
border-radius: 999px;
@@ -1050,7 +1052,7 @@ button:disabled {
.settings-moa-grid input,
.settings-moa-grid select {
min-height: 32px;
min-height: 40px;
min-width: 0;
padding: 0 10px;
border: 1px solid var(--panel-border);
@@ -1141,7 +1143,7 @@ button:disabled {
}
.settings-delete {
min-height: 28px;
min-height: 36px;
padding: 0 10px;
border: 1px solid rgba(224, 100, 75, 0.32);
border-radius: 999px;
@@ -1178,7 +1180,7 @@ button:disabled {
.settings-add-token button {
align-self: end;
min-height: 36px;
min-height: 44px;
padding: 0 14px;
border: 0;
border-radius: 999px;
@@ -1204,8 +1206,7 @@ button:disabled {
}
.settings-nav {
grid-template-columns: repeat(5, minmax(120px, 1fr));
overflow-x: auto;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.settings-apply-card {
@@ -1215,6 +1216,14 @@ button:disabled {
}
@media (max-width: 720px) {
.settings-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-nav button {
min-height: 58px;
}
.settings-apply-card {
align-items: stretch;
grid-template-columns: 1fr;