Skip to content

Instantly share code, notes, and snippets.

@Cloudxtreme

Cloudxtreme/Modified Twily's Powerline

Created June 2, 2016 01:29
Show Gist options
  • Save Cloudxtreme/c33ea5a0f1695d3f29cc3b0479a43746 to your computer and use it in GitHub Desktop.
Save Cloudxtreme/c33ea5a0f1695d3f29cc3b0479a43746 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @koekeishiya koekeishiya revised this gist May 28, 2016. 1 changed file with 17 additions and 83 deletions.
    100 changes: 17 additions & 83 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -6,10 +6,6 @@
    Compitability: Firefox Nightly v31.0a1 - v32.0a1 (Australis)
    CSS Variables were introduced to Firefox in v29.0a1
    Website: http://twily.info/


    Note: To enable the urlbar; search this css for:
    "make the url-bar visible" and "adjust margin-top to"
    */

    :root {
    @@ -18,15 +14,16 @@
    --bg-light: #303030; --bg-dark: #202020; --bg-selected: #458588;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #d5c4a1 /*--fg-selected: #FF456F*/;
    --tab-triangle-correction: 0px; --tab-triangle-height: 16px;
    --tab-height: 18px; --tab-icon-size: 10px; --tab-strip-margin: -11px; --tab-overlap: -5px;
    --tab-fonts: "Input", "Lemon","monospace","Dejavu Sans"; --tab-font-size: 7pt;
    --tab-selected-border: #458588;
    --tab-height: 20px; --tab-icon-size: 10px; --tab-strip-margin: -11px; --tab-overlap: -5px;
    --tab-fonts: "Input", "Lemon", "monospace"," Dejavu Sans"; --tab-font-size: 6.75pt;
    --tab-triangle: block; /* block | none */

    /* URL VARIABLES */
    --url-background: var(--bg-nav); --url-color: var(--fg-dark);
    --url-focus: #202020;
    --url-height: 16px; --url-right-margin: 6px;
    --url-fonts: "Input","Lemon",monospace,"Dejavu Sans"; --url-font-size: 6pt;
    --url-height: 18px; --url-right-margin: 6px;
    --url-fonts: "Input","Lemon",monospace,"Dejavu Sans"; --url-font-size: 5.75pt;
    --url-text-align: center; /* left | center | right */
    --url-position: absolute; /* absolute == top (under tabs) || fixed == bottom of browser */

    @@ -91,25 +88,14 @@
    background: var(--url-focus) !important;
    overflow: hidden !important;
    }
    /*#urlbar * { -moz-appearance: none !important; }*/

    /* --- Comment out the section below to make the url-bar visible --- */
    /*
    #nav-bar {
    width: 0 !important; height: 0 !important;
    position: fixed !important; left: -1px !important; top: -1px !important;
    overflow: hidden !important; visibility: hidden !important;
    }
    */


    /* TABS */
    .tabbrowser-tab[fadein]:not([pinned]) { min-width: 50px !important; max-width: /*180px*/ 100% !important; }
    tab {
    font-family: var(--tab-fonts) !important;
    height: var(--tab-height) !important; min-height: var(--tab-height) !important;
    background: var(--bg-dark) !important; color: var(--fg-dark) !important;
    font-size: var(--tab-font-size); text-shadow: none !important; text-align: center /* center | left */ !important;
    font-size: var(--tab-font-size) !important; text-shadow: none !important; text-align: center /* center | left */ !important;
    }

    .tabbrowser-tab label { padding: 0 14px 0 14px !important; }
    @@ -138,32 +124,31 @@
    .tabbrowser-tab[selected="true"] .tab-stack {
    background: var(--bg-selected) !important; color: var(--fg-selected) !important;
    border-radius: 0px !important; position: relative !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    /*border-top: 1px solid #dc52a5 !important;/**/
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    /* border-bottom: 2px solid var(--tab-selected-border) !important; */
    }

    .tabbrowser-tab[selected="true"]:before { /* Left Triangle (of selected tab) */
    /*content: '' !important; display: var(--tab-triangle);
    position: absolute !important; top: 0 !important; left: var(--tab-overlap) !important;
    /*
    content: '' !important; display: var(--tab-triangle);
    position: absolute !important; top: 2px !important; left: var(--tab-overlap) !important;
    width: 0 !important; height: 0 !important;
    border: none !important; z-index: 2 !important;

    border-left: calc(var(--tab-triangle-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-triangle-height)/2) - var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-bottom: calc((var(--tab-triangle-height)/2) + var(--tab-triangle-correction)) solid var(--bg-selected) !important;*/
    /*border-top: var(--tab-height) solid var(--bg-dark) !important;
    border-right: calc(var(--tab-height)/2) solid var(--bg-light) !important;*/
    border-bottom: calc((var(--tab-triangle-height)/2) + var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    */
    }
    .tabbrowser-tab[selected="true"]:after { /* Right Triangle (of selected tab) */
    content: '' !important; display: var(--tab-triangle);
    position: absolute !important; top: 1px !important; right: var(--tab-overlap) !important;
    position: absolute !important; top: 2px !important; right: var(--tab-overlap) !important;
    width: 0 !important; height: 0 !important;
    border: none !important; z-index: 2 !important;
    border-right: calc(var(--tab-triangle-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-triangle-height)/2) - var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-bottom: calc((var(--tab-triangle-height)/2) + var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    /*border-top: var(--tab-height) solid var(--bg-dark) !important;
    border-left: calc(var(--tab-height)/2) solid var(--bg-light) !important;*/
    }

    #TabsToolbar, #tabbrowser-tabs {
    @@ -188,7 +173,7 @@
    menuitem + menuseparator, menu + menuseparator/*, .menu-iconic-left*/ { display: none !important; }
    /*menuitem > label { margin-left: var(--tab-height) !important; }*/
    menubar, menubutton, menulist, menu, menuitem {
    font-family: var(--tab-fonts) !important; font-size: var(--tab-font-size);
    font-family: var(--tab-fonts) !important; font-size: var(--tab-font-size) !important;
    height: var(--tab-height) !important;
    }

    @@ -227,64 +212,13 @@
    #tab-view-deck { background: var(--bg-dark) !important; }
    }


    /* Tab Group Page Style (Ctrl+Shift+E) */
    @-moz-document url(chrome://browser/content/tabview.html) {
    #content #bg, #actions, body { background: #252525 !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/) {
    /* SCROLLBAR */
    scrollbar[orient="vertical"], scrollbar thumb[orient="vertical"],
    scrollbar[orient="horizontal"], scrollbar thumb[orient="horizontal"] {
    display: none !important; /* none = hide || block = show */
    }

    /*
    scrollbar > slider { -moz-appearance: none !important; }

    scrollbar[orient="vertical"] { margin: -3px -7px -3px -3px !important; }
    scrollbar[orient='vertical'] > slider { background: #282333 !important; max-width: 5px !important; }
    scrollbar[orient='vertical'] > slider > thumb {
    -moz-appearance: none !important;
    background: #524C59 !important; border: 0 !important;
    width: 5px !important; max-width: 5px !important;
    }

    scrollbar[orient="horizontal"] { margin: -3px -3px -7px -3px !important; }
    scrollbar[orient='horizontal'] > slider { background: #282333 !important; max-height: 5px !important; }
    scrollbar[orient='horizontal'] > slider > thumb {
    -moz-appearance: none !important;
    background: #524C59 !important; border: 0 !important;
    height: 5px !important; max-height: 5px !important;
    }

    scrollbar > scrollbarbutton { -moz-appearance: none !important; border: none !important; background: none !important; }
    scrollbar[orient='vertical'] > scrollbarbutton { min-height: 0 !important; }
    scrollbar[orient='horizontal'] > scrollbarbutton { min-width: 0 !important; }
    /**/
    }

    /* background color around/behind pictures opened in firefox (require html namespace on top) */
  2. @koekeishiya koekeishiya revised this gist Apr 23, 2016. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,15 @@
    margin-bottom: 0 /* var(--url-height) */ !important;
    }

    #sidebar-search-container { display: none !important; }
    #sidebar-header, #bookmarksPanel, #bookmarks-view
    {
    color: var(--fg-light) !important;
    background-color: var(--bg-dark) !important;
    border-color: var(--bg-dark) !important;
    -moz-appearance:none!important;
    }

    @-moz-document url(chrome://browser/content/browser.xul) {
    /* URL-BAR */
    #PanelUI-button, #bookmarks-menu-button, #downloads-button, #home-button, #stylish-toolbar-button, #abp-toolbarbutton,
  3. @koekeishiya koekeishiya revised this gist Apr 22, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -15,8 +15,8 @@
    :root {
    /* TAB VARIABLES */
    --bg-nav: #141414;
    --bg-light: #303030; --bg-dark: #202020; --bg-selected: #bdd322;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #202020 /*--fg-selected: #FF456F*/;
    --bg-light: #303030; --bg-dark: #202020; --bg-selected: #458588;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #d5c4a1 /*--fg-selected: #FF456F*/;
    --tab-triangle-correction: 0px; --tab-triangle-height: 16px;
    --tab-height: 18px; --tab-icon-size: 10px; --tab-strip-margin: -11px; --tab-overlap: -5px;
    --tab-fonts: "Input", "Lemon","monospace","Dejavu Sans"; --tab-font-size: 7pt;
  4. @koekeishiya koekeishiya revised this gist Apr 18, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -15,8 +15,8 @@
    :root {
    /* TAB VARIABLES */
    --bg-nav: #141414;
    --bg-light: #303030; --bg-dark: #202020; --bg-selected: #458588;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #d5c4a1 /*--fg-selected: #FF456F*/;
    --bg-light: #303030; --bg-dark: #202020; --bg-selected: #bdd322;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #202020 /*--fg-selected: #FF456F*/;
    --tab-triangle-correction: 0px; --tab-triangle-height: 16px;
    --tab-height: 18px; --tab-icon-size: 10px; --tab-strip-margin: -11px; --tab-overlap: -5px;
    --tab-fonts: "Input", "Lemon","monospace","Dejavu Sans"; --tab-font-size: 7pt;
  5. @koekeishiya koekeishiya revised this gist Mar 21, 2016. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -14,8 +14,8 @@

    :root {
    /* TAB VARIABLES */
    --bg-nav: #1D1D1D;
    --bg-light: #383838; --bg-dark: #282828; --bg-selected: #458588;
    --bg-nav: #141414;
    --bg-light: #303030; --bg-dark: #202020; --bg-selected: #458588;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #d5c4a1 /*--fg-selected: #FF456F*/;
    --tab-triangle-correction: 0px; --tab-triangle-height: 16px;
    --tab-height: 18px; --tab-icon-size: 10px; --tab-strip-margin: -11px; --tab-overlap: -5px;
    @@ -24,7 +24,7 @@

    /* URL VARIABLES */
    --url-background: var(--bg-nav); --url-color: var(--fg-dark);
    --url-focus: #282828;
    --url-focus: #202020;
    --url-height: 16px; --url-right-margin: 6px;
    --url-fonts: "Input","Lemon",monospace,"Dejavu Sans"; --url-font-size: 6pt;
    --url-text-align: center; /* left | center | right */
    @@ -48,6 +48,8 @@
    color: var(--fg-dark) !important;
    }

    #PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox { overflow: visible !important; }

    #nav-bar {
    position: var(--url-position) !important; bottom: 0 !important;
    width: 100% !important; height: var(--url-height) !important;
  6. @koekeishiya koekeishiya revised this gist Jan 28, 2016. 1 changed file with 20 additions and 19 deletions.
    39 changes: 20 additions & 19 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -14,19 +14,19 @@

    :root {
    /* TAB VARIABLES */
    --bg-nav: #090909;
    --bg-light: #303030; --bg-dark: #151515; --bg-selected: #d5c4a1;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #151515 /*--fg-selected: #FF456F*/;
    --tab-triangle-correction: -1px;
    --bg-nav: #1D1D1D;
    --bg-light: #383838; --bg-dark: #282828; --bg-selected: #458588;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #d5c4a1 /*--fg-selected: #FF456F*/;
    --tab-triangle-correction: 0px; --tab-triangle-height: 16px;
    --tab-height: 18px; --tab-icon-size: 10px; --tab-strip-margin: -11px; --tab-overlap: -5px;
    --tab-fonts: "Lemon",monospace,"Dejavu Sans"; --tab-font-size: 7pt;
    --tab-fonts: "Input", "Lemon","monospace","Dejavu Sans"; --tab-font-size: 7pt;
    --tab-triangle: block; /* block | none */

    /* URL VARIABLES */
    --url-background: var(--bg-nav); --url-color: var(--fg-dark);
    --url-focus: #151515;
    --url-height: 14px; --url-right-margin: 6px;
    --url-fonts: "Lemon",monospace,"Dejavu Sans"; --url-font-size: 7pt;
    --url-focus: #282828;
    --url-height: 16px; --url-right-margin: 6px;
    --url-fonts: "Input","Lemon",monospace,"Dejavu Sans"; --url-font-size: 6pt;
    --url-text-align: center; /* left | center | right */
    --url-position: absolute; /* absolute == top (under tabs) || fixed == bottom of browser */

    @@ -127,29 +127,30 @@
    .tabbrowser-tab[selected="true"] .tab-stack {
    background: var(--bg-selected) !important; color: var(--fg-selected) !important;
    border-radius: 0px !important; position: relative !important;
    /*border-top: 1px solid #dc52a5 !important;/**/
    margin-top: 1px !important;
    margin-bottom: 1px !important;
    /*border-top: 1px solid #dc52a5 !important;/**/
    }
    .tabbrowser-tab[selected="true"]:before { /* Left Triangle (of selected tab) */
    content: '' !important; display: var(--tab-triangle);
    /*content: '' !important; display: var(--tab-triangle);
    position: absolute !important; top: 0 !important; left: var(--tab-overlap) !important;
    width: 0 !important; height: 0 !important;
    border: none !important; z-index: 2 !important;

    border-left: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-left: calc(var(--tab-triangle-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-triangle-height)/2) - var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-bottom: calc((var(--tab-triangle-height)/2) + var(--tab-triangle-correction)) solid var(--bg-selected) !important;*/
    /*border-top: var(--tab-height) solid var(--bg-dark) !important;
    border-right: calc(var(--tab-height)/2) solid var(--bg-light) !important;*/
    }
    .tabbrowser-tab[selected="true"]:after { /* Right Triangle (of selected tab) */
    content: '' !important; display: var(--tab-triangle);
    position: absolute !important; top: 0 !important; right: var(--tab-overlap) !important;
    position: absolute !important; top: 1px !important; right: var(--tab-overlap) !important;
    width: 0 !important; height: 0 !important;
    border: none !important; z-index: 2 !important;

    border-right: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-right: calc(var(--tab-triangle-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-triangle-height)/2) - var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-bottom: calc((var(--tab-triangle-height)/2) + var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    /*border-top: var(--tab-height) solid var(--bg-dark) !important;
    border-left: calc(var(--tab-height)/2) solid var(--bg-light) !important;*/
    }
    @@ -284,7 +285,7 @@

    /* About:Blank background */
    @-moz-document url(about:blank) {
    html,body { background: var(--bg-light) !important; }
    html,body { background: var(--bg-dark) !important; }
    }

    /* about:stylish-edit toolbar style */
  7. @koekeishiya koekeishiya revised this gist Dec 15, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -15,8 +15,8 @@
    :root {
    /* TAB VARIABLES */
    --bg-nav: #090909;
    --bg-light: #303030; --bg-dark: #151515; --bg-selected: #151515;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #FF456F;
    --bg-light: #303030; --bg-dark: #151515; --bg-selected: #d5c4a1;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #151515 /*--fg-selected: #FF456F*/;
    --tab-triangle-correction: -1px;
    --tab-height: 18px; --tab-icon-size: 10px; --tab-strip-margin: -11px; --tab-overlap: -5px;
    --tab-fonts: "Lemon",monospace,"Dejavu Sans"; --tab-font-size: 7pt;
    @@ -302,4 +302,4 @@ tabbrowser tabpanels, #appcontent > #content { background: var(--bg-light) !impo
    /* Set dark text in light textareas
    @-moz-document regexp("https?://(?!(localhost|twily.info|.*.4chan.org|.*.youtube.com)).*") {
    input, textarea { color: #222628 !important; -moz-appearance: none !important; }
    }*/
    }*/
  8. @koekeishiya koekeishiya revised this gist Nov 25, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,7 @@
    /* URL VARIABLES */
    --url-background: var(--bg-nav); --url-color: var(--fg-dark);
    --url-focus: #151515;
    --url-height: 18px; --url-right-margin: 6px;
    --url-height: 14px; --url-right-margin: 6px;
    --url-fonts: "Lemon",monospace,"Dejavu Sans"; --url-font-size: 7pt;
    --url-text-align: center; /* left | center | right */
    --url-position: absolute; /* absolute == top (under tabs) || fixed == bottom of browser */
    @@ -56,7 +56,7 @@
    overflow: hidden !important;
    /* --- Uncomment the section below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#TabsToolbar" below) --- */

    position: fixed !important; top: 0px !important; left: 0px !important;
    position: fixed !important; top: 0px !important; left: 6px !important;
    width: 300px !important; max-width: 300px !important;
    z-index: 100 !important;
    /**/
  9. @koekeishiya koekeishiya revised this gist Nov 24, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -44,7 +44,8 @@
    .tab-drop-indicator { margin-bottom: 0 !important; }

    .autocomplete-richlistbox {
    background: #252525 !important;
    background: var(--url-focus) !important;
    color: var(--fg-dark) !important;
    }

    #nav-bar {
  10. @koekeishiya koekeishiya revised this gist Nov 24, 2015. 1 changed file with 15 additions and 10 deletions.
    25 changes: 15 additions & 10 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -14,16 +14,17 @@

    :root {
    /* TAB VARIABLES */
    --bg-nav: #151616;
    --bg-light: #303030; --bg-dark: #202020;
    --fg-light: #D6CCDC; --fg-dark: #AAA5AD;
    --bg-nav: #090909;
    --bg-light: #303030; --bg-dark: #151515; --bg-selected: #151515;
    --fg-light: #d5c4a1; --fg-dark: #d5c4a1; --fg-selected: #FF456F;
    --tab-triangle-correction: -1px;
    --tab-height: 18px; --tab-icon-size: 10px; --tab-strip-margin: -11px; --tab-overlap: -5px;
    --tab-fonts: "Lemon",monospace,"Dejavu Sans"; --tab-font-size: 7pt;
    --tab-triangle: block; /* block | none */

    /* URL VARIABLES */
    --url-background: var(--bg-nav); --url-color: var(--fg-dark);
    --url-focus: #151515;
    --url-height: 18px; --url-right-margin: 6px;
    --url-fonts: "Lemon",monospace,"Dejavu Sans"; --url-font-size: 7pt;
    --url-text-align: center; /* left | center | right */
    @@ -42,6 +43,10 @@

    .tab-drop-indicator { margin-bottom: 0 !important; }

    .autocomplete-richlistbox {
    background: #252525 !important;
    }

    #nav-bar {
    position: var(--url-position) !important; bottom: 0 !important;
    width: 100% !important; height: var(--url-height) !important;
    @@ -50,7 +55,7 @@
    overflow: hidden !important;
    /* --- Uncomment the section below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#TabsToolbar" below) --- */

    position: fixed !important; top: 0px !important; left: 25px !important;
    position: fixed !important; top: 0px !important; left: 0px !important;
    width: 300px !important; max-width: 300px !important;
    z-index: 100 !important;
    /**/
    @@ -71,7 +76,7 @@
    text-align: var(--url-text-align) !important;
    }
    #urlbar[focused="true"] {
    background: #202020 !important;
    background: var(--url-focus) !important;
    overflow: hidden !important;
    }
    /*#urlbar * { -moz-appearance: none !important; }*/
    @@ -119,7 +124,7 @@
    #tabbrowser-tabs[overflow]:not([positionpinnedtabs]) { -moz-padding-start: 20px !important; }

    .tabbrowser-tab[selected="true"] .tab-stack {
    background: var(--bg-light) !important; color: var(--fg-light) !important;
    background: var(--bg-selected) !important; color: var(--fg-selected) !important;
    border-radius: 0px !important; position: relative !important;
    /*border-top: 1px solid #dc52a5 !important;/**/
    }
    @@ -130,8 +135,8 @@
    border: none !important; z-index: 2 !important;

    border-left: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-light) !important;
    border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-light) !important;
    border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    /*border-top: var(--tab-height) solid var(--bg-dark) !important;
    border-right: calc(var(--tab-height)/2) solid var(--bg-light) !important;*/
    }
    @@ -142,8 +147,8 @@
    border: none !important; z-index: 2 !important;

    border-right: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-light) !important;
    border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-light) !important;
    border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-selected) !important;
    /*border-top: var(--tab-height) solid var(--bg-dark) !important;
    border-left: calc(var(--tab-height)/2) solid var(--bg-light) !important;*/
    }
  11. @koekeishiya koekeishiya created this gist Sep 2, 2015.
    299 changes: 299 additions & 0 deletions Modified Twily's Powerline
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,299 @@
    @namespace html url(http://www.w3.org/1999/xhtml);
    @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    /*
    Author: Twily
    Description: Minimal flat styled tabs for Australis
    Compitability: Firefox Nightly v31.0a1 - v32.0a1 (Australis)
    CSS Variables were introduced to Firefox in v29.0a1
    Website: http://twily.info/


    Note: To enable the urlbar; search this css for:
    "make the url-bar visible" and "adjust margin-top to"
    */

    :root {
    /* TAB VARIABLES */
    --bg-nav: #151616;
    --bg-light: #303030; --bg-dark: #202020;
    --fg-light: #D6CCDC; --fg-dark: #AAA5AD;
    --tab-triangle-correction: -1px;
    --tab-height: 18px; --tab-icon-size: 10px; --tab-strip-margin: -11px; --tab-overlap: -5px;
    --tab-fonts: "Lemon",monospace,"Dejavu Sans"; --tab-font-size: 7pt;
    --tab-triangle: block; /* block | none */

    /* URL VARIABLES */
    --url-background: var(--bg-nav); --url-color: var(--fg-dark);
    --url-height: 18px; --url-right-margin: 6px;
    --url-fonts: "Lemon",monospace,"Dejavu Sans"; --url-font-size: 7pt;
    --url-text-align: center; /* left | center | right */
    --url-position: absolute; /* absolute == top (under tabs) || fixed == bottom of browser */

    margin-bottom: 0 /* var(--url-height) */ !important;
    }

    @-moz-document url(chrome://browser/content/browser.xul) {
    /* URL-BAR */
    #PanelUI-button, #bookmarks-menu-button, #downloads-button, #home-button, #stylish-toolbar-button, #abp-toolbarbutton,
    #back-button, #forward-button, #identity-box, #urlbar-reload-button, #urlbar-stop-button, #urlbar-go-button,
    #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
    /*, #alltabs-button, #tabview-button, .tab-icon-image*/, .tab-icon-image:not([pinned]) { display: none !important; }

    .tab-drop-indicator { margin-bottom: 0 !important; }

    #nav-bar {
    position: var(--url-position) !important; bottom: 0 !important;
    width: 100% !important; height: var(--url-height) !important;
    min-height: var(--url-height) !important; max-height: var(--url-height) !important;
    margin: 0 0 0 0 !important;
    overflow: hidden !important;
    /* --- Uncomment the section below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#TabsToolbar" below) --- */

    position: fixed !important; top: 0px !important; left: 25px !important;
    width: 300px !important; max-width: 300px !important;
    z-index: 100 !important;
    /**/
    }
    #nav-bar-customization-target { width: 100% !important; }
    #urlbar-wrapper {
    width: 101% !important; margin-top: 0px !important; /* adjust margin-top to ~ -5px if you experience gap */
    position: absolute !important; top: 0px !important; left: 0 !important;
    border-bottom: 0px solid var(--bg-light) !important;
    }
    #urlbar {
    border: none !important; border-radius: 0 !important;
    margin: 0 0 0 0 !important; padding: 0 2px 0 9px !important;
    width: calc(100% + var(--url-right-margin)) !important;
    height: var(--url-height) !important; min-height: var(--url-height) !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;
    }
    #urlbar[focused="true"] {
    background: #202020 !important;
    overflow: hidden !important;
    }
    /*#urlbar * { -moz-appearance: none !important; }*/

    /* --- Comment out the section below to make the url-bar visible --- */
    /*
    #nav-bar {
    width: 0 !important; height: 0 !important;
    position: fixed !important; left: -1px !important; top: -1px !important;
    overflow: hidden !important; visibility: hidden !important;
    }
    */


    /* TABS */
    .tabbrowser-tab[fadein]:not([pinned]) { min-width: 50px !important; max-width: /*180px*/ 100% !important; }
    tab {
    font-family: var(--tab-fonts) !important;
    height: var(--tab-height) !important; min-height: var(--tab-height) !important;
    background: var(--bg-dark) !important; color: var(--fg-dark) !important;
    font-size: var(--tab-font-size); text-shadow: none !important; text-align: center /* center | left */ !important;
    }

    .tabbrowser-tab label { padding: 0 14px 0 14px !important; }

    #tabbrowser-tabs .tabbrowser-tab[pinned] { width: 38px !important; }
    #tabbrowser-tabs .tabbrowser-tab[pinned] label { display: none !important; }

    #tabbrowser-tabs .tabbrowser-tab .tab-icon-image {
    margin: 0 -10px 0 14px !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;
    }

    #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-stack { height: var(--tab-height) !important; width: 100% !important; }
    #tabbrowser-tabs .tabbrowser-arrowscrollbox .box-inherit.scrollbox-innerbox { max-height: var(--tab-height) !important; }
    .scrollbutton-up, .scrollbutton-down { border: none !important; }

    #tabbrowser-tabs[overflow]:not([positionpinnedtabs]) { -moz-padding-start: 20px !important; }

    .tabbrowser-tab[selected="true"] .tab-stack {
    background: var(--bg-light) !important; color: var(--fg-light) !important;
    border-radius: 0px !important; position: relative !important;
    /*border-top: 1px solid #dc52a5 !important;/**/
    }
    .tabbrowser-tab[selected="true"]:before { /* Left Triangle (of selected tab) */
    content: '' !important; display: var(--tab-triangle);
    position: absolute !important; top: 0 !important; left: var(--tab-overlap) !important;
    width: 0 !important; height: 0 !important;
    border: none !important; z-index: 2 !important;

    border-left: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-light) !important;
    border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-light) !important;
    /*border-top: var(--tab-height) solid var(--bg-dark) !important;
    border-right: calc(var(--tab-height)/2) solid var(--bg-light) !important;*/
    }
    .tabbrowser-tab[selected="true"]:after { /* Right Triangle (of selected tab) */
    content: '' !important; display: var(--tab-triangle);
    position: absolute !important; top: 0 !important; right: var(--tab-overlap) !important;
    width: 0 !important; height: 0 !important;
    border: none !important; z-index: 2 !important;

    border-right: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
    border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-light) !important;
    border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-light) !important;
    /*border-top: var(--tab-height) solid var(--bg-dark) !important;
    border-left: calc(var(--tab-height)/2) solid var(--bg-light) !important;*/
    }

    #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;

    margin-bottom: 2px !important;
    /* --- Uncomment the line below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#nav-bar" above) --- */
    margin-left: 160px !important;/**/
    }
    #TabsToolbar::after { display: none !important; }
    .tabbrowser-tab::before, .tabbrowser-tab::after { background: none !important; opacity: 1 !important; }

    /*browser, #navigator-toolbox { -moz-appearance: none !important; background: transparent !important; }*/

    #navigator-toolbox::after { height: 0px !important; background: var(--bg-light) !important; }
    #liberator-separator { height: 0px !important; background: var(--bg-light) !important; }

    /* MENUS */
    menuitem + menuseparator, menu + menuseparator/*, .menu-iconic-left*/ { display: none !important; }
    /*menuitem > label { margin-left: var(--tab-height) !important; }*/
    menubar, menubutton, menulist, menu, menuitem {
    font-family: var(--tab-fonts) !important; font-size: var(--tab-font-size);
    height: var(--tab-height) !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; }*/

    .statuspanel-label {
    background: var(--bg-dark) !important;
    color: var(--fg-dark) !important;
    border: none !important;
    }

    #titlebar {
    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 { background: var(--bg-dark) !important; }

    /* Tabgroup margin top fix */
    #tab-view-deck #tab-view { margin-top: 11px !important; }
    #tab-view-deck { background: var(--bg-dark) !important; }
    }


    /* Tab Group Page Style (Ctrl+Shift+E) */
    @-moz-document url(chrome://browser/content/tabview.html) {
    #content #bg, #actions, body { background: #252525 !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/) {
    /* SCROLLBAR */
    scrollbar[orient="vertical"], scrollbar thumb[orient="vertical"],
    scrollbar[orient="horizontal"], scrollbar thumb[orient="horizontal"] {
    display: none !important; /* none = hide || block = show */
    }

    /*
    scrollbar > slider { -moz-appearance: none !important; }

    scrollbar[orient="vertical"] { margin: -3px -7px -3px -3px !important; }
    scrollbar[orient='vertical'] > slider { background: #282333 !important; max-width: 5px !important; }
    scrollbar[orient='vertical'] > slider > thumb {
    -moz-appearance: none !important;
    background: #524C59 !important; border: 0 !important;
    width: 5px !important; max-width: 5px !important;
    }

    scrollbar[orient="horizontal"] { margin: -3px -3px -7px -3px !important; }
    scrollbar[orient='horizontal'] > slider { background: #282333 !important; max-height: 5px !important; }
    scrollbar[orient='horizontal'] > slider > thumb {
    -moz-appearance: none !important;
    background: #524C59 !important; border: 0 !important;
    height: 5px !important; max-height: 5px !important;
    }

    scrollbar > scrollbarbutton { -moz-appearance: none !important; border: none !important; background: none !important; }
    scrollbar[orient='vertical'] > scrollbarbutton { min-height: 0 !important; }
    scrollbar[orient='horizontal'] > scrollbarbutton { min-width: 0 !important; }
    /**/
    }

    /* background color around/behind pictures opened in firefox (require html namespace on top) */
    @-moz-document regexp("(https?://|file:///)(.*)\\.(jpeg|jpg|gif|png|apng|svg|bmp|webm|webp)") {
    body { background: var(--bg-light) !important; }
    img.decoded { background-color: transparent !important; }
    }


    /* About:Blank background */
    @-moz-document url(about:blank) {
    html,body { background: var(--bg-light) !important; }
    }

    /* 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; }


    /* Set dark text in light textareas
    @-moz-document regexp("https?://(?!(localhost|twily.info|.*.4chan.org|.*.youtube.com)).*") {
    input, textarea { color: #222628 !important; -moz-appearance: none !important; }
    }*/