44 lines
1.5 KiB
CSS
44 lines
1.5 KiB
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|