noe/tl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: drop-target and mark-editor styles

Browse source 
Glowing drop targets for annotation reparenting (cards + breadcrumbs), the
per-endpoint re-pick ✕, and the drag-to-reorder grip + drop line — the visuals
for the interactions landed in 7f3d903.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-07-02 10:11:17 -04:00
parent 0cf261c440
commit 1c6283059e
1 changed files with 42 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

42
tl/resources/public/css/app.css
View file

@ -680,6 +680,48 @@ html.dark .timeline-head {
} }
} }
/* --- drag an annotation to reparent it ---------------------------------- */
/* Every valid drop target glows while a card is being dragged; the one under
the cursor fills. The dragged card itself dims. */
@keyframes hc-drop {
0%,100% { box-shadow: 0 0 0 1px var(--pick-a); }
50% { box-shadow: 0 0 0 2px var(--pick-a), 0 0 12px 2px var(--pick-a); }
}
.ann[draggable="true"] { cursor: grab; }
.ann[draggable="true"]:active { cursor: grabbing; }
.ann.drop-ready { animation: hc-drop 1s ease-in-out infinite; }
.ann.drop-over {
animation: none;
background: color-mix(in srgb, var(--pick-a) 20%, var(--paper));
box-shadow: 0 0 0 2px var(--pick-b), 0 0 16px 3px var(--pick-b);
}
.crumb.drop-ready { animation: hc-drop 1s ease-in-out infinite; }
.crumb.drop-over {
background: color-mix(in srgb, var(--pick-a) 28%, var(--paper));
box-shadow: 0 0 0 2px var(--pick-b), 0 0 12px 2px var(--pick-b);
}
@media (prefers-reduced-motion: reduce) {
.ann.drop-ready, .crumb.drop-ready { animation: none; box-shadow: 0 0 0 2px var(--pick-a); }
}
/* --- re-pick one mark endpoint / drag-reorder marks --------------------- */
.pt-chip-x {
border: none; background: none; color: var(--mute); cursor: pointer;
font-size: 10px; padding: 0 2px; line-height: 1; flex: none;
}
.pt-chip-x:hover { color: var(--ink); }
.mark-grip {
cursor: grab; user-select: none; color: var(--mute);
padding: 0 2px; font-size: 13px; line-height: 1; flex: none; align-self: center;
}
.mark-grip:active { cursor: grabbing; }
.mark-block.dragging { opacity: 0.4; }
.mark-block.drop-before { position: relative; }
.mark-block.drop-before::before {
content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 2px;
background: var(--pick-b); box-shadow: 0 0 6px 1px var(--pick-b);
}
/* iOS Safari zooms the page when focusing a control with font-size < 16px. /* iOS Safari zooms the page when focusing a control with font-size < 16px.
On touch devices bump every form control to 16px so tapping never zooms. */ On touch devices bump every form control to 16px so tapping never zooms. */
@media (pointer: coarse) { @media (pointer: coarse) {