Custom Firefox Vertical Tabs - Updated for Firefox 107

userChrome.css

/* nathan’s custom firefox userChrome based on https://github.com/ranmaru22/firefox-vertical-tabs */
/* updated for firefox 107 */

:root {
  --lwt-accent-color: rgb(240, 240, 240) !important;
  --lwt-text-color: rgba(40, 40, 40) !important;
  --arrowpanel-background: rgb(240, 240, 240) !important;
  --panel-disabled-color: rgba(76, 76, 76, 0.5) !important;
  --panel-description-color: rgba(76, 76, 76, 0.7) !important;
  --arrowpanel-color: rgba(76, 76, 76, 1) !important;

  --arrowpanel-border-color: rgb(210, 210, 210) !important;

  --toolbar-field-background-color: rgb(240, 240, 240) !important;
  --toolbar-field-color: rgb(76, 76, 76) !important;
  --toolbar-field-focus-background-color: rgba(240, 240, 240, 1) !important;
  --toolbar-field-focus-color: rgb(76, 76, 76) !important;
  --lwt-background-tab-separator-color: rgb(176, 176, 176) !important;
  --toolbar-bgcolor: rgb(255, 255, 255) !important;
  --toolbar-color: rgb(113, 113, 113) !important;
  --tabpanel-background-color: rgb(240, 240, 240) !important;

  --chrome-content-separator-color: #cccccc /* rgb(176, 176, 176) */ !important;
  /*rgb(210, 210, 210)*/

  /* sidebar */
  --sidebar-border-color: rgb(176, 176, 176) !important;
  --sidebar-width: 40px;
}

/* hotfix for Firefox 107 */
#sidebar-box {
  min-width: var(--sidebar-width) !important; /*48*/
  /* max-width: var(--sidebar-width) !important; */ /*48*/
}

@media (prefers-color-scheme: dark) {
  :root {
    --lwt-accent-color: rgb(40, 40, 40) !important;
    --lwt-text-color: rgba(240, 240, 240) !important;
    --arrowpanel-background: rgb(40, 40, 40) !important;
    --panel-disabled-color: rgba(240, 240, 240, 0.5) !important;
    --panel-description-color: rgba(240, 240, 240, 0.7) !important;
    --arrowpanel-color: rgba(240, 240, 240, 1) !important;
    --toolbar-field-background-color: rgb(79, 79, 79) !important;
    --toolbar-field-color: rgb(240, 240, 240) !important;
    --toolbar-field-focus-background-color: rgba(79, 79, 79, 1) !important;
    --toolbar-field-focus-color: rgb(240, 240, 240) !important;
    --toolbar-bgcolor: rgb(30, 30, 30) !important;
    --toolbar-color: rgb(240, 240, 240) !important;
    --arrowpanel-border-color: rgb(30, 30, 30) !important;
    --lwt-background-tab-separator-color: rgb(40, 40, 40) !important;
    --tabpanel-background-color: rgb(40, 40, 40) !important;
    --chrome-content-separator-color: rgb(79, 79, 79) !important;

    /* sidebar */
    --sidebar-border-color: rgb(79, 79, 79) !important;
    --sidebar-background-color: rgb(40, 40, 40) !important;
    --background: rgb(40, 40, 40) !important;

    /* newtab */
    --newtab-background-color: rgb(40, 40, 40) !important;
    --newtab-background-color-secondary: rgb(30, 30, 30) !important;
    --newtab-text-primary-color: #ffffff;
  }

  @-moz-document url("about:newtab"), url("about:home") {
    body {
      background-color: rgb(40, 40, 40) !important;
    }
  }
}
#sidebar-box:not([lwt-sidebar]) {
  appearance: unset !important;
}

/* Linux & macOS specific styles https://github.com/ranmaru22/firefox-vertical-tabs */
@media (-moz-gtk-csd-available),
  (-moz-mac-big-sur-theme: 0),
  (-moz-mac-big-sur-theme: 1) {
  #TabsToolbar:not([customizing="true"]) {
    visibility: collapse !important;
  }

  #toolbar-menubar {
    padding-top: 0px !important;
  }

  #TabsToolbar:not([customizing="true"]) {
    visibility: collapse !important;
  }

  #toolbar-menubar {
    padding-top: 0px !important;
  }

  #nav-bar {
    padding-left: 80px;
  }

  #TabsToolbar .titlebar-buttonbox-container {
    visibility: visible !important;
    position: absolute;
    top: 11px; /* 12px */
    left: 0px;
  }

  .titlebar-buttonbox-container {
    display: block;
  }

  .titlebar-button > .toolbarbutton-icon {
    height: 13x !important;
    min-height: 13px !important;
    width: 13px !important;
    min-width: 13px !important;
  }

  .titlebar-button {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 6px !important;
  }

  .titlebar-placeholder[type="pre-tabs"] {
    width: 120px !important;
  }

  .titlebar-buttonbox-container {
    -moz-box-ordinal-group: 0;
  }

  /* testing transparency */

  #main-window {
    background: transparent !important;
  }

  #navigator-toolbox {
    background-color: transparent !important;
  }

  #nav-bar {
    /* enable if you want blur on light mode */
    -moz-appearance: -moz-mac-vibrant-titlebar-light !important;
  }

  @media (prefers-color-scheme: dark) {
    #nav-bar {
      -moz-appearance: -moz-mac-vibrant-titlebar-dark !important;
    }
  }
}

