mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-22 06:56:35 +00:00
Maurice
341520f98b
The hover controls took their room at rest, so a place's line and a note's text broke early. A place now gives way only while hovered, a note's controls fade in over the end of its text in the note's own colour, and a picked place shows none. All three controls of a place come out together: the add-booking ticket waited for a React hover state and came a beat late. A click no longer leaves them showing; keyboard focus and an open menu do.
70 lines
2.6 KiB
CSS
70 lines
2.6 KiB
CSS
/* Day plan rows: the controls that only show on hover take no room at rest
|
|
either, so a row's text runs to the edge of its card. A place gives way while
|
|
they are out (its one line truncates). A note's text wraps over several
|
|
lines, so its controls fade in over the end of the text instead of
|
|
reflowing it. Hover, keyboard focus and an open menu bring them out, the
|
|
focus a click leaves on a row does not; on touch they stay in the row, like
|
|
the reorder arrows (index.css). */
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.dp-row:not(:hover):not(:focus-visible):not(:has(:focus-visible)):not(:has([data-menu-open])) .dp-row-actions {
|
|
max-width: 0;
|
|
overflow: hidden;
|
|
padding-inline-start: 0;
|
|
}
|
|
/* The fade is the note's own surface: its tint over the day's tint (a plugin
|
|
may set one) over the card, drawn as layers because a tint alone is
|
|
see-through. All come from theme variables, so it matches in light and
|
|
dark and for every note colour. */
|
|
.dp-note-actions {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
inset-inline-end: 0;
|
|
padding-inline: 32px 4px;
|
|
border-start-end-radius: 11px;
|
|
border-end-end-radius: 11px;
|
|
background:
|
|
linear-gradient(to left, var(--dp-note-tint) 60%, transparent),
|
|
linear-gradient(to left, var(--dp-day-tint, transparent) 60%, transparent),
|
|
linear-gradient(to left, var(--bg-card) 60%, transparent);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.15s;
|
|
}
|
|
[dir='rtl'] .dp-note-actions {
|
|
background:
|
|
linear-gradient(to right, var(--dp-note-tint) 60%, transparent),
|
|
linear-gradient(to right, var(--dp-day-tint, transparent) 60%, transparent),
|
|
linear-gradient(to right, var(--bg-card) 60%, transparent);
|
|
}
|
|
.dp-row:hover .dp-note-actions,
|
|
.dp-row:focus-visible .dp-note-actions,
|
|
.dp-row:has(:focus-visible) .dp-note-actions,
|
|
.dp-row:has([data-menu-open]) .dp-note-actions {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
/* The add-booking ticket beside a place's arrows and "...": out with the row's
|
|
hover in CSS like them. A React hover state re-rendered the whole day list
|
|
first, so it always came out a beat behind the others. A picked place shows
|
|
no controls of its own; on touch, with no hover, the ticket stays out. */
|
|
.dp-add-booking {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.dp-row:hover .dp-add-booking,
|
|
.dp-row:focus-visible .dp-add-booking,
|
|
.dp-row:has(:focus-visible) .dp-add-booking,
|
|
.dp-row:has([data-menu-open]) .dp-add-booking {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
@media (hover: none) {
|
|
.dp-add-booking {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|