dotfiles/.mozilla/firefox/chrome/userChrome.css

:root {

   /* Minimal Functional Fox variables*/
  --mff-bg: #0F1419;
  --mff-icon-color: #ECEFF4;
  --mff-nav-toolbar-padding: 8px;
  --mff-sidebar-bg: var(--mff-bg);
  --mff-sidebar-color: #ECEFF4;
  --mff-tab-border-radius: 0px;
  --mff-tab-color: #ECEFF4;
  --mff-tab-font-family: "Cantarell", sans;
  --mff-tab-font-size: 10pt;
  --mff-tab-font-weight: 400;
  --mff-tab-height: 32px;
  --mff-tab-pinned-bg: #A3BE8C;
  --mff-tab-selected-bg: #BF616A;
  --mff-tab-soundplaying-bg: #434C5E;
  --mff-urlbar-color: #81A1C1;
  --mff-urlbar-focused-color: #88C0D0;
  --mff-urlbar-font-family: "Cantarell", serif;
  --mff-urlbar-font-size: 12pt;
  --mff-urlbar-font-weight: 700;
  --mff-urlbar-results-color: #88C0D0;
  --mff-urlbar-results-font-family: "mononoki Nerd Font", serif;
  --mff-urlbar-results-font-size: 12pt;
  --mff-urlbar-results-font-weight: 700;
  --mff-urlbar-results-url-color: #81A1C1;
  
  --mff-menu-background: #32373b;
  /*   --mff-tab-selected-bg: linear-gradient(90deg, rgba(232,74,95,1) 0%, rgba(255,132,124,1) 50%, rgba(254,206,168,1) 100%); */
  /*   --mff-urlbar-font-weight: 600; */

  /* Overriden Firefox variables*/
  --autocomplete-popup-background: var(--mff-bg) !important;
  --default-arrowpanel-background: var(--mff-bg) !important;
  --default-arrowpanel-color: #ECEFF4 !important;
  --lwt-toolbarbutton-icon-fill: var(--mff-icon-color) !important;
  --panel-disabled-color: #ECEFF480;
  --toolbar-bgcolor: var(--mff-bg) !important;
  --urlbar-separator-color: transparent !important;
}

* {
  /*--tab-corner-rounding: 5px;*/
  --animation-speed: 0.4s;
  --button-corner-rounding: 30px;
  --urlbar-container-height: 34px !important;
  --urlbar-height: 34px !important;
  --urlbar-toolbar-height: 45px !important;
  --moz-hidden-unscrollable: scroll !important;
}

#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
  margin-top: 0px;
  height: 24px;
  text-align: center;
}

#TabsToolbar:hover {
  background: transparent;
}

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

tab:not(:active) .tab-background {
  transition: background-color var(--animation-speed) !important;
}
:root:not([customizing]) :hover > .tabbrowser-tab:not(:hover) {
  /*filter: blur(3px) brightness(50%);*/
  transition: blur, ease 0.5s !important;
}

:root:not([customizing]) :not(:hover) > .tabbrowser-tab {
  /*filter: blur(0px) brightness(100%) !important;*/
  transition: blur, ease 0.2s !important;
}

#tabbrowser-tabs {
    --tab-loading-fill: #033433 !important;
}

#tabbrowser-tabs .tab-label-container[customizing] {
  color: transparent;
  transition: ease 0.5s;
  transition-delay: 3s;
}

.tab-label-container:not([textoverflow]) {
    display: flex;
    overflow: hidden;
    justify-content: center;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
}

:root:not([customizing]) :hover > #tabbrowser-tabs,
:root:not([customizing]) #tabbrowser-tabs:focus-within,
#urlbar[focused="true"],
#identity-box[open="true"],
#navigator-toolbox:hover > #tabbrowser-tabs:not([customizing]),
#toolbar-menubar:not([inactive="true"]) ~ #tabbrowser-tabs:not([customizing]) {
  color: rgb(0, 0, 0) !important;
  transition: linear 0s;
  transition-delay: 3s;
}

:root[uidensity="compact"] {
  --tab-min-height: 38px !important;
}

tab:not([selected]):hover .tab-background {
  background-color: var(
    --toolbarbutton-hover-background,
    rgba(182, 182, 182, 0.11)
  ) !important;
}

.tab-close-button {
  list-style-image: url("active_close.png");
  border-radius: 15px;
  transition: list-style-image var(--animation-speed) ease-out !important;
}
.tab-close-button:hover {
  list-style-image: url("mouseover_close.png");
}

.tab-text {
    font-family: var(--mff-tab-font-family);
    font-weight: var(--mff-tab-font-weight);
    font-size: var(--mff-tab-font-size) !important;
    color: var(--mff-tab-color) !important;
}

#navigator-toolbox::after {
  display: none !important;
}

toolbar {
    background-image: none !important;
}

#urlbar-background {
  opacity: .98 !important;
}

#navigator-toolbox, toolbaritem {
  border: none !important;
}

#navigator-toolbox {
    background-color: var(--mff-bg) !important;
}

#urlbar-background {
  background-color: var(--mff-bg) !important;
  border: none !important;
}

.toolbar-items {
  background-color: var(--mff-bg) !important;
}

#sidebar-search-container {
  background-color: var(--mff-sidebar-bg) !important;
}
.close-icon, .urlbar-icon {
  fill: var(--mff-icon-color) !important;
}

.sidebar-placesTree {
  color: var(--mff-sidebar-color) !important;
}

#sidebar-switcher-target {
/*   color: white !important; */
}

#sidebar-box {
  --sidebar-background-color: var(--mff-sidebar-bg) !important;
}

splitter#sidebar-splitter {
  opacity: 0 !important;
}

splitter#sidebar-splitter {
  border: none !important;
  background-color: transparent !important;
}

image#sidebar-icon {
  display: none;
}

box.panel-arrowbox {
  display: none;
}

panel-arrowcontent {
    padding: 0px !important;
    margin: 0px !important;
}

toolbarseparator {
    display: none;
}

tab.tabbrowser-tab {
  overflow: hidden;
}

tab.tabbrowser-tab:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

image#star-button {
  display: none;
}

.titlebar-button > .toolbarbutton-icon {
  height: 17px !important;
  min-height: 17px !important;
  width: 17px !important;
  min-width: 17px !important;
}

.toolbarbutton-text {
    color: var(--mff-icon-color) !important;
}

.titlebar-button {
  padding-left: 10px !important;
  padding-right: 15px !important;
  padding-top: 10px !important;
}

#urlbar {
    max-width: 70% !important;
    margin: 0 15% !important;
    position: unset !important;
}

#urlbar-container *:not(#identity-box) {
  border-color: transparent !important;
  box-shadow: none !important;
}

#pageActionSeparator {
  display: none !important;
}

.urlbar-icon,
.urlbar-icon image,
#userContext-indicator,
#userContext-label {
  fill: transparent !important;
  background-color: transparent !important;
  color: transparent !important;
  transition: var(--animation-speed) !important;
}

#urlbar:hover .urlbar-icon,
#urlbar:active .urlbar-icon,
#urlbar[focused] .urlbar-icon,
#urlbar:hover .urlbar-icon:not([open]) image,
#urlbar:active .urlbar-icon image,
#urlbar[focused] .urlbar-icon image {
  fill: var(--toolbar-color) !important;
}

#urlbar:hover #userContext-indicator,
#urlbar:active #userContext-indicator,
#urlbar[focused] #userContext-indicator,
#urlbar:hover #userContext-label,
#urlbar:active #userContext-label,
#urlbar[focused] #userContext-label {
  color: var(--identity-tab-color) !important;
  fill: var(--identity-tab-color) !important;
}

.urlbar-page-action[open] {
  background-color: var(--toolbarbutton-active-background) !important;
  fill: var(--toolbar-color) !important;
}

.urlbar-page-action[open]:hover {
  background-color: var(--toolbarbutton-active-background) !important;
  fill: var(--toolbar-color) !important;
}
#urlbar[breakout] {
  width: 100% !important;
  padding: 0px !important;
  z-index: 99 !important;
}

#urlbar[breakout][breakout-extend] {
  top: calc(
    (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
  ) !important;
  left: 0 !important;
  width: 100% !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: 100% !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

.urlbar-page-action[open] .urlbar-icon {
  fill: var(--toolbar-color) !important;
}

#library-button[animate] {
  margin-bottom: 0px !important;
  margin-top: 50px !important;
}

#library-button[animate] image {
  margin-bottom: -120px !important;
  margin-top: 100px !important;
}

.urlbar-scheme {
  padding-bottom: 11px !important;
}

#urlbar-container {
  margin-left: -5px !important;
  margin-right: 2px !important;
}

#urlbar-container #urlbar[pageproxystate="invalid"] {
  margin-left: 5px !important;
}

.urlbar-input-box {
  padding: 5px 5px !important;
}

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

.urlbarView {
  display: none !important;
}

.urlbarView-row[type="bookmark"] > span{
  color: green !important;
}

.urlbarView-row[type="switchtab"] > span{
  color: orange !important;
}

#tracking-protection-icon-container, #identity-box {
  display: none;
}

.urlbarView-url, .search-panel-one-offs-container {
  color: var(--mff-urlbar-results-url-color) !important;
  font-family: var(--mff-urlbar-font-family);
  font-weight: var(--mff-urlbar-results-font-weight);
  font-size: var(--mff-urlbar-font-size) !important;
}

.urlbarView-favicon, .urlbarView-type-icon {
  display: none !important;
}

#urlbar-input {
  font-size: var(--mff-urlbar-font-size) !important;
  color: var(--mff-urlbar-color) !important;
  font-family: var(--mff-urlbar-font-family) !important;
  font-weight: var(--mff-urlbar-font-weight)!important;
  text-align: center !important;
}

#urlbar-input:focus {
    color: var(--mff-urlbar-focused-color) !important;
}

.megabar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
  box-shadow: none !important;
  background-color: transparent !important;
}

toolbarbutton {
  box-shadow: none !important;
}

#back-button > .toolbarbutton-icon{
  --backbutton-background: transparent !important;
  border: none !important;
}

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

#forward-button {
  list-style-image: url("right-arrow.svg") !important;
}

#pocket-button {
  padding-bottom: 4px !important;
}

.urlbar-icon-wrapper > .urlbar-icon:hover {
  background-color: transparent !important;
}

.urlbar-icon-wrapper {
  background-color: transparent !important;
  transition: background-color var(--animation-speed) !important;
}

#urlbar:not([focused]) {
  border-radius: 20px !important;
}
#identity-box:hover,
.urlbar-icon:hover,
.urlbar-icon-wrapper:hover,
[anonid="urlbar-go-button"]:hover {
  border-radius: 10px !important;
}

.urlbar-icon > image {
    fill: var(--mff-icon-color) !important;
    color: var(--mff-icon-color) !important;
}

.urlbar-icon {
    color: var(--mff-icon-color) !important;
}

#urlbar-results {
  font-family: var(--mff-urlbar-results-font-family);
  font-weight: var(--mff-urlbar-results-font-weight);
  font-size: var(--mff-urlbar-results-font-size) !important;
  color: var(--mff-urlbar-results-color) !important;
}

#identity-box:active,
.urlbar-icon:active,
.urlbar-icon-wrapper:active,
[anonid="urlbar-go-button"]:active {
  background-color: var(--toolbarbutton-active-background) !important;
}

.urlbar-input-box,
#identity-box,
[anonid="urlbar-go-button"],
#urlbar {
  font-size: 1.3rem;
  font-family: "Airbnb Cereal App Book", "Arial", "Helvetica";
  transition: background-color var(--animation-speed) !important;
  color: var(--toolbar-color) !important;
}

[lwthemetextcolor="dark"] .urlbarView-body-outer {
  background-color: #ff5340 !important;
  color: var(--toolbar-color) !important;
}

.urlbarView-body-inner {
  background-color: var(--toolbar-bgcolor) !important;
}

.downloadsPanelFooterButton:hover {
  outline: none !important;
}

#TabsToolbar > .titlebar-buttonbox-container {
  margin-right: 20px;
}

#urlbar,
#searchbar {
  border: none !important;
}

#page-action-buttons > *:not(#star-button-box),
.urlbar-history-dropmarker {
  opacity: 0 !important;
}

#urlbar:hover #page-action-buttons > *,
#urlbar:hover .urlbar-history-dropmarker {
  opacity: 1 !important;
}

menu,
menuitem,
menucaption {
  -moz-appearance: none !important;
  height: 36px !important;
  color: black;
}

