My CSS modifications to the current state of Proton design for Firefox (v90.0b4)

userChrome.css

/*
 * Firefox 133.0
 */

/* Removes the padding between pinned and unpinned tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: 0 !important;
}

/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tab-icon-overlay:not([crashed]) {
  top: -4.5px !important;
  inset-inline-end: -9px !important;
  z-index: 1 !important;
  background-color: transparent !important;
  border: none !important;
}

@media (prefers-color-scheme: light) {
  .tab-icon-overlay:not([crashed]) {
    fill: #1c1b22 !important;
    fill-opacity: 1 !important;
  }

  .tabbrowser-tab:hover .tab-icon-overlay:not([crashed]),
  .tab-icon-overlay:is([selected]) {
    fill: #42414d !important;
  }
}

@media (prefers-color-scheme: dark) {
  .tab-icon-overlay:not([crashed]) {
    fill: #f0f0f4 !important;
    fill-opacity: 1 !important;
  }

  .tabbrowser-tab:hover .tab-icon-overlay:not([crashed], [selected]) {
    fill: #dadadd !important;
  }

  .tab-icon-overlay:is([selected]) {
    fill: #ffffff !important;
  }
}

.tab-icon-image:not([crashed]) {
  opacity: 1 !important;
}


/*
 * Firefox 96.0
 */

/* Removes the padding between pinned and unpinned tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: 0 !important;
}

/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tab-icon-overlay:not([crashed]) {
  top: -4.5px !important;
  inset-inline-end: -9px !important;
  z-index: 1 !important;
  background: transparent !important;
  stroke: white !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  fill-opacity: 1 !important;
}

.tab-icon-image:not([crashed]) {
  opacity: 1 !important;
}

/*
 * Older version, Firefox from 2021-04-22, probably 89.
 */

@media (-moz-proton) {
  #tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay), #toolbar-menubar:not(:hover) + #TabsToolbar:not(:hover) #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-icon-image[src] ~ .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]), :is(#toolbar-menubar:hover + #TabsToolbar, #TabsToolbar:hover) .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) {
    opacity: 1 !important;
  }
  .tab-icon-overlay:not([crashed]) {
    top: -4.5px !important;
    inset-inline-end: -9px !important;
    z-index: 1 !important;
    background: transparent !important;
  }
  .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    opacity: 1 !important;
  }
  #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
    margin-inline-start: 0 !important;
  }
}

@black7375 You are fine, no need to credit the work on this file 🙂

The logo of the website is still existing so is the "still playing", but it is just squeezed with the permanent sound icon

@Teym0ur1 can you elaborate? It should look like this (tabs 1&3 are not playing, tabs 2&4 are playing):

Theme used: macOS Mojave Light Blue

Compact mode is enabled!

Ok, I see I forgot to update the file to the newest design (v90.0). Uploading now.

EDIT: Updated.

ah sorry for leaving you high and dry man. This is what I meant. I shall update it to the latest one now.

EDIT I have updated it now; it is much better. I changed stroke: white !important; to stroke: grey !important; white gave me a blank white circle while grey actually showed me the audio symbol

Then it is treated as an public domain(CC0) license.
https://creativecommons.org/share-your-work/public-domain/cc0/

Sounds good @black7375. This file can be considered to be under CC0 🙂

@black7375 @Teym0ur1 Updated the styles for Firefox 96.

Updated for Firefox 132.0

/*
 * Firefox 132.0
*/

/* Removes the padding between pinned and unpinned tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: 0 !important;
}

/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tab-icon-overlay:not([crashed]) {
  top: -4.5px !important;
  inset-inline-end: -9px !important;
  z-index: 1 !important;
  background-color: transparent !important;
  border: none !important;  /* remove white outline around the icon */
  stroke: white !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  fill-opacity: 1 !important;
}

.tab-icon-image:not([crashed]) {
  opacity: 1 !important;
}

Thanks for comment @Ajj0! I've updated the script with my current setup