local-it/mitgliederverwaltung
local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 59 Pull requests 5 Projects 2 Releases 5 Packages 1 Activity Actions

fix(member-live): correct the overview pinned-column layering

Browse source
This commit is contained in:
Simon 2026-07-16 09:38:59 +02:00
parent 4d100aef22
commit e16ef1bea4
2 changed files with 10 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

44
assets/css/app.css
View file

@ -864,16 +864,15 @@
}
/*
* Horizontal-scroll fade for the pinned checkbox column: instead of hiding the
* scrolled-away content behind a hard opaque block, a gradient on the right edge
* of the sticky cell fades the incoming content, signalling there is more behind
* it. overflow: visible lets the ::after gradient extend past the cell; the cell
* keeps its own (zebra) background so the checkbox stays legible.
* Horizontal-scroll fade for the pinned checkbox column HEADER only: as the
* title cells scroll left behind the pinned checkbox they fade softly into the
* opaque base-100 header (gradient on the right edge of the sticky header cell)
* instead of a hard cut. Body rows deliberately have NO such fade — they are
* simply covered by the opaque (zebra) checkbox cell, so nothing tints the strip
* right of the body checkboxes. A gradient there would fade to the row's zebra
* colour and read as a grey shimmer beside the checkboxes (most visible while
* scrolling), which is not wanted.
*/
[data-sticky-first-col-rows="true"] .table.table-zebra td.sticky-first-col-cell {
overflow: visible;
}
[data-sticky-first-col-rows="true"] .table.table-zebra td.sticky-first-col-cell::after,
[data-sticky-first-col-rows="true"] .table.table-zebra thead th.sticky-first-col-th::after {
content: "";
position: absolute;
@ -882,34 +881,9 @@
left: 100%;
width: 1.25rem;
pointer-events: none;
}
[data-sticky-first-col-rows="true"]
.table.table-zebra
tbody
tr:nth-child(odd)
> td.sticky-first-col-cell::after {
background: linear-gradient(to right, var(--color-base-100), transparent);
}
[data-sticky-first-col-rows="true"]
.table.table-zebra
tbody
tr:nth-child(even)
> td.sticky-first-col-cell::after {
background: linear-gradient(to right, var(--color-base-200), transparent);
}
[data-sticky-first-col-rows="true"]
.table.table-zebra
tbody
tr[data-row-interactive="true"]:is(:hover, :has(:focus-visible))
> td.sticky-first-col-cell::after {
background: linear-gradient(to right, var(--color-base-300), transparent);
}
[data-sticky-first-col-rows="true"] .table.table-zebra thead th.sticky-first-col-th::after {
background: linear-gradient(to right, var(--color-base-100), transparent);
}
/* Compact density: narrower fade so the gradient does not visually reach into the
checkbox column's own content area in the tighter table-xs cell. */
[data-sticky-first-col-rows="true"] .table.table-zebra.table-xs td.sticky-first-col-cell::after,
/* Compact density: narrower fade in the tighter table-xs header cell. */
[data-sticky-first-col-rows="true"] .table.table-zebra.table-xs thead th.sticky-first-col-th::after {
width: 0.5rem;
}