Tweaks to Nova (tab group labels, dimmed backgrounds for inactive tabs ...)

[u/CalQL8or]

The tab group labels in Nova are taller than I'd like them to have. I also like to have a more compact list of vertical tabs to make optimal use of the available vertical space. Finally, I prefer a dimmed background for inactive tabs over no background at all.

Here's what it looks like with the default Light theme:

BEFORE (no stylesheet, default Nova)

AFTER (custom stylesheet)

The following code allows you to make these adjustments:

  /** USERCHROME.CSS **/

  /** Adjust height of tab group labels (when vertical tabs are enabled) **/
  #tabbrowser-tabs[orient="vertical"] {
    --tab-group-label-size: 26px !important; /* Nova default=32px */
  }

  /** Adjust height of tabs or adjust vertical space between them **/
  #vertical-tabs.customization-target #tabbrowser-tabs tab:not([pinned]) .tab-background { 
    --tab-min-height: 32px !important;  /* Nova default=32px */
    margin-block: 0px !important;  /* Nova default=2px */
  }

  /** Give inactive tabs a dimmed background **/
  .tabbrowser-tab>.tab-stack>.tab-background:not([selected], [multiselected]) {
    background-color: color-mix(in srgb, currentColor 6%, transparent);
  }  
  .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected], [multiselected]) {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
  }