Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(theme): link hover color inside a custom block #2876

Merged
merged 1 commit into from
Aug 30, 2023

Conversation

skirtles-code
Copy link
Contributor

This PR explicitly sets the a:hover style for links inside custom blocks.

A link inside a warning block uses the yellow theme, but the :hover uses the brand theme:

Custom block link

There's a similar problem for danger blocks.

It's a bit more complicated for tip, info and details blocks. In theory, they have the same problem. However, the current CSS overrides for those 3 custom blocks set the link color to --vp-c-brand-1, which is what it would be anyway. As a result, there isn't a visual inconsistency on :hover, as it just inherits the default color of --vp-c-brand-2. I've chosen to include an explicit :hover override for those 3 custom blocks too. It seems inconsistent to set the color for a but not a:hover.

@brc-dd brc-dd merged commit 39784ca into vuejs:main Aug 30, 2023
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 7, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants