Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

userChrome to extend menu bar color and cut away unecessary gap under tabs

  • No replies
  • 1 has this problem
  • 12 views
drgert1
drgert1
more options

Hello All,

Using win10 & FF 91.4.1esr. and 'tabs on bottom' code in userChrome for various UI mods.

Looking for setting to accomplish following (see screencopy):

  1. Extend background color of menu bar
  2. Delete gap under tabs

The userChrome.css is below.

Cheers, Gert 

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}

/* Bar for tabs at bottom */
#titlebar{
  -moz-box-ordinal-group: 2;
  -moz-appearance: none !important;
  --tabs-navbar-shadow-size: 0px;
}
 
:root{ --uc-window-control-width: 0px !important }

/* Padding under menu file edit view. Opens space for URL bar */ 
#navigator-toolbox{
  padding-top: calc(30px + var(--uc-titlebar-padding,0px)) !important
}
 
/* Menu bar 'file edit view' above URL above bookmark buttons above tabs */
#toolbar-menubar{
  position: fixed;
  display: flex;
  top: var(--uc-titlebar-padding,0px);
  height: 29px;
  width: 100%;
  overflow: hidden;
}
 
 
/* Create TABS: */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;
 --tab-min-height: 30px !important; /*adjust to set height or omit to use density*/
 --tab-min-width: 80px !important; /*adjust to set width or omit to use default*/
}
 
/* Erronous extra space below tabs */
/* #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} */
 
.tab-background {
  border-radius: 14px 14px 2px 2px !important;
  border-image: none !important;
  border-left: 1px solid !important;
  border-right: 1px solid !important;
  border-top: 1px solid !important;
  border-width: 1px !important;
  border-color: #000080 !important;
  background-attachment: none!important;
  background-color: #D4D0D7 !important;
  background-image: none !important;
}

/* Change Color of active tab */  
.tab-background[selected="true"] {
    background-color: #E4E3DE !important;
    background-image: none !important;
}
 
/* Color for : menu bar (File Edit View), URL bar, Bookmarks bar, tab bar */
#navigator-toolbox toolbar {
  background-color: #F0F0F0 !important;
}

/* Menu bar (File Edit View) height and background color */
/* background-color: #DAD7D0 !important; */
#toolbar-menubar, #menubar-items, #main-menubar {
  height: 26px !important;
  background-color: #DAD7D0 !important;
  background-image: none !important;
  font-size: 10px !important;
}

/* Menu bar (File Edit View) mouseover background color */
menubar > menu[_moz-menuactive="true"] {
  background-color: #C0C0C0 !important;
}

/* Menu bar (File Edit View) text color */
.menubar-text, .tabbrowser-tab:not([selected="true"]) tab-label {
  color: #080808 !important;
}

/* Use Normal top and bottom padding for Compact */
#PlacesToolbarItems .bookmark-item {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

Hello All, Using win10 & FF 91.4.1esr. and 'tabs on bottom' code in userChrome for various UI mods. Looking for setting to accomplish following (see screencopy): # Extend background color of menu bar # Delete gap under tabs The userChrome.css is below. Cheers, Gert <pre><nowiki>:root{ --uc-titlebar-padding: 0px; } @media (-moz-os-version: windows-win10){ :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px } } /* Bar for tabs at bottom */ #titlebar{ -moz-box-ordinal-group: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; } :root{ --uc-window-control-width: 0px !important } /* Padding under menu file edit view. Opens space for URL bar */ #navigator-toolbox{ padding-top: calc(30px + var(--uc-titlebar-padding,0px)) !important } /* Menu bar 'file edit view' above URL above bookmark buttons above tabs */ #toolbar-menubar{ position: fixed; display: flex; top: var(--uc-titlebar-padding,0px); height: 29px; width: 100%; overflow: hidden; } /* Create TABS: */ *|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 30px !important; /*adjust to set height or omit to use density*/ --tab-min-width: 80px !important; /*adjust to set width or omit to use default*/ } /* Erronous extra space below tabs */ /* #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} */ .tab-background { border-radius: 14px 14px 2px 2px !important; border-image: none !important; border-left: 1px solid !important; border-right: 1px solid !important; border-top: 1px solid !important; border-width: 1px !important; border-color: #000080 !important; background-attachment: none!important; background-color: #D4D0D7 !important; background-image: none !important; } /* Change Color of active tab */ .tab-background[selected="true"] { background-color: #E4E3DE !important; background-image: none !important; } /* Color for : menu bar (File Edit View), URL bar, Bookmarks bar, tab bar */ #navigator-toolbox toolbar { background-color: #F0F0F0 !important; } /* Menu bar (File Edit View) height and background color */ /* background-color: #DAD7D0 !important; */ #toolbar-menubar, #menubar-items, #main-menubar { height: 26px !important; background-color: #DAD7D0 !important; background-image: none !important; font-size: 10px !important; } /* Menu bar (File Edit View) mouseover background color */ menubar > menu[_moz-menuactive="true"] { background-color: #C0C0C0 !important; } /* Menu bar (File Edit View) text color */ .menubar-text, .tabbrowser-tab:not([selected="true"]) tab-label { color: #080808 !important; } /* Use Normal top and bottom padding for Compact */ #PlacesToolbarItems .bookmark-item { padding-top: 4px !important; padding-bottom: 4px !important; }</nowiki></pre><br>
Attached screenshots

Modified by cor-el