Custom userChrome.css for Firefox

userChrome.css

/* Hides tabs toolbar
 *
 * Source:
 * https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.css
 */
:root[tabsintitlebar] {
  --uc-toolbar-height: 40px;
}

:root[tabsintitlebar][uidensity="compact"] {
  --uc-toolbar-height: 32px;
}

#TabsToolbar {
  visibility: collapse !important;
}

:root[sizemode="fullscreen"]
  #TabsToolbar
  > :is(#window-controls, .titlebar-buttonbox-container) {
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar {
  margin-top: calc(0px - var(--uc-toolbar-height, 0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] {
  min-height: unset !important;
  height: var(--uc-toolbar-height, 0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"] {
  margin-bottom: var(--uc-toolbar-height, 0px);
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar {
  -moz-box-flex: 1; /* Fx < 112 compatibility */
  flex-grow: 1;
  -moz-box-align: stretch; /* Fx < 112 compatibility */
  align-items: stretch;
  background-color: var(--toolbar-bgcolor, --toolbar-non-lwt-bgcolor);
  background-clip: padding-box;
  border-right: 30px solid transparent;
  border-image: linear-gradient(
      to left,
      transparent,
      var(--toolbar-bgcolor, --toolbar-non-lwt-bgcolor) 30px
    )
    20 / 30px;
}

#toolbar-menubar:not([inactive]) {
  z-index: 2;
}

#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre, 0px);
}

/* Set blank page background-color
 *
 * Source:
 * https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/blank_page_background.css
 */
#tabbrowser-tabpanels {
  background-color: rgb(43, 42, 51) !important;
}

/* Floating findbar at the top-left
 *
 * Source:
 * https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css
 */
findbar {
  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
  order: -1;
  margin-bottom: -33px;
  position: relative;
  border-top: none !important;
  padding: 0 !important;
  transition:
    transform 82ms linear,
    opacity 82ms linear 32ms !important;
  background: none !important;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}

.findbar-container > .findbar-find-fast {
  padding: var(--toolbarbutton-inner-padding) 1px;
  margin: 0 !important;
}

findbar[hidden] {
  transform: translateY(-30px);
}

findbar > .findbar-container,
findbar > .close-icon {
  border: 1px solid var(--chrome-content-separator-color);
  border-width: 0 0 1px 0px;
  background-color: var(--lwt-accent-color) !important;
  background-image: linear-gradient(
      var(--toolbar-bgcolor),
      var(--toolbar-bgcolor)
    ),
    var(--lwt-header-image, none);
  pointer-events: auto;
}

findbar > .findbar-container {
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
  height: initial !important;
  margin-inline: 0px !important;
  overflow-inline: visible !important;
}

.findbar-find-status {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  -moz-box-flex: 1; /* Fx <112 compatibility */
  flex-grow: 1;
}

.findbar-closebutton {
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 5px !important;
  width: initial !important;
  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
  order: -1;
}
.findbar-closebutton > image {
  padding: 3px;
}
.findbar-closebutton:hover > image {
  background: var(--toolbarbutton-hover-background) !important;
  border-radius: 4px;
}
findbar > .findbar-container > hbox {
  margin: 0 5px;
}

findbar::after {
  content: "";
  display: flex;
  -moz-box-flex: 100; /* Fx <112 compatibility */
  flex-grow: 100;
}

@supports -moz-bool-pref("userchrome.floating-findbar-on-right.enabled") {
  findbar {
    -moz-box-direction: reverse; /* Fx <112 compatibility */
    flex-direction: row-reverse;
  }
  findbar > .findbar-container {
    -moz-box-direction: reverse;
    flex-direction: row-reverse;
    border-inline-width: 1px 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 4px;
  }
  /*
  Move findbar so it isn't over the scrollbar
  Delete if you want findbar to begin from right window edge
  */
  findbar {
    margin-right: 16px;
    border-right: 1px solid var(--chrome-content-separator-color);
  }
}

/* Hide the unified extensions button */
#unified-extensions-button {
  /* display: none; */
}

/* Center the bookmarks toolbar content */
#PersonalToolbar {
  justify-content: center;
}

toolbar:not(#TabsToolbar) > #personal-bookmarks {
  flex: 1 auto;
  flex-direction: row-reverse;
}

toolbar:not(#TabsToolbar) > #personal-bookmarks {
  max-width: fit-content;
}

toolbar:not(#TabsToolbar) > #personal-bookmarks::before {
  border-left: 1px solid #4c4c4c;
  content: "";
  height: 1.4rem;
  margin-left: 0.5rem;
  margin-top: 0.35rem;
  padding-left: 0.5rem;
}

.toolbaritem-combined-buttons {
  padding: 0 2px;
}

/* Background color for private browsing chrome */
#main-window[privatebrowsingmode="temporary"] #nav-bar {
  background: rgb(37, 0, 62) !important;
}

#main-window[privatebrowsingmode="temporary"] #urlbar-background {
  background: rgb(27, 0, 45) !important;
}

#main-window[privatebrowsingmode="temporary"] #PersonalToolbar {
  background: rgb(37, 0, 62) !important;
}

/* Fake OS buttons shown on fullscreen videos (minimize, maximize, close) */
#TabsToolbar > .titlebar-buttonbox-container {
  display: none !important;
}

/* PIP button over videos */
.controlsOverlay:not(.experiment).hovering > .pip-wrapper:not(:focus-visible) {
  opacity: 0.2;
}