Github's oAuth logo is not visible - one rule fixes it.
Browser:
Mozilla/5.0 (X11; Linux x86_64; rv:82.0) Gecko/20100101 Firefox/82.0
Dark-GitLab version:
v1.5.6
Screenshot/gif:
Describe the issue (if necessary):
The GitHub's logo icon is originally black. When using GitLab Dark theme, we have a black logo on dark background - not really visible, innit?
Reproduce it:
- add GitHub oauth to signin options
- look at the signin page
Link to the page where the issue occurs:
/users/sign_in
HTML of the section where the issue occurs (if necessary):
<button id="oauth-login-github" class="btn d-flex align-items-center omniauth-btn text-left oauth-login " type="submit">
<img alt="GitHub" title="Sign in with GitHub" class="js-lazy-loaded qa-js-lazy-loaded" src="/assets/auth_buttons/github_64-84041cd0ea392220da96f0fb9b9473c08485c4924b98c776be1bd33b0daab8c0.png" loading="lazy">
<span>
GitHub
</span>
</button>
Solution
Simply add the following to the stylesheet.
#oauth-login-github > img {
filter: invert(1);
}
Why don't I do it myself?
I could, but I'm unsure where to put it if I'm perfectly honest. I have no clue where it would be the most appropriate place to put this rule, so I'll just leave it here and you can add it where you see it fit best.