diff options
-rw-r--r-- | twily.css | 245 |
1 files changed, 142 insertions, 103 deletions
@@ -3,82 +3,112 @@ /* 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 + Compatibility: -- Firefox 43.0.4 -- Website: http://twily.info/ - Note: To enable the urlbar; search this css for: - "make the url-bar visible" and "adjust margin-top to" + 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-light: #17181A; --bg-dark: #27282B;*/ + /*--bg-light: #524C59; --bg-dark: #282333;*/ --bg-light: #444444; --bg-dark: #1C1C1C; - --fg-light: #CECFD1; --fg-dark: #AAABAD; - /*--tab-triangle-correction: -1px;/**/ - /*--tab-height: 24px; --tab-icon-size: 16px; --tab-strip-margin: -12px; --tab-overlap: -5px;*/ + --fg-light: #D6CCDC; --fg-dark: #AAA5AD; + --tab-triangle-correction: -1px; --tab-height: 18px; --tab-icon-size: 12px; --tab-strip-margin: -12px; --tab-overlap: -5px; - --tab-fonts: "Droid Sans", "Source Sans Pro", "Lemon",monospace,"Dejavu Sans"; --tab-font-size: 10pt; - --tab-triangle: block; /* block | none */ + --tab-fonts: "Lemon",monospace,"Dejavu Sans"; --tab-font-size: 8pt; + --tab-text-align: center; /* left | center | right */ + --tab-triangle: block; /* block | none */ /* URL VARIABLES */ --url-background: var(--bg-light); --url-color: var(--fg-dark); - --url-height: 24px; --url-right-margin: 5px; - --url-fonts: "Droid Sans", "Source Sans Pro", "Lemon",monospace,"Dejavu Sans"; --url-font-size: 10pt; + --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 */ + #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, - #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, - #window-controls /*, #alltabs-button, #tabview-button, .tab-icon-image, .tab-icon-image:not([pinned])*/ { display: none !important; } - - /* --- Uncomment the section below to enable the New Tab Button --- */ - /* + #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; } - + + + /*#browser { margin-bottom: var(--url-height) !important; }/**/ /* Uncomment to enable bottom margin */ + + #navigator-toolbox { background: var(--url-background) !important; } + #navigator-toolbox * { clip: auto !important; clip-path: none !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; - - /* --- Uncomment the section below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#TabsToolbar" below) --- */ + margin: 0 !important; background: transparent !important; + + /* --- Uncomment section below to attach 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% !important; margin-top: -0px !important; /* adjust margin-top to ~ -5px if you experience gap */ - position: absolute !important; top: 0 !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 * { -moz-appearance: none !important; }*/ - + #nav-bar-customization-target, #urlbar-container, #urlbar { + margin: 0 !important; padding: 0 !important; + width: 100% !important; height: 100% !important; + border-radius: 0 !important; + } + #nav-bar-customization-target { + position: absolute !important; top: -1px !important; left: 0 !important; height: calc(100% - 1px) !important; /* (bottom margin - height switch +/-) */ + } + #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; + } + /*#urlbar * { -moz-appearance: none !important; }*/ + + .urlbar-textbox-container .urlbar-input-box .textbox-input { + height: var(--url-height) !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; } + #urlbar { padding-left: calc((var(--url-height) * 2) + 8px) !important; } + /**/ + + /* --- Comment out the section below to make the url-bar visible --- */ /**/ #nav-bar { @@ -87,40 +117,43 @@ overflow: hidden !important; visibility: hidden !important; } /**/ - - + /* TABS */ .tabbrowser-tab[fadein]:not([pinned]) { min-width: 100px !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: left /* center | left */ !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 .box-inherit.scrollbox-innerbox { max-height: var(--tab-height) !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-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; @@ -131,64 +164,67 @@ 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-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;/**/ + 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-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;/**/ + 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; - - /* --- Uncomment the line below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#nav-bar" above) --- */ - /*margin-left: 150px !important;/**/ + + /* --- Uncomment section below to attach url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#nav-bar" above) --- */ + /*margin-left: 147px !important;/**/ } #TabsToolbar::after { display: none !important; } - .tabbrowser-tab::before, .tabbrowser-tab::after { background: none !important; } - + .tabbrowser-tab::before, .tabbrowser-tab::after { background: none !important; opacity: 1 !important; visibility: visible !important; } + /*browser, #navigator-toolbox { -moz-appearance: none !important; background: transparent !important; }*/ - - /*#navigator-toolbox::after { height: 0 !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 { + /*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; } @@ -196,13 +232,13 @@ 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; } + + #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; @@ -216,7 +252,7 @@ @-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; @@ -226,7 +262,7 @@ 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; @@ -241,30 +277,33 @@ /* 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="vertical"], scrollbar thumb[orient="vertical"], scrollbar[orient="horizontal"], scrollbar thumb[orient="horizontal"] { - display: none !important; /* none = hide || block = show */ + display: none !important; /* block | none (enable scrollbar) */ } - + + /* + Uncomment section below to apply style + + (width/height is controlled by the margin) + */ /* scrollbar > slider { -moz-appearance: none !important; } - - scrollbar[orient="vertical"] { margin: -3px -7px -3px -3px !important; } - scrollbar[orient='vertical'] > slider { background: #27282B !important; max-width: 5px !important; } + + scrollbar[orient="vertical"] { margin: 0 -10px 0 0 !important; } + scrollbar[orient='vertical'] > slider { background: #282333 !important; max-width: 100% !important; } scrollbar[orient='vertical'] > slider > thumb { -moz-appearance: none !important; - background: #9b79f7 !important; border: 0 !important; - width: 5px !important; max-width: 5px !important; + background: #524C59 !important; border: 0 !important; width: 100% !important; } - - scrollbar[orient="horizontal"] { margin: -3px -3px -7px -3px !important; } - scrollbar[orient='horizontal'] > slider { background: #27282B !important; max-height: 5px !important; } + + scrollbar[orient="horizontal"] { margin: 0 0 -10px 0 !important; } + scrollbar[orient='horizontal'] > slider { background: #282333 !important; max-height: 100% !important; } scrollbar[orient='horizontal'] > slider > thumb { -moz-appearance: none !important; - background: #9b79f7 !important; border: 0 !important; - height: 5px !important; max-height: 5px !important; + background: #524C59 !important; border: 0 !important; height: 100% !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; } @@ -275,7 +314,7 @@ /* 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: url(none) !important; } + img.decoded { background-color: transparent !important; } } @@ -288,7 +327,7 @@ @-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; } } @@ -296,9 +335,9 @@ tabbrowser tabpanels, #appcontent > #content { background: var(--bg-light) !important; } -/* Set dark text in light textareas +/* 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; } -}*/ - - + input, textarea { color: #282333 !important; -moz-appearance: none !important; } +} +/**/ |