peter
851b97b09d
Back from a channel page hands the card its focus again after a mouse trip; revealed on focus-within, its hover row stayed up under no pointer until a reload (owner). The row, the Play layer, the Continue + Restart pair and the global .reveal rule now show on hover or on :focus-visible on the card or inside it, so Tab and the arrow keys still reveal it.
13 lines
921 B
TypeScript
13 lines
921 B
TypeScript
// A card's hover chrome: shown when the card is hovered or holds KEYBOARD focus on a mouse,
|
|
// removed on touch (`.reveal-hover`, index.css), where the card offers the same actions through its
|
|
// "…" beside the title. One string, so the video card and the Plex cards reveal the same way.
|
|
// Keyboard focus is `:focus-visible` on the card or inside it, not any focus: Back from a channel
|
|
// page hands the card its focus back, and with `:focus-within` the row stayed up under no pointer
|
|
// until a reload (owner).
|
|
export const HOVER_REVEAL =
|
|
"reveal-hover opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 group-has-focus-visible:opacity-100 transition-opacity";
|
|
|
|
/** What sits under that chrome at rest (a duration, a watched pill) steps aside while it shows. */
|
|
export const HOVER_YIELD =
|
|
"transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0 group-has-focus-visible:opacity-0";
|