Hide toolbar buttons except pinned extensions

[yahav01]

How can I hide the toolbar buttons (when not hovering) except the pinned extensions in the toolbar? I tried modifying hacks/button_effect_scale_onclick.css and hacks/button_effect_scale_onclick.css but I am quite a newbie to modifying and customizing the userChrome.css file, so I would love if you could help me with this.

[Redundakitties]

I gotchu:
go to the file called minimal_toolbarbuttons and find line 22 and change the whole line to be:

toolbar .toolbarbutton-1:not(.unified-extensions-item-action-button) > *,

Basically it's using the :not() pseudo-class to exclude pinned extensions from the .toolbarbutton class so that they will no longer minimize!

[yahav01]

Thanks, it works. However for some reason this excludes the third extension in my toolbar (with the paper clip icon in the photo below) you can see the white circle.

[Redundakitties]

which extension is that? I'll have to try it out myself.

[yahav01]

Linkace Bookmarklet which is meant to be used together with Linkace.

[Redundakitties]

oh that was silly of me. The reason it wasn't working on the paperclip icon was because I was being lazy. The best fix is to clear what's currently in minimal_toolbarbuttons.css copy all this code and paste it in wholesale.

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

/* Create a circular placeholder for toolbarbutton and downscale to hide them */

/* Create a placeholder for buttons */
toolbar .toolbarbutton-1:not([open]):not([class*="unified-extensions-item-action-button"]),
.titlebar-button,
#tabbrowser-tabs toolbarbutton,
#scrollbutton-up:not(:hover),
#scrollbutton-down:not(:hover){
  background-image: radial-gradient(circle at center, var(--lwt-toolbarbutton-icon-fill,currentColor) 0,var(--lwt-toolbarbutton-icon-fill,currentColor) 10%,transparent 15% );
}
/* Hide placeholder on hover */
toolbar:hover + toolbar .toolbarbutton-1,
vbox:hover + toolbar .toolbarbutton-1:not([class*="unified-extensions-item-action-button"]),
toolbar:hover .toolbarbutton-1:not([class*="unified-extensions-item-action-button"]),
#tabbrowser-tabs:hover toolbarbutton,
.titlebar-buttonbox:hover > .titlebar-button{ background-image: none }


/*  scales the buttons down */
toolbar .toolbarbutton-1:not([class*="unified-extensions-item-action-button"]) > *,
.titlebar-button > *,
#tabbrowser-tabs toolbarbutton > *{
  transform: scale(0);
  transition: transform 82ms linear !important;
}
#scrollbutton-up > .toolbarbutton-icon,
#scrollbutton-down > .toolbarbutton-icon{ transform: scale(0) !important; transition: transform 82ms linear !important; }

/*  restores buttons */
toolbar:hover + toolbar .toolbarbutton-1 > *,
vbox:hover + toolbar .toolbarbutton-1:not([class*="unified-extensions-item-action-button"]) > *,
toolbar:hover .toolbarbutton-1 > *,
.toolbarbutton-1[open]:not([class*="unified-extensions-item-action-button"]) > *,
.titlebar-buttonbox:hover > .titlebar-button > *,
#tabbrowser-tabs:hover toolbarbutton > *{
  transform: scale(1)
}
#scrollbutton-up:hover > .toolbarbutton-icon{ transform: scale(1) !important }
#scrollbutton-down:hover > .toolbarbutton-icon{ transform: scale(-1) !important }

/* Urlbar icons, this way they show colors is applicable */
.urlbar-icon{ transition: transform 82ms linear !important; }
#urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) }

/* The menu button has some margin on non-compact density which creates annnoying transitions */
/* Lets remove that as well as border since this is minimal style anyway */
#PanelUI-button{ border-left: 0px !important; margin-left: 0px !important; }

/* Add a glow-effect to some buttons when it has some "alert" */
#nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status],
#navigator-toolbox:not(:hover) #downloads-button[attention]{
  filter: brightness(2) drop-shadow(0 0 3px orange) drop-shadow(0 0 1px orange);
}
#nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status^="update"],
#navigator-toolbox:not(:hover) #downloads-button[attention="success"]{
  filter: brightness(2) drop-shadow(0 0 2px cyan) drop-shadow(0 0 1px cyan);
}

Now for extensions no placeholder will be there at all!

[yahav01]

Thank you! It works.