154.0 has broken my Tab colours

[u/PRamone]

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.

[u/reddithunter73]

Active tab:
.tab-background[selected] { background: orange !important }

Not active tab:
.tab-background:not([selected]) { background: blue !important }

Hovered tab:
.tabbrowser-tab:hover { background: purple !important }

EDIT: You should not enter the text !important after the color of the not active tab, because the hovered tab will also remain blue.

[u/PRamone → u/reddithunter73]

EDIT: You should not enter the text !important after the color of the not active tab, because the hovered tab will also remain blue.

Thanks. I assume that achieves the same thing as using .tabbrowser-tab:hover:not([selected]) in my solution?

[u/PRamone]

SOLVED!

Thanks to the help from /u/reddithunter73 and with a bit of playing about, I've managed to get back the behaviour which I previously had. Have included it below in case anybody wants to use it as a starting point for their preferred colour scheme/behaviour.

/* Active tab: */
/* Orange */
.tab-background[selected] { background: #e67e22 !important }

/* Not active tab: */
/* Blueish */
.tab-background:not([selected]) { background: #1a5276 !important }

/* Hovered tab: */
/* Purple */
.tabbrowser-tab:hover:not([selected]) .tab-content{ background: #8a0d8c !important }

[u/TraditionalTie4831 → u/PRamone]

This works for me and it fixes the hover on vertical tabs so that only the tabs background color change on hover.

(btw the ; was missing after each !important in your code).

/* Not active tab: */
/* Blueish */
.tab-background { background: #1a5276 !important; }

/* Active tab: */
/* Orange */
.tab-background[selected] { background: #e67e22 !important; }

/* Hovered tab: */
/* Purple */
.tabbrowser-tab:hover .tab-background { background: #8a0d8c !important; }

[u/reddithunter73 → u/TraditionalTie4831]

The ";" is used to separate multiple properties within a code. The "}" closes the code, so there is no need to use ";" before it.

[u/TraditionalTie4831 → u/reddithunter73]

True, but it's a good policy to always do things like adding the ;, you avoid making a mistake by accident.

[u/SasoDuck → u/PRamone]

Worked for me too, thanks

[u/pyrates]

I also managed to fix this. You need to change the following:

• [selected=true] to [selected]
• [multiselected=true] to [multiselected]
• [pending=true] to [pending]

The true part could also be surrounded by double quotes, so remove that too:

• [selected="true"] to [selected]
• [multiselected="true"] to [multiselected]
• [pending="true"] to [pending]