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

Refined Github creates white background on my reaction icons #1035

Closed
coreyfarrell opened this issue Nov 20, 2019 · 9 comments
Closed

Refined Github creates white background on my reaction icons #1035

coreyfarrell opened this issue Nov 20, 2019 · 9 comments
Labels
bug 🐛 Something isn't working

Comments

@coreyfarrell
Copy link

Refined Github has a style:

.reaction-summary-item.user-has-reacted {
	--background: #f2f8fa;
}

This results in an oddly out of place white background for the icon of my own reactions. I've fixed this in my own browser by adding a custom userstyle to my browser:

/* ==UserStyle==
@name           Refined-Github Dark fix
@namespace      github.com/cfware
@version        1.0.0
@description    Fix conflict refined-github dark conflict
@author         Me
==/UserStyle== */

@-moz-document domain("github.com") {
    .reaction-summary-item.user-has-reacted {
        --background: transparent!important;
    }
}

Would Github-Dark consider adding something to like this?

@coreyfarrell coreyfarrell added the bug 🐛 Something isn't working label Nov 20, 2019
@silverwind
Copy link
Member

silverwind commented Nov 20, 2019

What is this --background syntax exactly? I assume replacing with background works as expected?

@coreyfarrell
Copy link
Author

--background is a CSS Variable being set for that specific selector and its children. Just setting background on this class would not work as the --background variable is actually being applied to an img within:

.reaction-summary-item img {
	max-width: 100%;
	border-radius: inherit;
	background-color: var(--background);
}

Simply overwriting the background of this img does also work.

@silverwind
Copy link
Member

Ok, odd variable name but if it only applies to a element and children, it's probably okay.

Can you show a screenshot of how these own reactions look with our style disabled?

@coreyfarrell
Copy link
Author

With Refined-Github but no additional style:
Screenshot from 2019-11-20 16-01-34

With Refined-Github + GitHub-Dark + my added --background patch all enabled:
Screenshot from 2019-11-20 16-01-57

@silverwind
Copy link
Member

Ok, seems resonable to add as a manual style. Our automatic generator can not yet pick up variables like this.

silverwind added a commit that referenced this issue Nov 20, 2019
* add refined github reaction rule - fixes #1035 (silverwind)
* fix mobile hero page - fixes #1032 (silverwind)
* remove background from notifications v2 (silverwind)
@silverwind
Copy link
Member

Pushed and released as v1.22.142, let us know if it works.

@coreyfarrell
Copy link
Author

Sorry to have created confusion, you added --background: #f2f8fa. That is the value from Refined Github (nearly white). It needs to instead be --background: transparent.

silverwind added a commit that referenced this issue Nov 20, 2019
* fix refined-github reaction backgground - #1035 (silverwind)
@silverwind
Copy link
Member

Oops, fixed and pushed v1.22.143.

@coreyfarrell
Copy link
Author

Looks great now, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants