🎨 Fix dropdown menu so that active buttons stand out more.

[JamesAlfonse]

Added readability to these buttons, but have not been able to make progress on adjusting the colors between the active and non-active buttons. The active buttons look like they're pressed in, but adjusting the colors in the css file for the section below does not work. #134F9B should be a blue color. It's possible that there's a conflict between the css code and the datatables library causing this. One solution could be to download the full library and include it in this repository to have more visible control over the styling. Regardless, I would prefer to look at other stack alternatives first before proceeding with this option #8. I will look into fixing the headers next.

/* Styles for active buttons using aria-pressed attribute */

div.dt-button-collection .dt-button[aria-pressed="true"] {

/* Set background color for active buttons */

background-color: #134F9B !important;

/* Set text color for active buttons */

color: #FFFFFF !important;

}

Originally posted by @JamesAlfonse in #17

[JamesAlfonse]

@tehchives mentioned that @jergy2 may be able to assist, tagging for visibility.

[jergy2]

i took a look through the production webpage to see what styles are being applied, though it is a little bit hard to track without seeing the source files for this, as it looks like there are potentially numerous competing style classes that are applying styles to the element.

I noticed for example that there is an active class applied to those menu items. Some styles in that .active class seem to work, for example font-weight: bold, however, background-color does not, as some other class is taking priority for that style. Same with the color property

If you just want the text to stand out a bit, you could simply apply the font-weight: bold to the .active class.

If you specifically want to change the color to blue, then further investigation into the structure of the css will be required to determine where the color property is being and taking priority over the active class

[JamesAlfonse]

Thanks for taking a look @jergy2. The color change would be the ideal long-term adjustment here, but I like the bold text as a short-term change. I had tried using Claude Sonnet and o1 to look for a styling conflict, but had no luck a while back. I think you may be right about the priority being the issue here. Do you think it could be the library used for the buttons, or would it be more likely something within the styles.css file?

[jergy2]

in general, with respect to CSS order of priority:

From a stackoverflow comment:

There are several CSS rules ( applied in this order ) :

1 inline css ( html style attribute ) overrides css rules in style tag and css file
2 a more specific selector takes precedence over a less specific one
3 rules that appear later in the code override earlier rules if both have the same specificity.
4 A css rule with !important always takes precedence.

in this case it appears to be

parent element with class .dt-button-collection
child element .dt-button

with final element applying styles as: .dt-button-collection .dt-button

this is where it is applying the color and background-color properties

it looks like those properties are set using the !important word, which may be the cause of preventing other classes from applying styles to those properties.

[JamesAlfonse]

Thanks for the insightful comment @jergy2. I adjusted the code to remove any instance of "!important" to rule that out. Still running into the same issue, but one step closer to figuring it out.

[JamesAlfonse]

This has been fixed in the latest update here