94 lines
3.8 KiB
CSS
94 lines
3.8 KiB
CSS
/* Table mapping. Reference: ui-viz docs/components/table.md (an earlier test spec: green header strip, 1px row divider, 14px/12px cell
|
|
padding, 520px default minimum width, no radius, hover face only). Current HM values built from the HM Semantic / Primitive tokens;
|
|
the selected row and the footer are not defined there, so they are new here. Static display only: no sorting / filtering / paging. */
|
|
:root, [data-hm-theme] {
|
|
--hm-table-min-width: 520px;
|
|
--hm-table-background: var(--hm-sem-bg-surface);
|
|
--hm-table-text: var(--hm-sem-fg-primary);
|
|
--hm-table-font-size: 14px;
|
|
--hm-table-line-height: 20px;
|
|
--hm-table-font-weight: 400;
|
|
|
|
--hm-table-cell-padding-y: 14px;
|
|
--hm-table-cell-padding-x: 12px;
|
|
--hm-table-divider-width: 1px;
|
|
--hm-table-divider-color: var(--hm-sem-stroke-input-default);
|
|
|
|
/* Header strip: a pale green face with a green top edge and a soft bottom edge. */
|
|
--hm-table-header-background: color-mix(in srgb, var(--hm-sem-palette-green-tint) 30%, var(--hm-sem-palette-white));
|
|
--hm-table-header-text: var(--hm-sem-palette-green-light-1);
|
|
--hm-table-header-font-size: 13px;
|
|
--hm-table-header-font-weight: 700;
|
|
--hm-table-header-border-top: var(--hm-sem-palette-green-light-2);
|
|
--hm-table-header-border-bottom: color-mix(in srgb, var(--hm-sem-palette-green-light-2) 20%, transparent);
|
|
|
|
/* Publisher review: table-only Accent 20%; other highlight mappings stay unchanged. */
|
|
--hm-table-row-hover-background: color-mix(in srgb, var(--hm-sem-accent) 20%, transparent);
|
|
--hm-table-row-selected-background: var(--hm-table-row-hover-background);
|
|
|
|
--hm-table-footer-background: var(--hm-sem-bg-subtle);
|
|
--hm-table-footer-font-weight: 500;
|
|
|
|
--hm-table-caption-color: var(--hm-sem-fg-secondary);
|
|
--hm-table-caption-font-size: 12px;
|
|
--hm-table-caption-line-height: 18px;
|
|
--hm-table-caption-gap: 12px;
|
|
}
|
|
|
|
[data-slot="table"] {
|
|
min-width: var(--hm-table-min-width);
|
|
border-collapse: collapse;
|
|
background: var(--hm-table-background);
|
|
color: var(--hm-table-text);
|
|
font-size: var(--hm-table-font-size);
|
|
line-height: var(--hm-table-line-height);
|
|
font-weight: var(--hm-table-font-weight);
|
|
}
|
|
|
|
[data-slot="table-head"],
|
|
[data-slot="table-cell"] {
|
|
padding: var(--hm-table-cell-padding-y) var(--hm-table-cell-padding-x);
|
|
overflow-wrap: anywhere;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
[data-slot="table-head"] {
|
|
background: var(--hm-table-header-background);
|
|
color: var(--hm-table-header-text);
|
|
font-size: var(--hm-table-header-font-size);
|
|
font-weight: var(--hm-table-header-font-weight);
|
|
border-top: var(--hm-table-divider-width) solid var(--hm-table-header-border-top);
|
|
border-bottom: var(--hm-table-divider-width) solid var(--hm-table-header-border-bottom);
|
|
}
|
|
[data-slot="table-cell"] {
|
|
border-top: var(--hm-table-divider-width) solid var(--hm-table-divider-color);
|
|
}
|
|
/* The header edge replaces the divider of the first body row. */
|
|
[data-slot="table-header"] + [data-slot="table-body"] > [data-slot="table-row"]:first-child > [data-slot="table-cell"] {
|
|
border-top: 0;
|
|
}
|
|
|
|
/* Rows: hover colors the face only (body rows, not the header). */
|
|
[data-slot="table-body"] > [data-slot="table-row"]:hover {
|
|
background: var(--hm-table-row-hover-background);
|
|
}
|
|
[data-slot="table-row"][data-state="selected"],
|
|
[data-slot="table-body"] > [data-slot="table-row"][data-state="selected"]:hover {
|
|
background: var(--hm-table-row-selected-background);
|
|
}
|
|
|
|
[data-slot="table-footer"] {
|
|
background: var(--hm-table-footer-background);
|
|
font-weight: var(--hm-table-footer-font-weight);
|
|
}
|
|
[data-slot="table-footer"] [data-slot="table-cell"] {
|
|
border-top: var(--hm-table-divider-width) solid var(--hm-table-divider-color);
|
|
}
|
|
|
|
[data-slot="table-caption"] {
|
|
margin-top: var(--hm-table-caption-gap);
|
|
text-align: left;
|
|
color: var(--hm-table-caption-color);
|
|
font-size: var(--hm-table-caption-font-size);
|
|
line-height: var(--hm-table-caption-line-height);
|
|
}
|