surtic86andClaude Opus 5.5
9a04f94118
Compact, Normal and Large scale the text (13/14/16px) and the control heights (32/40/48px) via data-size on <html>. Normal is unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
193 lines
9.4 KiB
CSS
193 lines
9.4 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: calc(10px + var(--nm-density) / 2);
|
|
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: calc(40px + var(--nm-density));
|
|
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; }
|