Skip to content

Instantly share code, notes, and snippets.

@yanyaoer
Last active Feb 4, 2020
Embed
What would you like to do?
firefox compact tabbar only icon
html#main-window {
--color-bg: #1e1f29;
--toolbar-bgcolor: var(--color-bg) !important;
--gap-between-tabs: 0px;
--margin-after-tab-list: 8x;
--margin-before-tab-list: 8px;
--tab-height: 32px;
--tab-icon: 16px;
--tabs-container-height: 85px;
/* Firefox variables */
--lwt-toolbar-field-focus-color: #a1ffb6 !important;
--lwt-toolbar-field-color: #fefefa !important;
--lwt-toolbar-field-background-color: var(--color-bg) !important;
--arrowpanel-background: #1e1f29 !important;
--arrowpanel-color: white !important;
--arrowpanel-border-color: transparent !important;
}
#titlebar {
/* This positions the tabs under the navaigator container */
-moz-box-ordinal-group: 3 !important;
background-color: var(--color-bg) !important;
}
#back-button {
list-style-image: url("left-arrow.svg") !important;
}
#forward-button {
list-style-image: url("right-arrow.svg") !important;
}
/* #urlbar { */
/* border: 0 none !important; */
/* } */
#urlbar:not(.megabar),
#urlbar.megabar > #urlbar-background,
#searchbar {
border: none !important;
box-shadow: none !important;
}
/* Hide some bloat */
.tab-close-button,
.tab-line,
.tabbrowser-tab::before,
.tabbrowser-tab::after,
.tabbrowser-tab .tab-label-container,
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar .titlebar-spacer[type="pre-tabs"],
.tabbrowser-tab:not([pinned]):not([fadein]) {
display: none !important;
}
.tabbrowser-tab {
max-width: var(--tab-height) !important;
min-width: var(--tab-height) !important;
}
.tabbrowser-tab[selected="true"] {
/* border-bottom: 1px solid #ccc !important; */
/* box-sizing: border-box !important; */
background-color: #333 !important;
border-radius: var(--tab-height) !important;
}
.tabbrowser-tab .tab-icon-image {
max-width: var(--tab-icon) !important;
max-height: var(--tab-icon) !important;
min-width: var(--tab-icon) !important;
min-height: var(--tab-icon) !important;
margin-inline-end: var(--gap-between-tabs) !important;
}
/* show default favicon if empty */
.tabbrowser-tab .tab-icon-image:not([src]):not([pendingicon]):not([busy]) {
opacity: .2 !important;
display: inline-block !important;
}
.tab-content {
background-color: none !important;
background-image: none !important;
}
.tab-stack {
display: flex !important;
justify-content: center !important;
max-width: var(--tab-icon) !important;
min-width: var(--tab-icon) !important;
}
@yanyaoer
Copy link
Author

yanyaoer commented Feb 4, 2020

Screen Shot 2020-02-04 at 12 21 01 PM

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