userChrome.css

/* colors */
:root {
  --inactive-titlebar-opacity: 1 !important;
  --panel-background: var(--uc-panel-background) !important;
}
@media (prefers-color-scheme: light) {
  :root {
    --toolbar-bgcolor: #ffffff !important;
    --toolbar-color: #474747 !important;
    --toolbox-bgcolor-inactive: rgb(222, 227, 232) !important;
    --toolbox-bgcolor: rgb(214, 226, 251) !important;
    --uc-panel-background: #ffffff !important;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --toolbar-bgcolor: #3c3c3c !important;
    --toolbar-color: #c7c7c7 !important;
    --toolbox-bgcolor-inactive: rgb(43, 43, 43) !important;
    --toolbox-bgcolor: rgb(31, 32, 32) !important;
    --uc-panel-background: #1f1f1f !important;
  }
}

/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/
#contentAreaContextMenu {
  margin-top: 10px !important; /* Pushes the menu down */
  margin-left: 10px !important; /* Pushes the menu to the right */
}
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;
}
/* tab styles */
.tabbrowser-tab .tab-background {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}
.tabbrowser-tab[selected="true"] .tab-background {
  margin-bottom: 3px !important;
  background-color: var(--toolbar-bgcolor) !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 0 5px 0 0 var(--toolbar-bgcolor) !important; /* Fill the gap */
}
.tabbrowser-tab[selected="true"] {
  overflow: visible !important;
}
.tabbrowser-tab[selected="true"] .tab-background::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -12px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at top left, transparent 12px, var(--toolbar-bgcolor) 12px) !important;
}
.tabbrowser-tab[selected="true"] .tab-background::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -12px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at top right, transparent 12px, var(--toolbar-bgcolor) 12px) !important;
}

/* Skip left curve if the tab is the first in its container */
.tabbrowser-tab:first-child[selected="true"] .tab-background::before,
.tabbrowser-tab:first-of-type[selected="true"] .tab-background::before {
  display: none !important;
}

.tab-background{ 
  border-bottom: none !important;
  box-shadow: none !important;
}
/* draw tabs divider */
.tabbrowser-tab:not([selected])::after {
  content: "";
  position: absolute;
  right: 0;
  top: 35%;
  bottom: 35%;
  width: 1px;
  background: var(--toolbarseparator-color);
}
/* Cover adjacent borders with pseudo-elements */
.tabbrowser-tab:hover::before,
.tabbrowser-tab[selected]::before {
  content: "";
  position: absolute;
  left: -2px; /* Extend left to cover previous tab's border */
  top: 35%; /* Match your gradient start */
  bottom: 35%; /* Match your gradient end */
  width: 2px;
  background: var(--toolbar-bgcolor) !important;
  z-index: 10 !important;
}
.tabbrowser-tab:hover::after,
.tabbrowser-tab[selected]::after {
  content: "";
  position: absolute;
  right: -1px; /* Cover this tab's own border */
  top: 35%;
  bottom: 35%;
  width: 2px;
  background: var(--toolbar-bgcolor) !important;
  z-index: 10 !important;
}
/* tab group label styles */
tab-group[collapsed] {
  --tab-group-line-color: transparent !important;
}
.tab-group-label {
  outline: none !important;
  margin-bottom: 0px !important;
}
.tab-group-label-hover-highlight,
.tab-group-label-hover-highlight:hover {
  box-shadow: none !important;
  background-color: transparent !important;
  z-index: 100 !important;
}
.tab-group-label-hover-highlight::before,
.tab-group-label-hover-highlight::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 12px;
  height: 12px;
  z-index: 100 !important;
}

/* Skip curves if the parent element is the first in its container */
tab-group:first-child .tab-group-label-hover-highlight::before,
tab-group:first-of-type .tab-group-label-hover-highlight::before {
  display: none !important;
}

/* Light theme - use regular colors */
@media (prefers-color-scheme: light) {
  tab-group[collapsed] .tab-group-label {
    background: var(--tab-group-color-invert) !important;
  }
  .tab-group-label-hover-highlight::before {
    left: -12px;
    background: radial-gradient(circle at top left, transparent 12px, var(--tab-group-color) 12px) !important;
  }
  .tab-group-label-hover-highlight::after {
    right: -12px;
    background: radial-gradient(circle at top right, transparent 12px, var(--tab-group-color) 12px) !important;
  }
  tab-group[collapsed] .tab-group-label-hover-highlight::before {
    background: radial-gradient(circle at top left, transparent 12px, var(--tab-group-color-invert) 12px) !important;
  }
  tab-group[collapsed] .tab-group-label-hover-highlight::after {
    background: radial-gradient(circle at top right, transparent 12px, var(--tab-group-color-invert) 12px) !important;
  }
  .tab-group-label-container {
    margin-top: 8px !important;
    margin-bottom: 1px !important;
    background-color: var(--tab-group-color) !important;
    border-radius: 8px 8px 0 0 !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 100 !important;
  }
  tab-group[collapsed] .tab-group-label-container {
    background-color: var(--tab-group-color-invert) !important;
  }
}

