fix(Quick Reblog): restore AlreadyReblogged tick in new post footer variants

[AprilSylph]

Description

• Fixes Quick Reblog: No already-reblogged button checkmark on accounts with new footer variant #1846

Updates Quick Reblog to restore the AlreadyReblogged tick on already-reblogged posts' reblog buttons when the user has one of the two new 2025 post footer variants, via mask-image magic that I stole from my past self (the new post header's avatar component uses this to display cut-outs for badges/sub-avatars too).

The magic numbers for how the mask works is... part science, part magic. The first two magic numbers are the ellipsis dimensions, which should match the tick's bounding box dimensions. The positional magic numbers are... kind of just whatever worked? To figure out how to get a perfect overlap, I temporarily added background-color: red to the masked SVG element and background-color: blue to the tick pseudo-element. Then, I just played with the position until they fit into each other perfectly. For the "single action" reblog button variant, the numbers make sense, the position values for the tick and the mask being identical; for the other new variant, the numbers are backwards for some reason. 🤷‍♀️

This is all done in pure CSS, dropping the CSS map calls introduced in #1847, thanks to the observation that there are now only three reblog button variants:

1. footer a[href^="/reblog/"]:has(use[href="#managed-icon__reblog"])—the pre-redesign reblog button
2. footer a[href^="/reblog/"]:has(use[href="#managed-icon__ds-reblog-24"])—the "split notes count" reblog button
3. footer button:has(use[href="#managed-icon__ds-reblog-24"])—the "single action" reblog button

None of these selectors should target anything in the notes view; only the pre-redesign notes view has a reblog icon, and it's not part of a link. When combining these selectors to target all of them in one go, the button selector part must be swapped out for button:not([role]) so as not to target the button[role="tab"] containing the old reblog icon in the pre-redesign notes view.

Oh, and this removes the outdated CSS that changes the tick position on mobile-sized viewports. Now that we're putting the tick on the reblog anchor/button directly, instead of the control button container, the difference in the container size on mobile doesn't affect us anymore. In fact, in attempting to still account for it, the tick just goes in the wrong corner.

Before	After

Testing steps

1. Load the modified addon
2. Enable Quick Reblog
3. Reblog a post using Quick Reblog
   • Expected result: The reblog button in the post footer turns green/purple/red
   • Expected result: A tick is added to the reblog button
   • Expected result: The tick does not touch or overlap with the reblog button; the bottom-right corner of the icon disappears to make room for the tick
4. Confirm that the above holds true on all known post footer variants
   • Pre-redesign
   • postFooterSplitNotesCount
   • postFooterSplitNotesCountSingleAction

[AprilSylph]

Tested on Firefox on macOS, Ubuntu, and Windows 10; the tick position changes slightly due to the available fonts on each OS, but the bounding box of the pseudo-element doesn't seem to, at least not significantly enough to break the cut-out effect on the redesign variants.

[marcustyphoon]

Ooh, fancy.

Definitely one of those style PRs that's more readable using selector composition in js, but I assume you prefer the use of static styles when possible.

[marcustyphoon]

Requires -webkit-mask-image prefixed property for chromium 105-119 (windows 8, macos 10.14).

[marcustyphoon]

Tested in Chrome 105 and Safari 18.5 on macOS.