theme-store/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css

@media (-moz-bool-pref: "zen.tabs.vertical") {

  /* COLOR POP of pinned tabs (when toggled) */
  @media (-moz-bool-pref: "uc.pins.bg-color.pop") and (not (-moz-bool-pref: "uc.pins.disable-bg-color")) {
    /* background color of pinned tabs in a normal state (not hovered/selected) */
    .tabbrowser-tab[pinned] {
      background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 92%), hsl(from var(--zen-primary-color) h 25% 15%)) !important;
    }
    /* background color when hovering */
    .tabbrowser-tab[pinned]:hover{
      background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 90%), hsl(from var(--zen-primary-color) h 25% 17%)) !important;
    }
    /* background color when selected */
    .tabbrowser-tab[pinned][selected="true"],
    .tabbrowser-tab[pinned][multiselected="true"] {
      background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 85%), hsl(from var(--zen-primary-color) h 25% 28%)) !important;
    }
    /* background color when hovering and selected */
    .tabbrowser-tab[pinned][selected="true"]:hover,
    .tabbrowser-tab[pinned][multiselected="true"]:hover{
      background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 83%), hsl(from var(--zen-primary-color) h 25% 30%)) !important;
    }
  }
    
  /* Makes pinned tabs transparent (when toggled) */
  @media (-moz-bool-pref: "uc.pins.disable-bg-color") {
    .tabbrowser-tab[pinned]:not(:hover):not([selected="true"]) {
      background-color: transparent !important;
    }
  }
  
  /* Make new tabs button transparent (when toggled) */
  @media (-moz-bool-pref: "uc.new-tab-button.transparent") {
    #vertical-tabs-newtab-button:not(:hover) {
      background-color: transparent !important;
    }
  }
  
  /* Make pinned tabs taller (when toggled) */
  @media (-moz-bool-pref: "uc.pins.tall") and (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) {
    .tabbrowser-tab[pinned] { 
      min-height: 43px !important;
    }
  }  
  
  /* Set margin between pinned tabs (when toggled) */
  @media (-moz-bool-pref: "uc.pins.margins.compact") {
    :root {
      --pins-gap: 5px;
    }
  }
  @media (not (-moz-bool-pref: "uc.pins.margins.compact")) {
    :root {
      --pins-gap: 10px;
    }
  }

  /* Increase width of pinned tabs */
  @media (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "uc.pins.wide.disabled")) {  
    #navigator-toolbox:is(
      #navigator-toolbox[zen-user-hover="true"]:hover,
      #navigator-toolbox[zen-user-hover="true"]:focus-within,
      #mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox,
      #navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)), 
      :not([zen-user-hover="true"])) {
        #vertical-pinned-tabs-container {
          grid-template-columns: repeat(auto-fit, minmax(60px, auto)) !important;
          gap: var(--pins-gap) var(--pins-gap) !important;
        }
        @media (-moz-bool-pref: "uc.pins.tall") {
          .tabbrowser-tab[pinned] { 
            min-height: 43px !important;
          }
        }
        /* Make gap between new tabs button and pins consistent */
        #vertical-tabs-newtab-button {
          margin-top: calc(var(--pins-gap) / 2) !important;
        }
    }
  }
  
  /* Make pinned tabs look more box like */
  @media (-moz-bool-pref: "uc.pins.box-like-corners") {
    .tabbrowser-tab[pinned] {
      border-radius: 5px !important;
    }
  }
  
  /* Hides the separator line between pinned tabs and normal ones (when toggled) */
  @media (-moz-bool-pref: "uc.separator-line.hide") {
    #newtab-button-container::before {
      width: 0 !important;
    }
  }
  
  /* Move workspace button to the bottom (when toggled) */
  @media (-moz-bool-pref: "uc.workspace-button.move-to-bottom") {
    #zen-workspaces-button {
      order: 1;
      margin-bottom: auto !important;
    }
    @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
      .tabbrowser-tab[pinned] {
        margin-top: 0px !important;
        margin-bottom: var(--pinned-tabs-gap) !important;
      }
    }
  }
  
  /* Hides unloaded tabs when tab bar is collapsed (when toggled)*/
  @media (-moz-bool-pref: "uc.pins.only-show-active") and (not (-moz-bool-pref: "zen.view.sidebar-expanded")) {
    .tabbrowser-tab[pinned][pending="true"] {
      position: absolute !important; /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
      visibility: hidden !important;
    }
    /* Shows all pins when user is hovering over them when tab bar is collapsed */
    @media (-moz-bool-pref: "uc.pins.only-show-active.on-hover") {
      #vertical-pinned-tabs-container:hover .tabbrowser-tab[pinned][pending="true"] {
        position: relative !important;
        visibility: visible !important;
      }

      #vertical-pinned-tabs-container {
        position: relative;
      }

      #vertical-pinned-tabs-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background-color: transparent;
      }

      #vertical-pinned-tabs-container::before:hover .tabbrowser-tab[pinned][pending="true"] {
        position: relative !important;
        visibility: visible !important;
      }
    }
  }
  
  /* Hides unloaded tabs when tab bar is collapsed when in "Expand on hove" mode (when toggled)*/
  @media (-moz-bool-pref: "uc.pins.only-show-active"){  
  #navigator-toolbox:not(
    :is(
    #navigator-toolbox[zen-user-hover="true"]:hover,
    #navigator-toolbox[zen-user-hover="true"]:focus-within,
    #mainPopupSet[zen-user-hover="true"]:has(> #appMenu-popup:hover) ~ toolbox,
    #navigator-toolbox[zen-user-hover="true"]:has(*[open="true"]:not(tab):not(#zen-sidepanel-button)), 
    :not([zen-user-hover="true"]))) {
      .tabbrowser-tab[pinned][pending="true"] {
        position: absolute !important; /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
        visibility: hidden !important;
      }
    }
  }
  
  /* Remove the border of the workspace button if enabled (when toggled) */
  @media (-moz-bool-pref: "uc.workspace-button.remove-border") {
    #zen-workspaces-button {
      border: hidden !important;
    }
  }
}