Firefox-UI-Fix/src/compatibility/_theme.scss

/*= Hotfix #98 ===============================================================*/
/* Hidden Tab Panel Padding */
#allTabsMenu-hiddenTabsView .all-tabs-item {
  margin-inline: 8px;
  border-radius: 4px;
}

/*= Remote Tabs Panel's Bottom Padding =======================================*/
#PanelUI-remotetabs #PanelUI-remotetabs-main {
  margin-bottom: 6px;
}

/*= Identity Popup Icon Crop =================================================*/
.identity-popup-security-connection.identity-button {
  padding-block: 1px !important;
}

/*= Zoom in button's plus icon horizontal rate ===============================*/
#customization-palette-container,
#customization-panel-container,
#widget-overflow-mainView {
  #zoom-in-button > .toolbarbutton-icon {
    padding-inline-start: 0px !important;
  }
}

/*= Icon Fill Color ==========================================================*/
:root:-moz-lwtheme {
  /* Auto create --lwt-toolbarbutton-icon-fill-attention, fix for nightly default theme
       Default Color: rgb(0,97,224) -> rgb(0, 120, 215) for more light
     */
  --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215));
}

/*= First visible tab margin at maximized #332 ===============================*/
:root[tabsintitlebar="true"][sizemode="maximized"] #TabsToolbar {
  margin-left: -1px;
}

/*= Disabled menu background color ===========================================*/
menuitem,
menu {
  &[disabled="true"] {
    background-color: transparent !important;
  }
}

/*= Remove Tab Border ========================================================*/
@mixin _theme_removeTabBorder($options...) {
  %noneBorder {
    /* Nightly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
    border: unset !important;
  }
  @each $prefix, $postfix in $options {
    #TabsToolbar#{$prefix}
    #tabbrowser-tabs:not([noshadowfortests])
      .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
      > .tab-stack
      > .tab-background#{$postfix} {
      @extend %noneBorder;
    }
  }
}

@include Option("userChrome.tab.connect_to_window") {
  /* TARGET: original, photon */
  @include _theme_removeTabBorder(
    // Light Theme
    ":not([brighttext])",
    // Dark Theme
    "[brighttext]" ":-moz-lwtheme"
  );

  #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
  .tab-background[selected]:-moz-lwtheme {
    // Nightly 102: outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
    outline-color: transparent !important;
  }
  .keyboard-focused-tab > .tab-stack > .tab-background,
  .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
    outline: var(--focus-outline) !important;
  }
}

/*= Tab Separator Color ======================================================*/
#TabsToolbar {
  --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent); /* 60% at v105 */
}


/*= Light Weight Theme =======================================================*/
/* Header Image */
:root[lwtheme-image] {
  background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */
  background-repeat: no-repeat !important;
  background-position: right top !important;

  // For high-resolution screen's image ratio
  @media (min-width: 2500px) {
    background-size: contain;

    @include Option("userChrome.compatibility.covered_header_image") {
      background-size: cover;
    }
  }

  // lwtheme compatibility
  #navigator-toolbox:-moz-lwtheme {
    background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
    background-repeat: var(--lwt-background-tiling) !important;
    background-position: var(--lwt-background-alignment) !important;
    background-color: unset !important; /* Original:  var(--lwt-accent-color) */
  }
}

/* Navbar Border */
#navigator-toolbox:-moz-lwtheme {
  --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
  --lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
}

/*= Findbar Border Color =====================================================*/
html|input.findbar-textbox {
  border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */
}

/*= Drop Indicator Color #473 ================================================*/
treechildren::-moz-tree-cell-text(primary, dropOn),
treechildren::-moz-tree-drop-feedback,
vbox[part="drop-indicator-bar"] > image[part="drop-indicator"] {
  background-color: var(--button-primary-bgcolor, var(--focus-outline-color)) !important; /* Original: SelectedItem or AccentColor*/
}

#bookmarksPanel[lwt-sidebar="true"] {
  --focus-outline-color: var(--in-content-focus-outline-color, AccentColor) !important;
}

/*= Menu color #477 ==========================================================*/
@media (-moz-windows-non-native-menus) {
  :root {
    /* Override some menu color variables for light browser themes. */
    --menuitem-hover-background-color: #e0e0e6;
    --menu-background-color: #f9f9fb;
    --menu-color: #15141a;
    --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4);
    --menu-disabled-color: rgba(21, 20, 26, 0.4);
    --menu-border-color: #cfcfd8;
    --menu-icon-opacity: 0.7;

    /* Declare menu colors for dark themes, but don't override anything yet. */
    --dark-menuitem-hover-background-color: #52525e;
    --dark-menu-background-color: #2b2a33;
    --dark-menu-color: #fbfbfe;
    --dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4);
    --dark-menu-disabled-color: rgba(251, 251, 254, 0.4);
    --dark-menu-border-color: #5b5b66;
    --dark-menu-icon-opacity: 1;
  }

  /* Override the menu color variables for dark browser themes. */
  @include Dark {
    :root {
      --menuitem-hover-background-color: var(--dark-menuitem-hover-background-color);
      --menu-background-color: var(--dark-menu-background-color);
      --menu-color: var(--dark-menu-color);
      --menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color);
      --menu-disabled-color: var(--dark-menu-disabled-color);
      --menu-border-color: var(--dark-menu-border-color);
      --menu-icon-opacity: var(--dark-menu-icon-opacity);
    }
  }
}

/*= Firefox View Border #498 =================================================*/
@mixin _firefox_view_border_remove() {
  #tabbrowser-tabs {
    border-inline-start: none !important;
    padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important;
    margin-inline-start: 0 !important;
  }
}

:root:not([privatebrowsingmode=temporary])[firefoxviewhidden] #firefox-view-button + {
  @include _firefox_view_border_remove;
}

@include Option("userChrome.tab.static_separator") {
  // #531
  @include _firefox_view_border_remove;
}