userChrome.css@Fx: Firefox Quantum 89+ multi-row tab bar tweaks, fully scrollable

userChrome.css

/*
  To find element classes and ids, see this guide:
  https://github.com/Aris-t2/CustomCSSforFx#how-to-find-item-ids-and-attributes

  Aris-t2's repo is also a very good and massive resource for Fx CSS tweaks
  for content and chrome:
  https://github.com/Aris-t2/CustomCSSforFx
*/

/*
  Possibly still necessary to tweak:
  - Find a way to fix tab moving/dragging so it would work as expected on
    all tab rows.
    In the meantime, use add-ons like "Move Tab Hotkeys" by Jonathon Merz
    (https://addons.mozilla.org/en-US/firefox/addon/move-tab-hotkeys/) to
    help with moving/dragging tabs around.
*/

/*
  Updated 2019-03-26
*/

/* Multi-row Tabs START */
/*
  Import CSS from https://github.com/MrOtherGuy/firefox-csshacks, cloned to
  (and updatable in) directory ~/repos/firefox-csshacks and symlinked to a
  sub directory withín this profile's chrome directory:
*/
@import "./firefox-csshacks/chrome/multi-row_tabs.css";

/*
  Overwrite number of rows for firefox-csshacks
*/
:root{
    --multirow-n-rows: 2;
}

/* Ensure a border between tabs (#aaa is a light gray) */
.tabbrowser-tab:not(:last-of-type) {
  border-right: 1px dotted rgba(255, 255, 255, calc(0.75 * var(--inactive_opacity))) !important;
}
/* Multi-row Tabs END */


/*
 * Taken from Reddit
 * https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/
 */

:root {
  --inactive_opacity: 0.5;
  --tab_paddingX: 9px;
}

/* New activity in tab */
.tabbrowser-tab[titlechanged] .tab-text.tab-label {
  color: #990000 !important;
  font-style: italic !important;
}

/* Selected (loaded) */
.tabbrowser-tab[selected="true"] .tab-label {
  color: #eee !important;
  font-style: normal !important;
  font-weight: bold !important;
  text-shadow: 1px 2px 1px #000 !important;
}

/* Loaded but unread (not selected) */
.tabbrowser-tab:not([selected="true"])[unread] .tab-label {
  color: #FF00FF !important;
  font-style: normal !important;
}

/* Not loaded yet (also visited) */
.tabbrowser-tab:not([selected="true"])[pending] .tab-label,
.tabbrowser-tab:not([selected="true"])[visited] .tab-label {
  font-style: italic !important;
  opacity: var(--inactive_opacity) !important;
}

/* loading */
.tabbrowser-tab[busy] .tab-text.tab-label {
  color: #006bb3 !important;
  font-style: italic !important;
}

.tabbrowser-tab .tab-content {
  /* Breaks in Fx 89+, making the tabs scroll bar dis-/reappear uncontrollably */
  /*padding: 0 0 0 var(--tab_paddingX) !important;*/
}
.tabbrowser-tab:hover .tab-content {
  /*padding: 0 var(--tab_paddingX) 0 var(--tab_paddingX) !important;*/
}
/* tab hover shows close button, but current tab always shows it */
.tabbrowser-tab:not([pinned]) .tab-close-button {
  opacity: 0;
  display: unset !important;
  transition: all 0ms 25ms;
  transform: translateX(calc(-1 * var(--tab_paddingX)));
  /*box-shadow: -12px 0px 3px -3px var(--toolbar-bgcolor);*/
  background-color: var(--toolbar-bgcolor);
}
.tabbrowser-tab:not([pinned])[selected="true"] .tab-close-button {
  /* box-shadow disabled in Fx89+ */
  /*box-shadow: -12px 0px 3px -3px var(--toolbar-bgcolor);*/
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
  opacity: 0.5;
}
.tabbrowser-tab:not([pinned]) .tab-close-button:hover {
  opacity: 1;
  /*color: var(--tab-line-color) !important;*/ /* Disabled in Fx89+, makes button disappear on hover */
}

/* hide new tab button - who needs this, anyway? 
 * -- not necessary here, anymore. Can be removed via Fx's toolbar customization now. */
.tabs-newtab-button {
  /*display: none !important;*/
}