Andreas Reinhold / reiniandClaude Opus 5.5
d687084cf0
On mobile the filter operator and value fields span the row instead of fixed desktop widths, and empty value rows are hidden. "Add filter" becomes an M3 tonal button on all widths so it stands out from the outlined filter fields. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
193 lines
9.3 KiB
CSS
193 lines
9.3 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" is an M3 tonal button, not one more outlined field. A select has no
|
|
placeholder, so the label lies over it in the same grid cell and lets taps through.
|
|
A zero width with a 100% minimum keeps the longest option from widening the button. */
|
|
.add-filter { display: grid; justify-content: end; margin-block-start: 4px; }
|
|
.add-filter > * { grid-area: 1 / 1; }
|
|
.add-filter select {
|
|
inline-size: 0;
|
|
min-inline-size: 100%;
|
|
block-size: 40px;
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background: var(--md-sys-color-secondary-container); /* drops the dropdown arrow too */
|
|
cursor: pointer;
|
|
}
|
|
.add-filter select:hover { background-image: var(--nm-state-hover); }
|
|
.add-filter label {
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding-inline: 16px 24px;
|
|
pointer-events: none;
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
font: var(--md-sys-typescale-label-large);
|
|
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
}
|
|
.add-filter label::before {
|
|
content: '';
|
|
inline-size: 18px;
|
|
block-size: 18px;
|
|
background-color: currentColor;
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z'/%3E%3C/svg%3E") center / 18px no-repeat;
|
|
}
|
|
/* 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; }
|