![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
Firefox Quantum - Add divider between tabs
HELP! My line of tabs run together with no separation between them.
I copied a custom CSS to get rounded tabs and tabs on bottom.
/* Firefox Quantum userChrome.css tweaks */ /* Github: https://github.com/aris-t2/customcssforfx */ :root { --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa); --tabs_toolbar_border-tnot_normal_mode_size: 1px; --tabs_toolbar_border-tnot_normal_mode: var(--tabs-border-color); --classic_squared_tabs_tab_text_color: black; --classic_squared_tabs_tab_text_shadow: transparent; --tab-min-height_tnot: 32px; } :root[uidensity=compact] { --tab-min-height_tnot: 28px; } :root[uidensity=touch] { --tab-min-height_tnot: 40px; } /* tabs toolbar adjustment */ #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #TabsToolbar { -moz-padding-start: 2px !important; } #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar:-moz-lwtheme, #TabsToolbar:-moz-lwtheme, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[sizemode="maximized"] #TabsToolbar, #main-window[tabsintitlebar][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'] #TabsToolbar { -moz-padding-start: 0px !important; } #main-window[tabsintitlebar][sizemode="normal"]:not([sizemode="fullscreen"]) #TabsToolbar { margin-top: 0px !important; } #main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #TabsToolbar, #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"][chromehidden~="menubar"] #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar { padding-top: 0px !important; } #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar, #main-window[tabsintitlebar] #toolbar-menubar[autohide="false"] ~ #TabsToolbar{ margin-top: 0px !important; } /* tab title in titlebar support */ #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #TabsToolbar, #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar, #main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar{ margin-top: 0px !important; } /* titlebar button support */ #main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar{ margin-top: 2px !important; } /* fix for application/hamburger button in titlebar */ #main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #PanelUI-button { visibility: collapse !important; } #main-window[inDOMFullscreen="true"] #TabsToolbar { opacity: 0 !important; } /* tab height */ #tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] { min-height: var(--tab-min-height_tnot) !important; } /* toolbar order (start) ************************************/ #print-preview-toolbar, #printedit-toolbar, #titlebar { -moz-box-ordinal-group: 0 !important; } #navigator-toolbox #toolbar-menubar { -moz-box-ordinal-group: 1 !important; } /* navigation toolbar */ #navigator-toolbox #nav-bar { -moz-box-ordinal-group: 2 !important; } /* bookmarks toolbar */ #navigator-toolbox #PersonalToolbar { -moz-box-ordinal-group: 3 !important; } /* 3rd party toolbars */ #navigator-toolbox toolbar { -moz-box-ordinal-group: 10 !important; } /* tabs toolbar */ #navigator-toolbox #TabsToolbar { -moz-box-ordinal-group: 100 !important; } /* toolbar order (end) **************************************/ /* toolbar colors */ #TabsToolbar:not(:-moz-lwtheme){ -moz-appearance: none !important; background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important; } /* remove color overlay for lw-themes */ #main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']) :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme{ background: unset !important; } /* adjust compact themes background color */ #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme { -moz-appearance: none !important; background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important; } #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-darktext #TabsToolbar:-moz-lwtheme { -moz-appearance: none !important; background: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important; } #main-window:not(:-moz-lwtheme) #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down), #main-window:not(:-moz-lwtheme) #TabsToolbar > toolbarbutton, #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-darktext #TabsToolbar :-moz-any(.tabs-newtab-button,.scrollbutton-up,.scrollbutton-down), #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-darktext #TabsToolbar > toolbarbutton { fill: black !important; color: black !important; } /* toolbar borders */ #main-window #navigator-toolbox::after { opacity: 0 !important; } #TabsToolbar{ margin-bottom: 0px !important; border-bottom: 1px solid #5f7181 !important; } #main-window[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) { border-left: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important; border-right: var(--tabs_toolbar_border-tnot_normal_mode_size) solid var(--tabs_toolbar_border-tnot_normal_mode) !important; background-clip: padding-box !important; } #main-window[sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar) { border-left: 0px !important; border-right: 0px !important; } #main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'])[sizemode="normal"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme, #main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");'])[sizemode="maximized"] #navigator-toolbox :-moz-any(#nav-bar,#PersonalToolbar,#TabsToolbar):-moz-lwtheme { border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; } #main-window[style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']:-moz-lwtheme-brighttext #TabsToolbar:-moz-lwtheme { border-bottom: 1px solid #323234 !important;
Modificat în
Toate răspunsurile (3)
Hi, will notify someone of your usserChrome issue. Would this help some what though your background theme is really the issue I think : https://addons.mozilla.org/en-US/firefox/addon/colorfultabs/
Unfortunately that doesn't work and I am looking for more of a divider between the tabs. Almost like a border around each tab so they don't all run together.
Try posting over here: https://www.reddit.com/r/FirefoxCSS/