firefox css config on macos with sideberry

userChrome.css

/* 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 and is mostly
unnecessary if window titlebar is enabled.

Should preferably be imported before other stylesheets, because some values in this style are deliberately overridden by other styles.
*/

/* Modify these values to match your preferences
These reserve extra space on both sides of the nav-bar to be able to drag the window */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-drag-space-pre: 30px; /* left side*/
  --uc-window-drag-space-post: 30px; /* right side*/
}

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

/* Default width - used on Windows10+ */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
  --uc-window-control-width: 138px;
}

@media  (-moz-platform: windows-win7),
        (-moz-platform: windows-win8){
  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
    --uc-window-control-width: 105px;
  }
}
/* On linux set width based on number of caption buttons.
One button */
@media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 28px;
  }
}
/* Two buttons */
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
       (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
       (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 56px;
  }
}
/* Three buttons */
@media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  :root:is([tabsintitlebar],[sizemode="fullscreen"]) {
    --uc-window-control-width: 84px;
  }
}

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

.titlebar-buttonbox{ color: var(--toolbar-color) }
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none }

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

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child{ 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-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-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{ right: unset }
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  .titlebar-buttonbox-container{
    order: -1 !important;
  }
  .titlebar-buttonbox{
    flex-direction: row-reverse;
  }
}
/*------------------------------------*/
/**
 * Dynamic Horizontal Tabs Toolbar (without animations)
 * sidebar.verticalTabs: false (with native horizontal tabs)
 */
#main-window #TabsToolbar > .toolbar-items { overflow: hidden; }
 /* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="🦊 "] #TabsToolbar > .toolbar-items { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="🦊 "] #tabbrowser-tabs { z-index: 0 !important; }
/* Hidden state: Hide window buttons in tabs-toolbar */
#main-window[titlepreface*="🦊 "] #TabsToolbar .titlebar-spacer,
#main-window[titlepreface*="🦊 "] #TabsToolbar .titlebar-buttonbox-container {
  display: none !important;
}
/* [Optional] Uncomment block below to show window buttons in nav-bar (maybe, I didn't test it on non-linux-i3wm env) */
#main-window[titlepreface*="🦊 "] #nav-bar > .titlebar-buttonbox-container,
#main-window[titlepreface*="🦊 "] #nav-bar > .titlebar-buttonbox-container > .titlebar-buttonbox {
  display: flex !important;
} 
/* [Optional] Uncomment one of the line below if you need space near window buttons */
/* #main-window[titlepreface*="🦊 "] #nav-bar > .titlebar-spacer[type="pre-tabs"] { display: flex !important; } */
/* #main-window[titlepreface*="🦊 "] #nav-bar > .titlebar-spacer[type="post-tabs"] { display: flex !important; } */

/*------------------------------------*/
#main-window[titlepreface*="🦊 "] :root{ --uc-toolbar-height: 32px; }
#main-window[titlepreface*="🦊 "] :root:not([uidensity="compact"]){ --uc-toolbar-height: 34px }
#main-window[titlepreface*="🦊 "] #TabsToolbar { min-height:0 !important }
#main-window[titlepreface*="🦊 "] #TabsToolbar > *{ visibility: collapse !important }
#main-window[titlepreface*="🦊 "] #TabsToolbar > .titlebar-buttonbox-container{
  visibility: visible !important;
  height:var(--uc-toolbar-height) !important;
}
#main-window[titlepreface*="🦊 "] #nav-bar {
  margin-top: calc(0px - var(--uc-toolbar-height));
  border-left-width: 0px;
}
#main-window[titlepreface*="🦊 "] :root[inFullscreen] #navigator-toolbox{ margin-top: 11px }

/*------------------------------------*/


/**
 * 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;
}