Fix for OCP AlreadyReblogged icon color change

[nobodysuspectsthebutterfly]

Re issue #2098: #2098

A tumblr update changed the selector and property for the reblog icon; this fixes the css so that AlreadyReblogged turns green as expected. Couldn't get the selector [style="--icon-color-primary:rgba(var(--black), 0.65)"] to work properly for some reason, but at least this works.

[AprilSylph]

The reason targeting [style="--icon-color-primary: rgba(var(--black), 0.65);"] doesn't work with the current CSS is because it's targeting an inline style and applying a non-inline style. Inline styles (those applied with the style attribute) always have higher specificity, so it does nothing.

Two solutions to this:

• Change the whole selector to target the inner <use> element, e.g. .published svg[style="--icon-color-primary: rgba(var(--black), 0.65);"] > use
• Force higher specificity on the existing CSS with !important, e.g. --icon-color-primary: rgb(var(--green)) !important;

The reason we filter to grey reblog buttons only is to avoid clashes with Tumblr's own changing colours. Without it, AlreadyReblogged turns reblog buttons almost permanently green, overriding e.g. the purple that appears when using Tumblr's native fast-queue feature.

[AprilSylph]

Hm, actually it looks like Tumblr is not setting that style with perfect consistency, and there's a couple more variations that do the same thing... how annoying. We can't use RegExp in CSS selectors so I guess something more vague like [style*="--black"] will have to do.

[marcustyphoon]

For reference, the CSS used in XKit Rewritten can be seen here: AprilSylph/XKit-Rewritten@48aaf7f

[AprilSylph]

Suggested change

	.xkit--react .reblogged svg {
	--icon-color-primary: rgb(var(--green)) !important;
	.xkit--react .reblogged svg[style*="--black"] use {
	--icon-color-primary: rgb(var(--green));