userChrome.css

/*
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@namespace html url(http://www.w3.org/1999/xhtml);
(still on dev edition)
*/

/*
prevent bright new tab flash
https://www.reddit.com/r/firefox/comments/8h3gy8/trying_to_customize_newtab_in_usercontentcss_and/
*/
:root {
  --in-content-page-background: #333;
  --XXXlwt-accent-color-inactive: #fff;
  --toolbarbutton-border-radius: 0px !important;
}

#browser vbox#appcontent tabbrowser,
#content,
#tabbrowser-tabpanels,
browser[type=content-primary],
browser[type=content]>html {
  background: var(--in-content-page-background) !important;
}


@-moz-document
  url("chrome://browser/content/browser.xul") ,
  url("chrome://browser/content/browser.xhtml") {
  /*
  §  Close tab button (×): hide
  */
  #tabbrowser-tabs .tabbrowser-tab .tab-close-button {
    visibility: collapse;
  }
  /* (end) */

  /*
  §  URL bar: dropmarker always visible
  */
  #nav-bar:not([customizing="true"]) .urlbar-history-dropmarker {
    opacity: 1 !important;
  }
  /* (end) */

  /*
  §  Tabs > Favicons: contrasting on any background with cycled highlight
  Place cursor on the favicon to change its higlight:
  - 0th second (initial): shape outlined by small shadow - light in dark theme and dark in light theme,
  - 1st second: transparent background - i.e. no higlight like in vanilla theme,
  - 2nd second: solid black background,
  - 3rd second: solid white background,
  - then cycle repeats.
  Last displayed state remains after hover finishes.
  */
  @keyframes cycle-background-and-filter {
    0%,
    23%,
    100% {
      background-color: rgba(255, 255, 255, 0);
      filter: drop-shadow(0 0 0.5px);
    }
    25%,
    48% {
      background-color: rgba(0, 0, 0, 0);
      filter: none;
    }
    50%,
    73% {
      background-color: rgba(0, 0, 0, 1);
      filter: none;
    }
    75%,
    98% {
      background-color: rgba(255, 255, 255, 1);
      filter: none;
    }
  }

  .tab-icon-image {
    animation-name: cycle-background-and-filter;
    animation-delay: 0;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-direction: forwards;
    animation-timing-function: linear;
    animation-play-state: paused;
  }

  .tabbrowser-tab:focus .tab-icon-image,
  .tabbrowser-tab .tab-icon-image:hover {
    animation-play-state: running;
    --comment: "you can use shift+tab from location bar (Alt+D or Ctrl+L or F6)";
  }
  /* (end) */

  /*
  §  Tabs: Dim Unloaded
  */
  .tabbrowser-tab[pending] {
    filter: grayscale(100%);
    opacity: 0.5;
  }
  /* (end) */

  /*
  §  Tabs: no width limit 
  */
  .tabbrowser-tab[fadein]:not([pinned]) {
    max-width: none !important;
    --tab-min-width: 3.5em;
  }
  .tabbrowser-tab[fadein]:not([pinned])[soundplaying="true"] {
    --tab-min-width: 4.2em;
  }
  /* (end) */

  /*
  §  Tabs: Numbered
    Visible mnemonics for ctrl+number key switching.
    Known issues: last visible tab should have number 9.
    :has selector will probably solve it:
    .tabbrowser-tab[fadein]:not([hidden]):not(:has(~:not([hidden])))
    Sadly, it is not technically possible to select "last visible" tab
    that should display `[9]` without (hopefuly upcoming) :has() selector support
    | (eight or more visible tabs) | LAST VISIBLE TAB | one or more hidden tabs |
    With :has() this will probably do the trick:
    (eight ~ visible ~ tabs) ~ tab:not([hidden]):not(:has(~tab[hidden]))
  */
  #TabsToolbar {
    counter-reset: numkeyidx
  }

  .tabbrowser-tab[fadein]:not([hidden]) {
    counter-increment: numkeyidx;
  }

  .tab-content {
    position: relative;
    --comment: "seems potentially dangerous";
  }

  .tab-content::after {
    content: none;
    position: absolute;
    top: 0;
    right: 0;
    width: .8em;
    line-height: 1.2em;
    text-align: center;
    color: var(--toolbar-bgcolor, -moz-DialogText);
    background-color: var(--toolbar-color, -moz-Dialog);
    opacity: .6;
    pointer-events: none;
  }

  .tabbrowser-tab[fadein]:not([hidden]) .tab-content::after {
    content: counter(numkeyidx)
  }

  /* 1 */ .tabbrowser-tab[fadein]:not([hidden]) ~ 
  /* 2 */ .tabbrowser-tab[fadein]:not([hidden]) ~ 
  /* 3 */ .tabbrowser-tab[fadein]:not([hidden]) ~ 
  /* 4 */ .tabbrowser-tab[fadein]:not([hidden]) ~ 
  /* 5 */ .tabbrowser-tab[fadein]:not([hidden]) ~ 
	/* 6 */ .tabbrowser-tab[fadein]:not([hidden]) ~ 
	/* 7 */ .tabbrowser-tab[fadein]:not([hidden]) ~ 
	/* 8 */ .tabbrowser-tab[fadein]:not([hidden]) ~ 
	/* 9 */ .tabbrowser-tab[fadein]:not([hidden]):not(:last-child) .tab-content::after {
    content: none;
    --REM: "verbosity to skip hidden tabs";
  }
   
  /* (end) */

  /* 
  § Aging Tabs
    Un-focused tab slowly changes color (swaps text / background color).
    Works with Light or Dark theme only.
  */
  .tabbrowser-tab:not([selected]):not([pending]) :-moz-any(.tab-label, .tab-background) {}

  .tabbrowser-tab:not([selected]):not([pending]) .tab-label {
    animation-name: tab-age-color;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1, end);
    animation-duration: calc(1s * 60 * 60 * 1.5);
  }

  @keyframes tab-age-color {
    from {
      color: var(--toolbar-color, #fff)
    }

    to {
      color: var(--toolbar-bgcolor, #000)
    }
  }

  .tabbrowser-tab:not([selected]):not([pending]) .tab-background {
    animation-name: tab-age-background;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: calc(1s * 60 * 60 * 3);
  }

  @keyframes tab-age-background {
    from {
      background-color: var(--toolbar-bgcolor, #000)
    }

    to {
      background-color: var(--toolbar-color, #fff)
    }
  }
  /* (end) */

  /*
  §  Window controls hidden
  @note: alt+spacebar or taskbar context menu FTW
  when maximized #main-window[sizemode="maximized"] 
    */
  .titlebar-buttonbox-container,
  .titlebar-spacer[type="post-tabs"] {
    visibility: collapse;
  }
  /* leave some space after tabs for "grip" */
  #tabbrowser-tabs {
    margin-right: 1.5em;
  }
  /* (end) */


  /*
  § Tabs - hide close button (x)
  */
  .tab-close-button {
    visibility: collapse !important
  }
  /* (end) */

  /*
  §  Less disruptive generic bookmark icons
  */
  #PlacesToolbarItems>.bookmark-item:not([image^="page-icon:http"])>.toolbarbutton-icon {
    opacity: 0.6;
  }
  /* (end) */
}