My Firefox userChrome.css

gistfile1.txt

/*
########################################################################################################################
# Stylize Simple Tab Groups button.
########################################################################################################################
*/

/*
  I. Color
  Match my dark orange theme Cheers – Bold by Firefox: https://addons.mozilla.org/en-US/firefox/addon/cheers-bold/
  Make it more prominent than other browser icons and text, kinda like a Start menu type button.
*/

/*#TabsToolbar-customization-target > toolbaritem:first-of-type > toolbarbutton {*/
toolbarbutton#simple-tab-groups_drive4ik-BAP {
	border-radius: var(--toolbarbutton-border-radius);
  /* Make more prominent: */
  /* background-color: var(--toolbar-color) !important; */
  /* filter: saturate(4); */
  /* Nah, that saturates the icon also not only background. I'll just hardcode the color... */
	background-color: #FEA303 !important;
	transition: all 0.25s ease !important;
}

toolbarbutton#simple-tab-groups_drive4ik-BAP:hover {
  /* background-color: #ECB556 !important; */
  background-color: var(--lwt-tab-line-color) !important;
}

/* II. Bonus hover animation */

toolbarbutton#simple-tab-groups_drive4ik-BAP {
  /*
    Variables to easily tweak size and positioning.
    Horizontal and vertical tabs affect button's size: 36px and 32px respectively. I used:
    Horizontal tabs: diameter=18px, delta=-1px.
    Vertical tabs: diameter=19px, delta=-2px.
  */
  --gvv-stg-button-animation-diameter: 19px;
  --gvv-stg-button-animation-margin-offset-delta: -2px;

  --gvv-stg-button-animation-margin-offset: calc((var(--gvv-stg-button-animation-margin-offset-delta) - var(--gvv-stg-button-animation-diameter)) / 2);
}

toolbarbutton#simple-tab-groups_drive4ik-BAP:hover {
  position: relative;  
}

toolbarbutton#simple-tab-groups_drive4ik-BAP:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: var(--gvv-stg-button-animation-margin-offset);
  margin-left: var(--gvv-stg-button-animation-margin-offset);
  width: var(--gvv-stg-button-animation-diameter);
  height: var(--gvv-stg-button-animation-diameter);
  border: 1px solid transparent;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin-cntr-clockwise .25s linear infinite;
}

/* simple spin */
/*@keyframes spin-cntr-clockwise {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}*/

/* with jerking */
@keyframes spin-cntr-clockwise {
  from {
    transform: rotate(360deg) scaleX(1.2) scaleY(1.4);
  }
  25% {
    transform: rotate(270deg) scaleX(1.3) scaleY(1.1);
  }
  50% {
    transform: rotate(180deg) scaleX(0.9) scaleY(1.6);
  }
  75% {
    transform: rotate(90deg) scaleX(1.5) scaleY(1.0);
  }
  to {
    transform: rotate(0deg) scaleX(1.2) scaleY(1.4);
  }
}


toolbarbutton#simple-tab-groups_drive4ik-BAP:hover::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: var(--gvv-stg-button-animation-margin-offset);
  margin-left: var(--gvv-stg-button-animation-margin-offset);
  width: var(--gvv-stg-button-animation-diameter);
  height: var(--gvv-stg-button-animation-diameter);
  border: 1px solid transparent;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin-clockwise .2s linear infinite;
}

/* simple spin */
/*@keyframes spin-clockwise {
  to {
    transform: rotate(360deg);
  }
}*/

/* with jerking */
@keyframes spin-clockwise {
  from {
    transform: rotate(0deg) scaleX(1.6) scaleY(1.2);
  }
  25% {
    transform: rotate(90deg) scaleX(1.1) scaleY(1.4);
  }
  50% {
    transform: rotate(180deg) scaleX(1.5) scaleY(1.1);
  }
  75% {
    transform: rotate(270deg) scaleX(0.9) scaleY(1.5);
  }
  to {
    transform: rotate(360deg) scaleX(1.6) scaleY(1.2);
  }
}


/*
########################################################################################################################
# Hide List all tabs button.
########################################################################################################################

Simple Tab Groups hides tabs, so `List all tabs` keeps coming back if you remove it the usual way.
*/
toolbarbutton#alltabs-button {
  display: none;
}


/*
########################################################################################################################
# Highlight Translate Web Pages button in the search bar more noticably when translation is active.
########################################################################################################################

Relevant button markup looks like this:
<hbox
	class="urlbar-page-action urlbar-addon-page-action"
	role="button"
	aria-label="Translate this page"
	tooltiptext="Translate this page">
	<imageclass="urlbar-icon"/>
</hbox>

There is no good way to select for whether it's on or not: https://github.com/FilipePS/Traduzir-paginas-web/issues/912
I'll have to detect translation state by the base64 icon substring.
*/

hbox.urlbar-addon-page-action[aria-label="Translate this page"] {
  position: relative;
}

hbox.urlbar-addon-page-action[aria-label="Translate this page"][style*="IsIDcwJSwgNzIlKSI"]::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 15px;
  border: 1px solid;
  color: var(--toolbarbutton-icon-fill-attention);
}

/*
########################################################################################################################
# Hide tabs' X close buttons.
########################################################################################################################
*/

/* This takes care of both horizontal and vertical tabs (including with collapsed sidebar) */
.tabbrowser-tab .tab-close-button {
  display: none !important;;
}


/*
########################################################################################################################
# Darken the sidebar, brighten on hover (otherwise the vertical tabs distract me too much from the site's content).
########################################################################################################################
*/

#sidebar-main {
  opacity: 50%;
  transition: ease 0.1s;
}

#sidebar-main:hover {
  opacity: 100%;
}


/*
########################################################################################################################
# Additional highlighting of the selected vertical tab
########################################################################################################################
*/

#sidebar-main .tabbrowser-tab[selected="true"] > .tab-stack > .tab-background {
  border-right: 8px solid;
  /* Default highlighting is implemented as an outline with outline-offset: var(--tab-outline-offset); - in my case the
    offset is -1px. For some tabs the border ends up sticking out of the outline either at the top or at the bottom. This
    fractionary clip seems to fix that without messing with the outline. */
  clip-path: inset(0.2px);
  /* Alternative failed attempt to limit border height (https://stackoverflow.com/a/54874435/1341535): */
  /* border-image: linear-gradient(red 1px, #FFFFFF 1px calc(100% - 1px), red 1px) 0 0 0 1 / 8px; */
  /* Another way would be overpainting with background colors via ::before and ::after pseudo-elements */
  /* Or just remove outline offset? Or remove the outline completely and paint the rest of the border? */
}

Hovering sidebar: