userChrome.css

/* Safari Theme for Firefox
 * https://github.com/diedummydie/Safari-Theme-for-Firefox with contributions of https://github.com/floriandierickx/Safari-Theme-for-Firefox/ for adaptation to OSx Big Sur and Firefox 88
 */

/* https://github.com/MrOtherGuy/firefox-csshacks */
@import "lib/Fx65_tabs_on_bottom.css";
@import "lib/hide_tabs_with_one_tab.css";

.titlebar-buttonbox-container{
    position:   fixed;
    top:        10px;
    left:      0px;
}

#nav-bar {
  background-image: linear-gradient(#ffffff10, #00000010) !important;
  border-top: 1px solid var(--lwt-toolbar-vertical-separator);
}

#PersonalToolbar {
  background-image: linear-gradient(#00000010, #00000015) !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  border-top: 1px solid var(--tabs-border-color) !important;
}

#PersonalToolbar .toolbarbutton-1:not(-moz-window-inactive):hover,
#PersonalToolbar .bookmark-item:hover {
  background-image: linear-gradient(#00000058, #0000005b) !important;
  color: #fcfcfc !important;
}

#PersonalToolbar #PlacesChevron {
  margin-right: 5px !important;
}

#nav-bar:-moz-window-inactive,
#PersonalToolbar:-moz-window-inactive {
  background-image: none !important;
  background-color: var(--lwt-accent-color-inactive) !important;
  border-color: #00000022 !important;
}

:root:not([sizemode="fullscreen"]) #nav-bar {
  margin-right: -16px;
  padding-left: 56px;
}

:root[sizemode="fullscreen"] #nav-bar {
  padding: 0px 4px 0px 6px !important;
}

.tab-background[multiselected="true"],
.tab-background[selected="true"] {
  background-image: linear-gradient(#ffffff10, #00000010) !important;
  background-color: var(--lwt-selected-tab-background-color) !important;
}

tab {
  background-image: linear-gradient(#ffffff04, #00000004) !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) {
  background-image: linear-gradient(#00000008, #00000012) !important;
  background-color: var(--lwt-accent-color) !important;
}

tab:-moz-window-inactive {
  background-image: none !important;
  background-color: var(--lwt-accent-color) !important;
  color: var(--panel-disabled-color) !important;
}

.tab-background,
.tabbrowser-tab {
  box-shadow: none !important;
  outline: 0 !important;
  box-sizing: border-box !important;
  border-bottom: none !important;
}

#urlbar {
  background-image: linear-gradient(#ffffff06, #00000000) !important;
  box-shadow: inset 0 0px 0 ffffff2a !important;
  min-height: 22px !important;
  height: 24px !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  box-sizing: border-box;
  border: 0px #3b3b3b44 solid !important;
  border-bottom: 0px #37373744 solid !important;
  top:;
}

#urlbar:-moz-window-inactive {
  opacity: 0.5 !important;
}

#nav-bar .toolbarbutton-badge-stack,
#nav-bar toolbarbutton > .toolbarbutton-icon {
  background-image: linear-gradient(#ffffff04, #ffffff00) !important;
  background-color: var(
    --lwt-toolbar-field-background-color,
    hsla(0, 0%, 100%, 1)
  ) !important;
  box-shadow: inset 0 1px 0 #ffffff22 !important;
  padding: 3.25px 11px !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
  height: 24px !important;
  width: 39px !important;
  border-radius: 5px !important;
  opacity: 1 !important;
  background-clip: padding-box;
  border: 0.5px #47474720 solid !important;
  border-bottom: 1px #4444443a solid !important;
}

#nav-bar toolbarbutton:active .toolbarbutton-badge-stack,
#nav-bar toolbarbutton:active:not([badged="true"]) .toolbarbutton-icon {
  background-image: linear-gradient(
    var(--arrowpanel-dimmed),
    var(--arrowpanel-dimmed)
  ) !important;
}

#PanelUI-button {
  margin-inline-start: unset !important;
  border-inline-start: unset !important;
  border: unset !important;
}

#PanelUI-menu-button[disabled="true"],
#nav-bar-overflow-button[disabled="true"],
#urlbar *,
.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled="true"],
.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled="true"],
:root:not([customizing]) .toolbarbutton-1[disabled="true"] {
  opacity: 1 !important;
  fill-opacity: 0.25 !important;
}

#main-window
  :-moz-any(#back-button, #forward-button)
  .toolbarbutton-badge-stack,
#main-window :-moz-any(#back-button, #forward-button) .toolbarbutton-icon {
  padding: 3px 5px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 27px !important;
}

#back-button {
  list-style-image: url("chrome://global/skin/icons/arrow-left.svg") !important;
}

#forward-button {
  list-style-image: url("chrome://global/skin/icons/arrow-left.svg") !important;
  transform: scaleX(-1) !important;
  margin-left: 1px !important;
}

#main-window #forward-button .toolbarbutton-icon {
  margin-left: 4px !important;
  margin-right: -3px !important;
}

#PanelUI-menu-button:-moz-window-inactive > .toolbarbutton-badge-stack,
#PanelUI-menu-button:-moz-window-inactive > .toolbarbutton-badge-stack:hover,
#downloads-button:-moz-window-inactive > .toolbarbutton-badge-stack,
#downloads-button:-moz-window-inactive > .toolbarbutton-badge-stack:hover,
#main-window:not([customizing])
  .toolbarbutton-1:-moz-window-inactive[disabled="true"],
#nav-bar:-moz-window-inactive toolbarbutton > .toolbarbutton-icon,
#nav-bar:-moz-window-inactive toolbarbutton > .toolbarbutton-icon:hover,
.toolbarbutton-1:not(:hover):-moz-window-inactive,
#PersonalToolbar .bookmark-item:-moz-window-inactive {
  opacity: 0.6 !important;
}

.arrowscrollbox-overflow-end-indicator,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.scrollbutton-up,
.tab-drop-indicator-box .tab-drop-indicator,
.tab-drop-indicator-box image {
  visibility: collapse;
  border: 0 !important;
}

.arrowscrollbox-overflow-end-indicator,
.arrowscrollbox-overflow-start-indicator,
.tab-drop-indicator-box image {
  display: none !important;
  visibility: collapse !important;
}

#urlbar .urlbar-input-box,
.searchbar-textbox > moz-input-box {
  opacity: 0.9 !important;
}

#TabsToolbar-customization-target {
  min-height: 25px;
  max-height: 25px;
  padding: 0;
}

.tab-line {
  display: none !important;
}

.tabbrowser-tab {
  border-top: 1px solid var(--tabs-border-color) !important;
  border-bottom: 0px solid var(--tabs-border-color) !important;
}

.tabbrowser-tab[fadein] {
  max-width: none !important;
}

.tabbrowser-tab:-moz-window-inactive {
  opacity: 0.5 !important;
  border-bottom: none !important;
}

.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  margin: 1px 6px 1px -4px !important;
  width: 16px;
  height: 16px;
  display: none !important;
}

.tab-icon-image {
  opacity: 0.9 !important;
}

.tabbrowser-tab:not([pinned="true"]):not(:hover)
  .tab-icon-image:not([src]):not([busy]) {
  display: -moz-box !important;
}

.tab-icon-image,
.tab-throbber {
  margin: 1px 6px 1px 0px !important;
  transition-duration: 0.1s !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-image,
.tabbrowser-tab:not([pinned="true"]):hover .tab-throbber {
  display: none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  display: -moz-box !important;
}

.tab-icon-image:-moz-window-inactive {
  opacity: 0.1 !important;
}

.tab-label-container {
  margin-top: -1px;
  margin-left: -2px;
}

.widget-overflow-list .chromeclass-toolbar-additional image {
  max-width: 16px !important;
  max-height: 16px !important;
}

.browserContainer > findbar {
  -moz-box-ordinal-group: 0;
}

#new-tab-button {
  visibility: visible !important;
}

#new-tab-button,
#alltabs-button {
  border-top: 1px solid var(--tabs-border-color) !important;
  border-left: 1px solid var(--tabs-border-color) !important;
}

