7b73b5c9c5
Adds sensitiveKeys/globalSensitiveKeys/mergedSensitiveKeys fields to ApplicationConfig, unwraps the new AppConfigResponse envelope in useApplicationConfig, and renders an editable Sensitive Keys section with read-only global pills and add/remove app-specific key tags. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
123 lines
1.9 KiB
CSS
123 lines
1.9 KiB
CSS
.page {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 4rem;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.toolbarActions {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 16px;
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.meta {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.sectionSummary {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.settingsGrid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px 24px;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.numberInput {
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-body);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
font-family: var(--font-mono);
|
|
outline: none;
|
|
max-width: 360px;
|
|
}
|
|
|
|
.numberInput:focus {
|
|
border-color: var(--amber);
|
|
}
|
|
|
|
.tapBadges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.editBanner {
|
|
padding: 8px 16px;
|
|
background: color-mix(in srgb, var(--amber) 8%, transparent);
|
|
border: 1px solid var(--amber);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
color: var(--text-primary);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.sensitiveKeysRow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.pillList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
min-height: 28px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sensitiveKeyInput {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
max-width: 400px;
|
|
}
|