` paints
`colorBgContainer` internally. This grid hand-rolls its markup, so nothing
painted a surface and the page canvas showed straight through the rows.
That also left `surface.hover` and `surface.selected` — both alpha values
in the dark scheme, designed to composite over `raised` — compositing over
`canvas` instead. */
.x2-data-grid__viewport {
overflow-x: auto;
min-width: 0;
background: var(--x2-color-surface-raised);
border: 1px solid var(--x2-color-border-default);
border-radius: var(--x2-radius-base, 6px);
}
.x2-data-grid__table {
width: 100%;
border-collapse: collapse;
font-size: var(--x2-font-size-base, 14px);
}
/* Density selects a padding pair once, on the root. The cell rules below are
density-agnostic, so adding a density never means touching them. These two
properties are stylesheet-local and deliberately un-prefixed: `--x2-*` names
are reserved for real tokens and are checked by tokens.test.ts. */
.x2-data-grid--comfortable {
--grid-pad-block: var(--x2-density-comfortable-table-cell-padding-block);
--grid-pad-inline: var(--x2-density-comfortable-table-cell-padding-inline);
}
.x2-data-grid--standard {
--grid-pad-block: var(--x2-density-standard-table-cell-padding-block);
--grid-pad-inline: var(--x2-density-standard-table-cell-padding-inline);
}
.x2-data-grid--compact {
--grid-pad-block: var(--x2-density-compact-table-cell-padding-block);
--grid-pad-inline: var(--x2-density-compact-table-cell-padding-inline);
}
.x2-data-grid__header-cell {
text-align: start;
font-weight: var(--x2-font-weight-semibold, 600);
color: var(--x2-color-text-secondary);
background: var(--x2-color-surface-sunken);
border-block-end: 1px solid var(--x2-color-border-default);
padding: var(--grid-pad-block) var(--grid-pad-inline);
white-space: nowrap;
}
/* Only reachable via `maxHeight` (see `.x2-data-grid__viewport` above), so an
unconstrained grid's header cells are never sticky. The header cell's own
`background: var(--x2-color-surface-sunken)` above is what keeps it opaque as
rows scroll beneath it — without that, a sticky cell would let row content
show through.
This is the middle of three stacking tiers a header cell can end up in —
see the pinned rule below for the tier above this one and why a plain
sticky header cell needs to lose to it. Every header cell needs a tier at
all once pinned *body* cells exist (further below): both are now
`position: sticky`, and without an explicit `z-index` a later-painted,
equal-specificity sticky body cell would stack above an earlier-painted
sticky header cell as it scrolls vertically past underneath — the
"positioned beats static" default that kept an unpinned body row safely
behind the header stops helping once the body row is positioned too. */
.x2-data-grid__viewport--constrained .x2-data-grid__header-cell {
position: sticky;
top: 0;
z-index: var(--x2-z-sticky, 20);
}
/* Pinned columns (`DataGridColumn.pinned`, or the synthetic selection/action
columns' own defaults — see `internal/pinning.ts`) need `position: sticky`
on *both* the header and body cell so the column stays in the viewport
during horizontal scroll — independent of, and combinable with, the
`--constrained` vertical stickiness above: a corner cell (both pinned and,
once `maxHeight` constrains the viewport, sticky-header) simply gets `top`
*and* `left`/`right` at once from the two rules together. `left` / `right`
are the caller's own computed cumulative offsets
(`internal/pinning.ts`'s `pinnedCellPresentation`, reading TanStack's
`column.getStart` / `getAfter`), set inline exactly like Task 1's ``
width: computed data, not a design decision.
A pinned header cell needs to outrank a *plain* sticky header cell, not
merely tie with it: the plain cells are later in DOM order (the pinned
column, left or right, sits at an edge), so an equal z-index would let
paint order — not which cell is meant to stay visible — decide, and the
pinned corner cell (e.g. the select-all checkbox) would scroll under an
ordinary header cell sliding past it horizontally. `calc(... + 1)` puts
this tier one step above the plain header's `--x2-z-sticky` rather than
inventing a new named tier for a difference this local — there is no
`--x2-z-*` token for "sticky, but the pinned kind", and one is not
warranted for a single stylesheet rule (`tokens.test.ts` would also reject
a `var(--x2-…)` that is not real). The corner cell itself matches *both*
this selector and the plain header selector above; this one is written
with the same two-class specificity as the plain header selector — `.
x2-data-grid__header-cell` repeated is not redundant, it is what makes the
two rules tie on specificity — and, appearing later in the stylesheet,
wins that tie exactly the way `.x2-data-grid__row--selected`'s pinned
overrides do further down (same pattern, same reasoning: matched
specificity plus source order, not left to accident).
Stacking order overall, highest first: pinned header (this rule) > plain
sticky header (above) > pinned body cell (below) > an ordinary, unpositioned
cell. See `DataGridProps.maxHeight` and `DataGridColumn.pinned` in
`types.ts` for the prop-level version of this interaction. */
.x2-data-grid__header-cell.x2-data-grid__header-cell--pinned-left,
.x2-data-grid__header-cell.x2-data-grid__header-cell--pinned-right {
position: sticky;
z-index: calc(var(--x2-z-sticky, 20) + 1);
}
.x2-data-grid__cell {
padding: var(--grid-pad-block) var(--grid-pad-inline);
border-block-end: 1px solid var(--x2-color-border-subtle);
color: var(--x2-color-text-primary);
vertical-align: middle;
}
.x2-data-grid__cell--right,
.x2-data-grid__header-cell--right {
text-align: end;
font-variant-numeric: tabular-nums;
}
.x2-data-grid__cell--center,
.x2-data-grid__header-cell--center {
text-align: center;
}
/* The single spanning cell used for the loading skeleton and the empty state
(see DataGrid's `visibleColumnCount`-wide `colSpan`). Centred so a short
message or skeleton block doesn't hug the left edge of a wide grid. */
.x2-data-grid__cell--status {
text-align: center;
}
/* Record rows only. The loading/empty row carries `--status` and is excluded:
it is not a record, and a hover highlight on it reads as interactive when
there is nothing there to interact with. */
.x2-data-grid__row:not(.x2-data-grid__row--status):hover .x2-data-grid__cell {
background: var(--x2-color-surface-hover);
}
.x2-data-grid__row--clickable {
cursor: pointer;
}
.x2-data-grid__row--disabled .x2-data-grid__cell {
color: var(--x2-color-text-disabled);
}
/* The synthetic row-actions column (see `internal/actionsColumn.tsx`):
shrink-wrapped and right-aligned so a narrow action group never stretches
the column, and never wraps its buttons onto a second line. */
.x2-data-grid__cell--actions {
width: 1%;
white-space: nowrap;
text-align: right;
}
/* The synthetic row-selection column (see `internal/selectionColumn.tsx`):
shrink-wrapped so the checkbox never stretches the column. */
.x2-data-grid__cell--select {
width: 1%;
white-space: nowrap;
}
/* A selected record row. `> .x2-data-grid__cell` rather than the bare
descendant selector so a synthetic column's `| ` (no format/align
classes to also match) still picks it up. */
.x2-data-grid__row--selected > .x2-data-grid__cell {
background: var(--x2-color-surface-selected);
}
/* A pinned body cell (see the header's `--pinned-left` / `--pinned-right`
above) needs its own opaque background — `surface.raised`, the same token
`.x2-data-grid__viewport` paints the whole grid with — or an unpinned
cell sliding past underneath during horizontal scroll would show through
it. `z-index: raised`, one tier below the header's `sticky` tier above, so
a pinned body cell still stacks over an ordinary (non-positioned, `auto`
z-index) cell it scrolls past, without ever outranking the header. */
.x2-data-grid__cell--pinned-left,
.x2-data-grid__cell--pinned-right {
position: sticky;
z-index: var(--x2-z-raised, 10);
background: var(--x2-color-surface-raised);
}
/* A pinned cell's row-state colour must be both correct (matching the rest
of the row, not left plain while its neighbours tint) and guaranteed
opaque (or a cell scrolling past underneath during horizontal scroll
shows through it) — and those two requirements pull against each other
differently per scheme. In `src/tokens/colors.ts`'s *light* palette,
`surface.hover` (`neutral[100]`) and `surface.selected` (`brandBlue[50]`)
are already plain, fully opaque hex — binding to them directly would be
enough on its own. In the *dark* palette, though, both are `withAlpha(...)`
values, deliberately translucent so they composite over whatever is
behind them — correct for an ordinary cell, which always has the
viewport's own opaque `surface.raised` immediately behind it (see the
note above `.x2-data-grid__viewport`), but not for a pinned one: during
horizontal scroll, what ends up behind it in paint order is another cell
of the same row, not the viewport, so binding the alpha value directly
would let that cell's own content bleed through rather than reading as
one solid highlighted row.
One rule that is correct in both schemes without special-casing either:
paint the row-state colour as a `background-image` layer — a solid-colour
`linear-gradient(colour, colour)`, the standard way to give a non-final
background layer a plain colour rather than an actual image — on top of
an explicit, always-opaque `background-color: surface.raised`. The two
layers composite on the cell's own box, never against whatever sits
behind it, so the result is opaque even when the top layer's colour is
itself translucent (dark scheme), and is visually identical to binding
the colour directly where the top layer is already opaque (light scheme).
Split into two rules (hover, selected) rather than one shared declaration,
since the two states use different tokens; each is matched
selector-for-selector against its own original rule above (same
specificity, later source order), so it reliably overrides that rule
rather than depending on cascade tie-breaking accidentally going the
right way — and, not touching the other original rule's selector at all,
preserves the existing hover-beats-selected precedence (0,4,0 outranks
0,2,0) for a row that is simultaneously hovered and selected. */
.x2-data-grid__row:not(.x2-data-grid__row--status):hover .x2-data-grid__cell--pinned-left,
.x2-data-grid__row:not(.x2-data-grid__row--status):hover .x2-data-grid__cell--pinned-right {
background-color: var(--x2-color-surface-raised);
background-image: linear-gradient(var(--x2-color-surface-hover), var(--x2-color-surface-hover));
}
.x2-data-grid__row--selected > .x2-data-grid__cell--pinned-left,
.x2-data-grid__row--selected > .x2-data-grid__cell--pinned-right {
background-color: var(--x2-color-surface-raised);
background-image: linear-gradient(
var(--x2-color-surface-selected),
var(--x2-color-surface-selected)
);
}
/* A bare button: it inherits the header cell's type and colour rather than
looking like a control dropped on top of it. `.x2-focusable` (defined at
the bottom of this file) supplies the visible focus ring, so a sortable
header's focus treatment matches every other interactive element the
design system renders itself. `aria-sort` on the ` | ` — not this icon —
is what carries the sort state to assistive technology. */
.x2-data-grid__sort-button {
display: inline-flex;
align-items: center;
gap: var(--x2-space-xxs, 2px);
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
.x2-data-grid__sort-icon {
display: inline-flex;
flex-direction: column;
line-height: 0;
font-size: var(--x2-font-size-xs, 11px);
color: var(--x2-color-text-disabled);
}
/* Result-range summary at the start, pagination control at the end. Mirrors
`.x2-data-table__footer` / `.x2-data-table__summary` so the two tables'
footers agree in layout as well as wording. */
.x2-data-grid__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--x2-space-md, 12px);
flex-wrap: wrap;
min-width: 0;
}
.x2-data-grid__footer-summary {
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
}
/* Bulk-action bar that replaces the toolbar while rows are selected. Mirrors
`.x2-data-table__selection` exactly — same tokens, same structure — so a
DataGrid and a DataTable selection bar agree on the same screen. */
.x2-data-grid__selection {
display: flex;
align-items: center;
gap: var(--x2-space-md, 12px);
flex-wrap: wrap;
padding: var(--x2-space-sm, 8px) var(--x2-space-md, 12px);
border: 1px solid var(--x2-color-tone-brand-border);
border-radius: var(--x2-radius-base, 6px);
background: var(--x2-color-surface-selected);
color: var(--x2-color-text-primary);
font-size: var(--x2-font-size-sm, 12px);
}
.x2-data-grid__selection-count {
font-weight: var(--x2-font-weight-semibold, 600);
}
.x2-data-grid__selection-actions {
margin-inline-start: auto;
display: flex;
gap: var(--x2-space-sm, 8px);
}
/* ============================================================== filter bar */
.x2-filter-bar {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
min-width: 0;
}
.x2-filter-bar__row {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
flex-wrap: wrap;
min-width: 0;
}
.x2-filter-bar__field {
min-width: 0;
flex: 0 0 auto;
}
.x2-filter-bar__field--grow {
flex: 1 1 220px;
}
.x2-filter-bar__actions {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
margin-inline-start: auto;
flex: 0 0 auto;
}
.x2-filter-bar__chips {
display: flex;
align-items: center;
gap: var(--x2-space-xs, 4px);
flex-wrap: wrap;
min-width: 0;
}
.x2-chip-close {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: var(--x2-color-text-muted);
cursor: pointer;
font-size: var(--x2-font-size-xs, 11px);
line-height: 1;
}
.x2-chip-close:hover {
color: var(--x2-color-text-primary);
}
.x2-filter-bar__chips-label {
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
margin-inline-end: var(--x2-space-xxs, 2px);
}
/* ============================================================== empty/error */
.x2-status-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--x2-space-md, 12px);
text-align: center;
padding: var(--x2-space-xxxl, 40px) var(--x2-space-xl, 24px);
min-height: 220px;
min-width: 0;
}
.x2-status-block--inline {
min-height: 0;
padding: var(--x2-space-xl, 24px) var(--x2-space-base, 16px);
}
.x2-status-block--panel {
border: 1px solid var(--x2-color-border-subtle);
border-radius: var(--x2-radius-md, 8px);
background: var(--x2-color-surface-raised);
}
.x2-status-block__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--x2-radius-pill, 999px);
background: var(--x2-color-surface-sunken);
color: var(--x2-color-text-muted);
font-size: 22px;
}
.x2-status-block__icon--danger {
background: var(--x2-color-tone-danger-subtle);
color: var(--x2-color-tone-danger-text);
}
.x2-status-block__icon--warning {
background: var(--x2-color-tone-warning-subtle);
color: var(--x2-color-tone-warning-text);
}
.x2-status-block__icon--brand {
background: var(--x2-color-tone-brand-subtle);
color: var(--x2-color-tone-brand-text);
}
.x2-status-block__icon--success {
background: var(--x2-color-tone-success-subtle);
color: var(--x2-color-tone-success-text);
}
.x2-status-block__title {
margin: 0;
font-size: var(--x2-font-size-lg, 16px);
font-weight: var(--x2-font-weight-semibold, 600);
color: var(--x2-color-text-primary);
line-height: var(--x2-line-height-tight, 1.3);
}
.x2-status-block__description {
margin: 0;
max-width: 46ch;
font-size: var(--x2-font-size-base, 14px);
color: var(--x2-color-text-muted);
line-height: var(--x2-line-height-base, 1.5715);
}
.x2-status-block__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--x2-space-sm, 8px);
flex-wrap: wrap;
margin-block-start: var(--x2-space-xs, 4px);
}
.x2-status-block__detail {
width: 100%;
max-width: 720px;
text-align: start;
margin-block-start: var(--x2-space-sm, 8px);
}
.x2-status-block__detail-body {
margin: var(--x2-space-sm, 8px) 0 0;
padding: var(--x2-space-md, 12px);
border-radius: var(--x2-radius-sm, 4px);
background: var(--x2-color-surface-sunken);
border: 1px solid var(--x2-color-border-subtle);
font-family: var(--x2-font-family-mono, monospace);
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-secondary);
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
max-height: 240px;
}
/* ============================================================ loading state */
.x2-loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--x2-space-md, 12px);
min-height: 220px;
padding: var(--x2-space-xxxl, 40px) var(--x2-space-xl, 24px);
color: var(--x2-color-text-muted);
font-size: var(--x2-font-size-sm, 12px);
}
.x2-loading-state--inline {
min-height: 0;
padding: var(--x2-space-base, 16px);
flex-direction: row;
}
.x2-loading-state__skeleton {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--x2-space-md, 12px);
}
/* ============================================================== form grid */
.x2-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: var(--x2-space-base, 16px);
}
.x2-form-grid--cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.x2-form-grid--cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.x2-form-grid--cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.x2-form-grid__span-2 {
grid-column: span 2;
}
.x2-form-grid__span-3 {
grid-column: span 3;
}
.x2-form-grid__span-4 {
grid-column: span 4;
}
/* Four tracks are too tight between `md` and `lg`: four fields in 768px is
~180px each, narrower than anything else the system ships, where three
tracks still give ~245px. A four-track grid drops to two there, which keeps
related fields paired instead of stacking them.
The span resets are not decoration. `grid-column: span 3` inside a
two-track grid creates an implicit third column rather than clamping —
the same reason the below-`md` block resets spans to `auto`. */
@media (min-width: 768px) and (max-width: 991.98px) {
.x2-form-grid--cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.x2-form-grid--cols-4 .x2-form-grid__span-3,
.x2-form-grid--cols-4 .x2-form-grid__span-4 {
grid-column: span 2;
}
}
/* Below `md` every form is one column: two inputs sharing 360px are narrower
than the values they hold. Spans are neutralised so they cannot create an
implicit extra column. */
@media (max-width: 767.98px) {
.x2-form-grid {
grid-template-columns: minmax(0, 1fr);
}
.x2-form-grid .x2-form-grid__span-2,
.x2-form-grid .x2-form-grid__span-3,
.x2-form-grid .x2-form-grid__span-4 {
grid-column: auto;
}
}
/* A `readOnly` field's value, in place of its control. `min-height` matches
the current density preset's standard control height, so a read-only row
sits at the same height as an editable sibling instead of collapsing to
the text's own line box. */
.x2-field-readonly {
display: inline-flex;
align-items: center;
min-height: var(--x2-control-md, 32px);
padding-block: var(--x2-space-xs, 4px);
}
/* A `boolean` field carries its label beside the control, so its `Form.Item`
has no label above. In a multi-column grid the row would otherwise float at
the top of its cell; bottom-aligning it puts the control on the same line
as the neighbouring controls. */
.x2-form-item--label-beside {
align-self: end;
}
/* Switch, then its label as ordinary text — never painted inside the track. */
.x2-field-switch {
display: inline-flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
min-height: var(--x2-control-md, 32px);
}
.x2-field-switch__label {
cursor: pointer;
color: var(--x2-color-text-primary);
}
/* The line under a capped `tags` field: the field's help, then "3 of 20". */
.x2-field-help--count {
display: flex;
justify-content: space-between;
gap: var(--x2-space-base, 16px);
}
/* The form body shared by every surface — a modal, a drawer, a full page or a
wizard step each render one of these around their own footer. */
.x2-entity-form {
display: flex;
flex-direction: column;
gap: var(--x2-space-lg, 20px);
min-width: 0;
}
/* ========================================================== form surfaces */
/* Shared by FormDrawer, FormModal and RecordModal's edit mode. */
.x2-form-surface__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--x2-space-sm, 8px);
}
.x2-form-surface__footer-status {
margin-inline-end: auto;
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
}
.x2-form-surface__body {
display: flex;
flex-direction: column;
gap: var(--x2-space-lg, 20px);
min-width: 0;
}
.x2-form-surface__description {
margin: 0;
color: var(--x2-color-text-muted);
}
/* --------------------------------------------------------- record modal */
.x2-record-modal__heading {
display: flex;
flex-direction: column;
gap: var(--x2-space-xxs, 2px);
min-width: 0;
padding-inline-end: var(--x2-space-xl, 24px);
}
.x2-record-modal__eyebrow {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
font-size: var(--x2-font-size-xs, 11px);
font-weight: var(--x2-font-weight-regular, 400);
color: var(--x2-color-text-muted);
}
.x2-record-modal__editing {
padding-inline: var(--x2-space-xs, 4px);
border-radius: var(--x2-radius-xs, 2px);
background: var(--x2-color-tone-brand-subtle);
color: var(--x2-color-tone-brand-text);
font-weight: var(--x2-font-weight-semibold, 600);
letter-spacing: var(--x2-letter-spacing-caps, 0.06em);
text-transform: uppercase;
}
.x2-record-modal__title-row {
display: flex;
align-items: center;
gap: var(--x2-space-md, 12px);
flex-wrap: wrap;
min-width: 0;
}
.x2-record-modal__title {
font-size: var(--x2-font-size-lg, 16px);
font-weight: var(--x2-font-weight-semibold, 600);
line-height: var(--x2-line-height-tight, 1.3);
color: var(--x2-color-text-primary);
min-width: 0;
}
/**
* A modal that grows past the viewport is worse than one that scrolls: the
* footer must stay reachable, because Close and Save both live there.
*/
.x2-record-modal__body {
display: flex;
flex-direction: column;
gap: var(--x2-space-lg, 20px);
min-width: 0;
max-height: 60vh;
overflow-y: auto;
}
.x2-record-modal__description {
margin: 0;
color: var(--x2-color-text-secondary);
line-height: var(--x2-line-height-base, 1.5715);
}
.x2-record-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--x2-space-sm, 8px);
flex-wrap: wrap;
}
.x2-record-modal__footer-actions {
margin-inline-end: auto;
}
/* ========================================================= record navigator */
.x2-record-navigator {
display: inline-flex;
align-items: center;
gap: var(--x2-space-xs, 4px);
padding: 2px;
border: 1px solid var(--x2-color-border-default);
border-radius: var(--x2-radius-base, 6px);
background: var(--x2-color-surface-raised);
}
.x2-record-navigator__position {
padding-inline: var(--x2-space-sm, 8px);
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ============================================================ audit timeline */
.x2-audit-timeline {
min-width: 0;
}
.x2-audit-timeline__entry {
display: flex;
flex-direction: column;
gap: var(--x2-space-xxs, 2px);
min-width: 0;
padding-block-end: var(--x2-space-xs, 4px);
}
.x2-audit-timeline__headline {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--x2-space-xs, 4px);
min-width: 0;
font-size: var(--x2-font-size-base, 14px);
color: var(--x2-color-text-primary);
}
.x2-audit-timeline__actor {
font-weight: var(--x2-font-weight-semibold, 600);
}
.x2-audit-timeline__time {
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
white-space: nowrap;
}
.x2-audit-timeline__description {
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-secondary);
margin: 0;
}
.x2-audit-timeline__changes {
display: grid;
grid-template-columns: minmax(80px, max-content) 1fr;
gap: var(--x2-space-xxs, 2px) var(--x2-space-md, 12px);
margin-block-start: var(--x2-space-xs, 4px);
padding: var(--x2-space-sm, 8px) var(--x2-space-md, 12px);
border-radius: var(--x2-radius-sm, 4px);
background: var(--x2-color-surface-sunken);
border: 1px solid var(--x2-color-border-subtle);
font-size: var(--x2-font-size-sm, 12px);
}
.x2-audit-timeline__change-field {
color: var(--x2-color-text-muted);
}
.x2-audit-timeline__change-values {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
flex-wrap: wrap;
min-width: 0;
}
.x2-audit-timeline__change-before {
color: var(--x2-color-text-muted);
text-decoration: line-through;
}
.x2-audit-timeline__change-after {
color: var(--x2-color-text-primary);
font-weight: var(--x2-font-weight-medium, 500);
}
/* =========================================================== entity select */
.x2-entity-option {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
min-width: 0;
padding-block: 2px;
}
.x2-entity-option__body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
line-height: var(--x2-line-height-tight, 1.3);
}
.x2-entity-option__primary {
font-size: var(--x2-font-size-base, 14px);
color: var(--x2-color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.x2-entity-option__secondary {
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.x2-entity-option__trailing {
flex: 0 0 auto;
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
}
/* ============================================================ value display */
.x2-value {
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
}
.x2-value--negative {
color: var(--x2-color-tone-danger-text);
}
.x2-value--positive {
color: var(--x2-color-tone-success-text);
}
.x2-value--muted {
color: var(--x2-color-text-muted);
}
.x2-value--strong {
font-weight: var(--x2-font-weight-semibold, 600);
}
.x2-value--placeholder {
color: var(--x2-color-text-disabled);
}
.x2-value__currency {
color: var(--x2-color-text-muted);
margin-inline-end: 2px;
font-size: 0.92em;
}
/* ============================================================== dashboard */
.x2-dashboard {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--x2-space-base, 16px);
min-width: 0;
}
.x2-dashboard__cell {
min-width: 0;
grid-column: span 12;
display: flex;
}
/* Tiles in the same row match heights even when one carries a footnote. */
.x2-dashboard__cell > * {
flex: 1 1 auto;
min-width: 0;
}
@media (min-width: 768px) {
.x2-dashboard__cell--md-6 {
grid-column: span 6;
}
.x2-dashboard__cell--md-4 {
grid-column: span 4;
}
.x2-dashboard__cell--md-8 {
grid-column: span 8;
}
}
@media (min-width: 1200px) {
.x2-dashboard__cell--xl-3 {
grid-column: span 3;
}
.x2-dashboard__cell--xl-4 {
grid-column: span 4;
}
.x2-dashboard__cell--xl-6 {
grid-column: span 6;
}
.x2-dashboard__cell--xl-8 {
grid-column: span 8;
}
.x2-dashboard__cell--xl-9 {
grid-column: span 9;
}
.x2-dashboard__cell--xl-12 {
grid-column: span 12;
}
}
.x2-metric {
display: flex;
flex-direction: column;
gap: var(--x2-space-xs, 4px);
min-width: 0;
}
/*
* A clickable metric card is a control, and looks like one.
*
* The component gives it `role="button"` and a tab stop; this gives it the
* focus ring every other control in the system has, and a lift on hover so
* the affordance is visible before the pointer is over it. "Every tile links
* to filtered records" is only true if the tile says so.
*/
.x2-metric-card--interactive {
transition:
box-shadow var(--x2-duration-fast, 120ms) var(--x2-easing-standard, ease),
transform var(--x2-duration-fast, 120ms) var(--x2-easing-standard, ease);
}
.x2-metric-card--interactive:hover {
box-shadow: var(--x2-shadow-sm);
}
.x2-metric-card--interactive:focus-visible {
outline: 2px solid var(--x2-color-border-focus);
outline-offset: 2px;
}
/*
* A link that sits in a panel's action slot.
*
* Ant Design's link button carries the horizontal padding every button has,
* which pushes its text away from the panel edge and off the title's baseline.
* Applications were passing `style={{ paddingInline: 0 }}` by hand; this is
* the sanctioned name for it, and the library's own link actions use it.
*
* A class rather than a rule on `.x2-section__actions > button`, because a
* normal button in that slot needs its padding - only a link is meant to read
* as text.
*/
.x2-link-action {
padding-inline: 0;
height: auto;
}
.x2-metric__label {
display: flex;
align-items: center;
gap: var(--x2-space-xs, 4px);
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
min-width: 0;
}
.x2-metric__value {
flex-shrink: 0;
font-size: var(--x2-font-size-xxl, 24px);
font-weight: var(--x2-font-weight-semibold, 600);
line-height: var(--x2-line-height-tight, 1.3);
color: var(--x2-color-text-primary);
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: var(--x2-letter-spacing-tight, -0.01em);
}
/* The visual gives way before the figure does: it may shrink to nothing, the
number never wraps or clips. */
.x2-metric__visual {
display: inline-flex;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
}
.x2-metric__delta {
display: inline-flex;
align-items: center;
gap: var(--x2-space-xxs, 2px);
font-size: var(--x2-font-size-sm, 12px);
font-variant-numeric: tabular-nums;
}
.x2-metric__delta--empty {
/* The height of a delta line, kept when there is no delta, so the footnote
sits level with the neighbouring cards'. */
min-height: calc(var(--x2-font-size-sm, 12px) * var(--x2-line-height-base, 1.5715));
}
.x2-metric__delta--up {
color: var(--x2-color-tone-success-text);
}
.x2-metric__delta--down {
color: var(--x2-color-tone-danger-text);
}
.x2-metric__delta--flat {
color: var(--x2-color-text-muted);
}
.x2-metric__footnote {
font-size: var(--x2-font-size-xs, 11px);
color: var(--x2-color-text-muted);
}
/* ========================================================== master/detail */
.x2-master-detail {
display: flex;
min-width: 0;
min-height: 0;
flex: 1 1 auto;
height: 100%;
}
.x2-master-detail__list {
display: flex;
flex-direction: column;
flex: 0 0 auto;
min-height: 0;
min-width: 0;
border-inline-end: 1px solid var(--x2-color-border-subtle);
background: var(--x2-color-surface-raised);
}
.x2-master-detail__list-header {
flex: 0 0 auto;
padding: var(--x2-space-md, 12px);
border-bottom: 1px solid var(--x2-color-border-subtle);
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
}
.x2-master-detail__list-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.x2-master-detail__detail {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
overflow-y: auto;
background: var(--x2-color-surface-canvas);
}
.x2-master-detail__empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
@media (max-width: 991.98px) {
.x2-master-detail {
flex-direction: column;
}
.x2-master-detail__list {
width: 100% !important;
max-height: 40dvh;
border-inline-end: 0;
border-bottom: 1px solid var(--x2-color-border-subtle);
}
}
/* -------------------------------------------------------- selectable list */
.x2-record-list {
display: flex;
flex-direction: column;
min-width: 0;
}
.x2-record-list__item {
display: flex;
align-items: flex-start;
gap: var(--x2-space-md, 12px);
width: 100%;
padding: var(--x2-space-md, 12px);
border: 0;
border-bottom: 1px solid var(--x2-color-border-subtle);
border-inline-start: 2px solid transparent;
background: transparent;
text-align: start;
cursor: pointer;
color: inherit;
font: inherit;
min-width: 0;
transition: background var(--x2-duration-fast, 0.1s) var(--x2-easing-standard);
}
.x2-record-list__item:hover {
background: var(--x2-color-surface-hover);
}
/*
* Selection is carried by three things, not one.
*
* `surface.selected` is a pale tint by design - it has to sit under a whole
* table row without shouting - and on its own it is hard to see which article
* in a list is open. The accent bar widens and the title takes weight, so the
* selected row is legible in both schemes, at a glance, and without relying on
* colour alone.
*/
.x2-record-list__item[aria-selected='true'] {
background: var(--x2-color-surface-selected);
border-inline-start-width: 3px;
border-inline-start-color: var(--x2-color-tone-brand-base);
}
.x2-record-list__item[aria-selected='true'] .x2-record-list__title {
font-weight: var(--x2-font-weight-semibold, 600);
color: var(--x2-color-tone-brand-text);
}
.x2-record-list__item[disabled],
.x2-record-list__item[aria-disabled='true'] {
opacity: 0.55;
cursor: not-allowed;
}
.x2-record-list__item:focus-visible {
outline: 2px solid var(--x2-color-border-focus);
outline-offset: -2px;
}
.x2-record-list__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.x2-record-list__title {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
min-width: 0;
font-size: var(--x2-font-size-base, 14px);
font-weight: var(--x2-font-weight-medium, 500);
color: var(--x2-color-text-primary);
}
.x2-record-list__description {
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
min-width: 0;
}
.x2-record-list__trailing {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
/* Two pixels is not a gap between two status tags, it is two tags touching.
The spacing scale's smallest step is the smallest gap worth having. */
gap: var(--x2-space-xs, 4px);
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
}
/* ============================================================ detail layout */
.x2-detail-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--x2-space-base, 16px);
align-items: start;
min-width: 0;
}
@media (min-width: 1200px) {
.x2-detail-layout--with-aside {
grid-template-columns: minmax(0, 1fr) 320px;
}
.x2-detail-layout--aside-wide.x2-detail-layout--with-aside {
grid-template-columns: minmax(0, 1fr) 400px;
}
}
.x2-detail-layout__main,
.x2-detail-layout__aside {
display: flex;
flex-direction: column;
gap: var(--x2-space-base, 16px);
min-width: 0;
}
/* Sticky only where there is a second column to be sticky beside; stacked,
the aside is just the next thing on the page. Offset by the page's own
padding so it does not touch the top edge of the scroll region. */
@media (min-width: 1200px) {
.x2-detail-layout__aside--sticky {
position: sticky;
top: var(--x2-space-base, 16px);
max-height: calc(100vh - var(--x2-space-xxl, 32px));
overflow-y: auto;
}
}
/* ============================================================== settings */
/** Destructive settings groups: irreversible actions, data deletion. */
.x2-settings-group--destructive.x2-section--bordered {
border-color: var(--x2-color-tone-danger-border);
background: var(--x2-color-tone-danger-subtle);
}
.x2-settings-group--destructive .x2-section__title {
color: var(--x2-color-tone-danger-text);
}
/* ================================================================= kanban */
.x2-kanban {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
min-width: 0;
}
/**
* The board scrolls horizontally rather than reflowing. A column is a state in
* a workflow, so wrapping or hiding one would change what the board means.
*/
.x2-kanban__scroll {
display: flex;
align-items: stretch;
gap: var(--x2-space-base, 16px);
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
padding-block-end: var(--x2-space-xs, 4px);
}
.x2-kanban__column {
display: flex;
flex-direction: column;
flex: 0 0 auto;
min-height: 0;
max-height: 100%;
border: 1px solid var(--x2-color-border-subtle);
border-radius: var(--x2-radius-md, 8px);
background: var(--x2-color-surface-sunken);
transition:
border-color var(--x2-duration-fast, 0.1s) var(--x2-easing-standard),
background var(--x2-duration-fast, 0.1s) var(--x2-easing-standard);
}
.x2-kanban__column--over {
border-color: var(--x2-color-tone-brand-border);
background: var(--x2-color-tone-brand-subtle);
}
.x2-kanban__column--blocked {
border-style: dashed;
border-color: var(--x2-color-border-default);
opacity: 0.6;
}
.x2-kanban__column--disabled {
background: var(--x2-color-surface-disabled);
}
.x2-kanban__column--reordering {
opacity: 0.5;
}
.x2-kanban__column-header {
display: flex;
flex-direction: column;
gap: var(--x2-space-xxs, 2px);
flex: 0 0 auto;
padding: var(--x2-space-md, 12px) var(--x2-space-md, 12px) var(--x2-space-sm, 8px);
border-bottom: 1px solid var(--x2-color-border-subtle);
border-start-start-radius: var(--x2-radius-md, 8px);
border-start-end-radius: var(--x2-radius-md, 8px);
}
.x2-kanban__column-header-row {
display: flex;
align-items: center;
gap: var(--x2-space-xs, 4px);
min-width: 0;
min-height: var(--x2-control-sm, 28px);
}
.x2-kanban__column-heading {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
flex: 1 1 auto;
min-width: 0;
}
.x2-kanban__column-title {
margin: 0;
font-size: var(--x2-font-size-base, 14px);
font-weight: var(--x2-font-weight-semibold, 600);
line-height: var(--x2-line-height-tight, 1.3);
color: var(--x2-color-text-primary);
}
/** The tone accent sits on the heading, not the whole column: one signal only. */
.x2-kanban__column--brand .x2-kanban__column-title {
color: var(--x2-color-tone-brand-text);
}
.x2-kanban__column--success .x2-kanban__column-title {
color: var(--x2-color-tone-success-text);
}
.x2-kanban__column--warning .x2-kanban__column-title {
color: var(--x2-color-tone-warning-text);
}
.x2-kanban__column--danger .x2-kanban__column-title {
color: var(--x2-color-tone-danger-text);
}
.x2-kanban__column--info .x2-kanban__column-title,
.x2-kanban__column--processing .x2-kanban__column-title {
color: var(--x2-color-tone-info-text);
}
.x2-kanban__column-count {
display: inline-flex;
align-items: center;
gap: var(--x2-space-xxs, 2px);
flex: 0 0 auto;
padding-inline: var(--x2-space-xs, 4px);
min-width: 22px;
justify-content: center;
border: 1px solid transparent;
border-radius: var(--x2-radius-sm, 4px);
background: var(--x2-color-surface-raised);
color: var(--x2-color-text-muted);
font-size: var(--x2-font-size-xs, 11px);
font-weight: var(--x2-font-weight-semibold, 600);
font-variant-numeric: tabular-nums lining-nums;
line-height: var(--x2-line-height-base, 1.5715);
}
.x2-kanban__column-count--full {
border-color: var(--x2-color-border-default);
color: var(--x2-color-text-secondary);
}
.x2-kanban__column-count--over {
background: var(--x2-color-tone-warning-subtle);
border-color: var(--x2-color-tone-warning-border);
color: var(--x2-color-tone-warning-text);
}
.x2-kanban__column-handle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 24px;
height: 24px;
margin-inline-start: calc(-1 * var(--x2-space-xs, 4px));
padding: 0;
border: 0;
border-radius: var(--x2-radius-sm, 4px);
background: transparent;
color: var(--x2-color-text-muted);
cursor: grab;
}
.x2-kanban__column-handle:hover {
background: var(--x2-color-surface-hover);
color: var(--x2-color-text-primary);
}
.x2-kanban__column-actions {
flex: 0 0 auto;
}
.x2-kanban__column-description {
margin: 0;
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
line-height: var(--x2-line-height-base, 1.5715);
}
.x2-kanban__column-summary {
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-secondary);
font-variant-numeric: tabular-nums lining-nums;
}
.x2-kanban__column-note {
margin: 0;
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
}
.x2-kanban__column-body {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
flex: 1 1 auto;
min-height: 96px;
overflow-y: auto;
overflow-x: hidden;
padding: var(--x2-space-sm, 8px);
}
.x2-kanban__column-skeleton {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
}
.x2-kanban__column-empty {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
border: 1px dashed var(--x2-color-border-default);
border-radius: var(--x2-radius-base, 6px);
}
.x2-kanban__column-list {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
min-width: 0;
}
.x2-kanban__card-shell {
min-width: 0;
border-radius: var(--x2-radius-base, 6px);
touch-action: manipulation;
}
.x2-kanban__card-shell[tabindex]:not([aria-disabled='true']) {
cursor: grab;
}
.x2-kanban__card-shell:focus-visible {
outline: 2px solid var(--x2-color-border-focus);
outline-offset: 2px;
}
/** The card left behind while its copy follows the pointer. */
.x2-kanban__card-shell--dragging {
opacity: 0.4;
}
.x2-kanban__card-shell--overlay {
cursor: grabbing;
box-shadow: var(--x2-shadow-lg);
}
.x2-kanban__card-shell--overlay .x2-kanban-card {
border-color: var(--x2-color-tone-brand-border);
}
.x2-kanban__card-shell--disabled {
cursor: default;
}
.x2-kanban__status {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
min-height: var(--x2-font-size-lg, 16px);
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
}
.x2-kanban__status--error {
display: inline-flex;
align-items: center;
gap: var(--x2-space-xs, 4px);
color: var(--x2-color-tone-danger-text);
}
/* ---------------------------------------------------------- kanban card */
.x2-kanban-card {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
min-width: 0;
padding: var(--x2-space-md, 12px);
border: 1px solid var(--x2-color-border-subtle);
border-inline-start: 3px solid transparent;
border-radius: var(--x2-radius-base, 6px);
background: var(--x2-color-surface-raised);
transition: border-color var(--x2-duration-fast, 0.1s) var(--x2-easing-standard);
}
.x2-kanban__card-shell--activatable:hover .x2-kanban-card {
border-color: var(--x2-color-border-strong);
}
.x2-kanban-card--brand {
border-inline-start-color: var(--x2-color-tone-brand-base);
}
.x2-kanban-card--success {
border-inline-start-color: var(--x2-color-tone-success-base);
}
.x2-kanban-card--warning {
border-inline-start-color: var(--x2-color-tone-warning-base);
}
.x2-kanban-card--danger {
border-inline-start-color: var(--x2-color-tone-danger-base);
}
.x2-kanban-card--info,
.x2-kanban-card--processing {
border-inline-start-color: var(--x2-color-tone-info-base);
}
.x2-kanban-card--disabled {
background: var(--x2-color-surface-sunken);
}
.x2-kanban-card--disabled .x2-kanban-card__title {
color: var(--x2-color-text-secondary);
}
.x2-kanban-card__media {
/* Bleeds to the card's edges: the card's padding is undone on three sides
and the top corners follow the card's radius, inside its 1px border. */
margin: calc(-1 * var(--x2-space-md, 12px));
margin-block-end: 0;
border-start-start-radius: calc(var(--x2-radius-base, 6px) - 1px);
border-start-end-radius: calc(var(--x2-radius-base, 6px) - 1px);
overflow: hidden;
line-height: 0;
}
.x2-kanban-card__media > * {
display: block;
width: 100%;
}
.x2-kanban-card__head {
display: flex;
align-items: flex-start;
gap: var(--x2-space-xs, 4px);
min-width: 0;
}
.x2-kanban-card__identity {
display: flex;
flex-direction: column;
gap: var(--x2-space-xxs, 2px);
flex: 1 1 auto;
min-width: 0;
}
.x2-kanban-card__reference {
font-size: var(--x2-font-size-xs, 11px);
color: var(--x2-color-text-muted);
}
.x2-kanban-card__title {
font-size: var(--x2-font-size-base, 14px);
font-weight: var(--x2-font-weight-medium, 500);
line-height: var(--x2-line-height-tight, 1.3);
color: var(--x2-color-text-primary);
min-width: 0;
}
.x2-kanban-card__actions {
flex: 0 0 auto;
margin-block-start: calc(-1 * var(--x2-space-xxs, 2px));
margin-inline-end: calc(-1 * var(--x2-space-xs, 4px));
}
.x2-kanban-card__description {
margin: 0;
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-muted);
line-height: var(--x2-line-height-base, 1.5715);
}
.x2-kanban-card__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--x2-space-xs, 4px);
min-width: 0;
}
.x2-kanban-card__meta {
display: grid;
grid-template-columns: minmax(64px, max-content) 1fr;
gap: var(--x2-space-xxs, 2px) var(--x2-space-sm, 8px);
margin: 0;
min-width: 0;
font-size: var(--x2-font-size-sm, 12px);
}
.x2-kanban-card__meta-item {
display: contents;
}
.x2-kanban-card__meta-label {
color: var(--x2-color-text-muted);
}
.x2-kanban-card__meta-value {
display: flex;
align-items: center;
gap: var(--x2-space-xs, 4px);
margin: 0;
min-width: 0;
color: var(--x2-color-text-secondary);
}
.x2-kanban-card__meta-icon {
color: var(--x2-color-text-muted);
}
.x2-kanban-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--x2-space-sm, 8px);
min-width: 0;
padding-block-start: var(--x2-space-xs, 4px);
border-top: 1px solid var(--x2-color-border-subtle);
}
.x2-kanban-card__footer-lead {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
/* Takes the width the value leaves, so a block child - a progress bar, a
row of avatars sized to its container - measures against something. With
no flex-grow it was content-sized, and a `width: 100%` child resolved
against nothing and rendered zero pixels wide. */
flex: 1 1 auto;
min-width: 0;
}
.x2-kanban-card__locked {
font-size: var(--x2-font-size-xs, 11px);
color: var(--x2-color-text-muted);
}
.x2-kanban-card__value {
flex: 0 0 auto;
font-size: var(--x2-font-size-sm, 12px);
font-weight: var(--x2-font-weight-semibold, 600);
color: var(--x2-color-text-primary);
font-variant-numeric: tabular-nums lining-nums;
}
/* Narrow viewports keep the horizontal scroll but give the data more room. */
@media (max-width: 767.98px) {
.x2-kanban__column {
width: 260px !important;
min-width: 260px !important;
}
}
/* ============================================================== animation */
@keyframes x2-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ============================================================ progress strip */
.x2-progress-strip {
display: flex;
flex-direction: column;
gap: var(--x2-space-xs, 4px);
min-width: 0;
}
.x2-progress-strip__row {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
min-width: 0;
}
.x2-progress-strip__bar {
display: flex;
flex: 1 1 auto;
min-width: 0;
height: var(--x2-space-sm, 8px);
overflow: hidden;
border-radius: var(--x2-radius-pill, 999px);
background: var(--x2-color-surface-sunken);
}
.x2-progress-strip--lg .x2-progress-strip__bar {
height: var(--x2-space-md, 12px);
}
.x2-progress-strip__segment {
flex: 0 0 auto;
min-width: 0;
background: var(--x2-color-tone-neutral-base);
}
.x2-progress-strip__segment + .x2-progress-strip__segment {
/* A hairline between neighbours, so two adjacent segments of one tone -
or two the reader cannot tell apart - still read as two. */
box-shadow: inset 1px 0 0 var(--x2-color-surface-raised);
}
.x2-progress-strip__segment--brand {
background: var(--x2-color-tone-brand-base);
}
.x2-progress-strip__segment--accent {
background: var(--x2-color-tone-accent-base);
}
.x2-progress-strip__segment--success {
background: var(--x2-color-tone-success-base);
}
.x2-progress-strip__segment--warning {
background: var(--x2-color-tone-warning-base);
}
.x2-progress-strip__segment--danger {
background: var(--x2-color-tone-danger-base);
}
.x2-progress-strip__segment--info,
.x2-progress-strip__segment--processing {
background: var(--x2-color-tone-info-base);
}
.x2-progress-strip__headline {
flex: 0 0 auto;
font-size: var(--x2-font-size-sm, 12px);
font-weight: var(--x2-font-weight-semibold, 600);
color: var(--x2-color-text-primary);
}
.x2-progress-strip--lg .x2-progress-strip__headline {
font-size: var(--x2-font-size-base, 14px);
}
.x2-progress-strip__legend {
display: flex;
flex-wrap: wrap;
gap: var(--x2-space-xs, 4px) var(--x2-space-base, 16px);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-secondary);
}
.x2-progress-strip__legend-item {
display: inline-flex;
align-items: center;
gap: var(--x2-space-xs, 4px);
}
.x2-progress-strip__swatch {
width: var(--x2-space-sm, 8px);
height: var(--x2-space-sm, 8px);
border-radius: var(--x2-radius-sm, 4px);
}
.x2-progress-strip__legend-count {
color: var(--x2-color-text-primary);
font-weight: var(--x2-font-weight-medium, 500);
}
/* ================================================================ issue list */
.x2-issue-list {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--x2-font-size-sm, 12px);
}
.x2-issue-list--compact {
gap: var(--x2-space-xs, 4px);
}
.x2-issue {
display: flex;
align-items: flex-start;
gap: var(--x2-space-sm, 8px);
min-width: 0;
}
.x2-issue__icon {
flex: 0 0 auto;
line-height: var(--x2-line-height-base, 1.5715);
}
.x2-issue--error .x2-issue__icon {
color: var(--x2-color-tone-danger-text);
}
.x2-issue--warning .x2-issue__icon {
color: var(--x2-color-tone-warning-text);
}
.x2-issue--info .x2-issue__icon {
color: var(--x2-color-tone-info-text);
}
.x2-issue--success .x2-issue__icon {
color: var(--x2-color-tone-success-text);
}
.x2-issue__body {
display: flex;
flex-direction: column;
gap: var(--x2-space-xxs, 2px);
min-width: 0;
}
.x2-issue__message {
color: var(--x2-color-text-primary);
}
.x2-issue__code {
margin-inline-start: var(--x2-space-xs, 4px);
color: var(--x2-color-text-muted);
}
.x2-issue__detail {
color: var(--x2-color-text-secondary);
}
/* ================================================================= copy text */
.x2-copy-text {
display: inline-flex;
align-items: center;
gap: var(--x2-space-xxs, 2px);
max-width: 100%;
min-width: 0;
}
.x2-copy-text__value {
min-width: 0;
}
.x2-copy-text__button {
/* The visible glyph is small; the button is the system's small control,
which is the 24px hit target the accessibility bar asks for. It is
pulled into the line so the value and its neighbours keep their height. */
flex: 0 0 auto;
margin-block: calc(-1 * var(--x2-space-xs, 4px));
color: var(--x2-color-text-muted);
}
/* ================================================================ media card */
.x2-media-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
border: 1px solid var(--x2-color-border-subtle);
border-radius: var(--x2-radius-base, 6px);
background: var(--x2-color-surface-raised);
overflow: hidden;
transition: border-color var(--x2-duration-fast, 0.1s) var(--x2-easing-standard);
}
.x2-media-card__surface {
display: flex;
flex-direction: column;
min-width: 0;
}
.x2-media-card--interactive .x2-media-card__surface {
cursor: pointer;
}
.x2-media-card--interactive:hover {
border-color: var(--x2-color-border-strong);
}
.x2-media-card__surface:focus-visible {
outline: var(--x2-focus-ring-width, 2px) solid var(--x2-color-border-focus);
outline-offset: calc(-1 * var(--x2-focus-ring-width, 2px));
}
.x2-media-card--selected {
border-color: var(--x2-color-tone-brand-base);
box-shadow: 0 0 0 1px var(--x2-color-tone-brand-base);
}
.x2-media-card--disabled .x2-media-card__surface {
cursor: not-allowed;
}
.x2-media-card--disabled .x2-media-card__title,
.x2-media-card--disabled .x2-media-card__meta {
color: var(--x2-color-text-disabled);
}
.x2-media-card__media {
position: relative;
background: var(--x2-color-surface-sunken);
line-height: 0;
}
.x2-media-card__badges,
.x2-media-card__status {
position: absolute;
top: var(--x2-space-sm, 8px);
display: flex;
gap: var(--x2-space-xs, 4px);
line-height: var(--x2-line-height-base, 1.5715);
}
.x2-media-card__badges {
inset-inline-start: var(--x2-space-sm, 8px);
}
.x2-media-card__status {
inset-inline-end: var(--x2-space-sm, 8px);
}
.x2-media-card__caption {
display: flex;
align-items: flex-start;
gap: var(--x2-space-xs, 4px);
min-width: 0;
padding: var(--x2-space-sm, 8px) var(--x2-space-md, 12px);
}
.x2-media-card__text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.x2-media-card__title {
font-size: var(--x2-font-size-sm, 12px);
font-weight: var(--x2-font-weight-medium, 500);
color: var(--x2-color-text-primary);
}
.x2-media-card__meta {
font-size: var(--x2-font-size-xs, 11px);
color: var(--x2-color-text-secondary);
}
.x2-media-card--with-actions .x2-media-card__caption {
/* Room for the action group, which sits over the caption row's end. */
padding-inline-end: calc(var(--x2-control-sm, 24px) + var(--x2-space-md, 12px));
}
.x2-media-card__actions {
position: absolute;
inset-inline-end: var(--x2-space-sm, 8px);
bottom: var(--x2-space-xs, 4px);
}
/* =================================================================== keyword */
/* Built on StatusTag's metrics - the small size's line, padding, radius and
weight - so a keyword beside a status reads as the same family. */
.x2-keyword {
display: inline-flex;
align-items: center;
gap: var(--x2-space-xs, 4px);
max-width: 100%;
padding: 0 var(--x2-space-sm, 8px);
font-size: var(--x2-font-size-xs, 11px);
font-weight: var(--x2-font-weight-medium, 500);
line-height: calc(var(--x2-font-size-xs, 11px) + var(--x2-space-sm, 8px));
color: var(--x2-color-tone-neutral-text);
background: var(--x2-color-tone-neutral-subtle);
border: 1px solid var(--x2-color-tone-neutral-border);
border-radius: var(--x2-radius-sm, 4px);
white-space: nowrap;
}
.x2-keyword--brand {
color: var(--x2-color-tone-brand-text);
background: var(--x2-color-tone-brand-subtle);
border-color: var(--x2-color-tone-brand-border);
}
.x2-keyword--outline {
background: transparent;
border-style: dashed;
}
.x2-keyword--button {
cursor: pointer;
font: inherit;
font-size: var(--x2-font-size-xs, 11px);
font-weight: var(--x2-font-weight-medium, 500);
transition: background-color var(--x2-duration-fast, 0.1s) var(--x2-easing-standard);
}
.x2-keyword--button:hover:not(:disabled) {
background: var(--x2-color-tone-neutral-subtle-hover);
}
.x2-keyword--button:focus-visible,
.x2-keyword__remove:focus-visible {
outline: var(--x2-focus-ring-width, 2px) solid var(--x2-color-border-focus);
outline-offset: 1px;
}
.x2-keyword--disabled,
.x2-keyword--button:disabled {
/* A disabled chip is still a word the user has to read - it is the
control that is off, not the label - so it keeps a legible colour and
loses its fill and its cursor instead of fading below AA. */
cursor: not-allowed;
color: var(--x2-color-text-muted);
background: var(--x2-color-surface-disabled);
border-color: var(--x2-color-border-subtle);
}
.x2-keyword__label {
overflow: hidden;
text-overflow: ellipsis;
}
.x2-keyword__icon {
display: inline-flex;
font-size: var(--x2-font-size-xs, 11px);
}
.x2-keyword__remove {
display: inline-flex;
align-items: center;
justify-content: center;
/* The visible glyph is small; the hit target is the 16px box and the
chip's own padding around it. */
width: var(--x2-icon-md, 16px);
height: var(--x2-icon-md, 16px);
margin-inline-end: calc(-1 * var(--x2-space-xs, 4px));
padding: 0;
font-size: var(--x2-font-size-xs, 11px);
color: inherit;
background: transparent;
border: 0;
border-radius: var(--x2-radius-sm, 4px);
cursor: pointer;
}
.x2-keyword__remove:hover:not(:disabled) {
background: var(--x2-color-tone-neutral-subtle-hover);
}
.x2-keyword-input {
display: flex;
flex-direction: column;
gap: var(--x2-space-xxs, 2px);
min-width: 0;
}
.x2-keyword-input__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--x2-space-xs, 4px);
min-height: var(--x2-control-md, 32px);
padding: var(--x2-space-xs, 4px) var(--x2-space-sm, 8px);
background: var(--x2-color-surface-raised);
border: 1px solid var(--x2-color-border-default);
border-radius: var(--x2-radius-base, 6px);
cursor: text;
transition: border-color var(--x2-duration-fast, 0.1s) var(--x2-easing-standard);
}
.x2-keyword-input__chips:focus-within {
border-color: var(--x2-color-border-focus);
outline: var(--x2-focus-ring-width, 2px) solid var(--x2-color-border-focus);
outline-offset: 0;
}
.x2-keyword-input--disabled .x2-keyword-input__chips {
background: var(--x2-color-surface-disabled);
cursor: not-allowed;
}
.x2-keyword-input__field {
flex: 1 1 var(--x2-layout-sidebar-collapsed-width, 64px);
min-width: 0;
padding: 0;
font: inherit;
font-size: var(--x2-font-size-base, 14px);
color: var(--x2-color-text-primary);
background: transparent;
border: 0;
outline: 0;
}
.x2-keyword-input__field::placeholder {
color: var(--x2-color-text-placeholder);
}
.x2-keyword-input__notice {
min-height: calc(var(--x2-font-size-xs, 11px) * var(--x2-line-height-base, 1.5715));
font-size: var(--x2-font-size-xs, 11px);
color: var(--x2-color-tone-warning-text);
}
.x2-keyword-suggestions {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
}
.x2-keyword-suggestions__group {
display: flex;
flex-direction: column;
gap: var(--x2-space-xs, 4px);
}
.x2-keyword-suggestions__row {
display: flex;
flex-wrap: wrap;
gap: var(--x2-space-xs, 4px);
}
/* ================================================================= drop zone */
.x2-drop-zone {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
}
.x2-drop-zone__target {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--x2-space-xs, 4px);
min-height: calc(var(--x2-control-lg, 40px) * 3);
padding: var(--x2-space-lg, 20px);
text-align: center;
color: var(--x2-color-text-secondary);
background: var(--x2-color-surface-sunken);
border: 1px dashed var(--x2-color-border-strong);
border-radius: var(--x2-radius-base, 6px);
cursor: pointer;
transition:
border-color var(--x2-duration-fast, 0.1s) var(--x2-easing-standard),
background-color var(--x2-duration-fast, 0.1s) var(--x2-easing-standard);
}
.x2-drop-zone__target--compact {
min-height: calc(var(--x2-control-lg, 40px) * 2);
padding: var(--x2-space-md, 12px);
}
.x2-drop-zone__target:hover:not(.x2-drop-zone__target--disabled),
.x2-drop-zone__target--over {
border-color: var(--x2-color-tone-brand-base);
background: var(--x2-color-tone-brand-subtle);
color: var(--x2-color-tone-brand-text);
}
.x2-drop-zone__target:focus-visible {
outline: var(--x2-focus-ring-width, 2px) solid var(--x2-color-border-focus);
outline-offset: var(--x2-focus-ring-offset, 2px);
}
.x2-drop-zone__target--disabled {
cursor: not-allowed;
color: var(--x2-color-text-disabled);
border-style: dotted;
}
.x2-drop-zone__target--disabled .x2-drop-zone__label {
color: var(--x2-color-text-disabled);
}
.x2-drop-zone__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.x2-drop-zone__icon {
font-size: var(--x2-font-size-xxl, 24px);
line-height: 1;
}
.x2-drop-zone__label {
font-size: var(--x2-font-size-sm, 12px);
font-weight: var(--x2-font-weight-medium, 500);
color: var(--x2-color-text-primary);
}
.x2-drop-zone__target--over .x2-drop-zone__label {
color: inherit;
}
.x2-drop-zone__hint {
font-size: var(--x2-font-size-xs, 11px);
color: var(--x2-color-text-muted);
}
/* ================================================================= file slot */
.x2-file-slot {
display: flex;
flex-direction: column;
gap: var(--x2-space-xs, 4px);
min-width: 0;
}
.x2-file-slot__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--x2-space-sm, 8px);
min-height: var(--x2-control-sm, 24px);
}
.x2-file-slot__label {
font-size: var(--x2-font-size-sm, 12px);
font-weight: var(--x2-font-weight-medium, 500);
color: var(--x2-color-text-primary);
}
.x2-file-slot__required {
margin-inline-start: var(--x2-space-xxs, 2px);
color: var(--x2-color-tone-danger-text);
}
.x2-file-slot__tile {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
padding: var(--x2-space-sm, 8px);
border: 1px solid var(--x2-color-border-subtle);
border-radius: var(--x2-radius-base, 6px);
background: var(--x2-color-surface-raised);
}
.x2-file-slot--error .x2-file-slot__tile {
border-color: var(--x2-color-tone-danger-border);
}
.x2-file-slot__preview {
border-radius: var(--x2-radius-sm, 4px);
background: var(--x2-color-surface-sunken);
line-height: 0;
overflow: hidden;
}
.x2-file-slot__body {
display: flex;
flex-direction: column;
gap: var(--x2-space-xs, 4px);
min-width: 0;
font-size: var(--x2-font-size-sm, 12px);
}
.x2-file-slot__name {
font-weight: var(--x2-font-weight-medium, 500);
color: var(--x2-color-text-primary);
}
/* ============================================================= print preview */
.x2-print-preview {
position: relative;
width: 100%;
overflow: hidden;
background: var(--x2-color-surface-sunken);
border-radius: var(--x2-radius-base, 6px);
line-height: 0;
}
.x2-print-preview__base {
display: block;
width: 100%;
height: 100%;
}
.x2-print-preview__area {
position: absolute;
overflow: hidden;
}
.x2-print-preview__area--shown {
outline: 1px dashed var(--x2-color-tone-brand-base);
outline-offset: -1px;
}
.x2-print-preview__art {
height: 100%;
}
/* ================================================================= checklist */
.x2-checklist {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
}
.x2-checklist__progress {
margin: 0;
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-secondary);
}
.x2-checklist__items {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--x2-color-border-subtle);
border-radius: var(--x2-radius-base, 6px);
background: var(--x2-color-surface-raised);
}
.x2-checklist__item {
display: flex;
flex-direction: column;
gap: var(--x2-space-sm, 8px);
padding: var(--x2-space-md, 12px);
}
.x2-checklist__item + .x2-checklist__item {
border-top: 1px solid var(--x2-color-border-subtle);
}
.x2-checklist__item--done .x2-checklist__label {
color: var(--x2-color-text-secondary);
text-decoration: line-through;
}
.x2-checklist__text {
display: inline-flex;
flex-direction: column;
gap: var(--x2-space-xxs, 2px);
}
.x2-checklist__label {
color: var(--x2-color-text-primary);
}
.x2-checklist__payload {
/* Aligned under the label, past the checkbox and its gap. */
padding-inline-start: calc(var(--x2-icon-md, 16px) + var(--x2-space-sm, 8px));
}
/* ================================================================ a11y */
@media (prefers-reduced-motion: reduce) {
.x2-shell__sidebar,
.x2-rail__item,
.x2-record-list__item,
.x2-kanban__column,
.x2-kanban-card {
transition: none;
}
.x2-kanban__column-body {
scroll-behavior: auto;
}
.x2-shell__scroll {
scroll-behavior: auto;
}
.x2-search-input [role='status'] {
animation: none;
}
}
/* Consistent focus treatment for the interactive elements the design system
renders itself (Ant Design handles its own). */
.x2-focusable:focus-visible {
outline: 2px solid var(--x2-color-border-focus);
outline-offset: 2px;
border-radius: var(--x2-radius-sm, 4px);
}
/* ================================================================== print */
/* The application shell, made printable. On screen the shell is a fixed-height
viewport (`height: 100dvh; overflow: hidden`) with its own scroll container,
which in a paged medium would clip the document to a single page; these
resets hand the flow back to the browser so it can paginate. The chrome
itself — sidebar, rail, header, action bar, table toolbar — is navigation,
and navigation does not belong on paper. This is what lets a `PrintSheet`
work inside an app shell rather than only on a bare page. */
/*
* Application chrome does not go on paper.
*
* Everything here is a control rather than content: navigation, a header
* toolbar, a filter row, a pager, a record navigator. Printing a screen should
* produce the document the screen is about, and none of these can be pressed
* on a sheet of paper.
*
* Contrary to the report that prompted this list, the sidebar and header were
* already covered - `.x2-shell__sidebar` and `.x2-shell__header` have been in
* this block all along. What was missing is everything below them.
*/
@media print {
.x2-shell__sidebar,
.x2-rail,
.x2-shell__header,
.x2-shell__banner,
.x2-page__action-bar,
.x2-page-header__actions,
.x2-page-header__back,
.x2-entity-header__actions,
.x2-entity-header__back,
.x2-record-navigator,
.x2-filter-bar__actions,
.x2-data-table__toolbar,
.x2-data-table__footer,
.x2-data-table__selection {
display: none !important;
}
.x2-shell,
.x2-shell__scroll,
.x2-shell__main {
height: auto;
overflow: visible;
}
}
/* The on-screen page surface. Its width, min-height and padding come from the
page tokens as inline styles, because they depend on the `size` prop. */
.x2-print-sheet {
box-sizing: border-box;
margin-inline: auto;
background: var(--x2-color-surface-raised);
color: var(--x2-color-text-primary);
box-shadow: var(--x2-shadow-sm);
}
@media print {
/* At print time `@page` supplies the margin, so the surface must drop its own
padding or every margin is applied twice. The sizing goes too: the sheet is
the page, and a fixed width in a paged medium only invites overflow. */
.x2-print-sheet {
width: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0;
background: none;
box-shadow: none;
}
}
.x2-print-keep-together {
break-inside: avoid;
}
.x2-print-page-break {
display: none;
}
.x2-print-only {
display: none;
}
@media print {
.x2-print-page-break {
display: block;
break-before: page;
}
.x2-print-page-break--after {
break-before: auto;
break-after: page;
}
.x2-print-only {
display: block;
}
.x2-screen-only {
display: none !important;
}
}
.x2-print-table {
width: 100%;
border-collapse: collapse;
font-size: var(--x2-font-size-sm);
}
.x2-print-table__caption {
text-align: start;
padding-block-end: var(--x2-space-sm);
font-weight: var(--x2-font-weight-semibold);
}
.x2-print-table th,
.x2-print-table td {
padding: var(--x2-space-xs) var(--x2-space-sm);
border-block-end: 1px solid var(--x2-color-border-subtle);
text-align: start;
vertical-align: top;
}
.x2-print-table th {
background: var(--x2-color-surface-sunken);
font-weight: var(--x2-font-weight-semibold);
/* Without this the tint is dropped whenever the user leaves the print
dialog's "Background graphics" box unticked, which is its default state.
Measured: with print-color-adjust the fill survives regardless. */
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.x2-print-table__cell--end {
text-align: end;
font-variant-numeric: tabular-nums;
}
@media print {
/* A header row is only useful if it is not orphaned at the foot of a page. */
.x2-print-table thead {
display: table-header-group;
}
.x2-print-table tr {
break-inside: avoid;
}
}
/* ================================================================== charts */
/* The height is set inline from the resolved chart height; this rule only
makes the four states share the same box, so the panel cannot jump as a
chart moves between loading, error, empty and content. */
.x2-chart {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: 0;
}
.x2-chart > .x2-status-block {
margin-block: 0;
}
/* The centre statistic of a donut ShareChart. Positioned over the canvas,
which already sits inside a position: relative .x2-chart. It restates a
figure the accessible table already carries, hence aria-hidden. */
.x2-chart__centre {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--x2-space-xxs, 2px);
pointer-events: none;
}
/* Once the engine has reported the pie's real centre, sit on it rather than
on the container's centre — the legend makes the two differ. */
.x2-chart__centre--placed {
inset: auto;
width: max-content;
transform: translate(-50%, -50%);
}
/* A shape, not a chart: draws at its `width` and shrinks with its container. */
.x2-sparkline {
display: inline-flex;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
}
.x2-chart__centre-value {
font-size: var(--x2-font-size-xl, 20px);
font-weight: var(--x2-font-weight-semibold, 600);
color: var(--x2-color-text-primary);
font-variant-numeric: tabular-nums;
}
.x2-chart__centre-label {
font-size: var(--x2-font-size-sm, 12px);
color: var(--x2-color-text-secondary);
}
/* --------------------------------------------------------------------------
Authoring and audition screens: CommandPalette, MediaTransport,
VersionList, ShortcutList.
-------------------------------------------------------------------------- */
/** Search-and-pick overlay: `CommandPalette`. */
.x2-command-palette__query {
border-bottom: 1px solid var(--x2-color-border-subtle);
border-radius: 0;
}
.x2-command-palette__list {
max-height: 46vh;
overflow-y: auto;
margin: 0;
padding: var(--x2-space-xs, 4px);
list-style: none;
}
.x2-command-palette__group-rows {
margin: 0;
padding: 0;
list-style: none;
}
.x2-command-palette__group {
display: block;
padding: var(--x2-space-xs, 4px) var(--x2-space-sm, 8px);
color: var(--x2-color-text-muted);
}
.x2-command-palette__item {
display: flex;
align-items: center;
gap: var(--x2-space-sm, 8px);
min-height: var(--x2-control-md, 32px);
padding: var(--x2-space-xs, 4px) var(--x2-space-sm, 8px);
border-radius: var(--x2-radius-base, 6px);
color: var(--x2-color-text-primary);
cursor: pointer;
}
.x2-command-palette__item[aria-selected='true'] { background: var(--x2-color-surface-selected); }
.x2-command-palette__item--danger { color: var(--x2-color-tone-danger-text); }
.x2-command-palette__item--disabled { color: var(--x2-color-text-disabled); cursor: not-allowed; }
.x2-command-palette__item--disabled[aria-selected='true'] { background: var(--x2-color-surface-hover); }
.x2-command-palette__key {
flex: none;
width: var(--x2-space-base, 16px);
color: var(--x2-color-text-muted);
font-family: var(--x2-font-family-mono);
font-size: var(--x2-font-size-xs, 11px);
}
.x2-command-palette__icon { flex: none; display: inline-flex; color: var(--x2-color-text-secondary); }
.x2-command-palette__label { flex: 1; min-width: 0; }
.x2-command-palette__meta { flex: none; color: var(--x2-color-text-muted); }
.x2-command-palette__empty {
padding: var(--x2-space-md, 12px);
color: var(--x2-color-text-muted);
font-size: var(--x2-font-size-sm, 12px);
}
/** Position and duration for one clip: `MediaTransport`. */
.x2-media-transport {
display: flex;
align-items: center;
gap: var(--x2-space-md, 12px);
flex-wrap: wrap;
}
.x2-media-transport__bar {
position: relative;
flex: 1 1 140px;
min-width: 140px;
height: var(--x2-control-md, 32px);
border: 1px solid var(--x2-color-border-subtle);
border-radius: var(--x2-radius-base, 6px);
background: var(--x2-color-surface-sunken);
overflow: hidden;
cursor: pointer;
}
.x2-media-transport__bar:focus-visible {
outline: 2px solid var(--x2-color-border-focus);
outline-offset: 1px;
}
.x2-media-transport__bar[aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; }
.x2-media-transport__wave {
position: absolute;
inset: 0;
display: flex;
align-items: center;
gap: var(--x2-space-xxs, 2px);
padding: 0 var(--x2-space-xxs, 2px);
}
.x2-media-transport__wave i {
display: block;
flex: 1;
background: var(--x2-color-border-default);
border-radius: 1px;
}
.x2-media-transport__played {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
background: var(--x2-color-tone-brand-subtle);
}
.x2-media-transport__mark {
position: absolute;
inset-block: 0;
width: 2px;
background: var(--x2-color-tone-neutral-border);
}
.x2-media-transport__mark--brand { background: var(--x2-color-tone-brand-base); }
.x2-media-transport__mark--accent { background: var(--x2-color-tone-accent-base); }
.x2-media-transport__mark--success { background: var(--x2-color-tone-success-base); }
.x2-media-transport__mark--warning { background: var(--x2-color-tone-warning-base); }
.x2-media-transport__mark--danger { background: var(--x2-color-tone-danger-base); }
.x2-media-transport__mark--info { background: var(--x2-color-tone-info-base); }
.x2-media-transport__time,
.x2-media-transport__meta {
flex: none;
font-size: var(--x2-font-size-xs, 11px);
color: var(--x2-color-text-secondary);
}
.x2-media-transport__meta { color: var(--x2-color-text-muted); }
/** Attempts at a produced artefact, one signed off: `VersionList`. */
.x2-version-list {
display: flex;
flex-direction: column;
gap: var(--x2-space-xs, 4px);
margin: 0;
padding: 0;
list-style: none;
}
.x2-version-list__item {
display: flex;
flex-direction: column;
gap: var(--x2-space-xxs, 2px);
width: 100%;
padding: var(--x2-space-sm, 8px);
border: 1px solid var(--x2-color-border-subtle);
border-radius: var(--x2-radius-base, 6px);
background: var(--x2-color-surface-raised);
color: var(--x2-color-text-primary);
font: inherit;
text-align: start;
cursor: pointer;
}
.x2-version-list__item:hover:not(:disabled) {
border-color: var(--x2-color-border-strong);
background: var(--x2-color-surface-hover);
}
.x2-version-list__item[aria-current='true'] {
border-color: var(--x2-color-tone-brand-border);
background: var(--x2-color-surface-selected);
}
.x2-version-list__item--approved { border-inline-start: 3px solid var(--x2-color-tone-success-base); }
.x2-version-list__item--stale { border-inline-start-color: var(--x2-color-tone-danger-base); }
.x2-version-list__item:disabled { color: var(--x2-color-text-disabled); cursor: not-allowed; }
.x2-version-list__head { display: flex; justify-content: space-between; gap: var(--x2-space-sm, 8px); }
.x2-version-list__label { font-weight: var(--x2-font-weight-medium, 500); font-size: var(--x2-font-size-sm, 12px); }
.x2-version-list__facts { color: var(--x2-color-text-muted); font-size: var(--x2-font-size-xs, 11px); }
.x2-version-list__summary { font-size: var(--x2-font-size-sm, 12px); color: var(--x2-color-text-secondary); }
.x2-version-list__conditions,
.x2-version-list__reason {
color: var(--x2-color-text-muted);
font-size: var(--x2-font-size-xs, 11px);
}
.x2-version-list__badge {
align-self: flex-start;
margin-block-start: var(--x2-space-xxs, 2px);
padding: 0 var(--x2-space-xs, 4px);
border: 1px solid var(--x2-color-tone-success-base);
border-radius: var(--x2-radius-sm, 4px);
background: var(--x2-color-tone-success-subtle);
color: var(--x2-color-tone-success-text);
font-size: var(--x2-font-size-xs, 11px);
}
.x2-version-list__badge--stale {
border-color: var(--x2-color-tone-danger-base);
background: var(--x2-color-tone-danger-subtle);
color: var(--x2-color-tone-danger-text);
}
/** The keys available right now: `ShortcutList`. */
.x2-shortcut-list { display: flex; flex-direction: column; gap: var(--x2-space-md, 12px); }
.x2-shortcut-list__group { display: flex; flex-direction: column; gap: var(--x2-space-xs, 4px); }
.x2-shortcut-list__title { margin: 0; color: var(--x2-color-text-muted); }
.x2-shortcut-list__entries { display: flex; flex-direction: column; gap: var(--x2-space-xs, 4px); margin: 0; }
.x2-shortcut-list__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--x2-space-sm, 8px);
}
.x2-shortcut-list__row--disabled { color: var(--x2-color-text-disabled); }
.x2-shortcut-list__row--disabled .x2-shortcut-list__action { color: inherit; }
.x2-shortcut-list__action { margin: 0; font-size: var(--x2-font-size-sm, 12px); color: var(--x2-color-text-secondary); }
.x2-shortcut-list__keys { margin: 0; flex: none; }
|