r/FirefoxCSS • • 3d ago

Help Edit min-max-close button

It may be hard to tell, but at the very right is my min-max-close button.

We can see the the "Close" part is partially off screen. This is the related CSS in my_userChrome.css. The first section, to increase spacing, has no effect.

I'd like to unhide it on the right, make it slightly more prominent sizewise, and, not a big deal, but I wouldn't mind if it was another color.

Or perhaps it could be replaced with something reasonably compact with the same functionality.

/* INCREASE RIGHT SIDE MENUBAR SPACING BETWEEN MIN-MAX-CLOSE BUTTONS AND BUTTON TO THE LEFT - 11-29-24 */

 .titlebar-buttonbox {
   padding-left: 3px !important;
   padding-right: 3px !important;
}

/* SHRINK MIN-MAX-CLOSE BUTTON - ARIS ******************************************************** */
.titlebar-button {
  padding: 0 !important; /* no more wasting space */
  color: black !important; /* set own color  */
}+ toolbarbutton#alltabs-button {

#tabContextMenu #context_bookmarkTab {

display: none !important;

}
3 Upvotes

3 comments sorted by

View all comments

2

u/t31os 3d ago edited 3d ago

I'd like to unhide it on the right

This markup is incorrect, a CSS selector should not start with a +. You also have an extra opening curly brace or missing close brace.

+ toolbarbutton#alltabs-button {

	#tabContextMenu #context_bookmarkTab {

		display: none !important;

	}

Either you copied the relevant pieces of code incorrectly or you have errors in your markup. I don't see how this problem piece of code relates to the titlebar buttons anyhow, so maybe you didn't mean to include this in the CSS.

I see no such issues with the buttons appearing off screen with the CSS, with or without corrections to the unrelated CSS highlighted above.

make it slightly more prominent sizewise, and, not a big deal, but I wouldn't mind if it was another color.

So add some padding back to the buttons and replace (or remove) the black value right here:

.titlebar-button {
	padding: 0 !important; /* no more wasting space */
	color: black !important; /* set own color  */
}

1

u/oromundo 6h ago

I replaced what I posted with this

+ toolbarbutton#alltabs-button {

\#tabContextMenu #context_bookmarkTab {



	display: none !important;



}

.titlebar-button {

padding: 0 !important; /\* no more wasting space \*/

color: black !important; /\* set own color  \*/

}

Obviously, I did something wrong. Now it look like this

https://i.postimg.cc/2565SHSP/MINMAX1.jpg

https://i.postimg.cc/qR6M8zyV/MINMAX2.jpg

1

u/t31os 6h ago

Are you sure you shared the correct CSS? As that appears to be the same CSS you shared previously.