No card flicker during sort: body.wt-sorting freezes item transitions; hover lift gated behind @media (hover:hover)

Touch no longer triggers the hover lift (which flickered while dragging), and
transitions/hover-transform on sortable items are frozen during an active drag.
This commit is contained in:
Asger Geel Weirsøe
2026-06-14 19:25:00 +02:00
parent b70a65d39e
commit 437b4fadd2
3 changed files with 17 additions and 5 deletions
+7 -1
View File
@@ -156,7 +156,9 @@ body::before {
padding: 1.25rem;
transition: border-color 0.2s, transform 0.16s, box-shadow 0.16s;
}
.wt-card--hover:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
@media (hover: hover) {
.wt-card--hover:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
}
.wt-card--raised { background: var(--color-surface); box-shadow: var(--wt-shadow); }
.wt-card--raised.wt-card--hover:hover { transform: translateY(-2px); box-shadow: var(--wt-shadow-hover); }
.wt-card-date { font-size: 0.75rem; color: var(--color-muted); }
@@ -174,6 +176,10 @@ body::before {
.drag-handle:active { cursor: grabbing; }
[data-wt-sortable] > [data-item-id] { cursor: default; }
.wt-dragging { opacity: 0.4; }
/* While actively sorting, freeze transitions/hover on the items so cards don't
flicker as the finger/pointer passes over them. */
.wt-sorting [data-item-id], .wt-sorting [data-item-id] * { transition: none !important; }
.wt-sorting [data-item-id]:hover { transform: none !important; }
/* The floating clone that follows the finger on touch (the "popped-out" card). */
.wt-drag-clone {
position: fixed; left: 0; top: 0; z-index: 9999;