Sidebar callout widget CSS specificity issues

[siliconforks]

This bug report contains two separate issues, but they're kind of related so I thought I'd report them together.

When I look at the sidebar on the HoverCraft website (example: https://hovercraft.vip/philosophy/), the button has the same color for both the text and the background.

The sidebar on the SlickStack website (example: https://slickstack.io/about) has a similar but slightly different problem. At first the button appears to be working fine.

However, when I hover the mouse over the button, the background color becomes the same as the text color. (Note that screenshots on Windows apparently do not capture the mouse pointer, but the screenshot was taken with the mouse pointer hovering over the button.)

The problem in both cases appears to be that the sidebar CSS rules have higher specificity than the button's own CSS rules. I'm not sure what is the best way to fix this, but there's a couple of new(ish) CSS features that may be helpful here:

1. The :where pseudo-class

2. Cascade layers

[jessuppi]

Thanks again @siliconforks

This temporary fix should help: https://github.com/littlebizzy/hovercraft/commit/c98ed8e709ae1dbd0c04e9cc2ab2c36a831cf176

We may have to think about how many settings we want for these elements vs. default/hardcode CSS rules. For example, do we really want separate text/link/hover/etc CSS rules for this or not?

[jessuppi]

Another tweak: https://github.com/littlebizzy/hovercraft/commit/054070e1349823e16f9c3db0b64de1b09628af0d

[jessuppi]

Still not enough, so added a few !important flags for now: https://github.com/littlebizzy/hovercraft/commit/efcf1c69b4752a459097edf8d7c03c3115d7fae7