Facet Links are a different color on desktop vs mobile

[misilot]

Describe the bug
If you go to https://demo.dspace.org/search?spc.page=1 on a mobile device (not on a desktop), the links for the facets are Blue instead of the black you see on the desktop view.

Desktop View

Mobile View:

To Reproduce
Steps to reproduce the behavior:

1. Go to https://demo.dspace.org/search?spc.page=1 on a mobile device
2. Click Search tools, see Mobile View result above

Expected behavior
I would expect the the font to be the same color as the desktop version (Black), and not blue.

Related work

[misilot]

Notes from Slack

Tim Donohue
9:39 AM
It might simply be that these filters need some sort of @media screen specific styles when the window is smaller. Looking at our SCSS, I see other pages use that syntax for styles specific to mobile. My "best guess" here is that this filters are "falling back" to a default blue link style (likely from Bootstrap) instead of using the black style we want. I don't have a better idea than that though.
But, if you figure it out, it might be good to contribute back to DSpace... this seems like a small styling bug.

9:41
This is the @media rule I'm talking about (and you'll see if in our SCSS files in areas where we need to style things differently on mobile): https://www.w3schools.com/cssref/css3_pr_mediaquery.php

[tdonohue]

Moved this to the 7.6.x board. This may be an easy fix for someone more knowledgeable on Bootstrap CSS than I.

Keep in mind this bug cannot be reproduced on a desktop. Even if you set your desktop browser to "mimic" a mobile device, you will not see the bug. It only appears if you use an actual mobile device (e.g. I can reproduce it on Firefox on iOS)

[jaehunkim0828]

In iOS, the default text color of button tags is blue. Therefore, if you set color: black as the style attribute to the button tag, you can see it as black even in a mobile environment.