Fix hover zone for "Floating Compact Sidebar"

[Otard95]

The guidelines say to create an issue here to update your own theme. But it doesn't cover requesting changes in someone else's. So I hope it's ok for me to request this here. So to be clear, this is not my theme, but I like it and I wanted to fix an issue I've got with it.

The change is quite simple, it's about the hover zone for the sidebar when hidden. It's too large and sometimes interferes with the UI elements of pages, making them unreachable.

I've simply updated the transform: translate3d(<this>, 0, 0) property from -90% to -98%. This value seems to push the hover zone just into the margin of the browser (inside the window but outside the website). I've tested with different window sizes and that does not seem to affect anything. And it still works when the sidebar with is toggled to slim mode.

Further, if I understand the existing theme correctly the @media (-moz-bool-pref: "zen.view.compact") makes it so it's only active when compact mode is, so there should not be any other cases to consider.

Note

I also fixed a minor inconsistency with the top seperation not being equal to the bottom one.

This is the new CSS:

@-moz-document url-prefix("chrome:") {
    @media (-moz-bool-pref: "zen.view.compact") {
        :root:not([customizing]) {
            --separation: calc(var(--zen-element-separation) + 1px);

            --margin: 7px;

            --horiz-padding: 10px;
            --vert-padding: 5px;

            @media (-moz-bool-pref: "zen.view.compact.hide-tabbar") {
                & #navigator-toolbox{
                  position: absolute !important;
                  left: 0 !important;
                  padding-right: var(--horiz-padding) !important;
                  padding-left: calc(var(--margin) + calc(var(--separation) + var(--horiz-padding))) !important;
                  padding-top: calc(var(--vert-padding) + var(--margin)) !important;
                  padding-bottom: calc(var(--vert-padding) + var(--margin)) !important;
                  top: var(--separation) !important;
                  bottom: var(--separation) !important;
                  height: auto !important;
                  border: none !important;
                  box-shadow: none !important;

                  background: none !important;
                  min-width: calc(calc(calc(var(--horiz-padding) * 2) + var(--zen-toolbox-max-width)) + var(--margin)) !important;

                  transform: translate3d(-98%, 0, 0) !important;
                }

                & #navigator-toolbox[zen-expanded]{
                    min-width: 250px !important;
                }

                & #navigator-toolbox::before{
                    content: "" !important;
                    position: absolute !important;
                    top: var(--margin) !important;
                    bottom: var(--margin) !important;
                    left: calc(var(--separation) + var(--margin)) !important;
                    right: 0 !important;

                    background: var(--zen-themed-toolbar-bg) !important;
                    border-radius: var(--zen-border-radius) !important;
                    box-shadow: 15px -10px 20px -20px black !important;
                    border: none;
                }

                & #navigator-toolbox:hover, & #navigator-toolbox[zen-has-hover], & #navigator-toolbox:focus-within, & #navigator-toolbox[zen-user-show], & #navigator-toolbox[flash-popup], & #navigator-toolbox[has-popup-menu], & #navigator-toolbox[movingtab], & #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, & #navigator-toolbox:has(.tabbrowser-tab:active), & #navigator-toolbox:has([open="true"]:not(tab):not(#zen-sidepanel-button)) {
                    transform: translate3d(0, 0, 0) !important;
                }
            }
        }
    }
}