Compatibility Issues Solution - black7375/Firefox-UI-Fix Wiki

This project makes on Manjaro KDE Firefox Nightly, tested with Windows 10 Nightly, Developer edition.

They are the OS and version that works best.

Tabs and toolbars to have different colors theme

Remove follow lines:

https://github.com/black7375/Firefox-UI-Fix/blob/4948226abe1c93e716e6b690e6098eda1223c706/userChrome.css#L101-L105

  /** Selected Tab - Color like toolbar ***************************************/
  #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected="true"]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme {
    background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  }

Unselected Tab Separators - Color

Try to change background-color #4

  /** Unselected Tab - Divide line ********************************************/
  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
  .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after {
    /*codes*/
    background-color: var(--toolbarseparator-color) !important;
  }

Unselected Tab Separators - Don't show

Try to add box-shadow

  /** Unselected Tab - Divide line ********************************************/
  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
  .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after {
    /*codes*/
    box-shadow: 0 0 1px 0 color-mix(in srgb, currentColor 60%, transparent);
  }

Panel text cut off in some language

Panel text cut off

Add this code #28 #40

  /** Panel - View ************************************************************/
  :root #appMenu-popup panelview {
    width: 25em !important; /* can modify panel width, Original: 22.5em */
  }

White outline on the top of address bar

image

Add this code #99

  #nav-bar {
    box-shadow: none !important;
  }

Header's background image rate(2500px >=)

Change this code #170 https://github.com/black7375/Firefox-UI-Fix/blob/ae2d5c89d02e7b6766478b422100547a5599e4e4/userChrome.css#L31-L35

  @media (min-width: 2500px) {
    :root[lwtheme-image] {
      background-size: cover;
    }
  }