81f85aa82d
Migrate all page components from the @cameleer/design-system v0.0.3 example UI, replacing mock data with real backend API hooks. This brings richer visuals (KpiStrip, GroupCard, RouteFlow, ProcessorTimeline, DateRangePicker, expandable rows) while preserving all existing API integration, auth, and routing infrastructure. Pages migrated: Dashboard, RoutesMetrics, RouteDetail, ExchangeDetail, AgentHealth, AgentInstance, OidcConfig, AuditLog, RBAC (Users/Groups/Roles). Also enhanced LayoutShell CommandPalette with real search data from catalog. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
154 lines
2.1 KiB
CSS
154 lines
2.1 KiB
CSS
.statStrip {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.tabContent {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.entityInfo {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.entityName {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.entityMeta {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-body);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.entityTags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.detailHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.detailHeaderInfo {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.detailName {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.detailEmail {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.metaGrid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 6px 16px;
|
|
margin-bottom: 16px;
|
|
font-size: 12px;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.metaLabel {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.metaValue {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.sectionTags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.createForm {
|
|
padding: 12px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
background: var(--bg-raised);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.createFormRow {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.createFormActions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.inheritedNote {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
font-family: var(--font-body);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.providerBadge {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.inherited {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.securitySection {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.securityRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
font-family: var(--font-body);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.passwordDots {
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.resetForm {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.resetInput {
|
|
width: 200px;
|
|
}
|