Skip to content

Instantly share code, notes, and snippets.

@tylermenezes

tylermenezes/powerline.css

Last active June 30, 2021 03:59
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tylermenezes/0f81c162433a5fa4b53e to your computer and use it in GitHub Desktop.
Save tylermenezes/0f81c162433a5fa4b53e to your computer and use it in GitHub Desktop.
Download ZIP
Modified version of Twily's Powerline for Firefox + Vimperator + Gruvbox
Raw
powerline.css
@namespace html url(http://www.w3.org/1999/xhtml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/*
Author: Twily/Tyler Menezes
Description: Minimal flat styled tabs, with modifications for Vimperator and Gruvbox
Compatibility: -- Firefox 43.0.4 --
Website: http://tyler.vc/
Useful search tags within this css:
"url-bar visible", "bottom margin", "attach url-bar", "newtab button", "back/forward", "enable scrollbar"
To enable bitmap fonts in Firefox 44+; open "about:config" and set the following preference to "false":
"gfx.font_rendering.fontconfig.fontlist.enabled"
*/
:root {
/* TAB VARIABLES */
--bg-sel: #bdae93; --bg-pinned: #928374; --bg-unread: #d65d0e; --bg-unsel: #282828; --bg-light: #665c54; --bg-dark: #282828;
--fg-sel: #282828; --fg-pinned: #fbf1c7; --fg-unread: #ebdbb2; --fg-unsel: #ebdbb2; --fg-light: #fbf1c7; --fg-dark: #ebdbb2;
--tab-triangle-correction: -1px;
--tab-height: 14px; --tab-icon-size: 10px; --tab-strip-margin: -12px; --tab-overlap: -5px;
--tab-fonts: "Fira Code",monospace,"Dejavu Sans"; --tab-font-size: 9px;
--tab-text-align: center; /* left | center | right */
/* URL VARIABLES */
--url-background: var(--bg-light); --url-color: var(--fg-dark);
--url-height: 24px; --url-right-margin: 6px;
--url-fonts: "Fira Code",monospace,"Dejavu Sans"; --url-font-size: 8pt;
--url-text-align: left; /* left | center | right */
--url-position: absolute; /* absolute == top (under tabs) || fixed == bottom of browser */
}
@-moz-document url(chrome://browser/content/browser.xul) {
/* URL-BAR */
#back-button, #forward-button, #back-button *, #forward-button *, #identity-box, #urlbar-reload-button, #urlbar-stop-button, #urlbar-go-button,
#PanelUI-button, #bookmarks-menu-button, #downloads-button, #home-button, #stylish-toolbar-button, #abp-toolbarbutton,
#notification-popup-box, #new-tab-button, #private-browsing-indicator, #search-container, #nav-bar-overflow-button,
.tabs-newtab-button, .tab-close-button, .tab-close, .tab-throbber, .tab-background-start, .tab-background-end,
#pocket-button, #loop-button, #social-share-button, #window-controls
/*#alltabs-button, #tabview-button, .tab-icon-image*/, .tab-icon-image:not([pinned]) { display: none !important; }
* { box-sizing: border-box !important; }
/* --- Comment out the section below to remove the newtab button --- */
/*
.tabs-newtab-button { display: block !important; background: transparent !important; margin: 0 8px 0 0 !important; width: 24px !important; }
.tabs-newtab-button::before { content: "+" !important; }
*/
.tab-drop-indicator { margin-bottom: 0 !important; }
#nav-bar {
background: var(--url-background) !important;
padding: 0 !important;
margin: 0 !important;
}
#urlbar {
border: none !important; padding: 0 2px 0 8px !important;
background: var(--url-background) !important; color: var(--url-color) !important;
font-family: var(--url-fonts) !important; font-size: var(--url-font-size) !important;
text-align: var(--url-text-align) !important;
height: 100% !important;
margin-bottom: 0 !important;
}
/* TABS */
.tabbrowser-tab[fadein]:not([pinned]) { min-width: 100px !important; max-width: 200px !important; }
tab {
font-family: var(--tab-fonts) !important;
height: var(--tab-height) !important; min-height: var(--tab-height) !important;
background: var(--bg-unsel) !important; color: var(--fg-unsel) !important;
font-size: var(--tab-font-size); text-shadow: none !important; text-align: var(--tab-text-align) !important;
}
.tabbrowser-tab label { padding: 0 22px 0 22px !important; }
#tabbrowser-tabs .tabbrowser-tab[pinned] { width: 48px !important; }
#tabbrowser-tabs .tabbrowser-tab[pinned] label { display: none !important; }
#tabbrowser-tabs .tabbrowser-tab .tab-icon-image {
margin: 0 -10px 0 16px !important;
width: var(--tab-icon-size) !important;
height: var(--tab-icon-size) !important;
}
.tabbrowser-tab *, .tabs-newtab-button * {
background: none !important; list-style-image: none !important;
margin: 0 0 0 0 !important; padding: 0 0 0 0 !important;
-moz-appearance: none !important;
}
#alltabs-button { margin-left: -10px !important; }
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-stack { height: var(--tab-height) !important; width: 100% !important; }
#tabbrowser-tabs .tabbrowser-arrowscrollbox, #tabbrowser-tabs .tabbrowser-arrowscrollbox .box-inherit.scrollbox-innerbox {
max-height: var(--tab-height) !important;
}
.scrollbutton-up, .scrollbutton-down { border: none !important; }
.tabbrowser-tab {
position: relative !important;
margin-right: calc(-1*var(--tab-height)/2) !important;
}/*
.tabbrowser-tab:before {
content: '' !important;
position: absolute !important; top: 0 !important; left: 1px !important;
width: 0 !important; height: 0 !important;
border: none !important; z-index: 30 !important;
border-left: calc(var(--tab-height)/2) solid transparent !important;
border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-unsel) !important;
border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-unsel) !important;
}
.tabbrowser-tab:after {
content: '' !important;
position: absolute !important; top: 0 !important; right: 0 !important;
width: 0 !important; height: 0 !important;
border: none !important; z-index: 30 !important;
border-left: calc(var(--tab-height)/2) solid var(--bg-unsel) !important;
border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid transparent !important;
border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid transparent !important;
}
.tabbrowser-tab[selected="true"]:not([last-tab="true"]) {
margin-right: -10px;
}
.tabbrowser-tab[selected="true"]:not([last-tab="true"]) .tab-stack {
margin-right: calc(var(--tab-height)/2) !important;
}
.tabbrowser-tab[last-visible-tab="true"]:after, .tabbrowser-tab[last-tab="true"]:after {
right: 0px !important;
border-top-color: var(--bg-dark) !important;
border-bottom-color: var(--bg-dark) !important;
}
#tabbrowser-tabs[overflow]:not([positionpinnedtabs]) { -moz-padding-start: 20px !important; }*/
/* Pinned */
.tabbrowser-tab[pinned="true"] .tab-stack {
background: var(--bg-pinned) !important; color: var(--fg-pinned) !important;
}/*
.tabbrowser-tab[pinned="true"]:before {
border-top-color: var(--bg-pinned) !important;
border-bottom-color: var(--bg-pinned) !important;
}
.tabbrowser-tab[pinned="true"]:after {
border-left-color: var(--bg-pinned) !important;
}*/
/* Unread */
.tabbrowser-tab[unread="true"] .tab-stack {
background: var(--bg-unread) !important; color: var(--fg-unread) !important;
}/*
.tabbrowser-tab[unread="true"]:before {
border-top-color: var(--bg-unread) !important;
border-bottom-color: var(--bg-unread) !important;
}
.tabbrowser-tab[unread="true"]:after {
border-left-color: var(--bg-unread) !important;
}*/
/* Selected Tab */
.tabbrowser-tab[selected="true"] .tab-stack {
background: var(--bg-sel) !important; color: var(--fg-sel) !important;
}/*
.tabbrowser-tab[selected="true"]:before {
border-top-color: var(--bg-sel) !important;
border-bottom-color: var(--bg-sel) !important;
}
.tabbrowser-tab[selected="true"]:after {
border-left-color: var(--bg-sel) !important;
}*/
/* Edge cases for smoother usage (to fix bugs) */
/*.tabbrowser-tab[before-selected="true"]:after {
border-top-color: var(--bg-sel);
border-bottom-color: var(--bg-sel);
}
.tabbrowser-tab[after-selected="true"]:before {
border-top-color: var(--bg-sel);
border-bottom-color: var(--bg-sel);
}*/
#TabsToolbar, #tabbrowser-tabs {
-moz-appearance: none !important;
height: var(--tab-height) !important; min-height: var(--tab-height)!important;
margin: 0 var(--tab-strip-margin) !important;
background: var(--bg-dark) !important;
}
#TabsToolbar::after { display: none !important; }
.tabbrowser-tab::before, .tabbrowser-tab::after { background: none !important; opacity: 1 !important; visibility: visible !important; }
#navigator-toolbox::after { height: 0px !important; background: var(--bg-light) !important; }
#liberator-separator { height: 0px !important; background: var(--bg-light) !important; border-top: 0 !important; }
/* MENUS */
menuitem + menuseparator, menu + menuseparator/*, .menu-iconic-left*/ { display: none !important; }
/* HIDE ORANGE MENU BUTTON */
#appmenu-toolbar-button, #appmenu-button-container { display: none !important; }
/* HIDE STATUS BAR */
#status-bar, #statusbar-display, statuspanel { display: none !important; }
/* PRIVATE BROWSING ICON HIDE */
#main-window[privatebrowsingmode=temporary] #private-browsing-indicator,
#main-window[privatebrowsingmode=temporary] #private-browsing-indicator-titlebar { display: none !important; }
/* Vimperator icon style */
#liberator-statusline:not([customizing="true"]) { margin: -2px -2px !important; padding: 0 0 !important; height: 24px !important; }
#liberator-statusline:not([customizing="true"]) :-moz-any(toolbarbutton) { height: 100% !important; }
#tabview-button {
list-style-image: url(http://twily.info/img/tabview-button.png?v=2) /* 16x16 px image */ !important;
-moz-image-region: rect(0, 0, 0, 0) !important;
}
#liberator-completions, #liberator-bottombar-deck { background: var(--bg-dark) !important; }
/* Tabgroup margin top fix */
#tab-view-deck #tab-view { margin: 24px 12px 12px 12px !important; }
#tab-view-deck { background: var(--bg-light) !important; }
window[sizemode="fullscreen"] #liberator-statusline { display: none !important; }
window[sizemode="fullscreen"] #liberator-bottombar {
margin-top: -24px !important;
transition: 1s ease !important; transition-delay: .3s !important;
}
/*window[sizemode="fullscreen"] #browser-panel { margin-top: -1px !important; }*/
}
/* Tab Group Page Style (Ctrl+Shift+E) */
@-moz-document url(chrome://browser/content/tabview.html) {
#content #bg, #actions, body { background: var(--bg-light) !important; }
body * { color: var(--fg-light) !important; }
body .groupItem, #content #actions, body .undo {
background: var(--bg-dark) !important;
border: 0 !important; border-radius: 0 !important; box-shadow: 0 0 0 0 !important;
}
#content #actions {
opacity: 0 !important; display: none !important; /* block | none */
transition: .3s ease-out !important;
}
#content #actions:hover { opacity: 1 !important; }
body .appTabTrayContainer { border: 0 !important; }
body .tab, body .tab .thumb {
box-shadow: 0 0 0 0 !important; border: 0 !important; border-radius: 0 !important;
background: transparent !important; padding : 0 !important;
}
body .tab .favicon { display: none !important; }
body .groupItem .name { border: 0 !important; }
body .tab .tab-title { padding-top: 2px !important; }
}
/* AGENT_SHEET */
@-moz-document url-prefix(http://), url-prefix(https://), url-prefix(chrome://liberator/), url-prefix(file:///) {
scrollbar[orient="vertical"], scrollbar thumb[orient="vertical"],
scrollbar[orient="horizontal"], scrollbar thumb[orient="horizontal"] {
display: none !important; /* block | none (enable scrollbar) */
}
}
/* about:stylish-edit toolbar style */
@-moz-document regexp("about:stylish-edit.*") {
#main-area, textbox { background: var(--bg-light) !important; }
textbox, grid, columns, rows, separator { border: 0 !important; }
.devtools-toolbarbutton { background: var(--bg-dark) !important; color: var(--fg-light) !important; }
}
/*----- Fix for white flash on new tab -----*/
tabbrowser tabpanels, #appcontent > #content { background: var(--bg-light) !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment