Customizing Firefox Proton with CSS

[Ben]

@Ben

Proton is a pretty hot topic.

So you see - this is true.
Netscape was so cool - remember those ‘tear off’ toolbars? That’s the first time I re-arranged stuff to make the UI elements a little smaller to give more screen to the browser.

What’s good - PROTON looks to clean up the messy Firefox menus. Just yesterday I talked to a new Chrome user who left Firefox and is very happy at how the Chrome preferences are so user friendly.

Now the Unsupported compact mode looks kind of okay - until you realise it’s actually now unsupported, and it’s also the same size as the current ‘normal’ mode.

@codic12

I’m using proton’s “unsupported” compact mode and I think it looks fine.

Look again. Do you remember WHY (wasn’t it Windows Vista?) Browsers started making the BACK button slightly more prominent? What’s the MOST clicked item in a browser? NOW look at that element again. The WHOLE UI has grown to match that one element - yes, it’s useable but it’s a step back. It’s a push to a touch interface… and it isn’t designed for keyboard warriors who don’t need a big UI< or gesture warriors - it’s not even designed for click warriors. Though yes, it looks nicer.

The tabs are detached. They are separately coloured now - I liked that at first, but it’s a step away from real useability - especially when you have many tabs.

@BS86

can you explain that? Because I use the default firefox theme and my tabs are not separated from the tab they belong to? Just tried with a new profile to be sure:

Enable some, add some. Check out the ‘download’ doorhanger… where only the text being read tells you whether you’re opening the folder or opening a download… test it by downloading an image. It looks nice - but it’s a huge bug.

People with 768p screens now have to scroll all menus.

Here enabling proton in Firefox 88.
Now check out the colouring in Firefox 90

[Ben]

Anyway - with my CSS, it’s easy to bring back the ‘button’ look if you like.
I reduced the URL to 1EM. I don’t think a New Tab needs to be that tall unless you use your nose on a touch screen.

I don’t want a close icon on every tab - so it hides on unselected tabs until moused over.

Other colours - for example the addition of colour changes in elements.

See the difference?

[Ben]

Another reason I’m starting to like the CSS is that I can play with the buttons too… here a little less compact.

Just by adjusting this section:

:root{
  --toolbarbutton-inner-padding: 4px !important;
  --proton-tab-block-margin: 2px 3px !important;
  --tab-min-height:  27px !important;
  --tabs-shadow-size: 0px !important;
  --tab-border-radius: 8px 1px !important;
  --arrowpanel-menuitem-padding: 5px !important;
  --panel-font-size: 1.1em !important;
  --arrowpanel-padding: 0.8em !important;
  --arrowpanel-dimmed: color-mix(in srgb, #1ae0ff 35%, transparent) !important;
  --arrowpanel-dimmed-further: color-mix(in srgb, #1ae0ff 40%, transparent) !important;
  --arrowpanel-dimmed-even-further: color-mix(in srgb, #1ae0ff 45%, transparent) !important;  
  --urlbar-icon-padding: 4px !important;
}

[codic12]

That looks slick!

[Ben]

This is fun

[Ben]

Now addressing the PLAY. The icon gets hidden if you go compact until you mouse over.
The alternative is to have a second line text saying ‘playing’ or ‘picture in picture’… Surely text is a regression over a simple icon?

Now addressing the PLAY.
I like the permanent speaker icon for media playing (legacy)
I also like the tab second line text information. So they’re both in the CSS…

[Ben]

CSS as it is now:

/*
 Set Firefox toolkit.legacyUserProfileCustomizations.stylesheets --> TRUE
*/
:root{
  --toolbarbutton-inner-padding: 4px !important;
  --proton-tab-block-margin: 2px 3px !important;
  --tab-min-height:  18px !important;
  --tabs-shadow-size: 0px !important;
  --tab-border-radius: 6px 1px !important;
  --arrowpanel-menuitem-padding: 5px !important;
  --panel-font-size: 1.1em !important;
  --arrowpanel-padding: 0.8em !important;
  --arrowpanel-dimmed: color-mix(in srgb, #1ae0ff 35%, transparent) !important;
  --arrowpanel-dimmed-further: color-mix(in srgb, #1ae0ff 40%, transparent) !important;
  --arrowpanel-dimmed-even-further: color-mix(in srgb, #1ae0ff 45%, transparent) !important;  
  --urlbar-icon-padding: 4px !important;
}

/*
* Only show close buttons on background tabs when hovering with the mouse
*/
.tabbrowser-tab:not([selected]) .tab-close-button {
  visibility: hidden !important
  }
.tabbrowser-tab:not([selected]):hover .tab-close-button {
  visibility: visible !important
  }
.tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button {
  display: -moz-box !important;
  }
  
.tab-close-button {
  transition: fill-opacity var(--animation-speed) !important;
  fill: rgba(156, 70, 241, 0.95) !important;
  }


/* LEGACY audio icon next to the tab icon - comment out the tab-secondary-label */
.tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
  grid-template-areas: "a s";
}
.tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
.tab-icon-overlay,.tab-icon-image{ opacity: 0.75 !important; }

/* secondary audio label can be removed if you use this style, but feel free to remove the next line if you want to show it. */
.tab-secondary-label{ display: none }

/* show the secondary label when video is in PiP */
.tab-secondary-label[pictureinpicture]{ display: -moz-box }
.tab-secondary-label:is([pictureinpicture]) {display: -moz-box !important; margin-top:-1px !important; color:#00dbfd !important;
  font-size: 0.65em !important; font-weight: bold !important;text-shadow: 0px 0px 5px #000000 !important}
.tab-secondary-label:is([muted], [activemedia-blocked]) {display: none}

.tab-close-button{margin-inline-start: -2px !important;width: 15px !important;height: 15px !important;padding: 3px !important; margin-inline-end:-6px !important}

#tabbrowser-tabs{ --uc-tabs-scrollbutton-border: 2px }
#scrollbutton-up, #scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; }

.sharing-icon, #permissions-granted-icon, #tracking-protection-icon, .notification-anchor-icon, #blocked-permissions-container 
  >.blocked-permission-icon {  heigh: 14px !important; width :14px !important;}

#identity-icon{color: #2cf62c !important; heigh: 14px !important; width :14px !important}

.urlbar-icon {padding: 4px !important}

#urlbar{min-height: 18px !important; margin-block: 0px 0px!important;font-size: 1.12em !important;text-shadow: none !important;}
#urlbar-background{margin-block: 0px 0px; !important;}
#urlbar-container{margin-block: 0px -4px;}
#searchbar {min-height: 18px !important;text-shadow: none !important; font-size: 1.12em !important; margin-block: -3px !important;}

.PanelUI-subView toolbarseparator.proton-zap {border-image: var(--panel-separator-zap-gradient) 1;}

.tab-context-line{max-width: 17px !important; max-height: 1px !important; margin-left: 8px !important;margin-bottom: -1px !important;}
.tab-context-line{-moz-box-ordinal-group: 2 !important; opacity: 1 !important;transition: none !important;}

.identity-color-blue {--identity-tab-color: #2574A7 !important; --identity-icon-color: #2574A7 !important;--tab-line-color:#295170 !important;}
.identity-color-green {--identity-tab-color: #1E934F !important; --identity-icon-color: #1E934F !important;--tab-line-color:#20834b !important;}
.identity-color-orange {--identity-tab-color: #e67e22 !important; --identity-icon-color: #e67e22 !important;--tab-line-color:#a9642c !important;}
.identity-color-red {--identity-tab-color: #ff392b !important; --identity-icon-color: #ff392b !important; --tab-line-color:#cc372f !important;}
.identity-color-pink {--identity-tab-color: #ff33bb !important; --identity-icon-color: #ff33bb !important;--tab-line-color:#e22fa7 !important;}
.identity-color-purple {--identity-tab-color: #813E9D !important; --identity-icon-color: #813E9D !important;--tab-line-color:#703988 !important;}

.identity-color-blue >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #1bbfff !important;}
.identity-color-green >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #6be19c !important; } 
.identity-color-orange >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #ebc247 !important; } 
.identity-color-red >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #ff6666 !important;}
.identity-color-pink >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #ff99eb !important;} 
.identity-color-purple >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #caa4da !important;} 

.identity-color-blue> .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #2574A7 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-green .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #1E934F 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-orange .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #e67e22 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-red .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #a0392b 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-pink .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #ff99eb 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-purple .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #813E9D 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}

[codic12]

Remember to uninstall oh my zsh!

[Ben]

Yes, I must get around to that… I’m listening again. It’s one of those things that I should not be lazy about - I remind myself of people who insist that ‘grub customizer’ is an essential tool. I used to think so too.

Endeavour specific close buttons…

[codic12]

What’s wrong with Oh my zsh? I’ve personally just found it too slow and unnecessarily bloated, so I have my own ~20 line c++ prompt

[Ben]

@codic12

~20 line c++ prompt

That’s one issue - and this Youtuber is rather above me in terms of competency, but really you don’t need Ohmyzsh to have a powerline prompt, right?

[codic12]

No, there are many other alternatives. I don’t even use powerline, I just use the unicode triangle and flipped triangle symbols when I want something like that.

Here’s the code that generates that:

        widget.TextBox(
            font="Ubuntu Mono", foreground="#331f66",
            text="◢", fontsize=54,padding=-5
        ),
        widget.GroupBox(highlight_method='line', this_screen_border="#a45ee0", this_current_screen_border="#a45ee0", active="#ffffff", inactive="#86768a", background="#331f66"),
        widget.TextBox(
            font="Ubuntu Mono", foreground="#331f66",
            # font="Arial", foreground=COLS["deus_3"],
            text="◤ ", fontsize=44,padding=-10
        ),

[Ben]

@codic12

slick

Funny, after recent comments the word ‘slick’ reminded me of British slang… Slick means ‘underhand’ rofl it’s pretty offensive :))))) I am joking- but sometimes it’s hard to know.
‘

[otherbarry]

@Sojiro84

There is a Github repo where someone already has a good CSS that restores the UI to the good proper one, a UI made for a desktop and not fatty fingers touchscreen users.

Link?

[Ben]

There are quite a few issues though, it’s good to keep lots of snippets… because it’s not as simple as restoring the UI to a good proper one. I just saw one Chinese guy - nice screenshot he’d made it look exactly like Chrome (lolz) but that CSS didn’t work in my browser.

What is the ‘good proper one’? I do like Proton mostly - barring the size.
I reduced the crazy Hamburger font - and the menu is better. Proton is more proper.

Firefox needs updating because, for many people who leave, the clearer menus of Chrome stop them moving back.

[Sojiro84]

GitHub - intrnl/firefox-revert-proton: Revert Firefox Proton to Photon Compact

[Ben]

Better solution - https://i.imgur.com/5p9oBHZ.png
Finally tuned the CSS until it was a bit less compact, but some elements (like the shield and lock) change colour to indicate status - tab close icons disappear (as I close with keyboard, gestures or middle mouse) but phase in over 0.5 seconds mouseover…

I’m loving photon now.

Also notice how the TABS start in the corner - no need for that stupid blank ‘drag’ area in linux.

Final CSS for 'https://www.dropbox.com/s/lssx1a5jnzl987h/userChrome%20v2%20mediumCompact.css?dl=0

Good with Nightly, with normal Firefox then there’s no need - just set photon tabs to false.

[kwg]

Looks great! I’m looking forward to Firefox Proton with a little less trepidation now, thanks to your work.

Here’s a functioning link to your CSS file:

https://www.dropbox.com/s/lssx1a5jnzl987h/userChrome%20v2%20mediumCompact.css

[Sojiro84]

Definitely better then the default, but for me, the tabs must be connected, else it looks weird to me.

[Ben]

Well the noob way to play…
launch firefox-nightly -p and create two new profiles.
first - proton-default' which you won't touch, and has no 'chrome' folder... then your user (separate name to firefox) Nightly-Ben’ for the Nightly browser. Then ‘Nightly-test’ which you should clone ‘Nightly-Ben’ and edit to test.
Then you can open different profiles side by side…

Fun stuff - set the colour of close ‘x’ on tabs:

/* Show Tab Close buttons only when hovered  */
  .tab-close-button {
    transition: fill-opacity var(--animation-speed) !important;
    fill: rgba(255, 75, 75, 0.95) !important;
  }

It’s red now, but purple or pink is good…

Nice fade in for the x.

  .tabbrowser-tab:not([pinned]):hover .tab-close-button {
      display: -moz-box !important;
      max-width: 20px !important;
      opacity: 1 !important;
      transition: all 550ms ease-in-out 550ms !important;       /* delay on entry*/
  }

Change the tab shape - top r/bottom left and top left/bottom right curve is set under :root
` --tab-border-radius: 8px 3px !important;’
You can set 0px for square tabs
or 8px 8px for rounded, or 8px 0px for teardrop etc.

Now you prefer ‘Legacy Tabs’ you open my (new) CSS file and you’ll find it there, I put a comment. You have to move the /* tab up to the ‘comment’ line because now the code is commented out.

I’m trying to make it noob and idiot proof (for my benefit) - so here you see I pasted the comment twice - the green has the /* underneath to comment out the whole thing.

CSS now

/*
 Set Firefox toolkit.legacyUserProfileCustomizations.stylesheets --> TRUE
*/

:root{
  --toolbarbutton-inner-padding: 4px !important;
  --proton-tab-block-margin: 2px 3px !important;
  --tab-min-height:  24px !important;
  --tabs-shadow-size: 0px !important;
  --tab-border-radius: 8px 3px !important;
  --arrowpanel-menuitem-padding: 5px !important;
  --panel-font-size: 1.0em !important;
  --arrowpanel-padding: 0.4em !important;
  --arrowpanel-dimmed: color-mix(in srgb, #1ae0ff 35%, transparent) !important;
  --arrowpanel-dimmed-further: color-mix(in srgb, #1ae0ff 40%, transparent) !important;
  --arrowpanel-dimmed-even-further: color-mix(in srgb, #1ae0ff 45%, transparent) !important;  
  --urlbar-icon-padding: 4px !important;
  --arrowpanel-menuitem-padding: 4px !important;
  --panel-font-size: inherit !important;
  --arrowpanel-padding: 0.8em !important;
}

/* copy star slash to this comment to set LEGACY TABS
.tab-background {
	border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
	margin-bottom: 0px !important;
}
/*

/* Reduce left spacer on tab bar */
.titlebar-spacer[type="pre-tabs"] {
  display: none !important;
}

/* Show Tab Close buttons only when hovered  */
  .tab-close-button {
    transition: fill-opacity var(--animation-speed) !important;
    fill: rgba(255, 75, 75, 0.95) !important;
  }
  .tabbrowser-tab:not([pinned]) .tab-close-button {
      max-width: 0px !important;
      opacity: 0 !important;
      transition: all 250ms ease-in-out 250ms !important;
      /* no delay on exit*/
  }
  .tabbrowser-tab:not([pinned]):hover .tab-close-button {
      display: -moz-box !important;
      max-width: 20px !important;
      opacity: 1 !important;
      transition: all 550ms ease-in-out 550ms !important;       /* delay on entry*/
  }
  
/* LEGACY audio icon next to the tab icon - comment out the tab-secondary-label */
.tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
  grid-template-areas: "a s";
}
.tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
.tab-icon-overlay,.tab-icon-image{ opacity: 0.75 !important; }

/* secondary audio label can be removed if you use this style, but feel free to remove the next line if you want to show it. */
.tab-secondary-label{ display: none }

/* show the secondary label when video is in PiP */
.tab-secondary-label[pictureinpicture]{ display: -moz-box }
.tab-secondary-label:is([pictureinpicture]) {display: -moz-box !important; margin-top:-1px !important; color:#00dbfd !important;
  font-size: 0.65em !important; font-weight: bold !important;text-shadow: 0px 0px 5px #000000 !important}
.tab-secondary-label:is([muted], [activemedia-blocked]) {display: none}

.tab-close-button{margin-inline-start: -2px !important;width: 15px !important;height: 15px !important;padding: 3px !important; margin-inline-end:-6px !important}

#tabbrowser-tabs{ --uc-tabs-scrollbutton-border: 2px }
#scrollbutton-up, #scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; }

.sharing-icon, #permissions-granted-icon, #tracking-protection-icon, .notification-anchor-icon, #blocked-permissions-container 
  >.blocked-permission-icon {  heigh: 14px !important; width :14px !important;}

#identity-icon{color: #2cf62c !important; heigh: 14px !important; width :14px !important}

.urlbar-icon {padding: 4px !important}


.PanelUI-subView toolbarseparator.proton-zap {border-image: var(--panel-separator-zap-gradient) 1;}
.tab-context-line{max-width: 17px !important; max-height: 1px !important; margin-left: 8px !important;margin-bottom: -1px !important;}
.tab-context-line{-moz-box-ordinal-group: 2 !important; opacity: 1 !important;transition: none !important;}

.identity-color-blue {--identity-tab-color: #2574A7 !important; --identity-icon-color: #2574A7 !important;--tab-line-color:#295170 !important;}
.identity-color-green {--identity-tab-color: #1E934F !important; --identity-icon-color: #1E934F !important;--tab-line-color:#20834b !important;}
.identity-color-orange {--identity-tab-color: #e67e22 !important; --identity-icon-color: #e67e22 !important;--tab-line-color:#a9642c !important;}
.identity-color-red {--identity-tab-color: #ff392b !important; --identity-icon-color: #ff392b !important; --tab-line-color:#cc372f !important;}
.identity-color-pink {--identity-tab-color: #ff33bb !important; --identity-icon-color: #ff33bb !important;--tab-line-color:#e22fa7 !important;}
.identity-color-purple {--identity-tab-color: #813E9D !important; --identity-icon-color: #813E9D !important;--tab-line-color:#703988 !important;}

.identity-color-blue >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #1bbfff !important;}
.identity-color-green >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #6be19c !important; } 
.identity-color-orange >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #ebc247 !important; } 
.identity-color-red >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #ff6666 !important;}
.identity-color-pink >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #ff99eb !important;} 
.identity-color-purple >.tab-stack > .tab-content:not([selected="true"]) .tab-label{color: #caa4da !important;} 

.identity-color-blue> .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #2574A7 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-green .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #1E934F 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-orange .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #e67e22 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-red .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #a0392b 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-pink .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #ff99eb 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}
.identity-color-purple .tab-stack> .tab-content[selected="true"] {background-color:color-mix(in srgb, #813E9D 10%, transparent) !important;
  border-radius:0px !important; margin-top: 3px !important; margin-bottom: 3px !important;}

  /* Replace the button background-colors with a glow effect */
/* Edit the color choices how you see fit */


/* Make backgrounds transparent */
.close-icon,
.urlbar-icon,
.urlbar-icon-wrapper,
toolbar .toolbarbutton-1,
#tabbrowser-tabs toolbarbutton,
toolbar toolbarbutton > .toolbarbutton-icon,
toolbar toolbarbutton > .toolbarbutton-badge-stack,
.titlebar-button,
#identity-box,
#identity-icon-box,
#tracking-protection-icon-container,
.findbar-textbox~toolbarbutton,
toolbarbutton.scrollbutton-up,
toolbarbutton.scrollbutton-down,
toolbarbutton#scrollbutton-up,
toolbarbutton#scrollbutton-down{
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Glow effects on hover */
.close-icon:hover,
.urlbar-history-dropmarker:hover,
#page-action-buttons > .urlbar-icon:hover,
.urlbar-icon-wrapper:hover > .urlbar-icon,
toolbar .toolbarbutton-1:not([disabled]):hover .toolbarbutton-icon,
#TabsToolbar toolbarbutton:not([disabled]):hover .toolbarbutton-icon,
toolbar #downloads-button:hover #downloads-indicator-anchor,
#identity-box:not(.no-hover):hover,
#tracking-protection-icon:hover,
.findbar-textbox~toolbarbutton:not([disabled]):hover,
toolbarbutton.scrollbutton-up:not([disabled]):hover,
toolbarbutton.scrollbutton-down:not([disabled]):hover,
toolbarbutton#scrollbutton-up:not([disabled]):hover,
toolbarbutton#scrollbutton-down:not([disabled]):hover{ 
  filter: brightness(2) drop-shadow(0 0 2px rgb(255, 0, 0)) drop-shadow(0 0 1px rgb(255, 0, 0))
}

/* Active states and close window button hover state */
#titlebar .titlebar-buttonbox > .titlebar-close:hover > .toolbarbutton-icon,
.close-icon:active,
.urlbar-history-dropmarker:active,
#page-action-buttons > .urlbar-icon:active,
#page-action-buttons > .urlbar-icon[open],
.urlbar-icon-wrapper:active > .urlbar-icon,
.urlbar-icon-wrapper[open] > .urlbar-icon,
toolbar toolbarbutton:not([disabled]):active .toolbarbutton-icon,
toolbar toolbarbutton:not([disabled])[open] .toolbarbutton-icon,
#TabsToolbar toolbarbutton:not([disabled]):active .toolbarbutton-icon,
toolbar #downloads-button:active #downloads-indicator-anchor,
toolbar #downloads-button[open] #downloads-indicator-anchor,
#identity-box:not([disabled]):active,
#tracking-protection-icon-container[open] #tracking-protection-icon,
.findbar-textbox~toolbarbutton:not([disabled]):active,
toolbarbutton.scrollbutton-up:active,
toolbarbutton.scrollbutton-down:active,
toolbarbutton#scrollbutton-up:active,
toolbarbutton#scrollbutton-down:active{ 
  filter: brightness(2) drop-shadow(0 0 2px red) drop-shadow(0 0 1px yellow)
}

Similarly, I don’t want a second line on tabs showing ‘Playing’ but I don’t mind ‘Picture-in-Picture’ - that’s easy to find. You can have only the audio icon if you like…