#new-tab-button .toolbarbutton-icon,
#alltabs-button .toolbarbutton-badge-stack {
  border-radius: 0 !important;
  padding: 2 !important;
  width: 22px !important;
  opacity: 0.8 !important;
  background-color: inherit !important;
}

#appcontent tabbrowser,
#content,
#tabbrowser-tabpanels,
browser[type="content-primary"],
browser[type="content"] > html {
  background: none !important;
  background-color: var(--toolbar-bgcolor) !important;
}

spacer {
  visibility: hidden !important;
}

/* address bar icons 16x16 */
#page-action-buttons image.urlbar-icon {
  min-width: 28px !important;
  min-height: 22px !important;
  width: 28px !important;
  height: 22px !important;
  padding: 3px 6px !important;
}

/* remove container tab highlight */
.tabbrowser-tab[usercontextid] .tab-bottom-line {
  display: none !important;
}

#pageActionSeparator {
  display: none !important;
}

.tab-label {
  -moz-box-flex: 1 !important;
  text-align: center !important;
}

#alltabs-button {
  display: none;
}

/* remove doubled border before newtab button */
.tabbrowser-arrowscrollbox {
  margin-right: -1px;
}

/* Remove Page Actions Menu */
#pageActionButton
{
  display: none !important;
}
/* Put refresh button "inside" address bar */
#pageActionSeparator
{
    margin-right:26px !important;
}

/* hide tracking protection container */
#tracking-protection-icon-container{
   display: none;
}

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 25px !important;
}
:root #tabbrowser-tabs {
 --tab-min-height: 25px !important;
}
#TabsToolbar {height: var(--tab-min-height) !important;}

/*** [OSx Big Sur / Firefox 88 update] BEGIN Firefox 77 (June 2, 2020) Override URL bar enlargement. Solution from https://support.mozilla.org/en-US/questions/1289355#question-reply ***/

  /* Compute new position, width, and padding */

  #urlbar[breakout][breakout-extend] {
    top: 5px !important;
    left: 0px !important;
    width: 100% !important;
    padding: 0px !important;
  }
  /* for alternate Density settings */
  [uidensity="compact"] #urlbar[breakout][breakout-extend] {
    top: 3px !important;
  }
  [uidensity="touch"] #urlbar[breakout][breakout-extend] {
    top: 4px !important;
  }

  /* Prevent shift of URL bar contents */

  #urlbar[breakout][breakout-extend] > #urlbar-input-container {
    height: var(--urlbar-height) !important;
    padding: 0 !important;
  }

  /* Do not animate */

  #urlbar[breakout][breakout-extend] > #urlbar-background {
    animation: none !important;;
  }

  /* Remove shadows */

  #urlbar[breakout][breakout-extend] > #urlbar-background {
    box-shadow: none !important;
  }

/*** END Firefox 77 (June 2, 2020) Override URL bar enlargement ***/



/* [OSx Big Sur / Firefox 88 update] Force black-on-white for address bar drop-down. Solution from https://support.mozilla.org/en-US/questions/1289990#question-reply*/
.urlbarView {
  /* Eliminate dark background outside */
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  /* Preserve bottom border */
  border-bottom: 1px solid
    var(--toolbar-field-focus-border-color);
}
.urlbarView-body-inner, .search-one-offs {
  /* Pure black, slightly off-white background */
  color: #000 !important;
  background-color: #f8f8f8 !important;
  /* Remove extra line */
  border-top-color: transparent !important;
  /* Adjust distance to edges  */
  padding: 0 6px !important;
}
.urlbarView-body-inner {
  /* Fix width to avoid rows being too long */
  width: calc(100% - 12px) !important;
}


/* [OSx Big Sur / Firefox 88 update] Change URLBar Properties */

#urlbar[breakout][breakout-extend] #urlbar-background {
border-color: #89b3f9 !important;
border-width: 3px !important;

}

#urlbar[breakout] {
  display: block;
  position: absolute;
  width: 100%;
  top: 3px !important;
  left: 0;
}

#urlbar {
    border: none !important;
}

#urlbar[breakout] > #urlbar-input-container
{
	border: none !important;
	box-shadow: none !important;
}

#urlbar-background
{
	border-color: var(--lwt-toolbar-field-background-color) !important;
}