diff --git a/backlog/tasks/task-302 - Add-visible-hover-affordance-for-annotated-subtitle-tokens.md b/backlog/tasks/task-302 - Add-visible-hover-affordance-for-annotated-subtitle-tokens.md new file mode 100644 index 00000000..41fe8e9a --- /dev/null +++ b/backlog/tasks/task-302 - Add-visible-hover-affordance-for-annotated-subtitle-tokens.md @@ -0,0 +1,53 @@ +--- +id: TASK-302 +title: Add visible hover affordance for annotated subtitle tokens +status: Done +assignee: [] +created_date: '2026-04-26 03:39' +updated_date: '2026-04-26 03:40' +labels: + - overlay + - subtitle + - ux +dependencies: [] +priority: medium +--- + +## Description + + +Annotated subtitle tokens keep annotation colors on hover, but with transparent hover backgrounds there is no visible hover indication. Add a subtle affordance that preserves annotation color semantics. + + +## Acceptance Criteria + +- [x] #1 Annotated token hover keeps annotation color instead of switching to hover text color. +- [x] #2 Annotated token hover has a visible indication when hover background is transparent. +- [x] #3 Regression tests cover the hover CSS contract. + + +## Implementation Plan + + +1. Add failing CSS contract test for annotated token hover affordance. +2. Add brightness/saturation filter to annotated token hover CSS without changing annotation color. +3. Add changelog fragment and run focused verification. + + +## Implementation Notes + + +Implemented option 1 from approved design: annotated subtitle word hover keeps annotation color and adds `filter: brightness(1.18) saturate(1.08)` for visible affordance when the hover background is transparent. + +Verification passed: `bun test src/renderer/subtitle-render.test.ts`; `bun run changelog:lint`. + + +## Final Summary + + +Added a visible hover affordance for annotated subtitle tokens without changing annotation color semantics. Annotated word hover now applies a small brightness/saturation lift while retaining the existing background behavior, so transparent hover backgrounds still show feedback. + +Regression coverage updated in `src/renderer/subtitle-render.test.ts` to assert the hover filter is present and that hover color overrides are still absent for annotated tokens. Added changelog fragment `changes/302-annotated-hover-affordance.md`. + +Verification: `bun test src/renderer/subtitle-render.test.ts`; `bun run changelog:lint`. + diff --git a/changes/302-annotated-hover-affordance.md b/changes/302-annotated-hover-affordance.md new file mode 100644 index 00000000..bea4d19c --- /dev/null +++ b/changes/302-annotated-hover-affordance.md @@ -0,0 +1,4 @@ +type: fixed +area: overlay + +- Added a subtle brightness lift for annotated subtitle token hover states so transparent hover backgrounds still show a visible hover affordance. diff --git a/src/renderer/style.css b/src/renderer/style.css index 5d608162..c6e3a116 100644 --- a/src/renderer/style.css +++ b/src/renderer/style.css @@ -945,6 +945,7 @@ body.settings-modal-open [data-subminer-yomitan-popup-host='true'] { #subtitleRoot .word.word-frequency-band-5:hover { background: var(--subtitle-hover-token-background-color, rgba(54, 58, 79, 0.84)); border-radius: 3px; + filter: brightness(1.18) saturate(1.08); } #subtitleRoot .word.word-known .c:hover, diff --git a/src/renderer/subtitle-render.test.ts b/src/renderer/subtitle-render.test.ts index 55171518..a8df27d7 100644 --- a/src/renderer/subtitle-render.test.ts +++ b/src/renderer/subtitle-render.test.ts @@ -1019,6 +1019,7 @@ test('subtitle annotation CSS changes token color without overriding typography' /background:\s*var\(--subtitle-hover-token-background-color,\s*rgba\(54,\s*58,\s*79,\s*0\.84\)\);/, ); assert.match(coloredWordHoverBlock, /border-radius:\s*3px;/); + assert.match(coloredWordHoverBlock, /filter:\s*brightness\(1\.18\) saturate\(1\.08\);/); assert.doesNotMatch(coloredWordHoverBlock, /font-weight\s*:/); assert.doesNotMatch(coloredWordHoverBlock, /color:\s*var\(--subtitle-hover-token-color/); assert.doesNotMatch(