Compact icon-only tabs in Firefox with a convenient close button

DenDor_dAs

Jun 24th, 2025

248

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

CSS 1.23 KB | Software | 0 0

raw download clone embed print report

/* Tabs as icons / Hover to close via X icon */
/* For better appearance, changed the value of browser.uidensity to 1 */
/* When hovering over the tab in the top-right corner, a small X will appear to close the tab */
/* Normalize group behavior */
tab-group { &[collapsed] > .tabbrowser-tab {visibility:collapse !important;}}
/* Tabs as icons */
.tabbrowser-tab:not([pinned]) {
flex: 0 0 !important;
min-width: 36px !important;
}
.tab-label-container,
.tab-close-button {
display: none !important;
}
/* Compact close button in the top-right corner */
.tab-content{
pointer-events: none
}
.tab-icon-image:not([busy]){ display: block !important; }
:where(.tab-content:hover) .tab-icon-image,
:where(.tab-content:hover) > .tab-icon-stack{
visibility: hidden;
}
/* === Compact close button in the top-right corner === */
.tab-close-button {
display: flex !important;
position: absolute !important;
top: 2px;
right: 2px;
width: 12px !important;
height: 12px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0;
pointer-events: auto;
z-index: 10;
}
.tab-close-button:hover{ opacity: 1 }
.tabbrowser-tab[pinned] .tab-close-button{ display: none !important; }

Tags: CSS firefox userchrome

Add Comment

Please, Sign In to add comment