Refined Github creates white background on my reaction icons

[coreyfarrell]

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?

• Browser: Firefox 70
• Operating System: Fedora 30
• Link to page with the issue: chore: bump to istanbul alphas jestjs/jest#9192 (comment)
• Screenshot:
  

[silverwind]

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

[coreyfarrell]

--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]

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]

With Refined-Github but no additional style:

With Refined-Github + GitHub-Dark + my added --background patch all enabled:

[silverwind]

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

[silverwind]

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

[coreyfarrell]

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]

Oops, fixed and pushed v1.22.143.

[coreyfarrell]

Looks great now, thank you!