menu[disabled="true"][_moz-menuactive="false"],
menuitem[disabled="true"][_moz-menuactive="false"],
menucaption[disabled="true"][_moz-menuactive="false"] {
  color: white !important;
}

menu[disabled="true"],
menuitem[disabled="true"],
menucaption[disabled="true"] {
  color: var(
    --toolbarbutton-hover-background,
    rgba(182, 182, 182, 0.11)
  ) !important;
}

menu[disabled="true"][_moz-menuactive="true"],
menuitem[disabled="true"][_moz-menuactive="true"],
menucaption[disabled="true"][_moz-menuactive="true"] {
  color: var(
    --toolbarbutton-hover-background,
    rgba(182, 182, 182, 0.11)
  ) !important;
  background-color: transparent !important;
}

menupopup .popup-internal-box {
  background-color: #whitesmoke !important;
}

menu,
menuitem,
menucaption {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

menu:not(.subviewbutton) > .menu-right {
  margin-top: 2px !important;
  margin-right: 0px !important;
  width: 0px !important;
}

menu:not(.subviewbutton) > .menu-right image {
  margin-right: -5px !important;
  margin-top: -2px !important;
  /*border: 6px solid var(--toolbar-color) !important;*/
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

@media (-moz-os-version: windows-xp),
  (-moz-os-version: windows-vista),
  (-moz-os-version: windows-win7),
  (-moz-os-version: windows-win8),
  (-moz-os-version: windows-win10) {
  menupopup .popup-internal-box {
    margin: -2px !important;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
  }

  .bookmark-item .scrollbutton-up {
    margin-top: -3px !important;
  }

  .bookmark-item .scrollbutton-up > .toolbarbutton-icon {
    margin-top: -2px !important;
    border: 6px solid MenuText !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
  }

  .bookmark-item .scrollbutton-down {
    margin-bottom: -3px !important;
  }

  .bookmark-item .scrollbutton-down > .toolbarbutton-icon {
    margin-bottom: -2px !important;
    border: 6px solid MenuText !important;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
  }

  menupopup {
    margin-left: 1px !important;
  }

  menu,
  menuitem,
  menucaption {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  menu:not(.subviewbutton) > .menu-right {
    margin-right: 0px !important;
    padding-left: 0px !important;
  }
}

.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  display: none !important;
}

:root:-moz-lwtheme-brighttext {
  --autocomplete-popup-background: #2a2a2e !important;
  --autocomplete-popup-highlight-background: #ff5340 !important;
}

@-moz-document url(about:blank), url(about:newtab), url(about:home) {
  html:not(#ublock0-epicker),
  html:not(#ublock0-epicker) body,
  #newtab-customize-overlay {
    background: black !important;
  }
}

#tabs-newtab-button {
    list-style-image: url("add.svg") !important;
    opacity: 0.7;
}
.tabbrowser-tab::before,
.tabbrowser-tab::after {
    border-left: none !important;
}

.tab-background {
    border: none !important;
}

.tab-background[selected="true"] {
    border-bottom: 2px solid var(--mff-tab-selected-bg) !important;
}

.tab-background:not[visuallyselected] {
    border-bottom: 2px solid var(--mff-tab-selected-tag) !important;
    opacity: 0.5 !important;
}

.tabbrowser-arrowscrollbox {
    margin-inline-start: 4px !important;
    margin-inline-end: 0px !important;
}

.tabbrowser-tab {
    border-radius: var(--mff-tab-border-radius) !important;
    border-width: 0;
    height: var(--mff-tab-height) !important;
    margin-bottom: 0px !important;
    margin-inline-end: 4px !important;
    margin-top: 4px !important;
    max-height: var(--mff-tab-height) !important;
    min-height: var(--mff-tab-height) !important;
}

.tabbrowser-tab[soundplaying="true"] {
    background-color: var(--mff-soundplaying-bg) !important;
}

.tabbrowser-tab[selected="true"],
.tab-label-container[selected="true"] {
  font-size: 1.1rem;
}

menubar,
menubutton,
menulist,
menu,
menuitem,
textbox,
toolbar,
tab,
tree,
.tree-rows {
}

#nav-bar:not([customizing]) {
  visibility: visible;
  margin-top: -55px;
  transition-delay: 1s;
  filter: alpha(opacity=0);
  opacity: 0;
  transition: visibility, ease 0.2s, margin-top, ease 0.2s, opacity, ease 0.2s !important;
}

:root:not([customizing]) :hover > #nav-bar,
#nav-bar:focus-within,
#urlbar[focused="true"],
#identity-box[open="true"],
#navigator-toolbox:hover > #nav-bar:not([customizing]),
#toolbar-menubar:not([inactive="true"]) ~ #nav-bar:not([customizing]) {
  visibility: visible;

  margin-top: 0px;
  filter: alpha(opacity=100);
  opacity: 100;
  margin-bottom: -0.2px;
}
#PersonalToolbar {
  margin-top: 0px;
}
#nav-bar .toolbarbutton-1[open="true"] {
  visibility: visible;
  opacity: 100;
}

