91788737b0
Some checks failed
Build & Publish / publish (push) Failing after 45s
- Add ButtonGroup primitive: multi-select toggle with colored dot indicators - Replace FilterPill status filters with ButtonGroup in TopBar and EventFeed - Add light/dark mode toggle to TopBar (moon/sun icon) - Fix dark theme: add --purple/--purple-bg tokens, replace all hardcoded #F3EEFA/#7C3AED with tokens, fix --amber-light text contrast in sidebar, brighten --sidebar-text/--sidebar-muted tokens, use color-mix for ProcessorTimeline bar fills - Remove all "shift" references (presets, labels, badges) - Shrink SegmentedTabs height to match search bar and ButtonGroup - Update COMPONENT_GUIDE.md with new components and updated descriptions - Add ButtonGroup demo to Inventory - Add README.md with setup instructions and navigation guide Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
74 lines
1.2 KiB
CSS
74 lines
1.2 KiB
CSS
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 7px 12px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--sidebar-text);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.12s;
|
|
text-decoration: none;
|
|
border-left: 3px solid transparent;
|
|
margin-bottom: 1px;
|
|
user-select: none;
|
|
}
|
|
|
|
.item:hover {
|
|
background: var(--sidebar-hover);
|
|
color: var(--sidebar-text);
|
|
}
|
|
|
|
.item.active {
|
|
background: var(--sidebar-active);
|
|
color: var(--amber);
|
|
border-left-color: var(--amber);
|
|
}
|
|
|
|
.health {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
.name {
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.meta {
|
|
font-size: 11px;
|
|
color: var(--sidebar-muted);
|
|
font-family: var(--font-mono);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item.active .meta {
|
|
color: rgba(240, 217, 168, 0.6);
|
|
}
|
|
|
|
.count {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--sidebar-muted);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
padding: 1px 6px;
|
|
border-radius: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item.active .count {
|
|
background: rgba(198, 130, 14, 0.2);
|
|
color: var(--amber);
|
|
}
|