Skip to content

Styling adjustment on header for certain pages (Fixes #15873) #16027

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

Closed
wants to merge 1 commit into from

Conversation

lbrooks81
Copy link

If this changeset needs to go into the FXC codebase, please add the WMO and FXC label.

One-line summary

Added styling to fix brief flash of color upon hovering over navigation items

Significant changes and points to review

Issue / Bugzilla link

#15873

Testing

http://localhost:8000/fr/firefox/challenge-the-default/
http://localhost:8000/en/firefox/family/

@lbrooks81 lbrooks81 requested a review from a team as a code owner February 25, 2025 20:12
@maureenlholland maureenlholland added Needs Review Awaiting code review Frontend HTML, CSS, JS... client side stuff labels Feb 26, 2025
Comment on lines +167 to +171
a {
&:hover {
color: $color-black !important;
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just quickly looking at the impact: (not diving into formatting and linting as this would fail the checks, starting with important not being allowed generally etc.…)

  1. It's not always black, current item uses dark green so there are perhaps more combinations to check for.
  2. I might have missed the idea why this is only applied in the js enhanced block, and not universally?
  3. There are existing specificity overrides, so this might be worth exploring if such nesting helps with the order:

// extra specificity to override link colors on some Firefox pages
&:link,
&:visited {
color: $color-black;
text-decoration: none;
}

@wen-2018
Copy link
Collaborator

Closed in favor of #16147

@janbrasna
Copy link
Contributor

@lbrooks81 Thanks for the changeset, it helped tracking down the actual missing anchor in the specificity — but eventually needed a slightly different approach to fit in — but thanks to this contribution things started moving to getting it fixed, so the effort put into the PR is appreciated. 🎩 Thanks again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Frontend HTML, CSS, JS... client side stuff Needs Review Awaiting code review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants