one event
.cl-activity__bullet circle marker on the timeline
data-tone brand | success | warning | error | neutral (default)
.cl-activity__body
.cl-activity__title
.cl-activity__meta timestamp / actor
.cl-activity__detail optional secondary line
Markup:
Runway updated — base scenario reflects April closing balance
Finance · 27 Apr · 09:14
========================================================================== */
.cl-activity {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.cl-activity::before {
content: "";
position: absolute;
left: 11px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--border-subtle);
z-index: 0;
}
.cl-activity__item {
position: relative;
display: flex;
gap: var(--space-3);
padding: var(--space-3) 0;
z-index: 1;
}
.cl-activity__item + .cl-activity__item {
border-top: 1px solid var(--border-subtle);
}
.cl-activity__bullet {
position: relative;
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 2px;
border-radius: var(--radius-pill);
background: var(--bg-secondary);
border: 2px solid var(--border-strong);
z-index: 1;
}
.cl-activity__bullet::after {
content: "";
position: absolute;
inset: 4px;
border-radius: var(--radius-pill);
background: var(--text-muted);
}
.cl-activity__bullet[data-tone="brand"]::after { background: var(--brand-primary); }
.cl-activity__bullet[data-tone="success"]::after { background: var(--status-success); }
.cl-activity__bullet[data-tone="warning"]::after { background: var(--status-warning); }
.cl-activity__bullet[data-tone="error"]::after { background: var(--status-error); }
.cl-activity__bullet[data-tone="neutral"]::after { background: var(--status-neutral); }
.cl-activity__body {
flex: 1;
min-width: 0;
}
.cl-activity__title {
margin: 0;
font-size: var(--text-sm);
color: var(--text-primary);
line-height: var(--leading-snug);
}
.cl-activity__meta {
margin: 2px 0 0;
font-size: var(--text-xs);
color: var(--text-muted);
font-family: var(--font-mono);
}
.cl-activity__detail {
margin: var(--space-2) 0 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-snug);
}
/* ============================================================================
18. Table variants
----------------------------------------------------------------------------
These are modifiers on the existing .cl-table / .cl-table-wrap from §4.
.cl-table--numeric
Right-aligns every column except the first. Replaces the per-page
`text-align: right` inline styles littered through finance pages.
Override on a per-cell basis with text-align if needed.
.cl-table-wrap--scroll
Enables horizontal scroll inside the wrapper AND keeps the first
column sticky to the left edge. The first column gets a subtle
box-shadow on the right when content scrolls under it.
========================================================================== */
.cl-table--numeric tbody td:not(:first-child),
.cl-table--numeric thead th:not(:first-child) {
text-align: right;
font-variant-numeric: tabular-nums;
}
.cl-table--numeric tbody td:not(:first-child) {
font-family: var(--font-mono);
}
.cl-table-wrap--scroll {
overflow-x: auto;
scrollbar-width: thin;
}
.cl-table-wrap--scroll .cl-table {
min-width: max-content;
}
.cl-table-wrap--scroll .cl-table thead th:first-child,
.cl-table-wrap--scroll .cl-table tbody td:first-child {
position: sticky;
left: 0;
background: var(--bg-secondary);
z-index: 2;
/* subtle right-edge shadow that appears once content scrolls under */
box-shadow: 4px 0 6px -4px rgba(13, 31, 45, 0.10);
}
.cl-table-wrap--scroll .cl-table thead th:first-child {
z-index: 3;
}
[data-theme="dark"] .cl-table-wrap--scroll .cl-table thead th:first-child,
[data-theme="dark"] .cl-table-wrap--scroll .cl-table tbody td:first-child {
background: var(--bg-card);
box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.45);
}
/* ============================================================================
19. Tab panels
----------------------------------------------------------------------------
Companion to .cl-tabs (the triggers, in platform-shell.css). This is the
panel container + show/hide convention that every page using tabs needs.
Markup contract:
.........
Behaviour:
- cl-components.js auto-wires any [data-cl-tabs] block.
- Clicking a .cl-tab toggles [data-active] on the matching panel and
flips aria-selected on the triggers.
- Initial state: panel with [data-active] OR first panel if none set.
- Keyboard: ←/→ move between triggers, Home/End jump to first/last,
Space/Enter activate. Arrow nav matches WAI-ARIA tab pattern.
- Fires `cl-tabs:change` on the [data-cl-tabs] element with
`{detail: {value, panel, trigger}}`.
Use this everywhere instead of per-page display:none/block CSS.
========================================================================== */
.cl-tab-panels {
display: block;
}
.cl-tab-panel {
display: none;
}
.cl-tab-panel[data-active] {
display: block;
animation: cl-tab-fade var(--dur-base) var(--ease-standard);
}
@keyframes cl-tab-fade {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.cl-tab-panel[data-active] { animation: none; }
}
/* Optional grid variant — tabs that share a card with their panels */
.cl-tab-panels--card {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: var(--space-5);
}
/* ============================================================================
20. Section heading
----------------------------------------------------------------------------
Lightweight heading block for the top of a tab panel, card section, or any
sub-region inside .cl-main. Replaces inline
patterns and per-page workarounds (e.g. .panel-hd in Budget).
Use the toolbar modifier when actions sit alongside the title.
Markup — basic:
Scenarios
Compare the impact of cost and demand assumptions.
Markup — with actions:
Scenarios
Compare the impact of cost and demand assumptions.
At narrow viewports the actions wrap below the title group (flex-wrap).
========================================================================== */
.cl-section-hd {
display: block;
margin-bottom: var(--space-5);
}
.cl-section-hd__title {
margin: 0;
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--text-primary);
line-height: var(--leading-snug);
}
.cl-section-hd__sub {
margin: var(--space-1) 0 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-snug);
}
.cl-section-hd--toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.cl-section-hd__actions {
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
/* ============================================================================
21. Value state utilities
----------------------------------------------------------------------------
Inline text-color utilities for computed financial values. Apply on a
,
, or wrapping the number itself.
+IDR 1.4B
−IDR 320M
Intentionally minimal: just color. No background, padding, or border. If a
table needs tabular numerals, set font-variant-numeric: tabular-nums on
the cell (or use .cl-table--numeric from §18), not on the value class.
Toggle from JS with classList:
el.classList.toggle('cl-value--positive', delta > 0);
el.classList.toggle('cl-value--negative', delta < 0);
========================================================================== */
.cl-value--positive { color: var(--status-success); }
.cl-value--negative { color: var(--status-error); }