userChrome.css

/** Import Lepton stylesheet (Chrome) *****************************************/
@import url("css/leptonChrome.css");


/** Add your custom styles below **********************************************/

/* Enable option to edit bookmark URLs under Add Bookmark (blue star) menu */
/*
.editBMPanel_locationRow {
  display: initial !important;
}
*/

/* Disable Email Image/Audio/Video and Set as Desktop Background context menu items */
/*
#context-sendimage,
#context-sendvideo,
#context-sendaudio,
#context-sep-setbackground,
#context-setDesktopBackground {
  display: none !important;
}
*/

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/window_control_placeholder_support.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Creates placeholders for window controls */
/* This is a supporting file used by other stylesheets */

/* This stylesheet is pretty much unnecessary if window titlebar is enabled */

/* This file should preferably be imported before other stylesheets */

/* Defaults for window controls on RIGHT side of the window */
/* Modify these values to match your preferences */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  /* --uc-window-control-width: 138px; /* Space reserved for window controls (Win10) */
  /* Extra space reserved on both sides of the nav-bar to be able to drag the window */
  --uc-window-drag-space-pre: 20px; /* left side */
  --uc-window-drag-space-post: 20px; /* right side */
}

/* Remove extra spaces when maximized/fullscreen */
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 0px;
  --uc-window-drag-space-post: 0px;
}

@media  (-moz-platform: windows-win7),
        (-moz-platform: windows-win8) {
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 105px;
  }
}

@media (-moz-gtk-csd-available) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 84px;
  }
}
@media (-moz-platform: macos) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 72px;
  }
}

.titlebar-buttonbox, #window-controls { color: var(--toolbar-color) }
:root[sizemode="fullscreen"] .titlebar-buttonbox-container { display: none }
:root[sizemode="fullscreen"] #navigator-toolbox { position: relative; }

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls {
  position: absolute;
  display: flex;
  top: 0;
  right:0;
  height: 40px;
}

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls { height: 32px }

#nav-bar {
  border-inline: var(--uc-window-drag-space-pre,0px) solid transparent;
  border-inline-style: solid !important;
  border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px));
  background-clip: border-box !important;
}

/* Rules for window controls on left layout */
@media (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos) {
  :root[tabsintitlebar="true"] #nav-bar {
    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
  }
  :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
  :root[sizemode="fullscreen"] #window-controls { right: unset }
}

/* This pref can be used to force window controls on left even if that is not normal behavior on your OS */
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled") {
  :root[tabsintitlebar="true"] #nav-bar {
    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
  }
  :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
  :root[sizemode="fullscreen"] #window-controls { right: unset; }
  .titlebar-buttonbox-container {
    order: -1 !important;
  }
  .titlebar-buttonbox {
    flex-direction: row-reverse;
  }
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Hides tabs toolbar */
/* For OSX use hide_tabs_toolbar_osx.css instead */

/* Note, if you have either native titlebar or menubar enabled, then you don't really need this style.
 * In those cases you can just use: #TabsToolbar{ visibility: collapse !important }
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it
*/

: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 {
  flex-grow: 1;
  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)
}

/**
 * Decrease size of the sidebar header
 */

#sidebar-header {
  font-size: 1.2em !important;
  padding: 2px 6px 2px 3px !important;
}

#sidebar-header #sidebar-close {
  padding: 3px !important;
}

#sidebar-header #sidebar-close .toolbarbutton-icon {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.6 !important;
}

https://github.com/black7375/Firefox-UI-Fix with some custom CSS rules to be used together with Sidebery

Most of them were taken from Sidebery's wiki, https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css), with some modifications