List pagination controls colours

[johnonorvic]

In all my lists, the Pagination control has a white background and black text, except for the active item, which has a very dark blue background also with black text, so the text is unreadable. As far as I know (having removed some unintentional overrides) there are no CSS changes from default settings other than a few in user.css.

The debugger shows that “color:” is set in media/templates/site/cassiopeia/css/template.css to “var(--pagination-active-color)” (white), but that is then overridden by components/com_fabrik/views/list/tmpl/bootstrap/template.css.php which sets it to “inherit” for the .fabrikDataContainer <div>, the parent of which has “color:” set to black (with an !important tag). If the “color: inherit;” setting is disabled in the debugger, the text changes to white and is readable. Also, the inactive items text changes to green.

I am sure this cannot be a general problem, but cannot find anything I have done wrong; can anyone suggest a cause? Are the files being evaluated in the correct order and, if not, what controls the order?

Fabrik 4.0delta, Joomla 4.3.3, PHP 8.0.29.

 

[wezetel]

The order of stylesheets loaded can be seen in the source code of the page, but there are some more rules, which apply to the applied css style.
Maybe this can help: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

[troester]

You can remove this color option in template_css.php, I will remove it in the next release.
Or add
.fabrikDataContainer .pagination .active a {color: white;}
to Cassiopeia's user.css

 

[johnonorvic]

Maybe this can help: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

That looks a useful reference. Thanks.

You can remove this color option in template_css.php, I will remove it in the next release.

That seems a good solution – now that it will not come back. Thanks.