/* Dark theme - use inverted colors */
@media (prefers-color-scheme: dark) {
  .tab-group-label-hover-highlight::before {
    left: -12px;
    background: radial-gradient(circle at top left, transparent 12px, var(--tab-group-color-invert) 12px) !important;
  }
  .tab-group-label-hover-highlight::after {
    right: -12px;
    background: radial-gradient(circle at top right, transparent 12px, var(--tab-group-color-invert) 12px) !important;
  }
  tab-group[collapsed] .tab-group-label-hover-highlight::before {
    background: radial-gradient(circle at top left, transparent 12px, var(--tab-group-color) 12px) !important;
  }
  tab-group[collapsed] .tab-group-label-hover-highlight::after {
    background: radial-gradient(circle at top right, transparent 12px, var(--tab-group-color) 12px) !important;
  }
  .tab-group-label-container {
    margin-top: 8px !important;
    margin-bottom: 1px !important;
    background-color: var(--tab-group-color-invert) !important;
    border-radius: 8px 8px 0 0 !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 100 !important;
  }
  tab-group[collapsed] .tab-group-label-container {
    background-color: var(--tab-group-color) !important;
  }
}
.browserContainer > findbar {
  -moz-box-ordinal-group:0 !important; /*  for 112 and older */
  order: -1 !important; /* for 113 and newer */
  border-top: none !important;
  border-bottom: 1px solid ThreeDShadow !important;
} 
/* remove excessive context menu entries */
#context-navigation,
#context-sep-navigation,
#context-viewsource,
#context-inspect,
#context-copy-link-to-highlight,
#context-copy-clean-link-to-highlight,
#context-remove-highlight,
#context-sep-highlights,
#context-bookmarklink,
#context-print-selection,
#context-undo,
#context-redo,
#context-sep-redo,
#context-delete,
#context-sendimage,
#context_openANewTab,
#context_NewTab,
#context_reloadTab,
#context_reloadSelectedTabs,
#context_duplicateTabs, 
.share-tab-url-item, 
#context_closeTab, 
#context_closeTabOptions,
#context_undoCloseTab,
#context_selectAllTabs + menuseparator,
#context_moveTabOptions,
#context_closeDuplicateTabs,
#context-copyimage,
#context-sep-setbackground,
#context-setDesktopBackground {
  display: none !important;
}
/* remove private browsing indicator */
.private-browsing-indicator-label{display: none;}
.private-browsing-indicator-label{display:none !important;}
.private-browsing-indicator-with-label {
  display:none !important;
}
/* remove titlebar spacer */
.titlebar-spacer[type="pre-tabs"] {
  display: none !important;
}
/* like #contentAreaContextMenu */
menupopup > * {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
.menu-iconic,
.menuitem-iconic {
  margin-left: -24px !important;
  overflow: hidden !important;
}
menupopup[needsgutter] :is(menu, menuitem) > .menu-icon {
  position: absolute;
  inset-inline-start: 10px !important;
  margin-inline-start: 0 !important;
}
  /* fix nav label */
menupopup[needsgutter] menuitem.menuitem-with-favicon > :is(.menu-text, .menu-highlightable-text) {
  margin-inline-start: 24px !important;
  position: relative !important;
  top: 1px !important;
}
/* fix context menu */
/* seems the var get overriden at the end of the path. what is mozilla doing? */
menupopup {
  --panel-background: var(--uc-panel-background) !important;
  transition: none !important;
  animation: none !important;
  border-top: 7px solid var(--uc-panel-background) !important;
  border-bottom: 12px solid var(--uc-panel-background) !important;
  background-color: var(--uc-panel-background) !important;
}

menupopup > *:hover {
  transition: none !important;
  will-change: auto !important;
}
menupopup > *:last-child {
  padding-bottom: 12px !important;
}
menupopup > menu::after {
  margin-right: -22px !important;
}
menuitem {
  max-height: 22px !important;
}
/* menu popup */
.panel-subview-body {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 12px !important;
  padding-bottom: 10px !important;
}
  /* skip extension menu items */
.subviewbutton:not([class*="unified-extensions"]) {
  max-height: 22px !important;
}
/* side panel */
#input {
  border-radius: 16px !important;
}
/* url bar style */
#urlbar-background {
	background-color: var(--toolbox-bgcolor-inactive) !important;
}
@-moz-document url("chrome://global/content/pictureinpicture/player.xhtml") {
  :root {
    background-color: transparent !important;
  }
  body {
    border-radius: 5px !important;
    overflow: hidden !important;
  }
}
.urlbar-background {
  border-radius: 20px !important;
}
#notification-popup {
  display: flex !important;
}
#identity-permission-box {
  display: flex !important;
}
#identity-permission-box:hover {
  border-radius: 14px !important;
}
.identity-box-button {
  border-radius: 14px !important;
}
#tracking-protection-icon-container {
  display: none !important;
}
#trust-icon-container {
  display: none !important;
}
#identity-icon-box {
  display: none !important;
}
#urlbar-searchmode-switcher,
.searchmode-switcher-chicklet {
  border-radius: 14px !important;
  border-width: 1px !important;
}
.button-background {
  border-radius: 14px !important;
}
.searchmode-switcher-title {
  margin-left: 10px !important;
}
/* reorder search suggestions */
.urlbarView-results {
  display: flex !important;
  flex-direction: column !important;
}
.search-one-offs { order: 0; }
.urlbarView-row[type="switchtab"] { order: 1 !important; }
.urlbarView-row[type="history"] { order: 2 !important; }
.urlbarView-row[type="adaptive-history"] { order: 3 !important; }
.urlbarView-row[type="history_serp"] { order: 4 !important; }
.urlbarView-row[type="bookmark"] { order: 5 !important; }
.urlbarView-row[type="search"] { order: 6 !important; }
/* Limit number of results per type*/
/* tab unlimited, all else are limited to 3*/
/* how in the world they have so many history! */
.urlbarView-row[type="history"] ~ .urlbarView-row[type="history"] ~ .urlbarView-row[type="history"] ~ .urlbarView-row[type="history"] {
  display: none !important;
}
.urlbarView-row[type="adaptive-history"] ~ .urlbarView-row[type="adaptive-history"] ~ .urlbarView-row[type="adaptive-history"] ~ .urlbarView-row[type="adaptive-history"] {
  display: none !important;
}
.urlbarView-row[type="history_serp"] ~ .urlbarView-row[type="history_serp"] ~ .urlbarView-row[type="history_serp"] ~ .urlbarView-row[type="history_serp"] {
  display: none !important;
}
.urlbarView-row[type="bookmark"] ~ .urlbarView-row[type="bookmark"] ~ .urlbarView-row[type="bookmark"] ~ .urlbarView-row[type="bookmark"] {
  display: none !important;
}
.urlbarView-row[type="search"] ~ .urlbarView-row[type="search"] ~ .urlbarView-row[type="search"] ~ .urlbarView-row[type="search"] {
  display: none !important;
}
/* fix search result height */
.urlbarView-results {
  overflow: scroll !important;
  max-height: 70vh !important;
}
/* remove spacer */
toolbarspring:not(#vertical-spacer) {
  display: none !important;
}
/* adjust all tab button background color */
@media (prefers-color-scheme: light) {
  #alltabs-button {
    --toolbarbutton-hover-background: rgb(174, 198, 246) !important;
  }
  #alltabs-button > .toolbarbutton-badge-stack[consumeanchor="alltabs-button"],
  .toolbarbutton-badge-stack[consumeanchor="alltabs-button"] {
    background-color: rgb(237, 243, 253) !important;
  }
}
@media (prefers-color-scheme: dark) {
  #alltabs-button {
    --toolbarbutton-hover-background: rgb(71, 71, 71) !important;
  }
  #alltabs-button > .toolbarbutton-badge-stack[consumeanchor="alltabs-button"],
  .toolbarbutton-badge-stack[consumeanchor="alltabs-button"] {
    background-color: rgb(60, 60, 60) !important;
  }
}
#alltabs-button:hover > .toolbarbutton-badge-stack[consumeanchor="alltabs-button"],
#alltabs-button[open] > .toolbarbutton-badge-stack[consumeanchor="alltabs-button"] {
  background-color: var(--toolbarbutton-hover-background) !important;
}
/* add toolbar border radius */
#nav-bar {
  border-radius: 6px 6px 0 0 !important;
}
/* accent color */
/* @-moz-document regexp("chrome:\/\/(?!devtools).*"), regexp("about:(?!blank).*"), url("about:blank") {
  * {
    --color-accent-primary: #6D6EB9 !important;
    --color-accent-primary-hover: #6D6EB9 !important;
    --color-accent-primary-active: #6D6EB9 !important;
  }
} */
/* :root,
panel,
dialog,
window {
 --lwt-toolbarbutton-icon-fill-attention: #6d6eb2 !important;
 --button-primary-bgcolor: #6d6eb2 !important;
 --button-primary-hover-bgcolor: #6d6eb2 !important;
 --button-primary-active-bgcolor: #6d6eb2 !important;
 --in-content-primary-button-background: #6d6eb2 !important;
 --in-content-primary-button-background-hover: #6d6eb2 !important;
 --in-content-primary-button-background-active: #6d6eb2 !important;
 --input-border-color: #6d6eb2 !important;
 --uc-checkbox-checked-bgcolor: #6d6eb2 !important;
 --checkbox-checked-bgcolor: #6d6eb2 !important;
 --focus-outline-color: #6d6eb2 !important;
 --in-content-link-color: #6d6eb2 !important;
}
not this way, so it seems
*/