helm/custom/firefox/userstyles/twily.css

@namespace html url(http://www.w3.org/1999/xhtml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/*
    Original Author: Twily
    Modified by: Henrik Lissner
    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-light: #524C59; --bg-dark: #282333;
    --fg-light: #D6CCDC; --fg-dark: #AAA5AD;
    --tab-triangle-correction: -1px;
    --tab-height: 29px; --tab-icon-size: 16px; --tab-strip-margin: -8px; --tab-overlap: -5px;
    --tab-fonts: "Ubuntu Mono",monospace,"Dejavu Sans"; --tab-font-size: 9.5pt;
    --tab-text-align: left; /* left | center | right */
    --tab-triangle: none; /* block | none */

    /* URL VARIABLES */
    --url-background: #3E3848; --url-color: var(--fg-light);
    --url-height: 26px; --url-right-margin: 5px;
    --url-fonts: "Ubuntu Mono",monospace,"Dejavu Sans"; --url-font-size: 12pt;
    --url-text-align: left; /* left | center | right */
    --url-position: absolute; /* absolute == top (under tabs) || fixed == bottom of browser */

    margin-bottom: 0 !important;
}


@-moz-document url(chrome://browser/content/browser.xul) {
    statuspanel label { background-color: var(--bg-dark); }


    /*#downloads-button, #tabview-button { margin-top: -2px !important; padding-left: 10px !important; opacity: 0.5; }*/

    #titlebar, #titlebar-placeholder-on-TabsToolbar-for-captions-buttons { display: none !important; }

    /* 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, #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-background-start, .tab-background-end,
    #window-controls /*, .tab-throbber, #alltabs-button, #tabview-button, .tab-icon-image, .tab-icon-image:not([pinned])*/ { display: none !important; }

    #identity-box { max-width: 26px !important; margin-left: 0px !important; padding-left: 5px !important; }
    #identity-box #identity-icon-labels { display: none !important; }

    .autocomplete-richlistbox { height: auto !important; max-height: auto !important; background-color: var(--fg-light) !important; }
    .autocomplete-richlistbox richlistitem[selected="true"] { background-color: var(--bg-dark) !important; }
    .autocomplete-richlistbox .autocomplete-richlistitem .ac-url-box { display: none !important; }
    .autocomplete-richlistbox .autocomplete-richlistitem[actiontype="searchengine"],
    .autocomplete-richlistbox .autocomplete-richlistitem[type~="autofill"] { padding: 0 0 10px !important; }

    /* --- Uncomment the section below to enable the Back/Forward buttons [EXPERIMENTAL] (Requires url-bar) --- */
    /*
    #back-button, #forward-button { display: block !important; }
    #back-button::before, #forward-button::before {
        display: inline-block !important; position: absolute !important;
        width: var(--url-height) !important; height: var(--url-height) !important; top: 0 !important;
        text-align: center !important; line-height: var(--url-height) !important;
    }
    #back-button::before { content: "<" !important; left: 0 !important; }
    #forward-button::before { content: ">" !important; left: calc(var(--url-height) + 8px) !important; }
    /**/

    tab, .tabs-newtab-button { transition: background-color 0.1s ease-in-out !important; }
    tab:hover { background-color: #3C364A !important; }
    .tabs-newtab-button:hover { background-color: #3E384C !important; }

    /* --- Uncomment the section below to enable the New Tab Button [EXPERIMENTAL] --- */

    .tabs-newtab-button { display: block !important; background: #302A3A !important; margin: 0 0 0 0 !important; width: 28px !important; }
    .tabs-newtab-button::before { content: "+" !important; position: relative; bottom: 1px; opacity: 0.4; }
    .tabs-newtab-button .toolbarbutton-icon { display: none !important; }
    /**/

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

    #content-deck { /*padding-bottom: var(--url-height) !important;*/ }
    #nav-bar {
        position: var(--url-position) !important; bottom: 0px !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;

        /* --- Uncomment the section below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#TabsToolbar" below) --- */
        /*
        position: fixed !important; top: 0 !important; left: 0 !important;
        width: 315px !important; max-width: 315px !important;
        z-index: 100 !important;
        /**/
    }
       #nav-bar-customization-target { width: 100% !important; }
          #urlbar-wrapper {
              width: 100.5% !important; margin-top: 0px !important; /* --- adjust margin-top to ~ -5px if you experience gap --- */
              position: absolute !important; top: 0 !important; left: 0 !important;
              padding-left: 6px;
              border-bottom: 0px solid var(--bg-light) !important;
          }
             #urlbar-icons { padding-right: 5px !important; }
             #urlbar {
                 border: none !important; border-radius: 0 !important;
                 margin: 0 0 0 0 !important; padding: 0 0 0 0 !important;
                 width: 100% !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 * { -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: 300px !important; margin-right: 1px !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) !important; text-shadow: none !important; text-align: var(--tab-text-align) !important;
        padding-bottom: 0 !important;
    }

    .tabbrowser-tab[visuallyselected="true"] {
        position: unset !important;
    }

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

    #tabbrowser-tabs .tabbrowser-tab[pinned]            { width: 28px !important; }
    #tabbrowser-tabs .tabbrowser-tab[pinned] label      { display: none !important; }
    #tabbrowser-tabs .tabbrowser-tab label { text-align: var(--url-text-align) !important; }

    #tabbrowser-tabs .tabbrowser-tab .tab-icon-image {
        margin: 0 -9px 0 7px !important;
        width: var(--tab-icon-size) !important;
        height: var(--tab-icon-size) !important;
    }

    .tabbrowser-tab *, .tabs-newtab-button * {
        background: none !important;
        margin: 0 0 0 0 !important; padding: 0 0 0 0 !important;
        -moz-appearance: none !important;
    }

    .tabbrowser-tab .tab-close-button {
        margin-right: 4px !important;
        opacity: 0.25 !important;
    }
    .tabbrowser-tab .tab-throbber {
        margin-left: 6px !important;
        margin-right: -8px !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-tab[selected="true"] .tab-stack {
        background: var(--url-background) !important; color: var(--fg-light) !important;
        border-radius: 0px !important; position: relative !important;
        /*border-top: 1px solid #dc52a5 !important;/**/
    }
    #TabsToolbar, #tabbrowser-tabs {
        -moz-appearance: none !important;
        height: var(--tab-height) !important; min-height: var(--tab-height)!important;
        margin: 0 -2px 0px var(--tab-strip-margin) !important;
        padding-right: 0 !important;
        background: var(--bg-dark) !important;

        /* --- Uncomment the line below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#nav-bar" above) --- */
        /**********************************/

        /*padding-left: 40px !important;/**/

        /**********************************/
    }
    #TabsToolbar::after { display: none !important; }
    .tabbrowser-tab::before, .tabbrowser-tab::after { background: none !important; opacity: 0 !important; visibility: visible !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; border-top: 0 !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; }*/

    /* 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: 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 */
    scrollbar[orient="vertical"], scrollbar thumb[orient="vertical"],
    scrollbar[orient="horizontal"], scrollbar thumb[orient="horizontal"] {
        display: block !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 { padding: 0 !important; margin: 0 !important; background: var(--url-background) !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; }
}
/**/