Skip to content

Instantly share code, notes, and snippets.

@biosmanager

biosmanager/userChrome.css

Last active May 14, 2025 13:49
Show Gist options
  • Save biosmanager/93544485fb0da3ad0577856186b9b3e8 to your computer and use it in GitHub Desktop.
Save biosmanager/93544485fb0da3ad0577856186b9b3e8 to your computer and use it in GitHub Desktop.
Download ZIP
Firefox Proton macOS Close Tab Left (updated for version 113)
Raw
userChrome.css
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.tabbrowser-tab .tab-close-button {
opacity: 0;
margin-left: -4.5px !important;
margin-right: 2px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button {
display: none;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
opacity: 1;
margin-inline-end: 0;
-moz-box-ordinal-group: 0 !important;
order: -1 !important;
display: unset !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
-moz-box-ordinal-group: 99999 !important;
order: 99999 !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
display: none;
}
@JayBrown
Copy link

It would be this, but just replacing -moz-box-ordinal-group with order does not work:

.tabbrowser-tab .tab-close-button {
	opacity: 0;
	margin-left: -4.5px !important;
	margin-right: 2px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button {
	display:none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
	opacity: 1;
	margin-inline-end: 0;
	order: 0 !important;
	display:unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
	order: 99999 !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
	display: none;
}

Same with placing the search bar on the top of a page… order doesn't work either:

.browserContainer > findbar {
	order: 0;
}

Anyone with a solution? 🙏

@biosmanager
Copy link
Author

I tried -1 and it seems to work for me:

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}

.tabbrowser-tab:not(:hover) .tab-close-button {
  display: none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  -moz-box-ordinal-group: 0 !important;
  order: -1 !important;
  display: unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
  order: 99999 !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  display: none;
}

Can you guys test this and confirm? I will then update the gist.

@JayBrown
Copy link

JayBrown commented May 10, 2023 •
edited
Loading

🎉 Your solution works great… thank you! PS: order: -1; also works for search bar on top. 👍

@circa-III
Copy link

circa-III commented May 10, 2023 •
edited
Loading

I tried -1 and it seems to work for me:

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}

.tabbrowser-tab:not(:hover) .tab-close-button {
  display: none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  -moz-box-ordinal-group: 0 !important;
  order: -1 !important;
  display: unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
  order: 99999 !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  display: none;
}

Can you guys test this and confirm? I will then update the gist.

Worked perfect for me, thanks!

@fossilet
Copy link

fossilet commented May 11, 2023 •
edited
Loading

Can you guys test this and confirm? I will then update the gist.

+1. Thank you savior.

@fossilet
Copy link

This works until recent Firefox versions. In newer versions, sometimes when I point my mouse onto pinned tabs, the favicon becomes the close button, sometime not.
图片

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment