160 lines
8.1 KiB
CSS
160 lines
8.1 KiB
CSS
/*
|
|
* Data tables (M3 has no table spec): surface rows, outline-variant dividers,
|
|
* title-small headers, hover state layer, secondary-container selection.
|
|
* Compact density: ~40px rows.
|
|
*/
|
|
|
|
table.list, .table-list {
|
|
font: var(--md-sys-typescale-body-medium);
|
|
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
font-variant-numeric: tabular-nums;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
border-radius: var(--md-sys-shape-corner-medium);
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
margin-block-end: 8px;
|
|
}
|
|
/* A table that scrolls sideways: the wrapper is the outlined card, so the card edge and
|
|
corners stay visible while the table scrolls inside it */
|
|
.autoscroll:has(> table.list) {
|
|
clear: both; /* scrolling makes it narrow beside a float instead of going below it */
|
|
padding: 0;
|
|
margin-block-end: 8px;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
border-radius: var(--md-sys-shape-corner-medium);
|
|
}
|
|
.autoscroll > table.list { margin: 0; border: 0; border-radius: 0; }
|
|
table.list th, .table-list-header {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-small);
|
|
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
padding-block: 10px;
|
|
padding-inline: 8px;
|
|
border-block-end: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
table.list th a, table.list th a:link, table.list th a:visited { color: var(--md-sys-color-on-surface-variant); }
|
|
table.list td {
|
|
block-size: 40px;
|
|
padding-block: 4px;
|
|
padding-inline: 8px;
|
|
border-block-start: 1px solid var(--md-sys-color-outline-variant);
|
|
background-color: transparent;
|
|
}
|
|
table.list tbody tr:first-child td, table.list tbody tr.group + tr td { border-block-start: 0; }
|
|
|
|
/* No striping: M3 separates rows with dividers */
|
|
table.list:not(.odd-even) tbody tr:nth-child(odd), table.list:not(.odd-even) tbody tr:nth-child(even),
|
|
.odd, .even, .box table.list:not(.odd-even) tbody tr:nth-child(even), .box .even {
|
|
background-color: transparent;
|
|
}
|
|
table.list:not(.odd-even) tbody tr:nth-child(odd):hover, table.list:not(.odd-even) tbody tr:nth-child(even):hover,
|
|
.odd:hover, .even:hover {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
|
|
}
|
|
|
|
/* Status names in the workflow header are td cells: same band as the th row above */
|
|
table.workflows thead td {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-small);
|
|
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
border-block-end: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
/* Role names in permission group rows sit on the group name's line */
|
|
table.permissions tr.group td { vertical-align: middle; }
|
|
/* Field permissions: the "»" copy link stays next to its select */
|
|
table.fields_permissions td { white-space: nowrap; }
|
|
/* An empty table: no divider under the header, the table border closes it */
|
|
table.list:not(:has(tbody tr)) th { border-block-end: 0; }
|
|
/* Child projects: chevron in the theme's colour, one file per mode */
|
|
tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-right-idnt.svg); }
|
|
[dir="rtl"] tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-left-idnt.svg); }
|
|
:root[data-mode="dark"] tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-right-idnt-dark.svg); }
|
|
:root[data-mode="dark"][dir="rtl"] tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-left-idnt-dark.svg); }
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-mode="light"]) tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-right-idnt-dark.svg); }
|
|
:root:not([data-mode="light"])[dir="rtl"] tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-left-idnt-dark.svg); }
|
|
}
|
|
|
|
/* Repository file, annotate and diff views: outlined like table.list, line numbers
|
|
separated by one divider instead of a grid (scm.css loads after the theme, hence html) */
|
|
html table.filecontent {
|
|
inline-size: 100%;
|
|
overflow: hidden;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border-radius: var(--md-sys-shape-corner-medium);
|
|
background-color: var(--md-sys-color-surface-container-lowest);
|
|
}
|
|
html table.filecontent th, html table.filecontent th.line-num {
|
|
border: 0;
|
|
border-inline-end: 1px solid var(--md-sys-color-outline-variant);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
}
|
|
html table.filecontent th.filename {
|
|
padding-block: 10px;
|
|
padding-inline: 12px;
|
|
border-inline-end: 0;
|
|
border-block-end: 1px solid var(--md-sys-color-outline-variant);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-small);
|
|
}
|
|
/* CSV import preview */
|
|
.sample-data {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border-radius: var(--md-sys-shape-corner-medium);
|
|
background-color: transparent;
|
|
}
|
|
.sample-data td { padding-block: 8px; padding-inline: 12px; border: 0; border-block-start: 1px solid var(--md-sys-color-outline-variant); }
|
|
.sample-data tr:first-child td { border-block-start: 0; background-color: var(--md-sys-color-surface-container); }
|
|
|
|
tr.group td {
|
|
padding-block: 12px 8px;
|
|
padding-inline: 8px;
|
|
border-block-end: 1px solid var(--md-sys-color-outline-variant);
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
tr.group span.name { font-weight: 500; }
|
|
tr.group span.totals, tr.group a.toggle-all { color: var(--md-sys-color-on-surface-variant); }
|
|
tr.group span.totals .value { color: var(--md-sys-color-on-surface); font-weight: 500; }
|
|
table.list tbody tr.group:hover { background-color: transparent; }
|
|
|
|
/* Selected rows (context menu); core uses !important */
|
|
html .context-menu-selection, html .context-menu-selection:hover {
|
|
background-color: var(--md-sys-color-secondary-container) !important;
|
|
color: var(--md-sys-color-on-secondary-container) !important;
|
|
}
|
|
html .context-menu-selection a, html .context-menu-selection a:hover { color: var(--md-sys-color-on-secondary-container) !important; }
|
|
html .context-menu-selection svg.icon-svg { stroke: var(--md-sys-color-on-secondary-container) !important; }
|
|
|
|
table.list tr.overdue:not(.context-menu-selection) td.due_date { color: var(--md-sys-color-error); }
|
|
a.issue.closed, a.issue.closed:link, a.issue.closed:visited { color: var(--md-sys-color-on-surface-variant); }
|
|
|
|
.query-totals { color: var(--md-sys-color-on-surface-variant); }
|
|
.query-totals .value { color: var(--md-sys-color-on-surface); font-weight: 500; }
|
|
#query_form_content { font-size: inherit; }
|
|
#query_form_with_buttons > p.contextual { font: var(--md-sys-typescale-label-large); }
|
|
|
|
/* Query filters: checkbox + label sit level with the 40px operator/value fields. The field cell is
|
|
40px high and centers its content; the row stays top-aligned so an expanded multi-select grows
|
|
downwards without dragging the label to its middle. */
|
|
#filters-table .filter { align-items: flex-start; margin-block: 4px 0; }
|
|
#filters-table .filter .field { display: flex; align-items: center; gap: 8px; min-block-size: 40px; }
|
|
#filters-table .filter .field input[type="checkbox"] { margin: 0; }
|
|
#filters-table .filter .values { display: flex; align-items: center; min-block-size: 40px; flex-wrap: wrap; gap: 4px 8px; }
|
|
.add-filter { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
|
|
/* Core fixes the operator at 120px, too narrow for "has never been" with M3 field padding */
|
|
#filters-table .filter .operator select { inline-size: 180px; }
|
|
/* All value fields share one width so the filter rows form a clean second column.
|
|
"between" filters show two fields (both spans visible): each takes half. */
|
|
#filters-table .filter .values select.value,
|
|
#filters-table .filter .values input.value:not([size="3"]) { inline-size: 260px; }
|
|
#filters-table .filter .values:has(> span:first-child + span:not([style*="none"])) input.value { inline-size: 126px; padding-inline: 8px; }
|