How to disable mouseover background highlight in tables?

[lphilpot]

Operating system

Windows

Joplin version

3.3.13

Desktop version info

Joplin 3.3.13 (prod, win32)

Device: win32, AMD Ryzen 7 5700U with Radeon Graphics
Client ID: 8e703857714c4d7cbcc5a57931477a4d
Sync Version: 3
Profile Version: 47
Keychain Supported: Yes
Alternative instance ID: -

Revision: 144ed59

Backup: 1.4.3
Ez Table: 1.0.2
Freehand Drawing: 3.0.1
Rich Markdown: 0.13.2

Editor

Rich Text Editor

What issue do you have?

Is there a way to disable the default mouse-over table row background highlighting?

I thought I found what needed to go in either userstyle.css or userchrome.css but it doesn't seem to work:

table tbody tr:hover td {
background-color: transparent;
}

table tbody tr:hover th {
background-color: transparent;
}

I'm not totally unfamiliar with CSS at a high level, but I'm far from functional in a usable sense. E.g., I can poke around and alter some existing settings but nothing really beyond that. So, this might be on the right track but be the wrong attribute, etc.

At any rate, the 'flashing' highlights as I hover around are distracting and I'd love to turn them off.

Thanks!!

[tomasz86]

I also found the highlights on hover too annoying, so recently I've tried to find a solution for it. For the Rich Text Editor, you need something like this:

tr:hover { background-color: inherit !important; }

[lphilpot]

That’s a huge improvement, thanks.

It still has a slight change when I hover over it, but it’s much better. I use a dark theme, so the document background is (almost?) black. If a table row has a colored background, the background will now change to black when hovered, but that’s much less distracting than changing to a light shade as before.

Is there a value other than !important that would simply restore the default background?

Thanks again.

[tomasz86]

I see what you mean. Apparently, it's not that simple . You need to hard-code the actual theme colours, like this:

1. Light theme:

   tr:nth-child(odd) { background-color: rgb(255, 255, 255) !important; }
   tr:nth-child(even) { background-color: rgb(247, 247, 247) !important; }
   

2. Dark theme:

   tr:nth-child(odd) { background-color: rgb(29, 32, 36) !important; }
   tr:nth-child(even) { background-color: rgb(40, 41, 42) !important; }   
   

[lphilpot]

That works for me, thanks.