[custom_backforward_connected_to_location_bar.css + forward_button_hide_when_disabled.css + others] visual glitches in identity box

[IdrisQe]

1. Issue description:
   When the forward-button is hidden, the rounded old-style connected-back-button looks incorrect when compared to previous versions (the "background" of the button is seemingly invisible and blends in with the colour of the page rather than having a visible outline, no matter if it's active or inactive) and it doesn't correctly connect to the identity box when the identity box is set to have colours like it used to. The spacing of the padlock and tracking protection icons is also way off. It seems the Identity Box also doesn't align with the megabar correctly anymore, having a bit of extra space at the top and botto, rather than seamlessly connecting with the top and bottom of the bar. Also, kind of erroneously, the hover colour-change for the identity box is active when hovering over the padlock icon, but not when hovering over the tracking protection icon, and if the cursor is far right enough from the padlock, the identity box itself can be visually "clicked" like a button on its own (although nothing happens).

Additional mild annoyance: The particular padlock and tracking protection icons I previously used (default Firefox 70-80ish I think? Visible in the "old" picture) aren't available to select it seems. It would be nice if they could be included in future versions.

Edit: The connected back button, when inactive, also looks kind of messed up on pages which don't have the identity box like "about:blank"

2. Steps to reproduce the issue:
   N/A

3. SCREENSHOT(S) of the issue (drag & drop images into this post):
   Old compared to current view:
   
   The broken hovering/clicking of the identity box:
   
   The messy looking back button on pages that don't show the identity box:
   

4. about:config prefs (custom CSS files won't work, if these prefs are set to false)

• toolkit.legacyUserProfileCustomizations.stylesheets > true (yes / no): Yes
• browser.proton.enabled > true (yes / no): Yes
• does the issue occur with latest CustomCSSforFx release (yes / no): Yes

5. System information

• OS & OS version: Windows 10 v1909
• Firefox version: Waterfox G4.0.8 (Based on Gecko 91.3, unsure exact Firefox version)
• Firefox (lw) theme (e.g. default, dark, 'theme name/link'): Modern Light (Default)
• This projects userChrome.css/userContent.css 'settings' the issue occurs with:

custom_backforward_connected.css
custom_backforward_connected_to_location_bar.css
identitybox_colors.css
forward_button_hide_when_disabled.css

I understand this could just be a Waterfox issue, but to my knowledge the UI is identical to the matching Firefox version it's based off in each iteration, and I previously used the addon on Waterfox without any Waterfox-based cosmetic problems. Granted, that could have changed in this more recent version. Apologies if that's the case.

[Aris-t2]

The features offered by custom_backforward_connected* options are mainly for the old buttons appearance offered by buttons_on_navbar_classic_appearance.css.

I will try to tweak those options on next release.

Test this as a workaround:

#back-button[disabled=true] {
  opacity: 1.0 !important;
}
#forward-button .toolbarbutton-icon,
#back-button .toolbarbutton-icon {
  border: 1px solid lightgrey !important;
}

The identitybox_colors.css needs some tweaking too. I can reduce the not needed padding, but there is no way to fix the area where the round back button overlaps with location bar.
Mozillas changes to location bar, identity box and everything around the identity box make the "old" appearance impossible to achieve.