Active nav bar button for github.com/pulls is unreadable (blue text on blue bg)

[ctrlrsf]

When you visit github.com/pulls and click on Created, Mentioned, or Assigned on the top nav bar, the button color changes to a blue background. The text is also blue so button text is unreadable. See screenshots for detail.

URL: github.com/pulls
Browser: Safari 10.0.3

Unstyled Content

• I am using the most up-to-date GitHub Dark style!
• No other existing issue and/or pull request.
• Provide the URL of the unstyled content.

[Mottie]

Hi @ctrlrsf!

I am not seeing the same issue... my base color is #6D8048 in this screenshot

Please try updating the style again.

[ctrlrsf]

@Mottie My base color is #4183C4 and my style is up to date. I also uninstalled and re-installed it just in case. Note, only see this issue with Safari. Is that a screengrab of Safari in your comment?

[Mottie]

No, I use Chrome. I don't own any apple products. @silverwind, would you please check this out?

[silverwind]

Can reproduce. There's a whole lot more link colors wrong in Safari because of a weird specificity issue. a:not([href*="/labels/"]) is winning over a.header-nav-link, despite the latter coming later in the stylesheet.

I think Safari might be violating the CSS spec here, but we can see if something can be done about the a selector. Maybe we can finally remove the labels hack so this won't be an issue.

[xt0rted]

Edge has the same problem with styles not applying the same as in Chrome. I had to setup a custom style sheet to fix these as they came up xt0rted/edge-github-dark#edge.css

[ctrlrsf]

I'm seeing some other style issues with Safari compared to Chrome that might be related.

Notice the commit messages (which are links) are blue (base color) in Safari. Chrome they're grey. These blue links on top of the blue background in the /pulls tab is why I can't see them.

Both Safari and Chrome have updated themes as of 11AM.

I tested with Safari Technology Preview and it looks the same as Safari (10.0.3).

Safari:

Chrome:

[silverwind]

I've found two issues for Safari:

• Maximum style length? 350d/stylish#25
• GitHub seems to serve different HTML to Safari than to Chrome/Firefox. The header has the class .site-header on Chrome/Firefox but just .header on Safari. Just great. 😩

I can't really test Edge unless I boot a VM, so focus will be on Safari first.

[silverwind]

@ctrlrsf update Stylish to 1.9.8 and possibly reinstall the style.

[silverwind]

Oh, and uncheck the minify option in Stylish too.

[silverwind]

@xt0rted which extension are you using in Edge?

[xt0rted]

@silverwind I setup my own because Tampermonkey doesn't work due to security header issues, and Stylish/Stylus isn't available yet. xt0rted/edge-github-dark can be side loaded in Chrome or Edge to apply the GitHub-Dark theme.

[xt0rted]

@silverwind it's been awhile since I reviewed the Edge specific styles. I've turned them off so I can see what ones are still needed. A fair amount has been fixed by the looks of it but there's still some basic ones that are needed. If you go to take a look at this let me know so I can make sure you have the most current version.

[ctrlrsf]

@silverwind That did it! Looks perfect now. Had to install Stylish 1.9.8 manually from http://sobolev.us/stylish/ because version on Apple's extension website is 1.9.1. I saw in 350d/stylish#25 that 350d will be submitting 1.9.8 to Apple ASAP.

[silverwind]

@xt0rted we could make a small Edge-specific section in the style if you like. I'd appreciate a pull request.