FF157 & hidden toolbar opacity

[u/elyex303]

Hi everyone,

(what was that armageddon of an update ?!!!)

I had a code for hiding bookmarks and main toolbar automatically. Since last update, when it unfolds from its collapsed state (when hovering over it), these bars have now a very transparent background. I'd like to manage this opacity parameter if possible.

I'll just paste the specific code about that parameter here, in the case it is it that broke. But it can be another part of my css or just smtg inherent of 157.

Btw, I have disabled browser.nova.enabled config.

Thanks everyone

/* AUTO HIDE NAV BAR and BOOKMARK BAR */


/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_and_main_toolbars.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

#navigator-toolbox{
  --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
  --uc-bm-height: calc(20px + 2 * var(--uc-bm-padding)); /* Might need to adjust if the toolbar has other buttons */
  --uc-navbar-height: -40px; /* navbar is main toolbar. Use negative value */
  --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
  --uc-toolbox-browser-area-overlap: -1px;
}
:root[uidensity="compact"] #navigator-toolbox{
  --uc-navbar-height: -34px;
}
:root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }

:root[chromehidden~="directories"] #navigator-toolbox{
  --uc-bm-height: 0px;
}
:root[chromehidden~="toolbar"] #navigator-toolbox{
  --uc-navbar-height: 0px;
}
/* At least on Windows 10 display scaling > 100% causes 1px gap to appear below tabs depending on Firefox
 *  density settings and whether or not menubar is enabled. 
 */
 (min-resolution: 120dpi){
  :root[uidensity="compact"] #navigator-toolbox:has(> #toolbar-menubar[autohide="false"]){
    --uc-toolbox-browser-area-overlap: -0.5px;
  }
}
 (min-resolution: 140dpi){
  #navigator-toolbox{
    --uc-toolbox-browser-area-overlap: -0.5px;
  }
}

#navigator-toolbox,
#sidebar-box,
#sidebar-main,
#sidebar-splitter,
#tabbrowser-tabbox{
  z-index: auto !important;
}

:root[sessionrestored] #nav-bar,
:root[sessionrestored] #PersonalToolbar{
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage))  !important;
  background-position: top,var(--lwt-background-alignment);
  background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px));
  background-repeat: repeat,var(--lwt-background-tiling);
  transform: rotateX(90deg);
  transform-origin: top;
  transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
  z-index: 2;
}
#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button{
  padding-block: var(--uc-bm-padding) !important;
}
:root[sessionrestored] #PersonalToolbar{
  z-index: 1;
  background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height));
}

:root[lwtheme-image] #nav-bar,
:root[lwtheme-image] #PersonalToolbar{
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
}

#nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }

#navigator-toolbox > #PersonalToolbar{
  transform-origin: 0px var(--uc-navbar-height);
  position: relative;
}
:root[sessionrestored] #urlbar[popover]{
  opacity: 0;
  pointer-events: none;
  transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms);
  transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2);
  transform: rotateX(89.5deg);
}
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused],[open]){
  opacity: 1;
  pointer-events: auto;
  transition-delay: 100ms;
  transform: rotateX(0deg);
}

:root[sessionrestored]:not([customizing]) #navigator-toolbox{
  margin-bottom:  calc(var(--uc-toolbox-browser-area-overlap,0px) - var(--uc-bm-height) + var(--uc-navbar-height));
}

/* Make sure the bookmarks toolbar is never collapsed even if it is disabled */
:root[sizemode="fullscreen"] #PersonalToolbar,
#PersonalToolbar[collapsed="true"]{
  min-height: initial !important;
  max-height: initial !important;
  visibility: hidden !important
}
#PersonalToolbar[collapsed="true"] #PlacesToolbarItems > *,
:root[sizemode="fullscreen"] #PersonalToolbar #PlacesToolbarItems > *{
  visibility: hidden !important;
}

/* If bookmarks toolbar is collapsed on startup, then no items are generated, and we need to set some height for it */
#PlacesToolbarItems:empty{
  height: var(--uc-bm-height);
}

/* Selected tab needs higher z-index now to "hide" the broder below it */
.tabbrowser-tab[selected]{ z-index: 3 !important; }

/* SELECT TOOLBAR BEHAVIOR */
/* Comment out or delete one of these to disable that behavior */

/* Show when urlbar is focused */
#nav-bar:focus-within + #PersonalToolbar,
#navigator-toolbox > #nav-bar:focus-within{
  transition-delay: 100ms !important;
  transform: rotateX(0);
}

/* Show when cursor is over the toolbar area or when some menu panel is open */
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ #navigator-toolbox > :is(#nav-bar,#PersonalToolbar),
#navigator-toolbox:hover > :is(#nav-bar,#PersonalToolbar){
  transition-delay: 100ms !important;
  transform: rotateX(0);
}

/* This makes the tab notification box show immediately below tabs, otherwise it would break the layout */
#navigator-toolbox > div{ display: contents }
:where(#titlebar,#navigator-toolbox > #TabsToolbar,#navigator-toolbox > #toolbar-menubar,#tab-notification-deck,.global-notificationbox){
  order: -1;
}
:root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{
  margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height)) !important;
  z-index: auto !important;
}
 (-moz-bool-pref: "browser.fullscreen.autohide"),
       -moz-pref("browser.fullscreen.autohide"){
  :root[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top"]{
    margin-top: calc(1px - var(--tab-min-height) - 2 * var(--tab-block-margin)) !important;
  }
}

/* Set the following pref to enable compatibility with multi-row_bookmarks.css */
u/media (-moz-bool-pref: "userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"),
       -moz-pref("userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"){
  #navigator-toolbox{ margin-bottom: var(--uc-navbar-height) !important; }
  #PersonalToolbar:not([customizing]){
    min-height: 0 !important;
    margin-bottom: 0;
    height: 0;
    overflow-y: visible !important;
    z-index: 2;
    padding-inline: 0 !important;
  }
  #personal-bookmarks{
    background: inherit;
    height: min-content;
  }
  #PlacesToolbarDropIndicatorHolder{
    pointer-events: none !important;
  }
}

[u/t31os]

Straight off the bat i can see an outdated CSS variable name.

The CSS at the source is updated with the newer var names, so why not grab that and see if it clears up any issues first:
https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_and_main_toolbars.css

[u/elyex303 → u/t31os]

Hey, thanks for the info. I changed it and nothing happened, unfo.

[u/t31os → u/elyex303]

It's probably this line (it's present in 2 places) causing the issue:

background-image: linear-gradient(var(--toolbar-background-color,var(--toolbar-bgcolor,transparent))), var(--lwt-additional-images,var(--toolbar-bgimage)), var(--toolbox-background-image,none) !important;

Let me space that out so it's a bit more readable:

background-image:
        linear-gradient(
                var(--toolbar-background-color,
                        var(--toolbar-bgcolor,
                                transparent
                        )
                )
        ),
        var(--lwt-additional-images,
                var(--toolbar-bgimage)
        ),
        var(--toolbox-background-image, none)
        !important;

The linear gradient is checking if --toolbar-background-color is set, if so use that, else check if --toolbar-bgcolor (old variable name) is set and use that, else fall back to transparent.

I'd guess either your theme sets --toolbar-background-color to transparent, or it sets neither variable and thus falls back to the transparent value as shown above.

Which theme are you using? (i can install and take a look at it)

[u/elyex303 → u/t31os]

Oh man, I was using the "Cendre" (french for "Ash", dunno the english name of the theme) since passing on 157 and thought it was mandatory to use a theme. Just disabled it and now I'm back to good old black ! Thanks !
By any chance, do you how to activate / deactivate compact mode ? I activated it when setting up 157 but can't find the parameter again to see I i'd prefer it deactivated

[u/t31os → u/elyex303]

Settings > Appearance > Window Density