Text in modal menu items cannot be read when holding mousedown

[hudson-newey]

Describe the bug If a menu item opens a modal, holding down the left mouse button causes the background to change color. This does not happen with regular navigation menu items.

When the menu items background color changes, it changes to the same color as the the text, resulting in unreadable text.

To Reproduce

Steps to reproduce the behavior:

1. Go to 'ecosounds.org/projects/1134/sites/3350'
2. Hold your mouse down on the "Download Annotations" menu item
3. Observe that the background color changes (but when you repeat the steps for the "Audio Recordings" page, the background color does not change)

Expected behavior

Either:

The background color should not change

OR

The background color of all menu items should change to a lighter variant when mouse down is held

• This would be inline with previous design decisions where we have used btn-outline. I use this as an example because the button is not filled until hover (same as a menu item), and then gets a lighter color when "active" (mouse is held down)
  • This can be seen on the Harvest "finished" page where we use a "Finish uploading" button, harvest upload "Abort" button, harvest "Upload more files", and batch audio download copy button
  • I was able to find one counter-example where the "More Projects" button on the homescreen loses its background when you mouse down over it (I think this is a bug)

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome 126.0.6478.127, Firefox 129

[atruskie]

All menu items should probably have a pressed state/color.