/* Windows specific styles */
@media (-moz-platform: windows-win10) {
  /* Hide main tabs toolbar */
  :root[tabsintitlebar] {
    --uc-window-control-width: 70px; /* Space at the right of nav-bar for window controls */
    /* --uc-window-drag-space-width: 24px; */ /* To add extra window drag space in nav-bar */
  }

  #nav-bar {
    border-inline: var(--uc-window-drag-space-width, 0px) solid
      var(--toolbar-bgcolor);
    border-inline-style: solid !important;
    border-right-width: calc(
      var(--uc-window-control-width, 0px) +
        var(--uc-window-drag-space-width, 0px)
    );

    padding-top: 0px !important;
    margin-left: -80px; /* Removes the space left when hiding .titlebar-buttonbox-container */
  }

  :root {
    --uc-toolbar-height: 32px;
  }

  .titlebar-button {
    /* originally 6px */
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 6px !important;
  }

  :root:not([uidensity="compact"]) {
    --uc-toolbar-height: 38px;
  }

  #TabsToolbar {
    visibility: collapse !important;
  }

  /* Hide the Windows controls on the left side. */
  #TabsToolbar .titlebar-buttonbox-container {
    visibility: hidden !important;
  }
  /* Line up the Windows controls with the rest of the icons in the toolbar. */
  .titlebar-buttonbox-container {
    margin-top: 7px;
    /*padding-right: 10px;*/
  }

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

  #toolbar-menubar {
    min-height: unset !important;
    height: var(--uc-toolbar-height) !important;
    position: relative;
  }

  #main-menubar {
    -moz-box-flex: 1;
    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[inactive] > #menubar-items {
    opacity: 0;
    pointer-events: none;
    margin-left: var(--uc-window-drag-space-width, 0px);
  }

  :root[inFullscreen] #nav-bar {
    border-inline: none !important;
  }
  :root:not([inFullscreen]) #nav-bar {
    margin-top: calc(0px - var(--uc-toolbar-height));
    z-index: 0;
  }

  #navigator-toolbox {
    border-style: solid;
    border: none;
    border-bottom: 1px solid var(--chrome-content-separator-color) !important;
    /* --chrome-content-separator-color */
    padding-bottom: 1px;
  }
}

/* General styles */
#browser {
  position: relative;
}

#nav-bar {
  z-index: 100;
}

#url-bar {
  z-index: 0;
}

#sidebar-box[sidebarcommand*="tabcenter"] {
  z-index: 1;
}

#sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header {
  visibility: collapse;
  display: none;
}

#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
  display: block;
  position: absolute;
  min-width: var(--sidebar-width); /*48*/
  max-width: var(--sidebar-width); /*48*/
  overflow: hidden;
  transition: all 0.1s ease;
  border-left: 1px solid var(--sidebar-border-color);
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
}

[sidebarcommand*="tabcenter"] #sidebar,
#sidebar-box[sidebarcommand*="tabcenter"]:hover {
  min-width: 10vw !important;
  width: 20vw !important;
  max-width: 200px !important;
  z-index: 10 !important;
}

@media (width >= 1200px) {
  [sidebarcommand*="tabcenter"] #sidebar,
  #sidebar-box[sidebarcommand*="tabcenter"]:hover {
    max-width: 250px !important;
  }
}

[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
  display: none;
}

[sidebarcommand*="tabcenter"] #sidebar {
  max-height: 100%;
  height: 100%;
}

#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
  margin-right: var(--sidebar-width); /*48*/
}

#main-window[inFullscreen][inDOMFullscreen] #appcontent {
  margin-right: 0;
}

#main-window[inFullscreen] #sidebar {
  height: 100vh;
}

[sidebarcommand*="tabcenter"] #sidebar-header {
  background: #0c0c0d;
  border-bottom: none !important;
}

[sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
  border-right-color: #0c0c0d !important;
  border-left-color: #0c0c0d !important;
}

[sidebarcommand*="tabcenter"] #sidebar-switcher-target,
[sidebarcommand*="tabcenter"] #sidebar-close {
  filter: invert(100%);
}

@media (max-width: 630px) {
  #urlbar-container {
    min-width: 100% !important;
  }

  #menubar-items {
    display: none !important;
  }
}

/* Hide Extension Name Unless Site Identity Area is Hovered */
#identity-icon-label {
  display: none !important;
}

#identity-icon-box:not(:hover) {
  background-color: unset !important;
}

#identity-icon-box {
  padding-inline: 4px !important;
}