Welcome to Firefox-UI-Fix Discussions!

[black7375]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[Nomes77]

Hey everyone! To start with an introduction of myself: see my GH-profile.
The reason for me to show up here is to share an idea.

Currently in https://github.com/black7375/Firefox-UI-Fix/blob/master/src/tabbar/selected_tab/_pinned_close_button.scss
the close button is as big as the tab icon and is display only when the tab is selected, doesn't matter if it is hovered or not.
However I would like to only show the close button of the pinned tabs on hover:
I use the following code, maybe you can do something with it.
You can choose between selected and hovered and always hovered (userChrome+Content.tab.close_button_at_hover_pinned / userChrome+Content.tab.close_button_at_hover_pinned.always).

/*- Clipped tabs - Show close button at hover pinned ----------------- I'VE CHANGED -*/
@supports -moz-bool-pref("userChrome+Content.tab.close_button_at_hover_pinned") {
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
    --pinned-hover-delay: 2s;
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected] .tab-close-button,
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-image,
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-throbber,
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-pending {
    display: -moz-box !important;
    visibility: collapse !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-close-button {
    -moz-box-ordinal-group: 0 !important;
    transform: translateX(-1px) translateY(-1.5px);
    visibility: visible !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected] .tab-icon-stack {
    width: 16px !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-stack {
    width: 0px !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected] .tab-icon-overlay {
    transform: translateX(0px) translateY(0px);
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-overlay {
    transform: translateX(-16px) translateY(-2.25px);
  }
  /* Animate */
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-close-button {
    transition: visibility 0.25s var(--animation-easing-function) var(--pinned-hover-delay) !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-image,
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-throbber,
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-pending {
    transition: visibility 0s var(--pinned-hover-delay) !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-stack {
    transition: width 0s var(--pinned-hover-delay) !important;
  }
  #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-overlay {
    transition: transform 0s var(--pinned-hover-delay) !important;
  }
  @supports -moz-bool-pref("userChrome+Content.tab.close_button_at_hover_pinned.always") {
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] .tab-close-button,
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-icon-image,
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-throbber,
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-icon-pending {
      display: -moz-box !important;
      visibility: collapse !important;
    }
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-close-button {
      -moz-box-ordinal-group: 0 !important;
      transform: translateX(-1px) translateY(-1.5px);
      visibility: visible !important;
    }
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] .tab-icon-stack {
      width: 16px !important;
    }
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-icon-stack {
      width: 0px !important;
    }
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] .tab-icon-overlay {
      transform: translateX(0px) translateY(0px);
    }
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-icon-overlay {
      transform: translateX(-16px) translateY(-2.25px);
    }
    /* Animate */
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-close-button {
      transition: visibility 0.25s var(--animation-easing-function) var(--pinned-hover-delay) !important;
    }
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-icon-image,
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-throbber,
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-icon-pending {
      transition: visibility 0s var(--pinned-hover-delay) !important;
    }
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-icon-stack {
      transition: width 0s var(--pinned-hover-delay) !important;
    }
    #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned]:hover .tab-icon-overlay {
      transition: transform 0s var(--pinned-hover-delay) !important;
    }
  }
}

[black7375]

Make it sense!!
I will put it in the next release.

[Nomes77]

Just a comment. I put --pinned-hover-delay to 2s to rule out that you accidentally close the pinned tab.