Public Pastes
Pastebin PRO Accounts SPRING SPECIAL! For a limited time only get 40% discount on a LIFETIME PRO account! Offer Ends April 18th!
SHARE
TWEET

firefox css

a guest Oct 7th, 2015 123 Never
  1. @namespace html url(http://www.w3.org/1999/xhtml);
  2. @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
  3. /*
  4.     Author: Twily
  5.     Description: Minimal flat styled tabs for Australis
  6.     Compitability: Firefox Nightly v31.0a1 - v32.0a1 (Australis)
  7.        CSS Variables were introduced to Firefox in v29.0a1
  8.     Website: http://twily.info/
  9.  
  10.  
  11.     Note: To enable the urlbar; search this css for:
  12.        "make the url-bar visible" and "adjust margin-top to"
  13. */
  14.  
  15. :root {
  16.     /* TAB VARIABLES */
  17.     --bg-light: #17181A; --bg-dark: #2b2b2b; /*--bg-dark: #27282B;--*/
  18.     --fg-light: #CECFD1; --fg-dark: #DEDEDE; /*--fg-dark: #AAABAD;--*/
  19.     /*--tab-triangle-correction: -1px;/**/
  20.     /*--tab-height: 16px; --tab-icon-size: 1px; --tab-strip-margin: -1px; --tab-overlap: -5px;*/
  21.     --tab-fonts: "Droid Sans", "Source Sans Pro", "Lemon",monospace,"Dejavu Sans"; --tab-font-size: 10pt;
  22.     --tab-triangle: block; /* | none;*/
  23.  
  24.     /* URL VARIABLES */
  25.     --url-background: var(--bg-light); --url-color: var(--fg-dark);
  26.     --url-height: 24px; --url-right-margin: 5px;
  27.     --url-fonts: "Droid Sans", "Source Sans Pro", "Lemon",monospace,"Dejavu Sans"; --url-font-size: 10pt;
  28.     --url-text-align: center; /* left | center | right */
  29.     --url-position: absolute; /* absolute == top (under tabs) || fixed == bottom of browser */
  30.    
  31.     margin-bottom: 0 /* var(--url-height) */ !important;
  32. }
  33.  
  34. @-moz-document url(chrome://browser/content/browser.xul) {
  35.     /* URL-BAR */
  36.     #PanelUI-button, #bookmarks-menu-button, #downloads-button, #home-button, #stylish-toolbar-button, #abp-toolbarbutton,
  37.     #back-button, #forward-button, #identity-box, #urlbar-reload-button, #urlbar-stop-button, #urlbar-go-button,
  38.     #notification-popup-box, #new-tab-button, #private-browsing-indicator, #search-container, #nav-bar-overflow-button,
  39.     .tabs-newtab-button, .tab-close-button, .tab-close, .tab-throbber, .tab-background-start, .tab-background-end,
  40.     #window-controls /*, #alltabs-button, #tabview-button, .tab-icon-image, .tab-icon-image:not([pinned])*/ { display: none !important; }
  41.    
  42.     .tab-drop-indicator { margin-bottom: 0 !important; }
  43.     .tab-icon-image{display:none !important;}
  44.     #nav-bar {
  45.         position: var(--url-position) !important; bottom: 0 !important;
  46.         width: 100% !important; height: var(--url-height) !important;
  47.         min-height: var(--url-height) !important; max-height: var(--url-height) !important;
  48.         margin: 0 0 0 0 !important;
  49.        
  50.         /* --- Uncomment the section below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#TabsToolbar" below) --- */
  51.        
  52.         /*position: fixed !important; top: 0 !important; left: 0 !important;
  53.         width: 315px !important; max-width: 315px !important;
  54.         z-index: 100 !important;
  55.         */
  56.     }
  57.        #nav-bar-customization-target { width: 100% !important; }
  58.           #urlbar-wrapper {
  59.               width: 100% !important; margin-top: -3px !important; /* adjust margin-top to ~ -5px if you experience gap */
  60.               position: absolute !important; top: 0 !important; left: 0 !important;
  61.               border-bottom: 0px solid var(--bg-light) !important;
  62.           }
  63.              #urlbar {
  64.                  border: none !important; border-radius: 0 !important;
  65.                  margin: 0 0 0 0 !important; padding: 0 2px 0 9px !important;
  66.                  width: calc(100% + var(--url-right-margin)) !important;
  67.                  height: var(--url-height) !important; min-height: var(--url-height) !important;
  68.                  background: var(--url-background) !important; color: var(--url-color) !important;
  69.                  font-family: var(--url-fonts) !important; font-size: var(--url-font-size) !important;
  70.                  text-align: var(--url-text-align) !important;
  71.              }
  72.              /*#urlbar * { -moz-appearance: none !important; }*/
  73.    
  74.     /* --- Comment out the section below to make the url-bar visible --- */
  75.    
  76.     #nav-bar {
  77.         width: 0 !important; height: 0 !important;
  78.         position: fixed !important; left: -1px !important; top: -1px !important;
  79.         overflow: hidden !important; visibility: hidden !important;
  80.     }
  81.     */
  82.    
  83.    
  84.     /* TABS */
  85.     .tabbrowser-tab[fadein]:not([pinned]) { min-width: 100px !important; max-width: /*180px*/ 100% !important; }
  86.     tab {
  87.         font-family: var(--tab-fonts) !important;
  88.         height: var(--tab-height) !important; min-height: var(--tab-height) !important;
  89.         background: var(--bg-dark) !important; color: var(--fg-dark) !important;
  90.         font-size: var(--tab-font-size); text-shadow: none !important; text-align: left /* center | left */ !important;
  91.     }
  92.    
  93.     .tabbrowser-tab label { padding: 0 22px 0 22px !important; }
  94.    
  95.     #tabbrowser-tabs .tabbrowser-tab[pinned]            { width: 48px !important; }
  96.     #tabbrowser-tabs .tabbrowser-tab[pinned] label      { display: none !important; }
  97.    
  98.     #tabbrowser-tabs .tabbrowser-tab .tab-icon-image {
  99.         margin: 0 -10px 0 16px !important;
  100.         width: var(--tab-icon-size) !important;
  101.         height: var(--tab-icon-size) !important;
  102.     }
  103.    
  104.     .tabbrowser-tab *, .tabs-newtab-button * {
  105.         background: none !important; list-style-image: none !important;
  106.         margin: 0 0 0 0 !important; padding: 0 0 0 0 !important;
  107.         -moz-appearance: none !important;
  108.     }
  109.    
  110.     #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-stack { height: var(--tab-height) !important; width: 100% !important; }
  111.     #tabbrowser-tabs .tabbrowser-arrowscrollbox .box-inherit.scrollbox-innerbox { max-height: var(--tab-height) !important; }
  112.     .scrollbutton-up, .scrollbutton-down { border: none !important; }
  113.    
  114.     #tabbrowser-tabs[overflow]:not([positionpinnedtabs]) { -moz-padding-start: 20px !important; }
  115.    
  116.     .tabbrowser-tab[selected="true"] .tab-stack {
  117.         background: var(--bg-light) !important; color: var(--fg-light) !important;
  118.         border-radius: 0px !important; position: relative !important;
  119.         /*border-top: 1px solid #dc52a5 !important;/**/
  120.     }
  121.     .tabbrowser-tab[selected="true"]:before { /* Left Triangle (of selected tab) */
  122.         content: '' !important; display: var(--tab-triangle);
  123.         position: absolute !important; top: 0 !important; left: var(--tab-overlap) !important;
  124.         width: 0 !important; height: 0 !important;
  125.         border: none !important; z-index: 2 !important;
  126.        
  127.         /*border-left: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
  128.         border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-light) !important;
  129.         border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-light) !important;/**/
  130.         /**/border-top: var(--tab-height) solid var(--bg-dark) !important;
  131.         border-right: calc(var(--tab-height)/2) solid var(--bg-light) !important;/**/
  132.     }
  133.     .tabbrowser-tab[selected="true"]:after { /* Right Triangle (of selected tab) */
  134.         content: '' !important; display: var(--tab-triangle);
  135.         position: absolute !important; top: 0 !important; right: var(--tab-overlap) !important;
  136.         width: 0 !important; height: 0 !important;
  137.         border: none !important; z-index: 2 !important;
  138.        
  139.         border-right: calc(var(--tab-height)/2) solid var(--bg-dark) !important;
  140.         border-top: calc((var(--tab-height)/2) - var(--tab-triangle-correction)) solid var(--bg-light) !important;
  141.         border-bottom: calc((var(--tab-height)/2) + var(--tab-triangle-correction)) solid var(--bg-light) !important;/**/
  142.         /**/border-top: var(--tab-height) solid var(--bg-dark) !important;
  143.         border-left: calc(var(--tab-height)/2) solid var(--bg-light) !important;/**/
  144.     }
  145.    
  146.  
  147.        
  148.     #TabsToolbar, #tabbrowser-tabs {
  149.         -moz-appearance: none !important;
  150.         height: var(--tab-height) !important; min-height: var(--tab-height)!important;
  151.         margin: 0 var(--tab-strip-margin) !important;
  152.         background: var(--bg-dark) !important;
  153.        
  154.         /* --- Uncomment the line below to attach the url-bar to the tab-bar [EXPERIMENTAL] (Require a line in "#nav-bar" above) --- */
  155.         /*margin-left: 150px !important;/**/
  156.     }
  157.     #TabsToolbar::after { display: none !important; }
  158.     .tabbrowser-tab::before, .tabbrowser-tab::after { background: none !important; }
  159.    
  160.     browser, #navigator-toolbox { -moz-appearance: none !important; background: transparent !important; }*/
  161.    
  162.     /*#navigator-toolbox::after { height: 0 !important;/**/
  163.     #navigator-toolbox::after { height: 0px !important; background: var(--bg-light) !important; }
  164.     #liberator-separator { height: 0px !important; background: var(--bg-light) !important; border-top: 0 !important; }
  165.    
  166.     /* MENUS */
  167.     menuitem + menuseparator, menu + menuseparator/*, .menu-iconic-left*/ { display: none !important; }
  168.     /*menuitem > label { margin-left: var(--tab-height) !important; }*/
  169.     menubar, menubutton, menulist, menu, menuitem {
  170.         font-family: var(--tab-fonts) !important; font-size: var(--tab-font-size);
  171.         height: var(--tab-height) !important;
  172.     }
  173.  
  174.     /* HIDE ORANGE MENU BUTTON */
  175.     #appmenu-toolbar-button, #appmenu-button-container { display: none !important; }
  176.    
  177.     /* HIDE STATUS BAR */
  178.     #status-bar, #statusbar-display, statuspanel { display: none !important; }
  179.  
  180.     /* PRIVATE BROWSING ICON HIDE */
  181.     #main-window[privatebrowsingmode=temporary] #private-browsing-indicator,
  182.     #main-window[privatebrowsingmode=temporary] #private-browsing-indicator-titlebar { display: none !important; }
  183.    
  184.     /* Vimperator icon style */
  185.     #liberator-statusline:not([customizing="true"]) { margin: -2px -2px !important; padding: 0 0 !important; height: 24px !important; }
  186.     #liberator-statusline:not([customizing="true"]) :-moz-any(toolbarbutton) { height: 100% !important; }
  187.     #tabview-button {
  188.         list-style-image: url(http://twily.info/img/tabview-button.png?v=2) /* 16x16 px image */ !important;
  189.         -moz-image-region: rect(0, 0, 0, 0) !important;
  190.     }
  191.    
  192.     #liberator-completions { background: var(--bg-dark) !important; }
  193.  
  194.     /* Tabgroup margin top fix */
  195.     #tab-view-deck #tab-view { margin: 24px 12px 12px 12px !important; }
  196.     #tab-view-deck { background: var(--bg-light) !important; }
  197.    
  198.     window[sizemode="fullscreen"] #liberator-statusline { display: none !important; }
  199.     window[sizemode="fullscreen"] #liberator-bottombar  {
  200.         margin-top: -24px !important;
  201.         transition: 1s ease !important; transition-delay: .3s !important;
  202.     }
  203.     /*window[sizemode="fullscreen"] #browser-panel        { margin-top: -1px !important; }*/
  204. }
  205.  
  206.  
  207. /* Tab Group Page Style (Ctrl+Shift+E) */
  208. @-moz-document url(chrome://browser/content/tabview.html) {
  209.     #content #bg, #actions, body { background: var(--bg-light) !important; }
  210.     body * { color: var(--fg-light) !important; }
  211.    
  212.     body .groupItem, #content #actions, body .undo {
  213.         background: var(--bg-dark) !important;
  214.         border: 0 !important; border-radius: 0 !important; box-shadow: 0 0 0 0 !important;
  215.     }
  216.     #content #actions {
  217.         opacity: 0 !important; display: none !important; /* block | none */
  218.         transition: .3s ease-out !important;
  219.     }
  220.     #content #actions:hover { opacity: 1 !important; }
  221.    
  222.     body .appTabTrayContainer { border: 0 !important; }
  223.     body .tab, body .tab .thumb {
  224.         box-shadow: 0 0 0 0 !important; border: 0 !important; border-radius: 0 !important;
  225.         background: transparent !important; padding : 0 !important;
  226.     }
  227.     body .tab .favicon { display: none !important; }
  228.     body .groupItem .name { border: 0 !important; }
  229.     body .tab .tab-title { padding-top: 2px !important; }
  230. }
  231.  
  232.  
  233. /* AGENT_SHEET */
  234. @-moz-document url-prefix(http://), url-prefix(https://), url-prefix(chrome://liberator/), url-prefix(file:///) {
  235.     /* SCROLLBAR */
  236.     scrollbar[orient="vertical"], scrollbar thumb[orient="vertical"],
  237.     scrollbar[orient="horizontal"], scrollbar thumb[orient="horizontal"] {
  238.         display: none !important; /* none = hide || block = show */
  239.     }
  240.    
  241.     /*
  242.     scrollbar > slider { -moz-appearance: none !important; }
  243.    
  244.     scrollbar[orient="vertical"] { margin: -3px -7px -3px -3px !important; }
  245.     scrollbar[orient='vertical'] > slider { background: #27282B !important; max-width: 5px !important; }
  246.     scrollbar[orient='vertical'] > slider > thumb {
  247.         -moz-appearance: none !important;
  248.         background: #9b79f7 !important; border: 0 !important;
  249.         width: 5px !important; max-width: 5px !important;
  250.     }
  251.    
  252.     scrollbar[orient="horizontal"] { margin: -3px -3px -7px -3px !important; }
  253.     scrollbar[orient='horizontal'] > slider { background: #27282B !important; max-height: 5px !important; }
  254.     scrollbar[orient='horizontal'] > slider > thumb {
  255.         -moz-appearance: none !important;
  256.         background: #9b79f7 !important; border: 0 !important;
  257.         height: 5px !important; max-height: 5px !important;
  258.     }
  259.    
  260.     scrollbar > scrollbarbutton { -moz-appearance: none !important; border: none !important; background: none !important; }
  261.     scrollbar[orient='vertical'] > scrollbarbutton { min-height: 0 !important; }
  262.     scrollbar[orient='horizontal'] > scrollbarbutton { min-width: 0 !important; }
  263.     /**/
  264. }
  265.  
  266.  
  267. /* background color around/behind pictures opened in firefox (require html namespace on top) */
  268. @-moz-document regexp("(https?://|file:///)(.*)\\.(jpeg|jpg|gif|png|apng|svg|bmp|webm|webp)") {
  269.     body { background: var(--bg-light) !important; }
  270.     img.decoded { background: url(none) !important; }
  271. }
  272.  
  273.  
  274. /* About:Blank background */
  275. @-moz-document url(about:blank) {
  276.     html,body { background: var(--bg-dark) !important; }
  277. }
  278.  
  279. /* about:stylish-edit toolbar style */
  280. @-moz-document regexp("about:stylish-edit.*") {
  281.     #main-area, textbox { background: var(--bg-light) !important; }
  282.     textbox, grid, columns, rows, separator { border: 0 !important; }
  283.    
  284.     .devtools-toolbarbutton { background: var(--bg-dark) !important; color: var(--fg-light) !important; }
  285. }
  286.  
  287. /*----- Fix for white flash on new tab -----*/
  288. tabbrowser tabpanels, #appcontent > #content { background: var(--bg-light) !important; }
  289.  
  290.  
  291. /*---- Set dark text in light textareas ----*/
  292. @-moz-document regexp("https?://(?!(localhost|twily.info|.*.8ch.net|.*.4chan.org|.*.youtube.com)).*") {
  293.     input, textarea { color: #222628 !important; -moz-appearance: none !important; }
  294. }
RAW Paste Data
Top