I just noticed that it makes more sense to move a piece of code from the numbered_tabs.css file into my single_tab_mode files with a unique value in each one, in order to have the tab content fill the tabs properly while leaving just enough room for the tab number.
This is the piece of code:
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 150px) !important;
}
Here are the new versions:
numbered_tabs.css
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Show a number before tab text */
/* Actually, let's show the tab number after tab content, right-align it,
and fix its position directly on the tab close button */
#tabbrowser-tabs {
counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */
}
.tabbrowser-tab:not([pinned]) .tab-content::after {
content: counter(nth-tab) " ";
counter-increment: nth-tab;
position: absolute !important;
position: fixed;
right: 24px;
top: 12px;
width: 0 !important;
}
/* Hide tab number when hovering so that tab close button is clickable */
.tabbrowser-tab:not([pinned]):hover .tab-content::after {
visibility: hidden !important;
}
/* Adjust tab close button opacity, border, and shape */
.tab-close-button {
position: absolute !important;
margin-right: -8px !important;
opacity: 0.5 !important;
border: 2px solid white !important;
height: 36px !important;
width: 36px !important;
}
}
single_tab_mode.css
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: 100vw !important;
}
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 30px) !important;
}
/* Hide Newtab and New-tab buttons */
#new-tab-button,
#tabs-newtab-button {
display: none !important;
}
}
single_tab_mode_with_space_for_1_item.css
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 40px) !important;
}
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 70px) !important;
}
}
single_tab_mode_with_space_for_2_items.css
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 80px) !important;
}
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 110px) !important;
}
}
single_tab_mode_with_space_for_3_items.css
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 120px) !important;
}
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 150px) !important;
}
}
Can a moderator please re-enable my ability to edit my original post? @dcz?