Making a space between pinned and unpinned tabs
I'm using Firefox 58.0.2, Windows, 64bit.
To reduce misclick, I would like to make a small space between pinned and unpinned tabs. I could do so by using an add-on named "AppTabs Plus," but this add-on is not available for Fx58.
Can I succeed by some ways? Is customizing with userchrome.css available?
Chosen solution
Sometimes CSS is so frustrating. You would think that any one of these rules would do the job, but unfortunately the bolded pseudoclass selectors cannot be combined with the bracketed attribute selectors:
/* Add 6px after last pinned tab (FAIL) */
.tabbrowser-tab[pinned="true"]:last-of-type {
margin-right: 6px !important;
}
/* Add 6px after last pinned tab (FAIL) */
.tabbrowser-tab[pinned="true"]:nth-last-of-type(1) {
margin-right: 6px !important;
}
/* Add 6px before first non-pinned tab (FAIL) */
.tabbrowser-tab:not([pinned="true"]):first-of-type {
margin-left: 6px !important;
}
/* Add 6px before first non-pinned tab (FAIL) */
.tabbrowser-tab:not([pinned="true"]):nth-of-type(1) {
margin-left: 6px !important;
}
I think this is the closest "hack-around" I can come up with:
/* Shift margins to create 6px gap after last pinned tab */
.tabbrowser-tab[pinned="true"] {
margin-right: 6px !important;
margin-left: -6px !important;
}
/* Override negative left margin for first tab */
.tabbrowser-tab:first-of-type {
margin-left: 0 !important;
}
Read this answer in context
👍 0
All Replies (4)
As a work around, you can open a new blank tab about:blank in between the pinned and non-pinned tabs.
I don't think there is a way to use userChrome.css to identify the first non-pinned tab because this requires JavaScript.
You can also make an extra pinned tab with the about: page as the last pinned tab (pinned tabs have pinned="true" attribute).
If you need to adjust the width of this tab then you can use code in userChrome.css
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/what-is-userchrome-css.html
.tabbrowser-tab[pinned="true"][label="about:"]{width:30px !important}
Chosen Solution
Sometimes CSS is so frustrating. You would think that any one of these rules would do the job, but unfortunately the bolded pseudoclass selectors cannot be combined with the bracketed attribute selectors:
/* Add 6px after last pinned tab (FAIL) */
.tabbrowser-tab[pinned="true"]:last-of-type {
margin-right: 6px !important;
}
/* Add 6px after last pinned tab (FAIL) */
.tabbrowser-tab[pinned="true"]:nth-last-of-type(1) {
margin-right: 6px !important;
}
/* Add 6px before first non-pinned tab (FAIL) */
.tabbrowser-tab:not([pinned="true"]):first-of-type {
margin-left: 6px !important;
}
/* Add 6px before first non-pinned tab (FAIL) */
.tabbrowser-tab:not([pinned="true"]):nth-of-type(1) {
margin-left: 6px !important;
}
I think this is the closest "hack-around" I can come up with:
/* Shift margins to create 6px gap after last pinned tab */
.tabbrowser-tab[pinned="true"] {
margin-right: 6px !important;
margin-left: -6px !important;
}
/* Override negative left margin for first tab */
.tabbrowser-tab:first-of-type {
margin-left: 0 !important;
}
Thanks all who responded. I could make a desired condition by using suggestion from jscher2000.