#nav-bar {
    padding: var(--mff-nav-toolbar-padding) !important;
}

:-moz-any(#content, #appcontent) browser {
  margin-right: 0px !important;
  /*overflow-y: scroll;*/
  margin-bottom: 0px !important;
  /*overflow-x: scroll;*/
}

.tab-label-container[pinned] {
    width: o;
}

.tab-content:not([pinned="true"]) {
    overflow: hidden !important;
}

.tab-container[pinned] {
    width: 50px !important;
}

menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: 4px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ 
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 4px 8px !important;
}

/* Bookmarks Toolbar folders */
#PersonalToolbar menupopup,
/* Right-click context menus */
#mainPopupSet menupopup,
/* Top menu bar on Windows (not sure about others) */
#toolbar-menubar menupopup,
/* Sidebar/Library bookmark/history context menus */
#placesContext,
/* Address bar context menu/* Bookmarks Toolbar folders */
#PersonalToolbar menupopup,
/* Right-click context menus */
#mainPopupSet menupopup,
/* Top menu bar on Windows (not sure about others) */
#toolbar-menubar menupopup,
/* Sidebar/Library bookmark/history context menus */
#placesContext,
/* Address bar context menu (2021-10-25) */
#urlbar-input-container menupopup,
/* Various toolbar drop-down panels (Fx96) */
#back-button menupopup, #forward-button menupopup,
#identity-popup, #appMenu-popup, #downloadsPanel, #BMB_bookmarksPopup {
  /* Text color */
  --menu-color: #fff !important;
  --arrowpanel-color: #fff !important;
  --panel-color: #fff !important;
  /* Background color */
  --menu-background-color: var(--mff-menu-background) !important;
  --arrowpanel-background: var(--mff-menu-background) !important;
  --panel-background: var(--mff-menu-background) !important;
  /* Border color (if any) */
  --menu-border-color: threedshadow !important;
  --arrowpanel-border-color: threedshadow !important;
  --panel-border-color: threedshadow !important;
  /* Hovered/expanded item background color */
  --menuitem-hover-background-color: #e0e0e6 !important;
  --button-hover-bgcolor: #e0e0e6 !important;
  /* Disabled items text color and hovered background */
  --menu-disabled-color: rgba(21, 20, 26, 0.4) !important;
  --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important;
} (2021-10-25) */
#urlbar-input-container menupopup,
/* Various toolbar drop-down panels (Fx96) */
#back-button menupopup, #forward-button menupopup,
#identity-popup, #appMenu-popup, #downloadsPanel, #BMB_bookmarksPopup {
  /* Text color */
  --menu-color: #000 !important;
  --arrowpanel-color: #000 !important;
  --panel-color: #000 !important;
  /* Background color */
  --menu-background-color:  #f0f0f0 !important;
  --arrowpanel-background: #f0f0f0 !important;
  --panel-background: #f0f0f0 !important;
  /* Border color (if any) */
  --menu-border-color: threedshadow !important;
  --arrowpanel-border-color: threedshadow !important;
  --panel-border-color: threedshadow !important;
  /* Hovered/expanded item background color */
  --menuitem-hover-background-color: #e0e0e6 !important;
  --button-hover-bgcolor: #e0e0e6 !important;
  /* Disabled items text color and hovered background */
  --menu-disabled-color: rgba(21, 20, 26, 0.4) !important;
  --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important;
}