Tabs should look like tabs - adamhotep/Firefox-Tweaks GitHub Wiki

Adapted from How to undo Proton UI in Firefox 91 and onwards.

:root {
  --arrowpanel-menuitem-padding: 2px;
}

.titlebar-color {
  color: -moz-accent-color-foreground;
  background-color: -moz-accent-color;
}

.tab-background {
  border-radius: 3px 3px 0 0 !important;
  margin-bottom: 0 !important;
  --toolbar-bgcolor: var(--tabpanel-background-color, Canvas);
  background-color: var(--toolbar-bgcolor) !important;
}

.tabbrowser-tab:not([selected]):not([multiselected="true"]):not(:hover) .tab-background {
  background-color: oklch(from var(--toolbar-bgcolor) calc(l - 0.1) c h / alpha) !important;
}
.tabbrowser-tab:not([selected]):not([multiselected="true"]):hover .tab-background {
  background-color: oklch(from var(--toolbar-bgcolor) calc(l - 0.2) c h / alpha) !important;
}
/* Bold without widening (https://stackoverflow.com/a/46452396/519360) */
.tabbrowser-tab:hover vbox > label {
  text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
  -webkit-text-stroke-width: 0.04ex; /* actually for all browsers now */
}

.tabbrowser-tab:not([selected]):not(:hover) > .tab-stack > .tab-background {
  border-color: oklch(from var(--toolbar-bgcolor) l c h / 0.75);
  border-bottom-color: #8881;
  border-style: solid;
  border-width: 1px;
}

menupopup > menu, menupopup > menuitem {
  padding-block: 2px !important;
}

/* compact toolbar density */
:root:not([uidensity=touch]) .toolbar-items, .tabbrowser-tab {
  max-height: 38px;
}

/* full background color from tab's container */
.tabbrowser-tab[usercontextid] .tab-loading-burst {
  background-color: rgb(from var(--identity-tab-color) r g b / 0.15) !important;
}

TODO: Document, screenshots, test on a light theme, screenshots on a light theme.