Skip to content

Instantly share code, notes, and snippets.

@rittme
Created June 24, 2016 23:33
Show Gist options
  • Save rittme/e9db2311332b94ea1de5117642f919bd to your computer and use it in GitHub Desktop.
Save rittme/e9db2311332b94ea1de5117642f919bd to your computer and use it in GitHub Desktop.
Firefox custom userChrome to make vertical tabs look more like Tab Center.
#verticaltabs-splitter {
min-width: 0 !important;
background: none !important;
}
#verticaltabs-box:hover + #verticaltabs-splitter, #verticaltabs-splitter:hover {
min-width: 2px !important;
}
#TabsToolbar {
display:none;
}
.tabbrowser-tab {
width: 100% !important;
max-height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
border: 0 !important;
border-left: 4px solid transparent !important;
border-radius: 0 !important;
-moz-appearance: none !important;
background: transparent !important;
-moz-box-flex: 0;
-moz-box-pack: start;
color: #333 !important;
}
.tabbrowser-tab[selected="true"],
.tabbrowser-tab[multiselect="true"] {
margin: 0 !important;
border-left: 4px solid #ff9500 !important;
border-radius: 0 !important;
background-color: #dadada !important;
font-weight: normal;
font-weight: 600 !important;
text-shadow: none;
}
.tabbrowser-tab[selected="true"]:-moz-window-inactive,
.tabbrowser-tab[multiselect="true"]:-moz-window-inactive {
background-color: InactiveCaption !important;
color: InactiveCaptionText !important;
/* gnome/gtk/cleartype doesn't seem to have inactive states for selected items, lets try this */
}
.tabbrowser-tab[pinned] {
border-left: 4px solid #0996f8 !important;
}
.tabbrowser-tab:not([selected="true"]):hover {
margin: 0 !important;
background-color: #ebebeb !important;
}
.tabbrowser-tab[pinned] .tab-close-button,
.tabbrowser-tab:not(:hover) .tab-close-button {
visibility: collapse !important;
}
.tab-content {
min-height: 34px;
max-height: 34px;
margin: 0 !important;
padding: 0 !important;
}
.tabbrowser-tab[busy] .tab-throbber {
display: -moz-box !important;
}
.tabbrowser-tab[pinned] .tab-close-button,
.tabbrowser-tab:not(:hover) .tab-close-button {
visibility: collapse !important;
}
.tab-close-button {
display: -moz-box !important;
width: 34px;
height: 34px;
margin: 0 0 0 3px !important;
color:#FFFFFF !important;
}
.tab-close-button:hover {
background-color: #d94141 !important;
}
.tab-close-button:hover::before {
content: "×";
display: block;
font-size: 20px;
font-weight: bold;
margin-top: -2px;
}
.tab-close-button > .toolbarbutton-icon {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment