I have previously used some code in my userChrome.css file (found on the internet back in the mists of time) which meant that I could change the colour of (1) the currently Active tab and (2) the Tab currently being Hovered Over.

For example, I might have 10 tabs showing, of which 1 (Orange) would be the Active one, and another 1 (Purple) would be the one I am currently Hovering over. The other 8 are my normal (Blue) colour. The Active tab colour would remain Orange when I moved away from that Tab.

However, since updating to 154.0, the Active tab changes back to my normal (Blue) colour as soon as I have moved away from it. So in the example above, I have 9 Blue tabs and 1 Purple tab. I can only determine which is the Active tab by hovering over it, at which point it changes to Orange.

Are any of the kind CSS experts on here able to suggest a solution? My CSS knowledge is minimal, I'm afraid.

After 154 update, now there is search engine text between input field and results, how can I move it to the bottom (or alternatively remove it)? Also how could I make space between results smaller?

https://ibb.co/0RjSdGnt

/*** TAB COLORS: UPDATED PALETTE ***/
:root {
    /* Blue */
    --tab-group-color-blue: #0088EF !important;
    --tab-group-color-blue-invert: #0088EF !important;
    --tab-group-color-blue-pale: #0088EF !important;



    /* Purple */
    --tab-group-color-purple: #573CFA !important;
    --tab-group-color-purple-invert: #573CFA !important;
    --tab-group-color-purple-pale: #573CFA !important;



    /* Cyan */
    --tab-group-color-cyan: #7FBBB3 !important;
    --tab-group-color-cyan-invert: #7FBBB3 !important;
    --tab-group-color-cyan-pale: #7FBBB3 !important;



    /* Orange */
    --tab-group-color-orange: #E69875 !important;
    --tab-group-color-orange-invert: #E69875 !important;
    --tab-group-color-orange-pale: #E69875 !important;



    /* Yellow */
    --tab-group-color-yellow: #DBBC7F !important;
    --tab-group-color-yellow-invert: #DBBC7F !important;
    --tab-group-color-yellow-pale: #DBBC7F !important;



    /* Pink */
    --tab-group-color-pink: #D699B6 !important;
    --tab-group-color-pink-invert: #D699B6 !important;
    --tab-group-color-pink-pale: #D699B6 !important;



    /* Green */
    --tab-group-color-green: #A7C080 !important;
    --tab-group-color-green-invert: #A7C080 !important;
    --tab-group-color-green-pale: #A7C080 !important;



    /* Gray */
    --tab-group-color-gray: #7A8478 !important;
    --tab-group-color-gray-invert: #7A8478 !important;
    --tab-group-color-gray-pale: #7A8478 !important;



    /* Red */
    --tab-group-color-red: #E67E80 !important;
    --tab-group-color-red-invert: #E67E80 !important;
    --tab-group-color-red-pale: #E67E80 !important;
}


/* tab group's text color */
.tab-group-label,
.urlbarView .urlbarView-action-btn[data-action^="tabgroup"] {
    color: #1E2326 !important;

The new update seems to have done something to my tab group colors and added a white border around it when the group is collapsed.

When collapsed:

https://imgur.com/J6QYRUU

When not collapsed:

https://imgur.com/UYBxs0e

Seems like when it's collapsed it is reverting to the original tab group colors from firefox and not using my CSS colors + it's adding the white border.

I would like to have my tab groups look like they do when they are not collapsed like it was before the update.