feat(android): the tap highlight goes, a press state replaces it
The phone drew a grey box over the bounding rect of whatever was tapped, which is the web view saying what it is. It is gone in one declaration: `-webkit-tap-highlight-color` is inherited and an inherited property crosses a shadow boundary, so `html` in index.css reaches every shadow root in the app. Measured three roots deep, rgba(0, 0, 0, 0.18) before and rgba(0, 0, 0, 0) after. Removing it removes the only touch feedback several surfaces had, so the press state is part of the same change rather than a later polish item — with the highlight gone a held row measured the *hover* tint, which on a phone is synthesised by the hold itself and outlives it. The four lists' rows, the tab bar, the sidebar's destinations and the shared context-menu item take --yj-press-overlay on :active; the cards already had scale(0.97). The press selector carries a state class because a row is .track-row.selected.active, so a bare :active shows nothing on the row a phone is most likely to press. And those surfaces' hover tints move behind (hover: hover) and (pointer: fine), which is #68's gate applied to a tint rather than a revealed control. user-select, the other half of the Findings, was already done: the first rule in index.css covers the shadow roots for the same reason. touch-action: manipulation is declined — the 300ms delay it is offered for is already absent on a width=device-width viewport, and what it would really change is the gesture stack tuned by measurement on a device this session cannot measure. Closes #54
This commit is contained in:
@@ -710,10 +710,35 @@ export const contextMenuStyles = css`
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.context-menu-panel wa-dropdown-item:hover {
|
||||
/* A hover tint is for a device that hovers (#54).
|
||||
|
||||
Below the query is a phone, where a hold *synthesises* a hover
|
||||
in the WebView -- the same mechanism #68 gates the revealed
|
||||
controls on -- so an ungated tint is a highlight that arrives
|
||||
because a finger touched the row and then stays on it after the
|
||||
finger has gone. Which is indistinguishable from the press
|
||||
state below, and outlives it. */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.context-menu-panel wa-dropdown-item:hover {
|
||||
background-color: var(
|
||||
--yj-hover-overlay,
|
||||
rgba(255, 255, 255, 0.1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* And a press state is for every device, because it is the one
|
||||
piece of feedback a tap has now that the web view's own
|
||||
highlight box is gone (index.css). Stronger than the hover tint
|
||||
on purpose, and instant rather than transitioned: the only
|
||||
measured statement this repo has about transitions on these
|
||||
surfaces is the two card grids that removed theirs because
|
||||
software rendering repaints per frame, and the phone is not
|
||||
something this session can measure. */
|
||||
.context-menu-panel wa-dropdown-item:active {
|
||||
background-color: var(
|
||||
--yj-hover-overlay,
|
||||
rgba(255, 255, 255, 0.1)
|
||||
--yj-press-overlay,
|
||||
rgba(255, 255, 255, 0.12)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user