cameleer/cameleer-server
1
0
Fork 0
Code Issues 42 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d40833b96aa9ca25f65bfa107c753cc528a590bb
cameleer-server/ui/src/styles/log-panel.module.css

165 lines
3.3 KiB
CSS
Raw Normal View History

refactor: UI consistency — shared CSS, design system colors, no inline styles Phase 1: Extract 6 shared CSS modules (table-section, log-panel, rate-colors, refresh-indicator, chart-card, section-card) eliminating ~135 duplicate class definitions across 11 files. Phase 2: Replace all hardcoded hex colors in CSS modules with design system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4 undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised). Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG components with var() CSS custom properties. Fix Dashboard.tsx color prop. Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage, OidcCallback (previously 100% inline). Extract shared PageLoader component (replaces 3 copy-pasted spinner patterns). Move AppsTab static inline styles to CSS classes. Extract LayoutShell StarredList styles. 58 files changed, net -219 lines. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 14:55:54 +02:00
.logCard {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 420px;
}
fix(ui): suppress double scrollbar in log + timeline panels LogViewer and EventFeed each apply overflow-y:auto to their root container, which produced a nested scrollbar inside the InfiniteScrollArea that also scrolls. A flatScroll override class flattens the DS component so the outer InfiniteScrollArea owns the single scrollbar — matching the IntersectionObserver sentinels that drive infinite-load. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-17 14:38:15 +02:00
/*
* Flatten the internal scroll of @cameleer/design-system's LogViewer and
* EventFeed so their containing InfiniteScrollArea owns the scroll — one
* scrollbar per panel, IntersectionObserver sentinels stay meaningful.
*/
fix(ui): cascade flatScroll override to descendants EventFeed's overflow-y:auto lives on its inner .list, not the root where className lands. Extending .flatScroll to .flatScroll * covers nested scroll containers, and relaxing the root's height:100% (which EventFeed sets) lets content size naturally so the outer InfiniteScrollArea owns the single scrollbar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-17 14:44:26 +02:00
.flatScroll,
.flatScroll * {
fix(ui): suppress double scrollbar in log + timeline panels LogViewer and EventFeed each apply overflow-y:auto to their root container, which produced a nested scrollbar inside the InfiniteScrollArea that also scrolls. A flatScroll override class flattens the DS component so the outer InfiniteScrollArea owns the single scrollbar — matching the IntersectionObserver sentinels that drive infinite-load. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-17 14:38:15 +02:00
overflow: visible !important;
max-height: none !important;
}
fix(ui): cascade flatScroll override to descendants EventFeed's overflow-y:auto lives on its inner .list, not the root where className lands. Extending .flatScroll to .flatScroll * covers nested scroll containers, and relaxing the root's height:100% (which EventFeed sets) lets content size naturally so the outer InfiniteScrollArea owns the single scrollbar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-17 14:44:26 +02:00
/* EventFeed root is flex column with height:100% and its .list child has
flex:1 + overflow-y:auto. Breaking the height chain lets content size
to itself so the InfiniteScrollArea wrapper scrolls once. */
.flatScroll {
height: auto !important;
min-height: 0 !important;
}
refactor: UI consistency — shared CSS, design system colors, no inline styles Phase 1: Extract 6 shared CSS modules (table-section, log-panel, rate-colors, refresh-indicator, chart-card, section-card) eliminating ~135 duplicate class definitions across 11 files. Phase 2: Replace all hardcoded hex colors in CSS modules with design system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4 undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised). Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG components with var() CSS custom properties. Fix Dashboard.tsx color prop. Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage, OidcCallback (previously 100% inline). Extract shared PageLoader component (replaces 3 copy-pasted spinner patterns). Move AppsTab static inline styles to CSS classes. Extract LayoutShell StarredList styles. 58 files changed, net -219 lines. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 14:55:54 +02:00
.logHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
}
.logToolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-surface);
}
.logSearchWrap {
position: relative;
flex: 1;
min-width: 0;
}
.logSearchInput {
width: 100%;
padding: 5px 28px 5px 10px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
background: var(--bg-body);
color: var(--text-primary);
font-size: 12px;
font-family: var(--font-body);
outline: none;
}
.logSearchInput:focus {
border-color: var(--amber);
}
.logSearchInput::placeholder {
color: var(--text-faint);
}
.logSearchClear {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 14px;
padding: 0 4px;
line-height: 1;
}
.logClearFilters {
background: none;
border: none;
color: var(--text-muted);
font-size: 12px;
cursor: pointer;
padding: 2px 6px;
white-space: nowrap;
}
.logClearFilters:hover {
color: var(--text-primary);
}
.logEmpty {
padding: 24px;
text-align: center;
fix: WCAG AA contrast compliance for --text-muted/--text-faint, 12px font floor Override design system tokens in app root CSS: --text-muted raised to 4.5:1 contrast in both light (#766A5E) and dark (#9A9088) modes; --text-faint dark mode raised from catastrophic 1.4:1 to 3:1 (#6A6058). Migrate --text-faint usages on readable text (empty states, italic notes, buttons) to --text-muted. Raise all 10px and 11px font-size declarations to 12px floor. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-09 18:31:51 +02:00
color: var(--text-muted);
refactor: UI consistency — shared CSS, design system colors, no inline styles Phase 1: Extract 6 shared CSS modules (table-section, log-panel, rate-colors, refresh-indicator, chart-card, section-card) eliminating ~135 duplicate class definitions across 11 files. Phase 2: Replace all hardcoded hex colors in CSS modules with design system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4 undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised). Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG components with var() CSS custom properties. Fix Dashboard.tsx color prop. Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage, OidcCallback (previously 100% inline). Extract shared PageLoader component (replaces 3 copy-pasted spinner patterns). Move AppsTab static inline styles to CSS classes. Extract LayoutShell StarredList styles. 58 files changed, net -219 lines. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 14:55:54 +02:00
font-size: 12px;
}
.sortBtn,
.refreshBtn {
background: none;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
font-size: 13px;
padding: 2px 6px;
line-height: 1;
}
.sortBtn:hover,
.refreshBtn:hover {
color: var(--text-primary);
border-color: var(--amber);
}
.headerActions {
display: flex;
align-items: center;
gap: 6px;
}
fix(ui): Timeline uses EventFeed's internal scroll + load-older button EventFeed has its own search + filter toolbar inside the component. Wrapping it in InfiniteScrollArea made the toolbar scroll out of sight. Drop InfiniteScrollArea for the Timeline, give EventFeed a bounded-height flex container (it scrolls its own .list internally), and add an explicit 'Load older events' button for cursor pagination. Polling always on for events (low volume). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-17 15:25:48 +02:00
/* Timeline: EventFeed owns its own scroll (so its internal search/filter
toolbar stays pinned). Give it a bounded height and let its .list scroll.
Pagination via the explicit "Load older" button below, not scroll. */
.eventFeedContainer {
display: flex;
flex-direction: column;
max-height: 360px;
min-height: 0;
overflow: hidden;
}
.loadOlderBtn {
padding: 8px 12px;
border: none;
border-top: 1px solid var(--border-subtle);
background: var(--bg-surface);
color: var(--text-muted);
font-size: 12px;
cursor: pointer;
text-align: center;
font-family: var(--font-body);
}
.loadOlderBtn:hover:not(:disabled) {
color: var(--text-primary);
background: var(--bg-hover);
}
.loadOlderBtn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
Reference in New Issue Copy Permalink