Skip to content

Instantly share code, notes, and snippets.

@debloper
Last active December 28, 2015 22:39
Show Gist options
  • Save debloper/7572837 to your computer and use it in GitHub Desktop.
Save debloper/7572837 to your computer and use it in GitHub Desktop.
Sexy Tabs. Take that, Curvy Tabs! #firefoxAustralis :P
/* set default namespace to XUL */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.tabbrowser-tab[selected] { margin-top: -1px !important; }
.tab-background-middle {
border-left: none !important;
border-right: none !important;
margin: 0 -0.5px !important;
}
.tab-background,
.tabs-newtab-button {
-moz-margin-end: 0 !important;
-moz-margin-start: 0.5px !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
-moz-padding-end: 0 !important;
-moz-padding-start: 0 !important;
}
.tab-background-start[selected=true]::after,
.tab-background-start[selected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
width: 1px !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
.tabs-newtab-button:hover {
background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1) 80%, rgba(255,255,255,1)) !important;
background-size: 100% !important;
}
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[afterselected]::before,
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([first-visible-tab])::before,
#tabbrowser-tabs[overflow] > .tabbrowser-tab[first-visible-tab]:not([selected])::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab:not([selected])::after {
-moz-margin-start: -1.5px !important;
-moz-margin-end: -1.5px !important;
background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png) !important;
background-size: 3px 100% !important;
content: "" !important;
display: -moz-box !important;
margin-bottom: 1px !important;
width: 3px !important;
}
.tabbrowser-tab[selected]::before,
.tabbrowser-tab[selected]::after {
-moz-margin-start: -0.5px !important;
-moz-margin-end: -0.5px !important;
background-color: #aaa !important;
background-size: 1px 100% !important;
content: "" !important;
display: -moz-box !important;
margin-bottom: 1px !important;
width: 1px !important;
}
.tabbrowser-tab[selected][first-visible-tab]::before {
background-color: #eee !important;
background-size: 1px 100% !important;
}
.tabs-newtab-button { width: 32px !important; }
@sudheesh001
Copy link

Looks good. :)

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