fix: add visible focus rings to home buttons, add mobile install screenshot#9
Merged
Merged
Conversation
…enshot Filter/icon/pill buttons on the home page relied on Chromium's default :focus-visible outline, whose auto-picked color derives from each element's text color. Since these buttons use --muted (a dim gray) for their default text color, the ring was nearly invisible against the dark background, unlike dialog buttons/radios which use --text or accent-color and got a clearly visible ring. Added an explicit accent-colored :focus-visible outline to match. Chrome's install dialog only shows screenshots whose form_factor matches the install context (wide on desktop, narrow on mobile), and same-form_factor screenshots must share an identical aspect ratio or they're silently dropped. With only one "wide" screenshot, desktop Chrome's install dialog showed just the single desktop screenshot. Added a second "wide" screenshot (the mobile UI composited onto a 1440x1120 canvas matching the existing wide screenshot's dimensions) so the desktop install dialog now has two scrollable screenshots.
|
🔎 Cloudflare preview: https://48831e21-feedreader.phatpham9.workers.dev Uploaded from |
Dialog buttons (Cancel/Save/Don't show again) and the theme/density/ source option rows had no :hover rule at all, while home page filter and icon buttons already had one (just a subtle border tint, easy to miss on small circular buttons). Unified both: strengthened the home button hover with an added background tint, and added matching hover styling to .dialog-button, .dialog-button-primary, .config-option, and .config-option--choice (including its checked state).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Filter/icon/pill buttons on the home page relied on Chromium's default :focus-visible outline, whose auto-picked color derives from each element's text color. Since these buttons use --muted (a dim gray) for their default text color, the ring was nearly invisible against the dark background, unlike dialog buttons/radios which use --text or accent-color and got a clearly visible ring. Added an explicit accent-colored :focus-visible outline to match.
Chrome's install dialog only shows screenshots whose form_factor matches the install context (wide on desktop, narrow on mobile), and same-form_factor screenshots must share an identical aspect ratio or they're silently dropped. With only one "wide" screenshot, desktop Chrome's install dialog showed just the single desktop screenshot. Added a second "wide" screenshot (the mobile UI composited onto a 1440x1120 canvas matching the existing wide screenshot's dimensions) so the desktop install dialog now has two scrollable screenshots.